아이언트레인 프론트엔드 과제

📆 프로젝트 기간

2024.05.31 ~ 2024.06.05

❗️ 참고

❗️.env파일을 일부로 .gitignore로 관리 안하는 이유는 보여드리기 위함입니다.
❗️상세페이지에서 댓글을 작성하셔야 동일 사용자가 수정 또는 삭제를 할 수 있습니다.
❗️헤더우측아이콘을 누르시면 리스트/카드 형식으로 변경됩니다.
❗️똑같은 사용자를 검증하려고 UUIDv1을 사용했습니다.
❗️좋아요기능을 로컬스토리지에 저장하도록 구현했습니다.
(간단한 정보여서 로컬스토리지를 이용했습니다. 만약민감한 정보였다면 쿠키혹은 서버 측 세션을 이용하는게 좋다고 알고있습니다.)

📑 설명

회원가입이 필요 없는 익명 카메라 리뷰 게시판을 구현하였습니다.

🏞️ 페이지 사진

로그인/회원가입	메인 페이지

👨🏻‍💻 기술스택

• 프론트엔드(라이브러리 및 언어): React, TypeScript
• 번들러: Vite
• 스타일링: TailWindCSS
• 기타 도구: UUID, Mock Data, Postman

🗓️ 일지

• 1일차[5/31~6/1] 프로젝트생성 및 초기세팅 포스트맨을 활용하여 목데이터 통신 확인 목데이터 구성 및 목서버구성 중복코드 삭제 상세페이지 추가

• 2일차 [6/2] README.md 초안작성

• 3일차 [6/3] UUIDv1으로 사용자인증과정 설계 리뷰(댓글)기능생성

• 4일차 [6/4] 별점기능 수정 및 개선 상세페이지 뒤로가기 버튼 생성 스타일 수정

• 5일차 [6/5] 좋아요기능 수정 필터 및 정렬기능 수정 README.md 완성 디자인 수정 및 퍼블리싱

📝 회고

주요 경험 및 배운 점

이번 구현과제를 통해 UUID를 활용한 고유 식별자 생성, Mock Data를 이용한 데이터 처리, 그리고 Postman을 활용한 API 통신 확인 등 여러 새로운 기술을 배우고 적용할 수 있었습니다. 러닝 커브가 조금 있었지만, 새로운 것을 배우는 과정이 매우 흥미로웠습니다.

좋았던 점

• 새로운 기술 습득: 처음 접하는 기술들을 배우고 실제로 구현해보는 과정이 매우 즐거웠습니다.
• Mock Data 활용: 실제 데이터 대신 Mock Data를 사용하여 통신을 테스트하고, Postman을 통해 이를 확인하는 과정이 유익했습니다.

아쉬운 점

• 스타일링 부족: 기능 구현에 집중하다 보니 스타일링에 상대적으로 신경을 못 쓴거 같습니다.
• 사용자 인증 구현의 어려움: 회원가입 없이 사용자 인증을 구현하는 과정에서 어떻게 하면 좋을지 어려움을 겪었습니다.

향후 개선 사항

• 스타일링 개선: TailWindCSS를 활용하여 더 세련되고 사용자 친화적인 UI/UX를 구현할 계획입니다.
• 인증 시스템 개선: 사용자 인증 부분을 더 보완하여 보안성과 편의성을 높일 방법을 모색할 것입니다.
• 퍼포먼스 최적화: Vite의 장점을 더욱 활용하여 페이지 로딩 속도를 개선하고, 코드 스플리팅 등을 통해 성능을 최적화할 계획입니다.

결론

이번 구현과제는 새로운 기술을 배우고 적용하는 좋은 기회였으며, 여러 도전 과제를 통해 많은 것을 배웠습니다. 앞으로의 프로젝트에서도 이번 경험을 바탕으로 더 나은 결과물을 만들어낼 수 있도록 노력하고싶습니다.