개발 알다가도 모르겠네요

우아한테크코스 5기 프리코스 2주차 본문

학습일지/우아한 테크코스

우아한테크코스 5기 프리코스 2주차

이재빵 2022. 11. 8. 16:56
728x90

두 번째 프리코스 과제는 우테코에서 제공하는 라이브러리를 활용하여 구현하는 과제로 1주차보다는 구현하는데 시간이 좀 더 걸렸다.

피어리뷰를 통해 1주차 과제 구현과 코딩 방식에 대한 피드백을 받았고, 2주차 과제에서는 피드백을 의식하면서 코드를 작성하려고 노력했다. 구현하면서 크게 세 가지 토픽에서 깨달은 점이 있다.

 

코딩 스타일 

indent depth를 최대 2까지만 허용하는 요구사항이 있었기에 eslint를 적용하여 depth를 넘기지 않도록 강제하였다.

Airbnb Style Guide로 코딩 스타일을 설정하여 형식과 규칙에 어긋나거나 가독성이 떨어지는 코드를 효율적으로 바꿀 수 있었다. 또한 prettier를 통해 들여쓰기나 따옴표, 세미콜론 등의 스타일을 강제하여 코딩 스타일을 일관되게 유지하고 eslint와 상호 보완할 수 있었다.

 

eslint 설정법

 

[node.js] ESLint + Prettier + Airbnb 설정 하기

자바스크립트 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 많이 소비한다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다 Airbnb 란 ESLint의 순수 기능으로도 충분하나 다른

ldevlog.tistory.com

commonJS 와 ES Modules 가 뭘까

 

CommonJS vs ES Modules

배경 함수들끼리 데이터를 공유하고 싶다면 어떻게 해야할까? 전역 스코프에 해당 데이터를 둔다면 다른 내부 요소에 의해 망가질 수도 있고, 순서가 뒤엉켜 전역 스코프의 요소가 존재하지 않

hini7.tistory.com

 

함수 최소화

지금까지는 함수를 작성할 때 함수명을 중점을 두어 의도를 분명히 표현하고자 했다. 이번 과제를 통해 함수는 한 가지 일만 하게 하는 것이 중요하다는 것을 알게 되었지만 '한 가지' 가 무엇을 말하는지 처음에는 이해하기 어려웠다. 하지만 검색과 서적을 통해 '함수 내 모든 문장의 추상화 수준이 동일' 할 경우 한 가지 작업을 한다는 것을 깨달았다. 즉 의미 있는 이름으로 다른 함수를 추출할 수 없을 때까지 줄여야 한다는 것이다. 이를 지키면서 함수를 작성하는 것이 쉽지는 않았지만, 최대한 의식하면서 작성하고자 노력했다.

 

클린코드 작성법

 

[Clean Code] 3. 함수

최근 RxSwift를 사용하는 프로젝트를 진행한 경험이 있는데, 최대한 Side Effect 가 없도록 함수를 설계하려고 노력을 했었다. 그리고 코드 리뷰를 진행하며, 함수를 어떤 단위로 쪼갤지... 그리고 함

velog.io

 

비동기 처리

MissionUtils 라이브러리에서 제공하는 Console API를 사용하면서, 직접 생성한 Promise 객체를 비동기 처리하는 것을 경험했다.

이 과정에서 반복문 안에 await를 사용하여 병렬 작업을 할 경우, 배열을 예로 들 때 '반복문 -> push -> 반복문 -> push' 를 반복하게 되어 성능저하가 일어난다는 사실을 알게 되었고, Promise.all을 통한 해결법을 알게 되었다. 비록 테스팅하는 과정에서 Promise 방식의 코드는 테스트를 통과하지 못했기에 콜백함수를 이용하여 코드를 변경하게 되었지만, 이 과정을 통해 불명확했던 비동기 처리 개념을 숙지할 수 있었고, promise와 콜백함수의 적용법을 깨닫게 되었다.

 

 

for 안에 await을 사용하게 되면 성능 저하가 일어나기 때문에 사용하지 말라고 한다. 반복문을 await을 사용하여 병렬로 처리하게 된다면 배열을 예로 들때 for -> push -> for -> push -> for -> push 를 반복하게 되어 성능저하가 일어나기 때문이다.

그러면 공식문서에선 해결방안으로 Promise.all을 사용하면 된다.

 

ESLint: no-await-in-loop

discord.js 예제를 보고 .ts 파일을 읽어 내부 코드를 가져와 Json으로 바꾸는 코드를 사용했다.하지만 아래와 같이 eslint 쪽에서 에러가 발생했다.error Unexpected \`await\` inside a loop no-await-in-lo

velog.io

 

 

 

'처음부터 완벽하게 하려고 하지 말 것'

구현하기 전에 기능 목록을 작성할 때, 처음부터 세부 사항까지 완벽하게 목록을 작성하려다 보니 오랜 시간을 쏟게 되었다.

당연히 시간을 쏟았음에도 불구하고 실제 구현에 들어가 보니 이론과는 달랐고 지속적으로 기능 목록을 수정하게 되었다. 이를 통해 처음부터 완벽하게 문서를 작성하려고 시간을 허비하는 것이라, 실제 구현을 하면서 유기적으로 문서 내용을 추가하고 수정해 나가는 것이 좋은 습관이라는 것을 깨달았다.

주차가 지날수록 우테코에서 요구하는 구현 기능들은 점점 어려워질 것이고 많은 난관이 찾아올 것이다. 하지만 그 과정에서 직접 모르는 것을 찾아가면서 학습하고, 새로 배운 것을 하나하나 퍼즐 맞추는 듯이 구현해 나가다 보면 성공적으로 프리코스를 끝낼 것이라 확신한다.

지난 주차 과제에 대한 피어리뷰를 통해 얻은 인사이트가 이번 주 과제를 수행하면서 큰 도움이 되었기에, 앞으로도 피어리뷰에 적극적으로 참여할 생각이다.