레벨 1 회고 - 새로운 환경에 빠르게 적응하기, Vanilla JS부터 파헤치기

우아한테크코스

첫 날부터 미션 시작에, 연극 준비에, 정신이 하나도 없었던 것 같다. 적응하랴 미션하느랴 순식간에 레벨 1이 끝나버렸다. 잊기 전에 쓰는 레벨 1 회고.

연극을 해야 한다구요?

우테코를 지원할 때까지만 해도 연극을 해야 하는 줄 몰랐다. 사실 합격 하고 나서 지인이 알려주더라. 너 연극해야 된다고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 사람들 앞에 나서는 건 조금 부담스럽긴 했지만, 뭔가 재밌을 것 같았다.


아이디어를 내는 과정은 역시나 힘들었다. 이것저것 아이디어를 내 보기도 하고, 유행하는 영상들을 찾아보기도 하고. 우리 조는 '모두가 공통으로 알고 있는 소재'를 포인트로 했다. 모든 크루들의 공감을 불러일으키고 싶었다.


그래서 한 크루의 실화를 바탕으로 한 '우테코 최종 코딩테스트'를 소재로 했다. 결과는 성공적이었던 것 같다.✨


이 과정에서 의견을 효과적으로 제시하는 방법을 배울 수 있었다. 가장 중요한 것은 논리성과 구체성! 아이디어를 두루뭉실하게만 생각한 뒤 의견을 제시하면 더 이상 나아가지 못하는 느낌이 들었다. 연극 회의 진척이 나지 않고 아이디어 제시 단계에 머물러 있는 것 같아서, 좀 더 구체적으로 아이디어를 제시하니 속도가 붙을 수 있었다.

미션 1 - 자동차 경주

📍 학습 목표
- Github 기반 온라인 코드 리뷰
- 코딩 컨벤션 준수
- 단위 테스트 작성
- 함수 분리 리팩터링

연극 준비에, 우테코 적응에 정신없이 지나간 미션이었다. 심지어 내 페어와 실력 차이가 너무 많이 나서 그저 이끌려다녔다. 어떻게 설계해야 할지도 감이 잡히지 않은 상태에서, 막힘없이 코드를 작성하는 페어를 보니 대단하다 싶으면서도 나의 앞길이 막막했다. 나도 우테코가 끝나면 페어처럼 잘 할 수 있을까 라는 생각이 들었다. 그래도 우테코를 시작한 이상 끝은 봐야 하니깐! 10개월 간 꾸준히 공부하다 보면 언젠가 멋진 내가 될 수 있으리라 믿는다.

미션 1에서는 앞으로의 미션에 기반이 될 만한 지식들을 습득했다.

• MVC 패턴
• class에 대한 이해
• eslint, prettier 설치
• export vs export default
• Object.freeze()
• Array 관련 고차함수 (Array.from, Array.map 등)
• jest를 이용한 단위 테스트
• YAGNI 원칙
• 호이스팅
• jsDoc (아직 익숙하지는 않다😭)

미션 2 - 로또 번호 추첨

📍 학습 목표
- UI, 도메인 영역 설계
- 목적에 맞는 객체와 함수 활용
- 단위 테스트

 

미션 2는 .. 레벨 1에서 가장 어려웠던 미션이었던 것 같다. MVC 패턴에 대한 감은 잡힌 상황이었으나, 활용하기는 어려운 상태에서 미션 2를 진행하려니 어떻게 해야 할 지 모르겠던 상황이었다. 또한 미션 목표에 맞게 TDD를 시도해보았지만, 페어와 나의 실력에서는 아직 무리라고 판단되어 적용하지 못했다. 아쉬움이 많이 남는 미션이지만.. 그래도 내가 페어와 함께 주체적으로 작성한 코드라는 느낌이 들었다.


학습한 내용은!

• 객체를 객체답게 사용하기
• Object의 얕은 복사와 깊은 복사, slice() 활용
• UX 고려
• addEventListener와 this 바인딩 (bind 활용)
• 사용자 친화적인 에러메세지
• createElement와 insertAdjacentHTML
• DOM 조작 최소화 - repaint, reflow

