2023.12.23

주말알바 퇴근 후 저녁..

멋사 운영진 선발전에서 다른 사람들이 작성한 코드를 살펴보았다.

아래는 다른 사람들이 쓴 코드를 읽으며 메모한 내용이다. 

• 페이지의 중심이 되는 MainPage.js에는 Header, Main, Item의 세 컴포넌트만 배치
  • 훨씬 깔끔하고 보기 좋은 코드라고 생각한다. 
• 여러 아이콘을 배치해야 하는 경우 배열에 담아 map 함수 사용
  • 마찬가지로 가독성이 좋다. 
• month의 경우 배열로 이름을 저장
  • 이전 달, 다음 달로 이동할 때의 연산이 용이해진다.
• aria-label 속성 사용
  • aria-label은 시각적인 요소들을 대신한다. 모든 태그에서 사용될 수 있다. 
  • 예를 들어, 우리는 웹 페이지의 네비게이션 바를 시각적으로 인식하고 사용한다. 하지만 비시각적으로 '이것이 네비게이션 바 입니다' 하고 명시해주는 것이 aria-label 이다. 
• 커스텀 훅 사용
  • 자주 사용되는 로직의 경우 커스텀 훅을 활용하여 가독성을 높일 수 있다. 
• useEffect 외부에서 함수 작성하기
  • 본인의 경우 useEffect 내부에서 함수를 선언하고 사용하였다. 하지만 useEffect 외부에서 함수를 선언하고 내부에서 사용하면서 더 가독성이 좋은 코드를 작성할 수 있다. 
• API의 경우 디렉토리에 구분하여 저장
  • 매번 함수를 작성하지 않고 API 디렉토리에서 import 하면서 중복된 코드 작성을 방지한다. 
• public 디렉토리의 활용
  • 정적인 이미지나 아이콘 등의 파일들은 public 디렉토리에 저장하여 파일을 효과적으로 관리할 수 있다. 
• 주석의 활용
  • 너무나 당연한 이야기지만.. 너무나 당연해서 잊고있었나보다. 

 

머리로 아는 것과 직접 코드를 작성하는 것은 다르다. 

이때까지 여러 개발자 커뮤니티에서 글을 읽으며 머리로는 알았지만 직접 하려니 쉽지 않았다. 

내 문제는 직접 코드를 작성하지 않는 것이다. 

개발하지 않는 개발자라니, 이게 무슨 말이 되는 소린가;;;;

이제라도 본인 문제를 깨달았으니 실천에 옮겨야겠다. 

---