신입 개발자에서 시니어 개발자가 되기까지

1. GraphQL이란? 1.1 개념 - 오픈소스 쿼리언어 - 데이터가 그래프 형태로 연결되어 있다고 전제한다. - 그래프 자료구조는 클라이언트의 요구에 따라 트리형태의 구조를 가질 수도 있다. 노드와 노드를 간선으로 연결하기만 하면 되니까. - 다시말해, 클라이언트의 요구에 따라 유연하게 트리 구조를 응답할 수도 있고, 그래프 구조를 응답할 수 있다. 1.2. 특징 - HTTP를 통해 API 서버로 요청을 보낸다. - 응답은 JSON형식으로 받는다. - 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다. - GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다. 2. GraphQL vs REST API 2.1. GraphQL이 나오게 된..

1. 최적화의 필요성 1.1 이탈률 감소 -구글 조사결과 페이지 로드가 3초 이상 걸리면 사용자의 53%가 이탈한다. 5초면 90%. 6초면 106%(??? 어떻게 100%를 넘지?) 1.2 전환율 증가 -전환율이란 웹사이트 전체 방문자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미한다. 1.3 수익증대 -로딩 속도 1초당 아마존의 판매량이 1% 늘어났다고 한다. 이게 얼마나 정확한지는 모를 측정값이지만, 그래도 느린 사이트보다야 빠른 사이트에서 수익이 잘 나는 것은 당연하다. 1.4. 사용자 경험(UX) 향상 2. 최적화 기법 2.1 HTML CSS 코드 최적화 하기 2.1.1 HTML 최적화 1) DOM 트리 가볍게 만들기 - DOM tree가 깊을수록, 자식..

1. 코드 분할을 하는 이유 -번들링을 하면 하나의 js파일에 모든 코드가 들어가는데 코드 양이 많아짐에따라 코드를 해석하고 실행하는 속도가 느려졌다. -그래서 코드를 분할하면 코드 실행이 느려지는 지점을 파악하고, 지금 당장 필요한 코드가 아니라면 나중에 불러오도록 해서 로딩 속도를 줄일 수 있다. 2. 번들을 줄이는 법 2-1. Third Party 라이브러리 최소화. import _ from'lodash'; _.find([]);이렇게 라이브러리 전체를 가져와서 사용하는 것 보다, 처음부터 라이브러리 중 필요한 부분만을 가져와야 한다. import find from 'lodash/find'; find([]);2-2. Dynamic Import 기존에는 Static Impo..

1. 개념 - 가상의 DOM객체. 실제 DOM의 사본이며, virtual dom을 조작하고, 실제 dom과 비교하여 바뀐 부분을 실제 dom에 적용한다.2. Real DOM 2-1. 개념 - dom 은 문서 객체 모델이다. 브라우저가 javascript가 태그들에 접근하고 조작할 수 있도록 태그를 트리 구조로 객체화 시킨 것. - 핵심은 구조는 트리, 형태는 객체라는 것.2-2. DOM의 조작 속도가 느려지는 이유. - DOM의 변경은 Reflow를 야기한다. 레이아웃을 재배치하고, repainting을 한다. - DOM으로 box의 색상을 바꾸면 바뀐 box만 업데이트를 하는 것이 아니라 나머지 요소도 모두 다시 그린다. - Virtual DOM은 여기서 바뀐 box만 업데이트 하기위해 탄생했다.3. ..

1. 번들링 - 배포 후 사용자가 사용하기 쉽게 용량을 줄이거나, 개발자가 개발하기 쉽게 해주는 도구.2. Webpack 2-1 빌드와 번들링 - 빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업. - 번들링은 관련성 있는 파일을 하나로 묶는 것.2-2. 필요성 - 빠른 로딩과 웹사이트의 성능을 향상에 필요하다. - 웹팩이 있으면 각각의 자원들을 모두 서버에서 받아와야하지만, 웹팩이있으면 같은 타입의 파일들은 묶어서 요청하고 응답받기 때문에 네트워크 코스트가 줄어든다.2-3. babel-loader - ES6를 ES5로 변환해준다.3. 웹팩 핵심 개념 3-1. config 속성 3-1-1. Entry - 기본값은 ./src/index.js다. 코드의 시작점이다.(이게 뭔소리야..