[동아리 소개 페이지 만들기] 7. 클린코드와 코드 리팩토링 적용하기

제각각 여러 기능을 추가하다 보니 코드가 너무 제각각이었다. 처음엔 클린코드였을지라도 기능을 하나하나 추가하는 과정에서 금방 난잡해졌다. 따라서 회의를 통해 현재 코드의 구조를 하나하나 뜯어보고 코드 리팩토링을 적용하려고 한다.

 

 

1. 파일 분리하기

https://ko.legacy.reactjs.org/docs/faq-structure.html

파일 구조 – React

 

공식 문서를 참고하였다. 공식문서에서 5분 이상 고민하지말고 편한대로 나누라고 써있다.

2. 함수의 기능, 추상화 단계 명확히 하기

토스의 SLASH 21의 프론트엔드 진유림님의 React 클린 코드 강의를 참고하였다. 너무 감사합니다.

https://wondrous-developer.tistory.com/200

[React] React에서 클린코드 구현하기

 

3. CSS정리하기

https://erwinousy.medium.com/css-%EA%B0%9C%EC%84%A0%EC%9D%84-%EC%9C%84%ED%95%9C-10%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-9923b106661c

CSS 개선을 위한 10가지 방법

선배에게 CSS에 대한 조언을 듣던 중 태일윈드 CSS라는 것을 추천받았다... 이것도 적용해 바꾸고 싶다.