누구나 설문을 작성하고 누구나 "설문 응답"을 할수있게 만든 플랫폼입니다 이 프로젝트는 리액트를 학습 및 활용을 중점으로 진행하였습니다. https://www.youtube.com/watch?v=eIYpj-SSQIA&ab_channel=1219study

-상세업무- 설문이라는 특성으로인해 설문글에대한 상세 데이터 및 설문을 입력받아 서버 api를 통하여 HTTP 바디 메세지로 json 및 각 데이터를 요청합니다 서버는 간단히 node.js를 기반으로 구현하여 mysql과 연동해 데이터를 관리합니다 클라이언트를 사용하는 고객분들은 홈화면 첫 진입시 DB에있는 데이터를 조회요청하여 설문게시글을 확인할수있고 글의 설문 유효기간이 지나면 설문 종합 결과인 그래프(차트)만 보여주는 형식으로 서비스를 제공하며 유효기간이 지나지 않았으면 설문응답이 가능하도록 구현하였습니다 이렇게 설문의 작성과 설문응답 서비스를 이용할수있고, 제목이나 게시글 고유코드를 이용하여 특정 설문만 조회할수있도록 검색기능을 구현하였습니다

-성과- 이번 프로젝트를 다시금 되돌아보았을 때 프로젝트의 구조 및 컴포넌트 설계 방식을 일관되게 만들지 않았고 리액트라는 라이브러리를 사용하였음에도 불구하고 Hook을 제대로 사용하지 못하였기 때문에 단순 기능 구현은 가능했지만 컴포넌트 단위의 불필요한 리-렌더링을 최적화 하지 못하는 이슈가 발생하였습니다. 이러한 문제를 겪고 나서 기획과 설계 방법을 명확히 정의하는 것이 전체적인 프로그램에서 얼마나 큰 주요 사항 인지 경험하였습니다.

-프로젝트에서 느낀 경험과 부족을 짧게 정리해보았습니다.

◻ 각 컴포넌트의 상속 구조를 잘 설계하여 state를 props로 전달시 상태를 사용하는 컴포넌트들을 수직적으로 분리하여 props drilling을 최소화하는 설계방법이 성능과 유지보수 관점에도 효과적임.

◻ 프로젝트의 규모가 커지거나 전역적으로 사용되는 state가 많아질경우 리액트에서 내부제공하는 context api나 redux 라이브러리를 이용하여 상태관리에대한 부분을 분리해 각 도메인의 역할을 세분화하여 설계.

◻ 리렌더링시 함수 및 상태의 재생성을 관리해주는 useCallback과 useMemo를 활용하여 메모이징한 Hook사용법을 필수로 사용하기. 특히 컴포넌트의 css를 인라인 스타일로 작성하면 리-렌더링시 인라인 css 객체가 매번 참조주소를 바꿔가며 새로 생성되기에 스타일드 컴포넌트나 별도의 css파일을 분리하여 구현.

◻ Map함수를 사용하여 반복적인 인스턴스 컴포넌트를 생성시 React.memo를 통해 props를 중점적으로 메모제이션 관리하기