[TIL] 내일배움캠프 4일차

내일배움캠프를 시작하고 TIL을 적기 시작하면서 컴퓨터 게임을 하는 시간이 많이 줄어들었다. 참는게 힘들지도 않고, 하루종일 코딩하는게 당연하게 느껴지기 시작했다고 해야하나? 고3때 수능 준비하던 시절에도 이런 기분이였는데, 취업 준비를 하면서 다시 느끼게 될 줄이야 ㅋㅋㅋㅋ

서류 탈락하는 주제에 거만한 말이지만 나는 지금도 신입 개발자로 취업하면 회사의 기술 스택에 빠르게 적응하고 기여할 수 있다는 자신감이 있다. 그런데 다른 분들이 보기에는 내가 증명한 것이 없으니 근거 없는 자신감으로 생각하시겠지. 그래서 자신감 말고 나를 증명할 것들이 필요하다. TIL을 매일 적는 것도 하나의 증명 과정이라고 생각하고 있다. TIL을 쓰다 보니, 내가 문제를 해결하는 과정도 TIL에 자세히 포함할까 했지만 TIL이라는 광범위한 제목으로 모든 문제를 포함하는건 어울리지 않는다고 생각했다. 간단한 문제만 TIL에 쓰고 복잡한 문제는 간략하게 적은 뒤에 자세한 내용은 따로 포스팅 해야겠다.

오늘 한 일

• Vue의 <script setup> 훅에서 await 사용 문제 해결
• 토이 프로젝트의 프론트엔드 코드 리팩토링

Vue의 <script setup> 훅에서 await 사용 문제 해결

문제 상황

vue의 SFC 문법에서 <script setup>의 내부에서 await로 비동기 함수를 호출했다. 최상위 수준(script setup)에서 비동기 함수를 await로 호출하면 컴포넌트의 렌더링이 중단될 수 있고, 여러가지 의도치 않은 버그를 발생시킬 수 있기 때문에 사용하면 안된다고 한다.

 <script setup>
 // 상황 예시
 await (async () => {
 })()
 </script>

해결 방법

간단하게 최상위 수준에서 사용하지 않으면 된다.

 <script setup>
   // 최상위 수준이 아님
 async function functionLevel() {
   await (async () => {
 })()
 }
 functionLevel()
 </script>

그런데 위와 같이 호출하면 functionLevel 함수는 비동기적으로 실행된다. 이 함수를 동기적으로 만들고 싶으면 어떻게 해야할까? 최상위 수준에서는 await를 사용하지 못하니까 다른 실행 시점이 필요하다.

 <script setup>
 import { onMounted } from 'vue';
 onMounted(async () => {
   await functionLevel()
 })
 </script>

vue의 라이프 사이클 중에서 onMounted가 있다. 컴포넌트가 dom에 마운트된 직후에 실행되는데, 이때 필요한 작업들을 실행하도록 하자. vue로 더 좋은 코드를 짜기 위해서는 주요 라이프사이클을 알아둬야겠다.

코드 리팩토링

문제 상황

Vue로 개발하는게 처음이라 익숙해질 겸, 컴포넌트를 나누지 않고 한 컴포넌트에서 모든 기능을 다 구현했다. 그래서 컴포넌트가 지나치게 크고 메소드가 많아서 가독성이 떨어졌다.

해결 방법

리팩토링 할 때 고려 사항들을 적어두고 지키기 위해서 노력했다.

• 가독성
• 중복 코드 제거
• 단일 책임 원칙
• 명확한 네이밍
• 모듈화와 재사용성
• 성능 최적화
• 에러 핸들링
• 한 번에 하나의 변경에만 집중할 것. 너무 많은 것을 한 번에 변경하면 에러를 추적하기 어렵다.
• 버전 관리 시스템을 이용해서 버전을 관리한다.

결과

1. 컴포넌트와 메소드를 분리했다.
2. 급하게 개발하느라 대충 지은 변수 이름을 모두 이해하기 쉬운 이름으로 변경했다. 그래도 이해하기 어려우면 주석을 달았다.
3. 여러 컴포넌트에서 사용하는 값을 common 파일에서 참조하도록 했다.
4. 하나의 컴포넌트를 변경할 때 하나의 커밋을 했다.

아쉬운 점

1. 메소드가 최대한 단일 책임을 가지도록 하지 못했다.

세부 내용은 이곳에서 확인할 수 있다.