하루 하나씩 작성하는 TIL #71
내일 외부 튜터님과 이번 프로젝트를 토대로 면접 연습이 있기 때문에 예상 질문과 이에 대한 대답을 작성해 보겠다.
1. 프로젝트 개요 설명
이 프로젝트는 사용자가 약의 정보를 검색하고, 로그인 및 회원가입을 통해 커뮤니티를 통해 소통할 수 있으며 각종 메거진을 확인할 수 있습니다. 또한 복용 중인 약을 등록 및 관리할 수 있습니다. ts와 tailwind css를 사용하여 프론트엔드를 구현하고, 수파베이스로 백엔드를 구현하여 db관리와 실시간 데이터 동기화를 처리했습니다.
2. 프로젝트를 진행하며 가장 어려웠던 점
복약을 정해둔 시간에 복용할 수 있도록 하기 위하여 복약 알람 기능을 넣으려고 했지만, web push자체 문제와 파일 구조상의 이유로 구현이 어려운 문제가 있어서 mvp 이후로 넘겨두었습니다.
3. 리액트 훅 사용 경험
useState와 useEffect를 사용하였습니다. 약 목록을 관리하기 위해 useState를 사용하여 약 데이터를 상태로 저장하였고, api 호출을 통해 약 데이터를 가져오는 작업은 useEffect를 사용하여 컴포넌트가 렌더링 될 때 한 번만 실행되도록 하였습니다.
4. 컴포넌트 분리 이유
기능별로 나누었습니다. 약정보 수정 모달은 메디에디트 모달, 약 정보를 추가하는 모달은 에드 메디 모달과 같이 나누었습니다. 위와 같이 분리 시 컴포넌트가 하나의 명확한 기능을 가지게 되어 재사용성과 유지보수성이 높아집니다.
5. API 호출 관리
Axios를 사용하여 관리하였습니다. 약 정보를 가져오기 위해 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 Axios api를 호출하고 ,데이터를 가져와 상태에 저장하였습니다. 이렇게 하면 api 호출과 상태 관리를 분리하여 코드의 유지보수성을 높일 수 있습니다.
6. 테일윈드 사용 이유
빠르게 스타일링을 할 수 있으며 인라인 코드로 직관적이고 생산성이 높습니다.
7. 프로젝트 상태 관리
대부분 컴포넌트 단위로 나누어져있어 상태관리가 용이하였으나 약 목록을 관리하는 상태는 useState를 사용하여 로컬 상태로 관리하고, 약 정보를 추가하거나 삭제할 때 마다 상태를 업데이트 했습니다.
8. 컴포넌트의 상태를 초기화하는 방법은 무엇인가요?
상태 초기화는 useState 훅을 사용하여 이루어집니다. 예를 들어, 약 정보를 추가하는 모달을 닫을 때 입력된 값을 초기화하기 위해 상태를 빈 문자열이나 기본 값으로 설정합니다. useEffect 훅을 사용하여 컴포넌트가 언마운트될 때 상태를 초기화할 수도 있습니다.
9. Prop Drilling을 어떻게 해결했나요?
Prop Drilling은 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정에서 발생할 수 있는 문제입니다.
이를 해결하기 위해 Context API를 사용하여 글로벌 상태를 관리하거나, 필요한 경우 상태 관리 라이브러리인 Redux를 사용할 수 있습니다.
이 프로젝트에서는 Context API를 사용하여 사용자 인증 정보를 전역에서 관리했습니다.
10. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 차이점은 무엇인가요?
SSR은 서버에서 페이지를 렌더링한 후 클라이언트로 전송하는 방식이고, CSR은 클라이언트에서 페이지를 렌더링하는 방식입니다. SSR은 초기 로딩 속도가 빠르고 SEO에 유리하지만, 서버 부하가 증가할 수 있습니다. CSR은 서버 부하가 적고, 클라이언트 상호작용이 더 원활하지만 초기 로딩 속도가 느릴 수 있습니다. 이 프로젝트에서는 주로 CSR을 사용했습니다.
