개발자

웹사이트 프로젝트 피드백 주시면 감사하겠습니다!..

2024년 07월 05일조회 191

안녕하세요! 저는 현재 대학교 3학년 마치고 휴학 중인 코린이입니다.... 제가 실력이 너무 부족한 느낌이라서 혼자 프로젝트를 진행해도 이게 맞는 코드인지 잘 모르겠네여 ㅠㅠ.. 코드는 client쪽만 봐주시면 됩니당! 따끔한 피드백 부탁드립니다! 감사합니다 반응형이 아니라서 ㅠㅠ 웹으로 봐주셔야합니다~ 기술 스택 : nextjs, typescript, react-query 사이트 주소 : https://bestanimals.vercel.app/ 깃허브 주소 : https://github.com/kmj0973/bestanimals

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

문정동개발자님의 프로필 사진

사이트는 버그없이 잘 만들어진 것 같습니다! 디자이너분 구해서 디자인만 하시면 훨씬 있어보일 것 같긴 하네요! 코드적으로는 우선 루트에 layout과 page중에서 metadata를 layout에서 처리하고 나머지부분을 page에서 처리하는게 좋을 것 같습니다. 그리고 루트의 layout부터 use client를 선언하면서 앱 전체를 클라이언트 컴포넌트로 만드셨던데 next.js를 쓰는 의미가 많이 퇴색된다고 생각합니다. 서버컴포넌트로 최대한 구현해보시면 더좋을 것 같아요. 참고로 사용하신 styled component같은 css in js는 서버컴포넌트에서 사용 불가능합니다. https://shiwoo.dev/posts/next-13-and-css-in-js 좋은 글이 있으니 한번 배워보시고 css-module이나 tailwind를 사용하시는것을 추천드립니다. 그리고 사실 react-query도 기술을 사용했다 정도이지 굳이 사용하지 않아도 됐을 것같다는 생각이 드네요 오히려 이 프로젝트 같은 경우에는 전부 서버컴포넌트로도 만들 수 있었을 것 같아요 그래도 하나의 프로젝트를 완성하시느라 고생 많으셨습니다. 앞으로도 지금처럼 하시면 좋은 결과 있을 것 같습니다!

kmj0973님의 프로필 사진

kmj0973

작성자

한성대 컴공2024년 07월 05일

헉 피드백 너무 감사드립니다! 사실 로그인, 게시판 기능을 추가로 만들어서 react-query를 활용해보려 했는데 조금 막막해서.. 연습용으로 사용해봤습니다! 말씀해주신 부분들 반영해보겠습니다! 감사합니다ㅎㅎ

문정동개발자님의 프로필 사진

문정동개발자

프론트엔드2024년 07월 05일

네 기술스택 자체는 너무 좋아보입니다! Next.js / react-query / zustand / tailwind 이렇게 공부하시면 가장 안정적으로 많은 스타트업이 원하는 기술스택 확보하실 수 있을거에요! 그리고 코딩하시면서 저 기술들이 왜 나오게됐는지를 아는것도 중요한데 이론적으로 외우는것보다는 저런 기술 없이 만들어보시고 불편함을 직접 느끼시고 다시 마이그레이션 하시면 시간은 오래걸리고 번거롭겠지만 훨씬 더 본인것으로 만드실 수 있을거에요!

신정원님의 프로필 사진

안녕하세요 :) 우연히 올려주신 질문글 보고, 같이 프로젝트 진행하면 좋을 것 같아 합류 제안드려요~! 열정의 기운이 느껴집니다🫢 아래 본 서비스 내 모집글을 작성하였는데, 궁금한 점 있으시거나 합류 원하신다면 오픈 채팅방으로 연락 부탁드려요 🙌🏻 https://careerly.co.kr/qnas/8727?utm_campaign=user-share 감사합니다 :D

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 07월 05일

코드를 보면 많은 노력을 기울였음이 느껴지며 전반적으로 잘 작성하셨습니다. 몇 가지 피드백 드립니다: 1. 반복적이고 유사한 로직은 공통 함수나 컴포넌트로 분리하여 재사용하면 코드 가독성이 높아집니다. 예: https://github.com/kmj0973/bestanimals/blob/main/components/CatList.tsx와 https://github.com/kmj0973/bestanimals/blob/main/components/DogList.tsx는 매우 유사합니다, 이를 하나의 컴포넌트로 만들어 사용하는 것은 어떨까요? 2. `react-query`의 활용 좋았습니다. Cache time과 stale time 설정도 적절한 값으로 설정해보시면 성능 개선에 도움이 됩니다. 3. 에러 처리 시 사용자에게 공개되어야 할 정보만 출력하는 것이 보안에 좋습니다. 4. 기능별, 컴포넌트별로 디렉터리를 나누는 것도 코드 구조를 이해하는 데 도움이 됩니다. 5. TypeScript를 사용한다면 any 타입 보다는 정확한 타입을 명시해주는 것이 좋습니다. 6. 주석을 통해 로직을 설명하는 건 좋지만, Over Commenting은 오히려 혼동을 줄 수 있습니다. Code Self Documenting에 신경쓰시면 좋을 것 같습니다. 위 피드백은 코드 퀄리티를 향상시키는 데 도움이 될 것입니다. 항상, 코드 작성 후 리팩토링하는 습관도 중요합니다. 계속해서 프로젝트에 도전하며 경험을 쌓아가세요!

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!