-
app.js, main.js : 시작점이 되는 js파일
bundle : 정리
webpack 도구 : 정리
template literal을 별도의 파일로 빼서 관리하면 좋다.
왜냐하면 비즈니스 로직 부분과 뷰를 만드는 template literal을 함께 관리하면 유지보수 측면에서 좋지 않기 때문이다.
foreach, map, filter 사용법
함수 줄이 몇 줄 되지 않으면 익명함수로 정의해도 되지만, 그렇지 않으면 별도의 함수로 뺄 것
처음 화면을 구성할 때는 서버사이드 렌더링이 좋다. 왜냐하면, 클라이언트 사이드 렌더링으로 구성하게 되면 껌뻑거리는 현상이 발생하기 때문이다
call, apply, bind
공통점: 셋 다 컨텍스트(this)를 조정하기 위한 함수
차이점: call, apply 와 bind의 차이점은 call, apply는 함수가 실행되고, bind는 그렇지 않다.
func.call(this, arg1, arg2, … argN);
this 부분에 객체를 넣어주면 그걸 가리킨다.
func.apply(this, arguments);
call()과 기능은 같지만 파라미터를 Array로 넘겨준다.
비동기 같은 경우에는 콜 스택에서 사라지면서 this를 잃기 때문에 콜백함수에 this를 바인딩해줘야 한다. 콜백함수가 호출되는 시점에는 이미 this를 잃은 상태다.
서버사이드 렌더링 방법은 클라이언트 렌더링 방법을 모방한 거다. (유사함)
매순간 this가 무엇을 가리키는지 찍어볼 것
bind는 콜백함수에 걸고, 바로 실행되는 함수라면 call을 사용한다.
자바스크립트와 비동기
비동기 어려운 점
개발자가 예측한 대로 실행이 안 될 수가 있다. (지연 실행)
call stack이 쌓이는 것을 시각적으로 표현해보라!
브라우저는 싱글스레드
event loop를 이해하기 위해 봤던 자료 중 최고의 자료 By 박재성 교수님
https://www.youtube.com/watch?v=8aGhZQkoFbQ
동영상을 보면 callback queue -> call stack 이동, call stack 실행은 event loop thread 하나가 같이 실행함을 확인할 수 있다.
최근 모든 백엔드 진영이 성능 향상을 위해 reactive programming이라는 형태로 발전하고 있는데, 이 부분에 event loop와 비슷한 방식으로 동작하니 이번 기회에 이해해 놓으면 앞으로 백엔드 개발자로 살아가는데도 도움이 될 것 같다.
콜스택이 완전히 비었을 때, 콜백 큐에 있는 것이 실행된다.
동기가 끝나야만 비동기가 실행된다 (우선순위: 동기 > 비동기)
CSS 코드를. class 파일이 아닌 태그 옆에 작성하게 되면 유지보수 측면에서 어려워진다
(JS에서 html을 동적으로 추가할 때 태그에 직접 CSS를 적는 것은 좋지 않다)
왜냐하면 CSS가 수정이 발생했을 때, JS 쪽에서도 바껴야해서 수정할부분이 많아진다
수정이 발생했을 때 CSS 코드만 수정할 수 있으면 좋다
직접 CSS 속성을 수정하지 말고 classList를 이용하는 게 좋다 (class 안에서만 CSS를 관리하도록)
polyfill
브라우저 지원 문제 때문에 난항을 겪고 있으면 polyfill을 찾아볼 것
jQuery
브라우저의 호환성 문제를 해결해주는 게 큰 장점이었지만 요즘은 브라우저 호환성 문제가 많이 줄어들고 있다
따라서 해당 라이브러리의 인기도가 감소하고 있다
최근 트렌드는 표준 Javascript를 사용하고 부족한 건 polyfill로 채우는 방식
프런트 엔드에서는 무엇을 클래스로 만드는 게 좋을까?
탭 UI, 화면 단위로 클래스를 만듦
프런트엔드에서 테스트코드는 테스트 할 수 있는 것과 못하는 것(UI와 관련된 것)이 존재한다.
Mocha, Jest 여러 프레임워크가 있다.
자바스크립트 loose coupling best practice : 찾아볼 것
rAF(requestAnimationFrame)
참고
http://www.kimsatgod.com/call-apply-bind-%EC%B0%A8%EC%9D%B4/
