개발자
개인 프로젝트 피드백 부탁드립니다!! (Next.js + firebase)
안녕하세요! 휴학 중에 개인 프로젝트 한번 만들어봤습니다! 아직 감이 잘 안 잡히다보니 chatGPT에 꽤나 의존했던 것 같습니다. 폴더 구조와 ssr, csr 사용 부분에서 피드백을 받고자 합니다! 또, containers 폴더 안 create 폴더에 있는 RouteChangeListener.tsx를 사용하여 퀴즈를 만들거나 푸는 도중에 현재 페이지를 벗어나려는 움직임을 감지하면 alert 창이 나오도록 설정하였습니다. 제가 생각해봤을 때 페이지가 이동했다가 다시 돌아오는 부분이 비효율적이라고 생각이 들어서 미들웨어나 다른 방법을 통해 해결할 수 있는지 여쭤보고 싶습니다. 감사합니다! 프로젝트 설명 : 퀴즈를 만들고 풀 수 있는 웹페이지 만들어봤습니다! vercel로 배포하였고, PWA 사용하여 모바일에서도 다운로드 가능하게 했습니다! 웹 앱 둘다 가능하지만 웹으로 봐주시는 것을 권장드립니다~!! 프로젝트 기술 스택: Next.js, react-query, zustand, firebase 테스트 아이디: 123@naver.com 테스트 비밀번호: 123123 GitHub 주소 : https://github.com/kmj0973/donquiz Vercel 배포 주소 : https://donquiz.vercel.app/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 11월 12일
프로젝트를 열심히 진행해주셨군요. 일단 제가 확인한 한으로 프로젝트가 전반적으로 잘 구성되어 있습니다. 1. SSR과 CSR 사용 부분: Next.js는 기본적으로 모든 페이지에 대해 서버사이드 렌더링을 수행합니다. 이를 위해 `getServerSideProps`나 `getInitialProps`라는 메서드를 사용할 수 있습니다. 하지만, 모든 페이지에서 SSR이 필요한 것은 아니므로, CSR이 필요한 경우 해당 컴포넌트에서 데이터를 가져오도록 코딩할 수 있습니다. 2. 폴더 구조: 대형 프로젝트에서 폴더 구조는 매우 중요합니다. 폴더 및 파일 네이밍은 일관성 있게 유지하는 것이 좋습니다. 또한 관련 파일들을 그룹화하여 모아두면 추후에 찾기 쉽고 유지보수도 용이해집니다. 본인의 프로젝트에 가장 적합한 구조와 패턴을 선택하셔야 합니다. 3. RouteChangeListener.tsx: 현재 방식도 나쁘지 않으나, React Router의 Prompt 컴포넌트를 이용해서도 이러한 문제를 해결할 수 있습니다. 동작 방식은 비슷하지만, Prompt 컴포넌트는 특정 조건에서만 사용자에게 경고를 띄우기 때문에 좀 더 유연하게 활용이 가능합니다. 4. 코드 품질: 전반적으로 코드가 깔끔하게 잘 작성되어 있습니다. 하지만 좀 더 보기 좋은 코드를 위해서는 Prettier나 ESLint 같은 도구를 이용한 코드 서식 지정을 고려해보시면 좋겠습니다. 전반적으로 잘 만들어진 프로젝트라고 생각됩니다. 다음에는 테스팅과 CI/CD 파이프라인 구축 등에 도전해보세요. 분명 큰 성장을 이룰 수 있을 것입니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!