HTML5+(기초기술)
시맨틱 마크업이란 무엇이며, 왜 중요한지 잘 알고 있다.
DOM0과 DOM2의 이벤트 처리 방식의 차이와 장단점을 알고 있다.
ShadowDOM은 무엇이며 왜 쓰이는지 알고 있다.
data 속성을 왜, 어떻게 활용하는지 알고 있다.
마크업으로 레이아웃을 구성할 수 있다.
웹 접근성(ARIA)
웹 접근성이 무엇이고 어떻게 처리해야 하는지 이해하고 있다.
페이지 내 각 항목에 적절한 접근성을 위한 role과 의미를 정의할 수 있다.
CSS
CSS selector specificity에 따른 우선 순위를 알고 있다.
!important rule은 언제 사용할 수 있는지 알고 있다.
CSS에서 사용할 수 있는 다양한 크기 단위와 의미를 알고 있다(예: pt, px, rem, em, vh, %...).
position의 종류와 특징, 차이점을 구분하고 실무에서 필요에 따라 잘 사용할 수 있다.
display의 다양한 속성을 이용해 요소를 배치할 수 있고, 각 속성의 동작 원리를 이해할 수 있다.
CSS box model의 개념과 특성을 잘 알고 있다.
padding과 margin의 차이를 잘 알고 있다..
class, id, tag를 찾는 selector를 어려움 없이 작성할 수 있다.
pseudo-classes의 종류와 사용 방법을 알고 있다.
CSS pre/post 프로세서(SASS, LESS, etc)
복잡한 plain CSS를 구조적, 의미적으로 구분하고 관리할 수 있다.
전/후 처리기를 사용해 CSS 코드를 관리하고 빌드할 수 있다.
JavaScript
this, scope, hosting의 개념을 이해하고 활용할 수 있다.
다음의 사례별로 this 키워드의 의미를 설명할 수 있다.
1. 함수나 클래스가 new 키워드로 호출된 경우
2. 함수가 bind되어 있는 this값을 가지고 있는 경우
3. this가 호출되는 시점에 설정되는 경우
4. 함수가 메서드 형태로 호출된 경우
5. 함수나 부모 스코프가 엄격 모드(Strict mode) 내에 있는 경우
6. 함수가 그냥 호출된 경우
prototype chaining의 개념을 이해하고 이를 이용한 상속을 구현할 수 있다.
closure의 개념을 이해하고, closure를 이용해 함수에서 상태를 관리하는 방법을 활용할 수 있다.
DOM에서 발생하는 이벤트를 제어할 수 있다.
이벤트 위임(event delegation)의 개념을 이해하고, 그 필요성을 나타내는 코드 예를 작성할 수 있다.
JavaScript 코드가 실행되는 과정을 알고 설명할 수 있다.
이벤트 루프(event loop)를 설명할 수 있다.
JavaScript에서 사용하는 간단한 패턴을 학습하고 사용할 수 있다.
단일 스레드를 극복하는 여러 가지 방법을 알고 있다.
ES6+
ECMAScript의 연단위 릴리스 배경을 알고 있다.
ECMAScript의 표준화 프로세스를 알고 있다.
브라우저에서 ES6을 지원하지 않을 경우 어떻게 해결할 수 있는지 잘 알고 있다.
destructuring assignment를 활용할 수 있다.
arrow function과 일반 function의 차이점을 설명할 수 있다.
Array.prototype.forEach 와 Array.prototype.map의 핵심적인 차이를 알고 있다.
ESM(ES module)을 적용하고 사용할 수 있다.
TypeScript
타입 사용의 이점을 충분히 이해하고 있다.
다른 프로젝트를 위한 타입 정의 파일을 생성할 수 있다.
타입 호환과 타입 추론을 설명할 수 있다.
타입 오류가 발생하는 경우 문제점을 분석하고 해결할 수 있다.
현재 프로젝트에 타입스크립트를 적용하고 tsconfig 파일을 설정하는 방법을 알고 있다.
TypeScript definition (Declaration File)
타입스크립트의 타입을 정의하고, 정의 파일을 코드베이스로부터 생성할 수 있다.
타입 정의가 기본으로 제공되지 않는 패키지를 사용하는 경우, 정의 파일을 검색하고 적용할 수 있다.
네트워크 > HTTP 이해
HTTP request 후, response가 이루어지기까지의 단계를 설명할 수 있다.
기본적인 HTTP 상태 코드(1xx, 2xx, 3xx, 4xx, 5xx)를 이해하고 있다.
HTTP 프로토콜을 설명할 수 있다.
HTTP/2, HTTP/3이 기존 프로토콜에 비해 무엇이 달라졌는지 설명할 수 있다.
HTTP 메서드의 종류를 개괄적으로 이해하고 있다.
HTTP의 상태 코드의 분류와 의미를 설명할 수 있다.
비동기 API 호출과 데이터 처리
callback, promise, async/await, callback 패턴의 차이점을 잘 인지하고 있다.
실무에서 사용되는 다양한 API 요청 라이브러리를 사용해 본 경험이 있고, 각각의 장단점을 잘 파악하고 있다.
Ajax, JSONP, CORS
same origin policy를 회피하고 데이터를 요청할 수 있는 기술이 무엇인지 알고, 어떻게 동작하는지 설명할 수 있다.
JSONP가 어떻게 단일 도메인 정책을 회피할 수 있는지 동작 방식을 상세히 설명할 수 있다.
NPM 생태계 이해 (package.json, 패키징, 배포 등)
package.lock 파일 혹은 yarn.lock 파일의 필요성을 잘 알고 있다.
scope registry의 개념을 설명할 수 있다.
dependencies, devDependencies, peerDependencies의 개념을 설명할 수 있다.
시맨틱 버저닝에 대해 다음과 같은 내용을 잘 알고 설명할 수 있다.
major, minor, patch 구분
버전의 범위를 표시하기 위한 기호(^, ~ 등)
패키지의 다양한 배포 태그의 의미를 알고 활용할 수 있다.
현재 팀에서 운영하는 JS의 개발, 테스트, 배포 방식을 바로 설명할 수 있고, 개선점이 있다면 무엇인지도 잘 인지하고 있다.
NPM 패키지 선정 및 활용
필요한 기능을 제공하는 패키지군을 찾고, 패키지별 장단점을 파악해 최적의 패키지를 선택할 수 있으며, 협업 구성원에게 선택의 당위성을 설명할 수 있다.
번들러/빌드
tree shaking이 무엇이고 어떻게 구성할 수 있는지 잘 알고 있다.
minification이 어떻게 이뤄지는지 구체적인 수행, 처리 과정을 설명할 수 있다.
UMD와 CJS, ESM의 차이와 특징을 이해하고, 각 모듈 시스템을 능숙하게 다룰 수 있으며, 필요한 경우 개발된 코드를 다른 모듈 시스템에서 사용할 수빌드할 수 있다.<br />
현재 진행하는 프로젝트의 번들 과정을 별도 준비 없이 설명할 수 있다.
현재 진행하는 프로젝트의 번들/빌드에 소요되는 시간을 알고 있으며, 이를 개선하는 데 필요한 다양한 기술적 방법을 파악하고 있다.
(webpack을 사용한다면) loader와 plugin의 차이점을 잘 알고 있다.
런타임 > Node.js, Deno
Node.js 환경에서의 모듈/패키지 import 방법(표준)을 잘 알고 있다.
브라우저 기반 환경과 Node.js 환경의 차이를 잘 알고 있다.
Deno는 어떻게 패키지 레지스트리 없이 패키지를 사용할 수 있는지 설명할 수 있다.
Test
현재 참여하고 있는 프로젝트의 테스트 환경을 상세하게 설명할 수 있으며, 처음부터 환경을 구축할 수 있다.
테스트 결과와 연동된 코드 관리를 수행하고 있으며, 수행되는 과정을 상세하게 설명할 수 있다.
테스트 작성 방법과 기준을 이해할 수 있다.
CI/CD
현재 프로젝트에 구축된 CI/CD 파이프라인을 상세하게 설명할 수 있다.
장애 인지
Front-end 영역의 오류 로깅의 필요성을 알고 있으며, 필요한 경우 로깅 환경을 구축할 수 있다.
로그와 모니터링을 통해 장애를 확인할 수 있다.
현재 적용된 오류 로깅 환경이 있다면 상세하게 설명할 수 있다.
코드 컨벤션
현재 프로젝트에 코드 품질을 유지하기 위해 사용 중이거나 구축한 환경을 잘 파악하고 있고, 이를 설명할 수 있다.
메모리 누수 검사 방법과 해결 방법을 알고 있다.
XSS 문제를 방어하기 위한 방법을 알고 있다.
데이터 유효성과 무결성 검사는 어떤 경우에 필요한지 알고 있다.
협업/형상관리
현재 개발에 참여 중인 프로젝트나 서비스에서 사용되는 브랜치 전략을 설명할 수 있다.
브라우저 동작(렌더링, 파싱 등) 원리
HTML 문자열을 응답으로 받은 후 브라우저가 어떤 과정을 거치게 되는지 상세하게 설명할 수 있다.
IE10을 지원해야 하는 상황에서 대처 방법과 고려 사항을 상세하게 설명할 수 있다.
JavaScript 코드 실행 과정 이해
JavaScript 코드가 클라이언트에 응답으로 전달되었을 때 어떻게 동작하는지 이해하고 있다.
크로스 브라우저 이슈 이해
브라우저에 따라 동일한 코드가 왜 다르게 수행되는지 이해하고 있으며, 이를 해결하기 위한 접근 방법을 알고 있다.
데스크톱/모바일 웹 환경의 이해
모바일의 DOM 속성을 인지하고 변경할 수 있다.
모바일 웹 환경의 특성을 이해하고, 반응형 웹을 개발할 수 있다.
스크린 크기, 디바이스 등 미디어 종류에 반응하도록 페이지를 개발할 수 있다.
media queries를 적절하게 활용할 수 있다.
사용자 스크린별 가로 세로 비율(aspect ratio)에 따라 적절한 이미지가 로딩되도록 만들 수 있다.
Web API 이해 (DOM 제외 나머지 API들)
서비스 개선을 위해 Web API를 적극 활용하고 있다. 즉, 외부 패키지나 라이브러리 대신 네이티브로 지원되는 Web API를 활용할 수 있다.
어떤 종류의 Web API가 있는지 잘 알고 있고, 필요한 시점에 적절하게 활용할 수 있다.
Web APIs > DOM/BOM API 이해 및 활용
이해하고 있는 DOM, BOM 객체를 두 가지 이상 설명할 수 있다.
JavaScript 명세와 DOM/BOM API를 구별해서 이해하고 설명할 수 있다.
개발자 도구 활용
프로파일링을 통해 병목 지점을 확인할 수 있다.
메모리 누수를 확인하고 문제의 원인을 찾을 수 있다.
개발자 도구의 다양한 디버깅 기능을 활용할 수 있다.
모바일 환경 디버깅
모바일 단말기 및 시뮬레이터를 이용해 모바일 환경 테스트를 수행할 수 있다.
중국 내수향 기기 등, 범용적이지 않은 모바일 기기에서 오류가 발생한 경우 어떻게 디버깅할 수 있는지 잘 알고 있다.
Proxy 도구 활용
proxy 도구로 운영 중인 서비스의 JS를 교체(auto respond 활용)하여 테스트하고 디버깅할 수 있다.
렌더링의 이해와 렌더링 성능 개선 (SSR, layout thrasing 방지 등)
HTML 문서 내에서 script 태그의 위치에 따라 파싱이 어떻게 달라지며, 왜 이것이 성능에 영향을 미칠 수 있는지 알고 있다.
script 태그의 defer, async 속성을 각각 어떤 경우에 사용해야 하는지 예를 들어 설명할 수 있다.
인라인 CSS, JS 사용 시 성능에 미치는 영향을 이해하고 있다.
SSR 아키텍처의 장단점을 파악하고 있다.
스타일 변경, DOM handling 등, 요소의 렌더링 상황에 따라 성능에 영향을 미치는 요인을 알고 있다.
Web Vitals
알고 있는 성능 지표들을 나열하고 각각 무엇을 의미하는지 설명할 수 있다.
HTTP request 레벨에서의 성능개선
성능 관점에서 HTTP request를 줄일 수 있는 방법들을 알고 있다.
브라우저 개발자 도구를 활용한 bottleneck 확인과 개선
인지적 성능 관점은 무엇을 말하는 것인지, 예를 들어 설명할 수 있다.
기술 매뉴얼 작성 JSDoc
도구와 자동화 등을 적용해 프로젝트를 문서화할 수 있다.
JSDoc 문법을 활용해 문서를 작성하고 JSDoc 도구를 활용해 API 문서를 자동으로 생성할 수 있다.
대상 독자가 문서만으로 개발 내용을 충분히 이해할 수 있는 수준으로 문서를 작성하고 공유할 수 있다.
작성된 문서를 필요에 따라 사용 가능한 문서 형식으로 생성할 수 있다.
프레임워크/라이브러리
현재 사용 중인 프레임워크를 선택하게 된 배경과 이유를 기술적 관점에서 설명할 수 있다.
모던 프레임워크에서 사용 가능한 '상태 관리'(Redux, Vuex, Recoil...)는 어떤 원리로 구현되는지 알고 있으며, 사용을 위한 설정을 구성할 수 있다.
상태 관리 방식은 이벤트 전파 방식과 어떻게 다른지 알고 있다.
상태 관리 라이브러리로 프로그램 데이터 흐름을 일관되게 제어할 수 있다.
컴포넌트 기반의 프레임워크/라이브러리의 장점을 설명할 수 있다.
SPA와 MPA의 장단점은 각각 무엇인지 알고 있다.
SPA의 라우팅 방식에는 어떤 종류가 있는지 알고 있다.