React: CRA 폴더 구조, 컴포넌트 설계 및 분리, state, props, map 등의 이해
함수의 재사용, utils성 함수 만들기
mock data 설계와 분리
1. CRA 폴더 구조 설계 Tips
폴더구조에 대한 정답은 없음! 오로지 써보고 느껴보는 것이 중요하다!
써보면서 나만의 스타일을 구축해야 한다. 하지만 그러려면 다른 사람의 코드를 많이 봐야 함! (역시 레퍼런스를 많이 보는 것이 중요! )
가장 좋은 것: 오픈 소스나 유명한 스타트업이 공개하는 레포지토리를 참고하면서 최대한 다양한 폴더 구조를 써보고 자신에게 잘 맞는 폴더구조를 찾아보기!
여기서 제일 중요한 건, 내 것만을 고수하지 않기! "내가 다 써봤는데~ 이게 제일 좋더라!"하면서 팀에 무조건 이 방식으로 하자!라고 주장하기보다는 이 방식으로 써봤는데 뭐뭐뭐가 좋고, 뭐가 아쉬웠다 이런 얘기를 하면서 팀 별 합의점을 잘 도출해보자!
2. 첫번째 기업 과제에 대한 리뷰 하기 전에...
2.1 페어 프로그래밍
페어를 해보면 분명히 잘하는 사람과 못 하는 사람이 갈리기 마련! 그럴 때 잘하는 사람은 입 밖으로 많이 꺼내어 페어에게 정보를 전달하려고 노력해야 한다!
아는 내용에 대해 설명을 하다 보면 본인이 이해 안 가는 부분이 있거나 말하다가 얼버무리게 되는 경우가 있는데, 딱 그렇게 되는 부분을 공부해야 한다! 내가 잘 모르거나 확신이 없기 때문에 그러게 되는 건데 그럴 때일수록 공부를 더 해서 많이 말하려고 노력하기! 그런 연습이 쌓여서 면접 합격을 만든다,,!
2.2 README 작성 추가적인 Tips
캡쳐나 영상 README 파일에 기능 관련 캡처나 영상을 넣기 위해 소스코드에 추가하면 안 된다! 프로젝트 코드에는 오로지 소스코드만 있어야 함! 캡처랑 영상은 드라이브에 넣어서 링크로 기재하거나 해야 함! → 나 같은 경우는 issue 탭을 활용하여 업로드 한다! 🔗 issue 탭 활용하여 이미지 업로드 하는 방법
폴더구조에 대한 설명 단순히 폴더가 무엇무엇이 있는지에 대해 나열하는 건 지양하자! 이 프로젝트 코드를 딱 처음 보는 사람이 이 폴더 구조에 대해 이해할 수 있도록 설명을 해줘야 한다! 예를 들면, 누구나 다 알만한 내용을 설명해주는 것이 아닌 큼직큼직한 거 위주로 한눈에 파악할 수 있게 구조를 설명해주자! 또한 옵션이기 때문에 자신이 없다면 쓰지 않아도 무방하다! (우리 조는 잘 쓴 듯 😊)
3. 코드 리뷰 핵심 Points
3.1 다시는 HTML을 무시하지 마라.
드립 출처: 신화 앤디
HTML 구조도 잘 짜자..! 라고 말씀하시면서 보여주신 코드가 우리 조 코드였다..^^;;(머쓱ㅎ) 그 당시 나와 성상님(농담곰 혹은 수박수)의 실시간 DM
<div> 남발해도 무방하나! 필요 없는 <div>는 쓰지 말자! 우리가 태그를 넣는 이유는 구조 잡기와 스타일 잡기 위해서인데 굳이 구조나 스타일링에 필요하지 않은 태그를 넣는 것은 지양해야 함! → 그때 마크업을 내가 했는데... 약간 <div> 남발의 의도는 아니고, 그래도 어쨌든 카드를 하나 만들어야 하니까? <div>로 묶어준 거였는데 생각해보니 <li>가 있기 때문에 전혀 하지 않아도 됐었던 것..! 생각해보니 나와 성상님이 다른 거에는 엄청 신경 써놓고 정작 마크업은 다시 한번 돌아보지를 않았다..!(반성ㅠ 위에서 앤디가 하는 말.. 그거 사실 나한테 하는 말임 ㅠ)
또 우리 코드에 대한 리뷰로는 전반적으로 코드 잘 짰다고 하셨다!😊👍 근데 위의 코드를 보면 한 파일에 두 개의 컴포넌트를 작성하였는데, 물론 이게 깔끔해서 이렇게 쓰는 회사도 있기 때문에 틀린 건 아니지만! 보통 회사에서는 컴포넌트 한 파일에 하나씩 넣는 게 대부분이라고 한다! 보통 이 CommentItem이 물론 여기저기서 쓰지만 CommentList말고는 아예 더 이상 쓰는 데가 없기 때문에 이렇게 짜는 경우 오히려 파일 구조만 더 복잡해진다고 함!
3.2 CSS 공부는 필수!
프론트엔드를 하기로 마음먹은 이상 CSS 공부는 필수! 즉, 프론트엔드 - UI 화면 스타일링 = 0이라는 뜻... 혹시라도 그게 너무 싫고 JavaScript만 집중적으로 하고 싶다면 Node 개발자를 고려해야 한다!
display: flex! 는 너무 많이 남발하지 말자! 충분히 flex를 쓰지 않고도 할 수 있는 경우에는 flex를 남발하는 것은 그다지 좋지 않다!
padding을 잘 사용하자! 잘못 사용하면 내 컴퓨터에서는 내가 원하는 대로 잘 보이지만 다른 사람 컴퓨터에서는 절대 그렇게 보이지 않는다!
height 아무데나 주지 말자! 모든 요소의 높이는 자식에 의해서 결정되는 것이기 때문에 height를 주게 되는데, 부모 컴포넌트에 높이를 줘버리면 자식의 콘텐츠가 잘려 보이는 경우가 있기 때문에 주지 말자, height: auto 주는 경우도 있는데 굳이 안 줘도 됨!
3.3 Styled Components의 치명적인 단점!
오염되기 쉽다! 이 경우는 styled-components를 혼자 쓸 때 발생하는 문제는 아니고! 다른 CSS Framework을 함께 사용하는 경우에 발생하는데, 다른 쪽 컴포넌트에서 모르고 styled-components 사용 없이 동일한 클래스네임으로 스타일을 정의하게 된다면 스타일이 오염될 수 있다는 것! → 이 사실은 처음 알았다. 항상 styled-components를 단독적으로 사용했었어서 이런 경우에 대해서는 아예 듣도보도 못했었는데, 만약 두 가지를 같이 쓰게 되는 경우에 꼭 명심해야겠다!
3.4 유지보수하기 쉬운 코드
우리 코드 또 나왔다 헤헤 위에 거!
상수를 따로 관리해놓으면 유지 보수하기 편하다!
상수는 무조건 대문자로 네이밍하고, 단어끼리 연결할 때는 언더바(_)로 연결!
멘토님 왈: 이 정도는 기본적으로 했었어야 했다! (뿌듯)
API 주소를 저장할 때 보통 BASE_URL이라고 많이 명명하는데, 이때 BASE_URL은 딱 .com 혹은 .co.kr 까지의 주소를 말하고, 그 이후의 엔드 포인트는 사용하는 측에서 뒤에 추가되어야 하는 주소를 더해주는 식으로 개발을 많이 한다!
⚠️ 주의! 컴포넌트 내부에서 상수를 선언하는 경우가 있는데 이렇게 하면 안되고, 상수는 상수 파일을 따로 빼서 관리해야 한다. (이럴 때 utils 폴더를 사용하게 되는 것! 아래 5번 내용 참고) 컴포넌트에는 딱 컴포넌트에서만 쓰는 데이터나 state, props로 관리하는 것들! 즉 해당 컴포넌트 내부에서 계속 변하는 것들만 넣어놔야 한다!
지원되지 않은 브라우저까지 지원하기 위해 polyfill을 구현했어야 한다! → 이건 좀 확! 아쉬웠던 게 안 그래도 작업하다가 내가 성상님한테 우리 시간 남으면 polyfill까지 구현하자고 했고! 실제로도 작업이 일찍 끝나서 시간이 여유로웠었는데, IE에서만 지원 불가이고 모던 브라우저에서는 다 지원을 하길래, 어차피 곧 지원 종료되는 IE..(흐린눈(먼산)) 이러면서 그냥 안 했던 것이다 ㅎ... 근데 따져보면 더 이상의 지원을 하지 않겠다는 의미이지 지금 있는 브라우저가 아예 사용 불가인 것은 아니니 앞으로 그래도 5년 간은 IE를 신경 쓰는 것으로....😅
더 이상 데이터 없을 때의 처리
마지막 데이터까지 로딩됐을 때의 처리를 했어야 했다! (이것도 우리는 했다! 😊 야호!)
5. Utils성 함수
📁 utils 폴더 : 어디에 특정한 데에 한번 쓰고 마는 게 아니라 의존성 없이 공통적으로 자주 사용되는 로직을 모아놓은 폴더
utils성 함수 활용 능력은 주니어와 미들레벨의 차이를 결정짓는다.
주니어는 라이브러리를 잘 써야 한다! 남의 코드를 보고 분석을 잘해야 한다. 남의 코드를 보고 바로 이해하는 것이 중요하다! → 그러려면 많이 읽어야 하지...
미들레벨은 내가 만든 코드를 남이 잘 쓰도록 노력해야 한다!
utils성 함수의 분리 기준: 컴포넌트에서 두번 반복되는 경우 무조건 분리!
이번 세션도 역시나 너무너무 유익했는데, 우리 코드가 좀 여러 번 언급되어서 이번에는 녹화본을 다시 보면서 필기를 제대로 해보았다! (자기애 강한 편..^^ㅎ) 사실 과제하면서 바쁘지만 세션 회고를 밀리지 않으려고 노력하는 이유는 이렇게 정리해놓으면 나중에 기억이 가물가물해질 때 다시 한 번씩 보면서 되새길 수 있어서인 거 같다! 앞으로도 더 더 열심히 쓸 것인데...(과연...?)... 사실 오늘 목표는 1주차 회고까지 쓰는 거였는데, 오늘 그거까지 쓰려면 운동을 못할 거 같기 때문에 오늘은 일단 여기까지! 내일 세 번째 세션 시작 전까지 올리려고 노력해봐야겠다! 우리 팀원 분들이 내 블로그 열심히 잘 봐주고 계셔서 완전 동기부여 만땅!💪 게다가 블로그 쓰는 거 너무 재밌다.... 완전 맛들려 버림...
