zz.log

Callback & Promise 1초마다 로그를 출력하는 동일한 내용의 코드를 콜백함수와 프로미스로 구현했다. 프로미스를 사용함으로서 콜백함수가 중첩되는 현상인 '콜백 지옥'로부터 벗어났다. // callback hell timer(1000, function() { console.log("작업"); timer(1000, function() { console.log("작업"); timer(1000, function() { console.log("작업"); }); }); }); // use promise's then timer(1000) .then(function() { console.log("작업"); return timer(1000); // 타이머 실행 후 Promise 객체를 return함 }) .t..

📢 프로미스(Promise)란 실행은 바로 하되, 결괏값은 나중에 받는 객체로 비동기 처리에 사용된다. 프로미스를 배우기 전에 먼저 동기, 비동기에 대해 알아보자 Synchronous와 Asynchronous console.log(1) console.log(2) console.log(3) console.log(4)// 1-> 2 -> 3 -> 4 - 앞 명령이 끝나야 그 다음 명령이 실행되는 걸 "synchronous하다"고 한다. - 어떤 순서로 실행되는지 파악하기 쉽다는 장점이 있으나, 명령 실행에 시간이 더 걸린다는 단점이 있다. console.log(1) console.log(2) setTimeout(function() { console.log(3) }, 5000); console.log(4) /..

콜백 함수란? - val는 함수지만 지금 바로 실행되지 않고, fn 함수의 입력값으로 전달돼서 fn 함수에 의해 나중에 호출된다. - 이렇게 다른 함수에 의해 나중에 호출되는 함수를 콜백 함수라고 한다. val = function(🐑) { return 🐈 } function fn(arg) { arg(); } fn(val) 콜백함수 이해하기 콜백함수를 갖는 메소드인 javascript.array.filter()를 통해 콜백함수를 이해해보자 // 함수 구조 arr.filter(callback(element[, index[, array]])[, thisArg]) [ 매개변수 ] - callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. - element..

event.target - onclick 이벤트 일어난 객체 찾기 https://sourcestudy.tistory.com/207 javascript 이벤트 대상 얻기 event.target javascript 이벤트 대상 얻기 event.target https://developer.mozilla.org/en-US/docs/Web/API/Event event.target 으로 이벤트 객체를 받아옵니다 이를 통해 객체의 모든 정보를 탐색할 수 있습니다. javascript.. sourcestudy.tistory.com 특정 속성 태그에 모두 onclick 이벤트 붙이기 https://sourcestudy.tistory.com/232 javascript 모든 태그에 onclick 이벤트 붙이기 window...

Variable.js 1. use strict - use strict를 사용하는 이유 : JavaScript - flexible => 비상식적인 코드 사용 가능 ex) 선언되지 않은 변수에 값 할당 2. 변수 var, let, const ① var : 선언과 초기화가 동시에 진행 1) 변수의 중복 선언이 허용 2) 변수 hoisting : 변수를 어디에 선언했던 상관없이 변수 선언을 가장 위로 끌어 올리는 것(변수 할당 전에 값을 찍어보면 undefined 나옴) 3) block level scope 무시 var의 단점을 보완하기 위해 등장한 변수 선언 방식 : let, const ② let : mutable data type(값을 변경할 수 있음) ③ const : immutable data type(..

그룹별로 묶어 합을 구하고 그 합의 평균값 구하기 - 사용자별로 총 운동한 횟수를 구하고, 이에 따른 평균을 구해 '평균 사용자 운동 횟수'를 구함 - 예상쿼리 : SELECT AVG(count(*)) FROM challenge WHERE c_date GROUP BY id; ( X )SELECT AVG(result.C)FROM (SELECT COUNT(*) AS C               FROM challenge               WHERE c_date               GROUP BY id) result; 이번 달에 해당하는 column을 COUNT하기 - '이번 달 운동 횟수' 구하기          //c_date 컬럼에 운동한 날짜를 저장SELECT COUNT(*) FROM ch..

modify.php radio 버튼 값을 가져와 활용- 주어진 프로필 이모티콘 중 하나를 선택하면 좌측 프로필이 바뀌게 함1. onclick()에 changeProfile()함수를 호출하면서 input의 value값 전달2. getElementById로 선택한 이미지가 나타날 부분의 src에 인자로 받은 profileNum값을 이용해서 현재 프로필 아래에 선택한 그림을 띄움 DB값을 php에서 받아 html에서 출력하기- 초기값으로 사용자가 저장한 프로필 이미지를 띄우기  : src에 echo $row[2]로 이미지 값을 줄 수 있음 input 입력필드 비활성화- 회원정보 중 id는 수정할 수 없도록 비활성화 시킴① 입력필드 비활성화② form으로 전송해도 전송되지 않음 버튼에 onClick 이벤트 적용..

페이지 이동window.history.go()window.history.back(-1) //뒤로가기 이전 페이지 주소 알아내기var referrer = document.referrer;- 값이 없다면 주소를 직접 입력해 접속한 것임 아이디 중복 방지/* table 생성 시 조건을 설정 */CREATE TABLE user_info ( login_id varchar(20) UNIQUE, …)/* table 생성 후 UNIQUE 추가 */ALTER TABLE user_info ADD CONSTRAINT UNIQUE_LOGIN UNIQUE (login_id) 중복되는 아이디 값으로 회원가입하는 것을 방지form으로 받아온 ID값을 WHERE의 조건으로 줘서 SELECT 결과가 없을 때만 회원가입할 ..

구현계획 contents 중 하나 클릭-> update 클릭 -> contents에서 클릭했던 값을 읽어 title과 description 자리에 넣음 -> 입력을 수정한 후 제출 버튼 클릭 -> 수정 완료 Update update = read + createContent 과정 update할 요소를 읽어옴 폼을 보여줌 수정 + 읽는 과정이 두 번 이상 필요 => getReadContent()함수 만듦

React와 수업소개 component : 사용자 정의 태그 - 장점 : 가독성, 재사용성, 유지보수 개발환경의 종류 1. 공식문서에 익숙해지기(reactjs.org/docs/getting-started.html) 2. npm : node js로 만들어진, 앱을 다운로드하기 위한 도구 npm을 이용해서 create react app 설치 npm : 프로그램 설치 + npx : 설치 없이 리액트 사용 - 장점 : 항상 최신 버전으로 쓸 수 있으며 컴퓨터 공간을 덜 차지함 - 단점 : 항상 다운받아야 하는 번거로움 샘플 웹앱 실행 npm run start - Local : http://localhost:3000 - On Your Network: http://192.168.1.101:3000 : 개발 중인 앱..