미션 3 - 점심 메뉴 추천

📍 학습 목표
- 컴포넌트 단위 모듈화
- 컴포넌트 단위 기준 UI 분리
- 재사용할 수 있는 컴포넌트 고려
- TypeScript 사용 및 필요성 경험

 

점심 메뉴 추천 미션은 수월하게 진행되었다. 페어와 나 모두 타입스크립트를 사용해 본 경험이 있었고, 미션 2에서 웹에 익숙해지는 시간이 있었기 때문에 빠르게 할 수 있었다. 컴포넌트로 작년에 새롭게 나온 문법인 웹 컴포넌트를 적용해보았다. 생명주기가 있어 다루기가 편하다는 것이 가장 큰 장점으로 느껴졌다. 리액트스럽게 vanilla JS (TS)를 사용할 수 있었다.

 

컴포넌트로 잘게 쪼개면서 이벤트를 처리해야 하는 복잡성이 추가되었다. 그 과정에서 이벤트 버블링과 커스텀 이벤트를 학습할 수 있었다. 이벤트 리스너는 (모든 경우가 그러한 것은 아니지만) 대체로 상위 컴포넌트에 등록하는 것이 편리하게 느껴졌다. 추가로 크루들과 이야기를 하면서 알게 된 건데, 커스텀 이벤트는 개발자가 임의로 이벤트를 추가한 것이기 때문에 다른 개발자들과의 원활한 소통 및 실수 방지 차원에서 커스텀 이벤트를 잘 사용하지 않는다고 한다.

 

이번 미션에서 Cypress를 처음 다뤄보았다. 나름 jest와 비슷한 방식이라 빠르게 습득할 수 있었다. 다만, 어느 범위까지 e2e 테스트로 지정해야 할 지 어려웠다.

 

아래는 PR에 작성했던 내용의 일부이다.

2. E2E 테스트 범위
Cypress를 활용하여 E2E 테스트를 도입해보았습니다! 
그 과정에서 테스트를 어느 범위까지 어떻게 지정해야 할 지 고민이 되었습니다.
그래서 이 프로그램의 핵심인 도메인 로직을 메인으로 End point를 지정했고, 로직에 대응하는 테스트 코드를 작성했습니다.

하지만 이 방법으로 테스트 코드를 작성하면서 ‘단위 테스트랑 뭐가 다른 걸까?’ 라는 생각이 들었습니다. 
도메인을 중심으로 테스트 코드를 작성하다 보니 단위 테스트랑 비슷하다는 느낌을 받았습니다.
E2E 테스트의 범위는 어디까지 잡아야 할지 {리뷰어}의 의견을 듣고 싶습니다!

 

리뷰어는 유저 플로우를 중심으로 e2e 테스트 코드를 작성해보라는 조언을 해주셨고, BDD 키워드도 알 수 있었다.

 

학습한 내용

• Cypress를 사용한 e2e test, BDD 방식
• 이벤트 버블링
• 타입스크립트의 타입 선언(:Type)과 단언(as Type)
• nullish 병합 연산자 '??' : 0이 할당될 수 있는 변수를 사용하는 경우 '||' 보다는 '??'가 적합하다
• 컴포넌트 간 this 바인딩
• className toggle 방식

미션 4 - 영화 리뷰

📍학습 목표
- 비동기 적용
- API 통신 시 오류 처리
- API 연동 테스트 경험
- UX 개선을 위한 페이징 구현

 

드디어 마지막 미션이 되었다...! 곧 방학을 앞두고 있는 만큼 풀어지려 하는 마음을 붙잡으면서......열심히 했다😭

 

