우아한테크캠프 2주차 회고

나에게 있어서 좋은 결정과 성장의 기회를 준 인규님과의 프로젝트가 시작되었다..!

안녕하세요 반가워요 2, 3주차 팀 4로 같이 하게 된 오인규 입니다 :)

 

월요일 오전 11시 쯤 슬렉이 울렸다. 아무래도 새로운 팀이 정해졌나보다. 출근 시간은 1시 부터지만 이른 인규님의 연락에 벌써부터 열정이 보였다. 그렇게 내 소울메이트(?) 인규님과의 첫 대화가 이루어졌다.

인규님은 알고보니 velog에서 인기글을 많이 보유하고 있는 인플루언서였다...! (이런 영광이...) https://velog.io/@gomjellie

이번 프로젝트는 구현에 급급하게 따라가지 않고 온전히 우리의 지식을 쌓는데 중점을 두는게 어떨까요?

저번 프로젝트에서 아쉬웠던 부분이다. 아무래도 3일간의 짧은 시간동안 주어진 기능을 만드는데 집중을 하다보니 그동안 새로 터득한 지식들이 온전히 내 것이 되지 못한 느낌이었다. 주말에 정리를 해야지라고 했지만 개인적인 사정으로 정리에 온전히 힘쓰지 못 했다. 그래서 내가 인규님께 처음 제안한 내용이 위의 내용이었다. 인규님도 곰곰히 생각하시더니 정말 괜찮은 것 같다고 해주셨다!

이번 프로젝트의 목표는 아래의 세가지였다.

1. 타입스크립트 적용
2. 웹팩, 바벨 세팅
3. 프레임워크 만들기

타입스크립트

타입스크립트는 예전에 백엔드에서 NestJS 프레임워크를 다루며 잠깐 맛보기만 했었는데, 이번 프로젝트에서 조금 더 본격적으로 사용하게 되었다. 물론 약간의 불편함을 감수해야했지만 확실히 타입스크립트를 써보니 컴파일 에러를 통해 미리 사이드이펙트를 방지할 수 있어 굉장한 안정감이 들었다.

 

웹팩, 바벨 설정하기

페어프로그래밍으로 웹팩과 바벨, 타입스크립트 등을 설정하는데 꼬박 하루를 보냈다. 웹팩 셋팅은 언제나 할 때마다 새롭고 어려운 작업인 것 같다.

이전부터 prettier와 eslint의 확실한 차이를 모르고 있었는데, 이번에 확실하게 구분지을 수 있게 되었다.

ESLint
JavaScript의 정적 분석 도구. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다. 에러가 발생할 수 있는 코드에 빨간줄을 그어줘서 코딩 컨벤션 및 안티패턴들을 자동 검출해준다! (잘못된 변수, 함수명 등)

Prettier
tab 간격, 코드 줄 길이, Single Quote 사용 등, 다양한 사람들이 코드를 적을 때 통일된 스타일을 만들어 주는 포맷팅 도구. 코드를 입력해서 저장하면 미리 정해둔 규칙에 따라 자동으로 코드를 변환해준다.

 

일단은 그러면 첫 주차에는 필요한 마크업과 스타일링을 먼저 해두고 ...

인규님과 나의 프로젝트 진행 순서는 상당히 유사했다! 우선 마크업과 스타일링을 먼저 하고 추 후에 기능 구현을 할 때 해당 마크업을 그대로 가져다가 쓰는 순서로 하기로 했다. 이렇게 하면 마크업을 짜는동안 컴포넌트를 어떤 단위로 나누는게 좋을지, 자주 사용되는 컴포넌트를 파악하기 용이하다는 장점이 있었다 :)

화요일에는 인규님과 직접 만나서 메인페이지를 풀로 페어프로그래밍을 했다. 그 덕분에 서로의 html나 css파일을 파악하기에 훨씬 수월했고, 마치 내 코드인 것 마냥 수월하게 볼 수 있었다.

 

인규님과 함께 숭실대에서 프로젝트를 한 날 - 비가 엄청 오더니 쌍 무지개가 떴다..!

페어프로그래밍 = 서로의 생각 읽기

페어프로그래밍은 서로의 논리적인 사고 과정을 파악할 수 있다고 한다. 이번에 인규님과의 페어프로그래밍을 통해서 그러한 점을 확실하게 깨닫게 되었다. 인규님이 짜시는 코드를 보고 다음에는 어떻게 진행을 할 지, 해당 코드의 잠재적 문제점은 무엇일 지 파악이 되면서 함께 성장하는 것을 느낄 수 있었다!

 

 

우리만의 프레임워크를 만들어 봅시다

스타일링을 모두 끝내고, SPA 프레임워크가 어떻게 작동하는지 어느정도 깊은 이해를 하고 싶은 마음에 위를 우리 프로젝트의 목표로 잡았다.

'컴포넌트를 쉽게 짤 수 있게 만들어 봐요!'
'제가 예전에 가상돔을 한번 구현 해 봤는데 이것도 한번 적용 해볼까요?'
'제가 그럼 string들을 html 마크업으로 변경하는 간단한 parser를 만들어볼게요'
...

목표를 정하자 마자 쏟아져 나오는 다양한 아이디어와 우리의 열정이 되돌아 오지 못할 큰 강을 건너게 만든 트리거였다. 그렇게 대망의 3주차가 시작 되었다.