개발자
안녕하세요! 경험 삼아 공모전에 제출한 개인 프로젝트입니다! 서울시 공공 데이터를 활용한 프로젝트로 근처 헬스장 및 공공체육시설을 찾을 수 있고, chat gpt api를 연동하여 식단을 만들고, ai챗봇을 통해 운동에 대한 피드백을 받을 수 있습니다. 여러모로 부족한 부분이 많이 있지만 4주라는 기간 동안 열심히 만들어 봤습니다! 기술 스택: 프론트엔드: Next.js, TypeScript, Tailwind CSS 데이터베이스: Firebase 보여주고 싶은 기능: 가장 맨 위 카드란에 있는 (해, 달)이미지를 누를 시 아침, 점심, 저녁에 맞는 식단이 나옵니다! PWA를 사용하여 웹앱으로 동작할 수 있게 하였습니다. 피드백 요청: 폴더 구조나 코드 품질에 대한 조언도 해주시면 감사하겠습니다! 성능 최적화 부분에 대해서 조언을 주시면 감사하겠습니다! 버그나 에러 처리에 대해 문제가 있다면 알려주세요! 테스트 아이디 : test@naver.com 테스트 비밀번호 : 123123 사이트 링크 : https://nadaum.vercel.app GitHub 링크 : https://github.com/kmj0973/nadaum 봐주셔서 감사합니다!!
답변 2
중요할 부분 몇 가지만 보았고, 거기에 피드백 드립니다. - 인증 jwt의 역할은 계정 검증일텐데요. api에 토큰을 실어 보내는 처리가 없기 때문에 뭔가 별도의 방법이 있으면 좋을 것 같네요. 발부받은 받은 토큰이 유효한 지 히트해서 계정을 검증하고 유효하다면 컨텐츠 보호를 해제한다... 프론트엔드 관점에선 이게 라우트 프로텍트 개념이니까요. 파이어베이스에서 내주는 id token을 사용해서 계정을 검증할 수 있는 방법이 있다면 넣으면 좋겠네요. 검색해보니 가능한 것 같습니다. - 토큰 http only, secure 속성을 쓰고 있어서 토큰의 value가 변경될 염려는 없어서 문자열 타입으로만 확인하는 걸로 보았는데요. 보통 토큰의 체크는 max-age나 expires를 같이 들여다봅니다. 디코딩이 필요하겠죠. 이건 토큰을 설정할 때에도 동일한데, 서버에서 발부해 준 토큰의 exp를 그대로 넣어주어야 합니다. - 스토어 계정 정보의 일부를 사용자의 로컬에 저장해두고 이를 이용하여 뷰를 제어하는 부분이 있습니다. 그런데 클리닝하는 로직이 없기 때문에 동일 기기에서 복수 이상의 계정이 사용된다면 잘못된 정보가 노출될 수 있을 겁니다. 보통 스토어를 사용할 때 누락되기 쉬운데, 메모리나 스토리지에 붙잡아 둔 정보를 시의적절하게 비워주어야 합니다. - 컴포넌트와 로직의 커플링 클라이언트 컴포넌트를 메인으로 사용하고 있으니 hook에서 api 요청을 담당하고, 래핑 컴포넌트에서 hook을 불러 써서 그 데이터를 view 컴포넌트에 내려주는 방식이 좀 더 나을 수 있습니다. container - presentation 패턴을 쓰는 것이죠. 이렇게 하다보면 전역에서 공유할 수 있는 컴포넌트나 로직이 나올 수 있는데, 그럼 차차 api 인터페이스를 정의하거나 hook이 계층화하거나 컴포넌트가 의존성을 주입받기 좋은 상태로 바뀔 것 같네요.
kmj0973
작성자
한성대 컴공 • 7월 4일
자세한 피드백 너무 감사드립니다!! 확인을 바로 하지 못했네요 ㅠㅠ 선생님 덕분에 앞으로 좀 더 체계적이고 구조적인 프로젝트 만들 수 있을 것 같습니다! 감사합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
6월 9일
첫 번째로, 프로젝트의 아이디어와 실행력을 칭찬하고 싶습니다. 공공 데이터를 활용하여 사용자에게 유익한 정보를 제공하는 사이트를 만드는 것은 쉬운 일이 아니며, 이를 위해 필요한 기술 스택을 자유롭게 조합하고 응용한 것은 훌륭합니다. - 코드 품질과 폴더 구조: GitHub에서 코드를 직접 보진 못했지만, 일반적으로 모든 컴포넌트와 기능들이 작게 나누어져 있어야 하며, 주석으로 각 컴포넌트나 함수가 어떤 역할을 하는지 명확히 작성하는 것이 좋습니다. - 성능 최적화: Next.js는 서버사이드 렌더링(SSR)을 지원하기 때문에 초기 로딩 시간을 줄일 수 있습니다. 따라서 가능한 한 SSR을 이용하여 페이지를 미리 생성하는 방향으로 생각해보시면 좋겠습니다. 별도로 이미지 최적화도 중요합니다. 가장 큰 파일들 중 하나인 이미지 파일들은 사용자 경험에 큰 영향을 미칩니다. 따라서 가능한 이미지 사이즈를 줄여보거나 Lazy Loading을 적용해보시는 것도 좋습니다. - 버그나 에러 처리: 더 로버스트한 에러 핸들링은 사용자 경험을 크게 향상시킬 수 있습니다. 예를 들어, 서버에서 오류가 발생했을 때 이를 사용자에게 알리고 대응하는 방식 등이 있습니다. 보시면서 도움이 되셨으면 좋겠습니다. 프로젝트에 대한 열정과 실행력은 매우 인상적입니다. 계속해서 좋은 작업을 이어가기 바랍니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!