이번 미션에서는 비동기 처리를 위주로 진행했고, 강의 시간을 이용한 비동기 퀴즈를 통해 자바스크립트 엔진의 동작 방법과 task queue, 스코프, 컨텍스트 등 아주 기초적이지만 매우 중요한 이론을 학습했다. setTimeout과 Promise, async/await의 차이점, Promise의 다양한 사용법을 배웠다. 퀴즈를 통해 크루들과 많은 대화를 나누면서 머릿속의 이론을 정리할 수 있었고 말로 설명하면서 확실하게 내 것으로 만들 수 있었던 시간이었다!

 

추가로 스켈레톤 UI도 구현해보고 싶었는데 이번 미션에서 할 수 있어서 너무너무 좋았다. 네트워크 탭에서 직접 속도를 제어하면서 테스트하기도 하고, 무한 스크롤도 함께 구현해서 뿌듯했다. 지난 프로젝트에서는 스크롤을 감지하는 방식으로 구현했었는데, 이번에는 IntersectionObserver API를 활용하여 성능이 개선된 무한 스크롤을 구현할 수 있었다.

 

학습한 내용

• Cypress를 이용한 API 요청 및 테스트
• 비동기 처리
• 오류 처리
• 스켈레톤 UI 적용
• 무한 스크롤
• 자바스크립트 엔진
• 반응형 웹

소프트 스킬 훈련 - 유연성 강화

회고로 시작해서 회고로 끝난다고 해도 과언이 아닐 만큼, 우테코에서의 회고는 매우 중요하다. 소프트 스킬 훈련의 일환으로 유연성 강화를 진행했는데, 나의 유연성 강화 목표는 '문제 상황을 피하지 않기 (미루지 않기)', '섣불리 결론 짓지 말고 깊이 있게 생각하기', '긍정적이지 않은 상황에도 긍정적 마인드를 유지하기' 였다. 이렇게 한 주의 목표를 설정하고 나니, 목표를 되새기며 변화하고 있는 나를 보았다. 회고를 통해서 반성(?)을 하고 크루들의 피드백을 통해 위로를 받기도 했다. 레벨 2에서도 더 나은 내가 될 수 있도록 지내야지.

메타인지 말하기

페어 프로그래밍을 진행하며 내가 알고 있는 지식을 입 밖으로 꺼내기가 어려운 일이라는 것을 느꼈다. 머릿속으로는 이해했는데, 이것을 다른 사람도 이해할 수 있도록 설명하는 것이 힘들었다. 그래서 메타인지 말하기 과정을 신청했고, 그 과정에서 this 바인딩과 타입스크립트 사용의 이유를 설명할 수 있게 되었다.

 

다른 사람에게 설명하기 위해 this에 대해 하루 종일 공부했고, 이를 노션에 정리해가며 페어에게 공유했다. 페어가 다른 크루에게 해당 정리본을 공유해도 되냐고 했을 때 뿌듯했다 ㅋㅋㅋ 내가 정리한 내용이 다른 사람들도 이해를 할 수 있도록 정리를 했구나 라는 생각이 들었다. 마찬가지로 미션을 진행하며 느낀 타입스크립트의 장단점을 설명할 수 있게 되었다. 타입스크립트 사용의 가장 큰 이유는 '내 코드를 보는 다른 사람들을 위한 것', 그리고 '리팩토링'을 위함이라고 생각한다. 타입을 지정해놓으니 읽기가 쉬워지기 때문이다!

스터디 - 미니 테코톡 스터디

테코톡을 준비하기 위해 미니 테코톡 스터디를 운영했다. 주어진 시간 10분 중 5분은 발표, 5분은 Q&A 시간을 갖는다. 적어도 내가 발표한 부분에 대해서는 확실하게 알 수 있을 것이라는 기대감이 있었다. 미션을 진행하며 스터디도 병행하기 다소 힘들었을 텐데 잘 따라와준 스터디원들에게 고마웠다. 레벨 2 때도 진행하고 싶다!!!!!!

레벨 2 목표!

1. 운동 꾸준히 하고 건강 챙기기
2. 알고리즘 꾸준히 공부
3. 미니 테코톡 스터디 공부
4. 영어 회화 틈틈히 공부
5. 미루지 않기

 

레벨 2도 잘 해낼 거니까~!