[기술회고] 우아한테크코스 Level1

우아한테크코스 레벨 로그 

1)     계산기 미션

E2E 테스트를 학습하였다. 사용자의 입장에서 전체 플로우를 테스트 하는 것이다. 그 툴로 Cypress 라이브러리를 사용하였다. 사용자 입장에서 UI와 상호작용하는 전체 과정을 테스트할 수 있었다.

 

2)     자동차 경주 미션

TDD를 시도해보았다. TDD는 테스트를 기반으로 기능을 정상적으로 구현하고, 리팩터링하는 과정을 통칭한다. TDD는 코드가 달성하고자 하는 목표를 명확히 정의하기 때문에, 코드가 방대해지지 않고 명확한 목적을 가진 코드를 작성할 수 있었다.

 

3)     로또 미션

Webpack을 학습했다. Webpack은 JS, CSS, HTML, 이미지 등의 리소스를 하나의 파일로 번들링해주는 툴이다. 웹 어플리케이션의 규모가 커지고, ES6부터 모듈을 지원하면서 필요성이 대두되었다. 자바스크립트 파일이 많다면, 렌더링 병목현상이 발생할 수 있다. Webpack은 이를 하나의 파일로 번들링 해주기 때문에, 이 문제를 해결할 수 있다. 그 결과로 유지보수성을 높일 수 있다.

  단위 테스트를 학습했다. 단위 테스트는 하나의 클래스 또는 메소드 기준으로 테스트하는 방식을 의미한다. 한 단위의 코드와 테스트가 1:1 연계되어 빠른 피드백이 가능하다는 장점이 있다.

 

4)     나만의 유튜브 강의실 미션

비동기 처리에 대해 학습했다. 고전적인 비동기 처리 방법인 callback 방식부터, ES6에 등장한 promise 방식, ES8에 등장한 async/await 방식까지의 흐름을 학습하였다. 각각은 이전의 단점을 보완하기 위해 고안되었다. 일관된 목표를 살펴보자면, 동기처럼 읽히는 코드, 일관성 있는 에러 처리, 성공/실패에 대한 호출을 보장하는 방향으로 발전해왔다.

Intersection Observer API를 학습하여, infinite scroll, lazy loading의 원리를 파악하였다. IO가 탄생하기 전에는 scroll Event로 scroll을 감지하고, 매번 getBoundingClientRect을 호출하여, 조건을 충족하면 콜백함수를 실행시켰다. 그러므로 메인 스레드 과부하 문제, 리플로우 발생으로 인한 성능 이슈가 있었다. IO는 이를 해결한다.

Debounce, Throttle을 학습하였다. 연이어 발생하는 이벤트를 제어하기 위해 사용한다.

 

5)     자판기 미션

SPA를 학습하였다. SPA는 url이 변함에 따라 새로운 페이지를 렌더링 하지 않고, 한 페이지 내에서 동적으로 변화하는 어플리케이션을 의미한다. History API를 통해 이를 구현해보았다.

인증/인가를 학습하였다. JWT 토큰을 보관하는 방법으로 cookie와 web Storage가 있다. 이때 중요한 것이 XSS, CSRF 보안이슈인데, cookie는 CSRF에 취약하고, web Stroage는 XSS에 취약하다. JWT 토큰은 개인 정보를 모두 담은 것과 같은 의미이므로 함부로 다뤄선 안 되고, 보안 이슈에 신경써야 함을 배웠다.

TypeScript를 학습하였다. TypeScript는 정적 타입 언어로, 컴파일 단계에서 에러를 잡을 수 있기 때문에 런타임을 직접 확인할 소요를 줄인다. 또한 VSCode와의 호환성이 좋아 오타로 인한 실수를 방지한다. 그러므로 더욱 안정성 높은 프로그래밍을 할 수 있다.