코멘토 실무PT 후기 챌린지_리액트 강의 1주차 후기

부트캠프를 통해 프로젝트를 경험했지만, 더 나은 코드를 위해 고민하는 시간이 길었습니다.

폴더 구조를 어떻게 나누면 좋을지, 클린 코드는 어떻게 짜면 될지 이 해답을 위해서 다른 분들의 레파지토리를 참고하기도 했습니다. 

그리고 제가 짠 코드를 리뷰를 받고 싶은 마음에 코멘토 실무PT를 신청했습니다. 

 

진행은 현직 프론트엔드 개발자 멘토님이 준비한 내용을 수업 형식으로 듣고 과제를 하고 제출한 뒤 피드백을 받는 식으로 진행됩니다. 

 

기간은 총 4주로 4번의 강의와 3번의 과제로 진행됩니다. 

 

✔️ 1주차 실무 PT 주제

React로 기획의도 맞는 기능 구현하기

 

✔️ 이번 주 수업을 통해서 배운 점

✦ 개발 플로우

1. 기획 문서 작성 👉 화면설계서, 플로우차트 (시스템 흐름도), 프로세스 정의서
2. 디자인 문서 작성 👉 퍼블리싱 파일, 제플린, 디자인 파일
3. 개발 문서 👉 기능정의서, UML, API 명세서
4. QA 👉 테스트 시나리오

 

✦ 컴포넌트 분리 방법(UI 분석하기)

 

컴포넌트를 잘 분리하는 이유는 가독성과 유지 보수성을 높이기 위해서이다!

 

1. 페이지 구분하기 👉 회사나 개발자마다 다르지만 페이지 수만큼 디렉토리를 설정한다.
2. 최소 기능 단위 찾기 👉 페이지를 최소 기능 단위로 쪼개서 jsx 또는 tsx 파일을 만든다. 
3. 폴더 구조 생성하기 

 

✦ 리액트

 

오직 사용자에게 view를 어떻게 하면 더 효율적으로 보여줄 수 있을지에서 시작한 라이브러리이다. 

👉 리액트는 오직 DOM 객체의 생성과 이벤트 응답에만 관심이 쏠려있다. 

 

장점

1. virtual DOM 사용으로 인해 속도가 빠르다. 
2. 웹, 앱 모두 개발 가능하다. 
3. 넷플릭스, 에어비엔비 등 많이 사용해서 다양한 라이브러리가 있고, 질문과 답변이 활발하다. 

핵심

1. virtual DOM(가상돔) 👉 화면의 변화를 반영한 후 한 번만 DOM 트리를 수정해서 브라우저의 불필요한 렌더링을 줄일 수 있다. 
2. 컴포넌트 구조 👉 작은 단위로 만들어서 조립하듯이 개발해서 재사용성이 좋다. 
3. 단방향 데이터 흐름 👉 부모와 자식 컴포넌트 간 데이터를 전달할 때 부모에서 자식으로만 데이터 전달이 가능하다. (Props drilling 문제가 발생할 수 있다. 상태 관리 라이브러리가 나온 이유)

 

✔️ 수업 후

이번 주 과제는 디자인 문서를 가지고 요구사항 정의서를 작성하고 컴포넌트를 잘 나눠서 폴더 구조를 짜는 과제가 주어졌습니다. 

 

수업듣고 고심해서 짠 프로젝트 폴더 구조

그 동안 진행했던 프로젝트는 디자인 문서가 없었기 때문에 폴더 구조도 미리 잡아놓기 어려웠는데 이번에는 미리 폴더 구조를 생각해보면서 현업에서는 이런식으로 개발이 진행되는구나 알게 되었습니다. (물론 많이 다르겠지만 ㅎㅎ)

 

짧은 기간동안 진행되는 만큼 집중해서 많이 얻어가는게 목표!!

 

 

 

후기를 쓰면 환급도 해줍니다! 😀

 

 

https://bit.ly/3D9XCOz

성과를 만드는 현직자의 실무 노하우 ㅣ 코멘토