TIL - Day 21~24

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - 21 ~ 24

---

🗓과제 마무리, Vanilla JS 심화 내용 시작

노션 클로닝 개선, 그리고 PR까지

우선 이번 수요일에 노션 클로닝을 마무리하였지만 아쉬움이 많이 남는다. 초기에는 완벽하게 이해하지 못하고 시작하여 방향을 잘 못 잡기도 하였고 마감 시간을 맞추는 게 목표였기 때문에 한 번은 다시 작성하려다가 포기하고 원래 내용으로 돌아왔다. 화요일부터는 어느 정도 방향성을 알게 되고 내가 놓치고 있었던 부분들이 보이기 시작했다. PR을 작성하며 만약 내가 다시 만든다면 고려할 방향들에 대한 질문을 많이 남겼고 초기 내가 목표로 하던 방향에 대해 작성했다. 이제 리팩토링을 진행하며 남들에게 자신 있게 보여줄 수 있는 수준의 클론을 만드려고 한다.

 

잊혀진 Todo List 과제 리팩토링

다행히도 노션 과제를 진행한 뒤에 리팩토링을 진행 할 수 있게 되어 심적 여유를 가졌었다. 하지만 과제를 제출하고 가장 먼저 확인한 일이 내가 받은 코드 리뷰들을 살펴보는 것이었다. 개인적으로 발전하려면 이전에 작성했던 코드를 리뷰나 배움을 통해 개선하여 작성하는 것을 확인하면 스스로 발전했다고 느끼기 때문에 미처 확인하지 못했던 내용들을 천천히 확인하며 리팩토링을 진행했다. 우선 이전 코드에서는 상위 컴포넌트에서 상태 값을 뿌려주는 역할만 했지만 리뷰를 통해 해당 컴포넌트에서 상태값이 변하는 걸 감지해서 뿌려주는 역할로 변경했다. 이 방법을 통해 중복되는 코드를 줄이고 훨씬 간결한 사고와 유지 보수가 용이해졌다. 이외에도 로컬스토리지를 비우거나 validation 함수를 만드는 등의 리팩토링을 진행했다.

 

배포를 위한 툴들 그리고 커피 챗에서 만난 공포의 환경 변수😱

강의를 통해 개인 프로젝트 배포에 용이한 툴들에 대해 학습하였다. EC2, AWS S3 + cloudfront, Github pages, Netlify, Vercel에 대해 간략한 정리를 들었고 팀원들과 본인은 Netlify가 편해 보이지만 느리다는 이야기를 들어서 다들 Vercel로 배포하는 방향으로 진행하려 하였다. Next.js를 경험해볼 때 한 번밖에 사용해보지 않아서 Vanilla JS에서는 어떻게 환경 변수를 주어야 하는지 모두 모르고 있었다. 검색으로로 찾기 힘들어서 모두 포기 후 저녁에 커피 챗이 있었기에 질문을 준비하고 이에 대한 내용을 물어보았다. 멘토님께서는 왜 환경 변수가 들어가지 않는지 개념에 대한 설명 후 직접 하는 방법을 보여주려고 하셨으나... 거의 30번의 커밋 동안 해결 방법을 찾지 못해 이번 커피 챗은 오류 해결 방법에 대한 강의를 본 느낌이었다. 예전 SPA 배포할 때 상대 경로에 대한 내용을 몰라서 커밋 40개를 날렸던 과거가 생각나서 섬뜩했다. 시간이 너무 많이 지나 해결하진 못했지만 해결 방법을 알려준다고 하셨다. 

새롭게 배운 것

• 의존성을 줄이기 위한 상태의 갱신과 분배 (경험치 5 up)
• Node와 브라우저 간의 차이
• Netlify는 한국에 서버가 없어 속도가 느리다
• 반면 AWS S3 + cloudfront는 세팅이 복잡하지만 빠르다.
• vanilla JS로 SPA를 배포하려면 설정이나 옵션을 만져줘야 한다.
• Vercel이나 Netlify에서 Vanilla JS 웹 앱 환경 변수 설정이 번거로운 이유

오늘 깨달은 점

• github Pages로 배포를 위해선 상대 경로를 잘 확인해야 한다.
• firebase의 Hosting 방법 (firebase로 구현했던 게시판 서비스 다시 배포해 볼 계획)
• 널 병합 연산자(A ?? B = A가 null일 때 B)
• truthy 한 값과 Falsy 한 값

참고했던 자료

null 병합 연산자

Nullish coalescing operator - JavaScript | MDN

Vercel  환경 변수가 동작하는 방식

Edge Functions