Dev Note

미션 : 하트를 누르면 좋아요 기능이 작동, ajax로 화면이동 없이 동작 에러 : 콘솔창이 1초 떴다가 사라짐 원인 : 태그 내에 onclick 이벤트가 잡혀 있었다. 해결 : a태그의 onclick 이벤트를 삭제한다. 에러 : articlePK를 잡지 못함 원인 : html 태그에 dataset을 설정하지 않았다. 해결 : 태그에 dataset을 설정하고, 스크립트에서 해당 태그.dataset...으로 변수 설정한다. const articlePK = likea.dataset.articlePK 에러 : event.target 의 결과가 이상.. 원인 : 태그가 태그를 감싸고 있어서 target이 a가 아닌 i를 잡아버렸다. 해결 : a태그를 없애고(사용할 이유가 없음) i태그만 사용한다. -> 이런 현..

button은 기능적으로 차이가 없을까? 폼 전송 기능을 하는 과 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. javscript 에서의 차이점 자바스크립트 DOM 조작시 차이가 발생한다. 다음 예시를 보면 버튼의 경우 '언팔로우' 텍스트가 태그 사이에 들어가 있다. {% if user in followers %} 언팔로우 {% else %} 팔로우 {% endif %} 그렇기 때문에 자바스크립트에서 DOM 조작시 'innerText'를 사용한다. const followBtn = document.querySelector('#follow-btn') if (isFollowed == true) { followBtn.innerText = '..

일급 객체 First Class Object 일급 객체(일급 함수)란? 다른 객체들에 적용가능한 연산을 모두 지원하는 객체 일급 객체의 조건 인자로 넘길 수 있어야 한다. 함수의 반환 값으로 사용할 수 있어야 한다. 변수에 할당할 수 있어야 한다.

Array Helper Method 배열을 순회하며 특정 로직을 수행하는 메서드로, 메서드 호출시 인자로 "callback 함수"를 받는다. forEach - 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행한다. 반환값이 없다. map - 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행한다. 콜백 함수의 반환 값을 요소로 하는 새로운 배열을 반환한다. filter - 콜백 함수의 반환 값이 참인 요소만 모아 새로운 배열을 반환한다. find - 콜백 함수의 반환 값이 참이면 해당 요소를 반환한다. every - 배열의 모든 요소가 판별 함수를 통과하면 true를 반환한다. some - 배열의 요소 중 하나라도 판별 함수를 통과하면 true를 반환한다. reduce - 콜백 함수의 반환 값들을 하나의 ..

- function 키워드 생략 - 함수의 매개변수가 1개라면 () 생략 - 함수 몸통이 표현식 하나라면 {}, return 도 생략 가능 const arrow = function (name) { return 'hello! &{name}' } // 1. function 키워드 삭제 const arrow = (name) => { return 'hello! &{name}' } // 2. () 생략 const arrow = name => { return 'hello! &{name}' } // 3. {} & return 생략 const arrow = name => 'hello! &{name}'

ECMA Script 6 ECMAScript 라고도 불리며 국제표준화기구에서 제안하는 6번째 표준 명세 세미콜론을 선택적으로 사용 가능하며, 없을 경우 ASI(Automatic Semicolon Insertion)에 의해 자동 삽입됨. 자바스크립트 코딩스타일 가이드 Airbnb Javascript Style Guide Google Javascript Style Guide DOM 변경 메서드 Document.createElement() 작성한 태그명의 html 요소 생성하여 반환 Element.append() 특정 부모 노드의 자식리스트 중 마지막 자식 다음에 노드객체나 스트링을 삽입 반환값 없음 여러 노드 객체와 문자열 추가 가능 Node.appendChild() 한 Node를 특정 부모 노드의 자식 노..

sync, async, blocking, non-blocking 비동기적으로 동작하려면 대부분 non-blocking이긴 하나 비동기면 non-blocking이어야 하는건 아니다. 비동기적 : 여러가지 일을 하는데, 세탁기 돌려놓고 설거지하고... 동기적 : 이전 일을 끝내야만 다음 일로 넘어감 blocking : 파이썬, 코드의 흐름이 멈추어 있음 non-blocking : 자바스크립트, 내가 일처리를 끝냈으면, 성공하던 실패하던 다음 일로 넘어감. 자바스크립트 = 비동기 + 논블로킹 구조

#Promise #.then #.catch Promise 객체를 생성할 때 인자로 받는 callback 함수인 resolve와 reject는 비동기 처리가 성공/실패했을 경우 전달할 인자와 함께 호출된다. => T Promise 객체의 .then 메서드는 오류 없이 resolve 되었을 때 실행되는 함수이며 .catch 메서드는 도중에 오류가 발생하여 reject 되었을 때 실행되는 함수이다 => T Asynchronous Javascript 비동기 자바스크립트 1 #single -threaded # non-blocking #setTimeout #WebAPI #CallStack #TaskQu #single -threaded #setTimeout #WebAPI #CallStack #TaskQueue #Co..