#next.js

기본서 추천 부탁드려요

node.js , react, typescript, next.js 를 공부해야합니다 서점가보긴했지만 그래도 괜찮았던 책이 있었다면 추천 부탁드려요! 괜찮은 강의도 혹시 아신다면.. ㅎㅎ

풀스택 개발자 Nest.js vs Spring

안녕하세요. 프론트엔드 개발자로 커리어를 시작한지 이제 딱 1년 되는 주니어 개발자입니다. 취준할때는 Express로 백엔드도 좀 했었고, 취업해서는 지금까지 React/Next.js로 프론트 개발을 해오고 있습니다. 회사가 웹개발 팀이 아주 작은 스타트업이라 프론트 저 한명, 백엔드 한명입니다... 보통 백엔드 일손이 더 부족한 경우가 많고, 제가 백엔드도 좀 해보고 싶어서 제가 공부도 할겸 회사 백엔드쪽을 살짝 거드려고 합니다. 재밌으면 추후에 풀스택으로 가볼까 하구요. 일단 admin 페이지 담당하는 정도로 백엔드 실무를 시작해보려 하는데, 회사 백엔드가 원래 Nest.js로 되어있었는데 Kotlin/Spring으로 바꾸고 있는 상황입니다. 이런 상황에 제가 Nest.js를 곁드는게 맞는건지, 자바 스프링을 해야할지가 고민입니다. 개인적으로 저는 TypeScript로 프론트, 백 둘 다 하는게 편하니까 Nest.js로 하고싶긴 합니다. 아예 백엔드로 전향할거라면 스프링을 하는게 좋겠지만, 전 프론트를 메인으로 하거나 풀스택으로 가고 싶어서요. 백을 메인으로 할 생각은 없습니다. 공고에서도 프론트인데 우대사항으로 백엔드 역량을 요구한다거나, 풀스택 개발자라면 Nest.js인 경우를 많이 본 거 같습니다. React와 Spring 조합을 요구하는 경우는 잘 못본 거 같아서 고민이네요. 보통 프론트엔드 개발자 혹은 풀스택 개발자 분들은 백엔드를 Nest.js와 Spring중 뭐로 하나요? 개발팀과 상황에따라 다르기야 하겠지만, 일반적으론 어떤지 궁금합니다..!

Supabase와 Springboot에 대한 질문

안녕하세요. 현재 기계공학과 4학년으로 캡스톤 디자인을 진행 중이며, 팀원들과 함께 앱 개발과 창업까지 목표로 하고 있는 학생입니다. 기술 선택 문제로 고민이 많아 조언을 구하고자 글을 남기게 되었습니다. 상황 요약 - 저희 팀: React Native + Spring Boot 기반으로 개발 중 제가 직접 백엔드 설계/구현 예외처리, 디버깅 포함 전체 구조 정확히 이해 진행도 약 60-70%, 구조 안정적, 유지보수 자신 있음 - 교수님 프로젝트: Next.js + Supabase 진행도 약 80% 다만 구조가 낯설어 코드 파악과 에러 수정에 시간 소요 예상 고민 포인트 - 교수님 코드 이어받으면 빠르게 MVP는 가능하지만, 구조 이해가 부족하고 디버깅이 어려움 - 제가 만든 Spring 기반 프로젝트는 구현은 부족하지만, 구조적으로 명확하고 확장성에 유리함 - 배포까지 걸리는 시간은 둘 다 비슷할 것으로 예상됨 저희의 목표 - 단기: MVP 완성 → 실제 사용자 배포 - 장기: 창업을 고려한 실서비스 개발 - Redis / Kafka / Elasticsearch 등 트래픽 대응과 기능 고도화 예정 - 따라서 유지보수성과 확장성이 핵심 질문 - 기능 많은 Supabase 기반 코드를 이해하고 고도화하는 게 나을까요? - 아니면 Spring 기반 구조를 그대로 밀고 나가는 게 더 현명할까요? - 장기적으로 유지보수와 확장성을 고려했을 때 어떤 선택이 실무적으로 맞는 결정일까요? 비슷한 경험 있으신 분들이나 현직자 분들의 현실적인 조언 부탁드립니다. 긴 글 읽어주셔서 감사합니다.

프론트엔드 ENV Key 관리 방법

현재 Next.js로 프로젝트를 진행하고 있는 중 궁금한 점이 있어 질문 남깁니다 KEY 값을 ENV 파일에 등록 후 사용중인데 NEXT_PUBLIC으로 붙여 클라이언트측에서도 접근 가능하게 만들어 사용중인데 이렇게 되면 키가 공개되어 보안상 위험하다고 생각이 들었습니다 혹시 어떤 방식으로 클라이언트 측에서 접근이 가능한 KEY 값을 관리하는지 방법에 대해 공유해주시면 감사하겠습니다!

next.js15 img태그에 Link태그 감싸기

안녕하세요 next.js15에서 img태그에 링크를 감싸고 있는데 아예 아무 반응을 하지않습니다.. useRouter도 먹히지않고 브라우저 콘솔에는 DOM에 클래스가 존재하지않는다고 뜨는데 아무리 찾아도 이유를 모르겠습니다

졸업자 고민 들어주시면 감사하겠습니다

이번달에 졸업한 학생입니다 현재 주요 고민이 제가 다녔던학교에서 학점이 좋았어서 제가 아는 개발자형은 한번 대학원을 생각해보는게 어떻냐고 물어보네요 지금은 대학원을 못들어가니 6개월 인턴하면서 개인프로젝트하고 내년에 대학원들어가서 석사까지는 해보는게 어떻냐고 물어보네요 하지만 제가 지금 웹 개발자를 목표로 공부중인데, 웹 개발자가 대학원을 가서 얻는 이점이 있을까요? 또한 웹개발자가 대학원을 가면 무엇을 배우나요? 현재 next.js 공부중이며 이와 관련된 프로젝트를 하나만들어서 react로 만들었던 프로젝트와 차이점을 주로 서술하고 어려웠던점이나 그런걸 써서 프로젝트를 만들려고 합니다 이런식으로 공부하면서 개인프로젝트를 만들고 3월이나4월부터 본격적으로 취업하려는 생각이였는데 요즘 개발자시장이 안좋다고 듣기도했고, 대학원 말을들으니 머리가 복잡해져서 현직 개발자들의 의견이 궁금해 여쭤봅니다 부디 지혜를 빌려주세요

프론트엔드 이직 준비로 어떤 것들을 하는게 좋을까요?

안녕하세요. 경력 2년차 프론트엔드 개발자입니다. 이전에 두 개의 회사에서 프론트엔드 개발자로 일했는데 불행하게도 두 회사 모두 임금체불로 인해 퇴사를 하게 되었습니다. 그래서 이번에는 50인 이상의 규모를 가진 회사로 이직하는 것을 목표로 이직을 준비하고 있습니다. Next.js, React, Typescript @tanstack/react-query, Context API, Recoil Vanilla-extract, emotion, styled-components, tailwind-css, Sass 위와 같은 스킬들을 공부 및 경험해보았고, Vanilla-extract, tailwind-css를 제외한 스킬들은 실제 업무에서도 활용하였습니다. 현재 저는 [1. 코딩테스트, 2. 기술블로그, 3. 개인프로젝트] 를 매일 반복하며 이직을 준비하고 있습니다. 이대로 계속 이직을 준비하면 될지, 아니면 다른 무언가를 더 준비해야할 지, 앞으로의 이직 준비 방향에 대해 알려주시면 감사하겠습니다. 추가로 혹시 이력서 피드백 해주실 수 있는 분 계시면 말씀 부탁드립니다... 서류에서 계속 떨어지다보니 개발자 입장에서 피드백을 꼭 받아보고 싶습니다...!

React면 되는것을 굳이 Next.js로 구현하는것

SEO나 서버사이드 렌더링이 필요없는 서비스를 구현할 때, 이걸 그냥 React로 개발하는것과 Next.js로 개발하는것의 차이가 있나요? 저는 Next.js를 써야겠다 싶은 경우가 아니면 React로 개발하고 싶은데, Next.js에서 모든 컴포넌트를 그냥 다 클라이언트 컴포넌트로 하면 React랑 똑같은 거 아니야? 라는 질문을 들었을 때 할말이 없더라구요. React만으로 구현할 수 있는걸 굳이 Next.js를 쓰는게, 뭔가 그냥.. 닭잡는데 소잡는 칼 쓰는 느낌이라 굳이 그럴필요 없다 정도로만 생각했는데 정확한 근거를 들어보라니 대답을 못하겠더군요 둘의 차이가 정확히 무엇일까요? 기존의 SPA 앱같은걸 개발할 때 React만 쓰는게 좋은 이유가 있나요?

해외대학 프론트엔드 취업 질문

해외 대학 졸업반 학생인데 학점이 많이 낮은 편이에요. 졸업 후 학원다니면서 개발 공부 목표로 하고 현재는 Html, Css, JS, React 쓰고 있고, Next.js 강의 들으면서 공부하려고 하고 있어요. 아직 프로젝트 경험도 없고, 내놓을 만한 포트폴리오도 정리가 안된 상태인데 물론 지금 경기가 많이 안 좋아서 취업하기가 어렵다는 건 알지만 학점이 낮은 편인데 이거 많이 힘들까요..? 걱정할 시간에 개발공부 더 열심히 하는 게 정답이겠죠.. 불안하고 걱정되는 마음에 질문 남깁니다.... ㅠ.ㅠ

신입 프론트엔드 회사가 고민됩니다

안녕하세요 비전공자에서 프론트엔드 취업 준비 중인데 감사히도 한 회사에 입사할 기회가 생겼습니다 너무 좋은데 걸리는 것은 해당 회사가 React나 Next.js 같은 최신 프론트엔드 기술을 사용하는게 아니라 Vanilla JS만으로 개발을 한다는 것입니다 차후에 이직할 때가 걸리기도 하고 라이브러리나 프레임워크 하나 없이 Vanilla js로만 개발할 자신도 없고요... 그런데 위치도 괜찮고 요즘 같은 때에 신입으로 구직하는게 너무 힘들어서 깊은 고민이 됩니다 이런 상황에서 어떻게 하실지 여쭤보고 싶습니다

프론트엔드인데 AWS, CICD에 대해 몰라요.

3년 차인데 물 경력인 것인 지, 요즘 다들 스펙보면 화려해보이던데 제가 할 줄 아는거라곤, JavaScript(TypeScript), HTML5, CSS3, React정도입니다.. 적고나니 엄청 물경력같네요; 요즘 Next가 핫하기에 Next.js까진 공부하려고 하는데 Vitest도 공부해야할 것 같고.. CICD 파이프라인도 공부해야하는 건 지, AWS도 요즘 스펙에 자주 언급되는 것 같고.. 막막하네여 스펙을 무엇부터 채워야할까요..?

[신입]Next.js로 백엔드 없이 작업 중인데 업무 범위와 연봉이 고민

처음에는 리액트로 작업을 시작하려 했지만, 작업을 시작해보니 db만 덩그러니 있는 상태였고, API나 명세서 같은 기본적인 개발 환경이 전혀 갖춰지지 않은 상태였습니다. 통상적인 방법으로는 리액트만으로 구현이 어렵다고 판단해 Next.js로 전환하여 데이터를 받아와 사용하고 있습니다. 업무를 진행하며 백엔드 개발자 구인 여부를 문의했으나, 회사에서는 당장 백엔드 개발자를 채용할 계획은 없고, 데이터 엔지니어 한 명으로 충분할 것 같다는 답변을 받았습니다. 이에 따라 현재는 Next.js를 메인 기술 스택으로 사용하며, 추후 로그인/회원가입 같은 기능도 작업하려고 계획 중입니다. 궁금한 점 Next.js로만 프로덕트를 구성한 사례가 있는지 현재 별도의 백엔드 언어를 사용하지 않고 Next.js만으로 작업 중입니다. 이런 방식으로 프로덕트를 운영하는 사례가 있는지 궁금합니다. 업무 범위에 대한 의문 당초 프론트엔드 개발 업무로 시작했지만, API 구성 등 사실상 백엔드 작업에 가까운 업무 범위까지 포함되어 있는 상황입니다. 이를 고려할 때, 제가 맡게 된 업무가 일반적인 프론트엔드 업무 범위를 넘어선다고 생각되는데, 이 점에 대한 다른 분들의 의견이 궁금합니다. 연봉 및 근로 조건 연봉 적정성: 한달 전 쯤 이곳에서 프리로 일하면서 최소 연봉 3,000만 원 이상은 받아야겠다고 말했었고, 현재 계약서에는 식대 포함 연봉 3,000만 원으로 명시되어 있습니다. 추가적으로 5인 미만 사업장의 조건으로, 연차, 공휴일, 연장 근무 시 가산 수당에 대한 언급이 없습니다. 이런 조건에서 연봉 3,000만 원이 적절한 수준인지 궁금합니다. 요약 Next.js로만 프로덕트를 구성하는 사례에 대한 정보 업무 범위가 확대된 상황에 대한 타당성 연봉과 근로 조건의 적정성

비전공 개발자 공부

안녕하세요 현재 복지관에서 1년을 채워가고 있는 26살 직장인입니다. 취업하기 전 대학교 2학년 때 우연히 마주한 파이썬에 맛을 보고 텐서플로우 공식 자료를 봐가면서 인공지능 따라해보고 직접 캐글에 있는 csv파일을 받고 분석하고 결과를 내면서 재미를 느꼈습니다. 이후에는 사이트 제작에 관심이 생겨 기본적인 html과 css, 부트스트랩을 가지고 깃허브에 올려서 사이트를 만들어보고 4학년 2학기 방학 때 파이썬 장고로 사이트를 연결하면서 접해보았습니다. 현재 복지관에서 일을 하고 있는 가운데에도 관심이 있어 최근에는 장고-러스트와 next.js를 활용한 사이트 제작 자료가 있어 퇴근 후 한 시간씩 작업을 하고 있습니다. 앞서 말씀드렸듯이, 복지관에 재직중이며 계약직으로 2024년 12월 31일 계약을 마치고 본격적으로 웹개발 중 프런트에 대해서 배워보고자 합니다. 분명 제가 만들면서 재미를 느끼고, 조금이라도 어렸을 때 다양한 경험을 해보는 것이 좋다고 생각하지만, 한편으로는 퇴사 후에 취업이 잘 될까라는 불안함에 조금은 조심스러워 집니다. 저보다 앞서 다양한 경험을 해오신 선생님들께 제 판단이 괜찮은 선택인지 아닌지 조언해주시면 감사드리겠습니다. 긴글 읽어주셔서 감사합니다.

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

개인 프로젝트 피드백 부탁드립니다!! (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/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!

프론트엔드 공부방법에 대해 질문있습니다.

신입으로 프론트엔드 개발자 취업을 준비중입니다. 뭔가 계속 부족하다는 생각이 들어 불안한 마음에 인강만 보면서 공부만 하다가 생각을 바꿔 일단 못하더라도 한번 혼자 만들어 보자는 생각에 한국관광공사API를 이용해서 제가 살고있는 지역코드를 활용하여 지역에 있는 명소를 보여주고 클릭시 모달창으로 상세내용과 카카오지도api로 위치를 보여주는 간단한 사이트를 만들었는데 물론 필요한 기능은 챗GPT나 구글링을 통해 찾아보면서 만들었습니다. 이 정도면 리액트를 더 공부를 해야좋을까요? 아니면 넘어가고 타입스크립트와 next.js를 공부하는게 좋을까요?

next.js url 파라미터 변경 시 데이터 호출

next.js 서버 컴포넌트에서 fetch후 클라이언트 컴포넌트로 넘겨주는 구조에서 브라우저 url 파라미터 값이 바뀔때마다 새로운 데이터를 호출하도록 구현하고 싶습니다,. useEffect를 활용하려했으나 fetch 함수가 async다보니 클라이언트 컴포넌트에서 사용할 수 없더라구요... 방법이 뭔지 모르겠습니다ㅠㅠ 알려주시면 감사하겠습니다!!

프론트엔드 경력(혹은 그에 준하는 실력) 모집하는데, 이력서에 백엔드 경력은 아예 안 쓰는게 좋을까요?

저는 자바 스프링 백엔드 경험이 2년 반 정도 있는데, 프론트엔드로 전향하고 싶어서 퇴사후 1년정도 typescript, react, next.js, react 상태관리 라이브러리 공부해서 프로젝트 만들고 이제 이력서 작성하려고 하는데요.. 이력서에 자바 스프링 웹개발 경력은 아예 빼는게 좋을까요? 아니면 웹개발 경험을 해봤다는 것 자체가 플러스 요인일 수 있으니 기술스택이 달라도 넣는게 좋을까요?..

프론트엔드 지망생. 한심하지만 길어진 공백. 잃어버린 공부 방향성. 조언이나 의견 부탁해도 될까요 ?

안녕하세요. 커리어리에서 자주 질문하면서 현직 개발자분들의 다양한 의견을 듣고 많은 도움을 받고있는 취준생입니다. 그 중엔 가끔 쓴소리하시는 분들도 계시지만 그런 부분들이 진심으로 제 고민거리에 대해 생각해주시는 거 같아 오히려 믿을만한 이야기구나 하고 받아들이는 경우도 많네요. 본론부터 말하자면 공부방향을 제대로 잡지 못하는 듯 하여 현업 분들이나 저와 같은 취준생 위치에 있는 분들의 다양한 의견을 듣고 싶습니다. 저는 국비를 수료 후 근 1년 가까이 개발에 손을 놓아 공백이 있습니다. 수료 후 5개월 정도는 만들어 진 협업 포폴로 이력서를 내면서 알고리즘 공부하고 간간히 그렇게 보냈구요. 그후 6~7개월 정도는 금전적인 문제로 공장,업체 단기알바 등을 하며 아예 공부에 손을 놓게 되었습니다.. (구차한 변명이지만 별 수없죠. 후에 면접 기회가 생겨도 이 공백에 대한 답변은 이렇게 할 수밖에 없을듯해요.) 아무튼 현재 다시 마음을 다잡고 배워왔던 것들을 복습하며 공부에 다시 전념하고 있습니다. 1~2달 전부터 쇼핑몰 프로젝트 하나를 만들고 있고요 (서버리스 서비스를 이용해서 db 연동하고 혼자 만들고 있습니다). 추가로 JS DeepDive 정독하면서 좀 중요하다 싶은 개념은 노션에 따로 정리해두고 다시 읽어보면서 눈에 익히고 있습니다. 그리고 기술면접 대비 질문들도 인터넷에서 찾아보면서 마찬가지로 노션에 정리하고 있고요. 네트워크 부분을 정확히 짚고가고 싶어서 인프런에 속성정리된 네트워크 강의 정독했습니다. 추가로 제가 next.js 로 공부했는데 react 기반 프레임워크지만 react와는 또 사소한 여러 차이점이 있는 거 같아 (ex. 페이지 라우팅 방식, csr 과 ssr 등) 유데미에 근본강의로 불리는 강의 (redux 도 같이 배우는) 구매해서 듣고 있습니다. 얼마전에는 타입스크립트 강의를 완강했는데 그 때쯔음부터 뭔가 내가 제대로 하고 있는게 맞나? 의문이 들고 있습니다. 스스로 불가피한 공백은 만들어 버렸지, 제대로 배포되는 프로젝트도 없지, 그렇다고 나이가 적은 것도 아니지 (아직 30은 아니지만 곧이라...)..이런 불안감들이 계속 머리속에 멤도니 잡생각이 많이 나고, 그러다보니 뭔가 열심히 공부는 하는데 확신이 안 섭니다. 객관적으로 보면 스스로에 대한 결핍이 좀 심해진것도 같구요. 며칠 전에 프로젝트 하다 z-Index 문제로 몇 시간을 chatgpt, 구글링을 하며 씨름하다 보니 아..css도 아직 모자란가? 라는 생각이 들어서 풀강의로 잘 정리된 css 강의도 하나 들을까? 이런 생각도 하고...css 생각하다보니 sass도 배워야 할 거 같고..그렇게 찾아보면 요즘 편리하게 tailwind 도 많이 쓴다는데 이것도 배워야겠지? ..막 그냥 바람결 제대로 만난 갈대마냥 막 흔들거려요. 글을 훑어보니 너무 제 감정에 치우쳐서 막 휘갈긴거 같네요. 긴 글 정독하기 싫은분들도 많으실 듯 하여 간략히 정리해 보겠습니다. 1. 현재 국비 수료 후 공백이 1년 넘게 있으나, 그 공백기는 개인사정? (금전문제) 등의 이유로 딱히 개발부분에 있어 뭔가 월등히 노력한 부분을 어필할 게 없음 2. 제대로 배포되고 있는 프로젝트도 없는 상황에 현재는 쇼핑몰 개인 프로젝트 하나 하고 있음 (서버리스로 DB 연동, 개인 프로젝트) 3. 그 밖에 유데미의 react 핵심강의 듣고 있고, js deepDive 정독, 기술면접 대비 질문들을 노션에 정리하며 관련 개념들을 상기하며 공부 중 (알고리즘은 따로 공부 안하고 있습니다. 혹 이 부분 중요하다 생각되시면 의견부탁드립니다.) 4. 현재 목표는 올해 안에 최소 2개의 프로젝트를 배포과정까지 끝내고(1개는 가능하면 협업으로) 연말 쯤 부터 이력서 미친듯이 넣고자 함. (현재 최종목표는 중소기업입니다. 워라벨, 연봉 크게 안따지고 최소한 배우고 성장할 배경이 되는 기업을 목표로 두고 있습니다. 중소에 그런 기업이 별로 없겠지만요..) 뭘 더해야 할까요? 그리고 이 상황에 백엔드 공부하는 건 좀 어리석은 짓인가요? (백엔드 기반 지식도 어느정도 필요하다고 하는데 전 그 정도를 모르겠어요) 여러분의 솔직한 의견 부탁드립니다. (걍 개발자 때려쳐라. 넌 답없다. 같은 솔직발언도 괜찮습니다. 제가 우둔하고 고집머리는 쎄서 그런 말 들어도 쉽게 포기 못하는 성격이지만...모르죠. 여러 사람들이 같은 식의 답변을 한다면 또 되새겨서 다시 생각해 볼 수도 있고요. 지금이 갈림길인 거 같습니다. 마음을 제대로 다잡고 영끌하던지, 아니면 그러고싶지는 않지만 포기해야하는지)

Next.js Dynamic Routing 관련 질문

현재 ./pages 폴더에서 page router로 라우팅 관리 중에 있습니다! id별 post 상세창 조회를 위해 ./pages/post-detail/[id].tsx 와 같이 작성했으나 Whitelabel Error Page This application has no configured error view, so you are seeing this as a fallback. Fri Aug 30 21:08:21 KST 2024 [67199a4f-4509] There was an unexpected error (type=Not Found, status=404) 만 발생합니다 참고로 ./pages/post-write.tsx 와 같은 파일은 정상 작동합니다 혹시 무엇이 문제일까요? 추가+) 혹시 Next.js 14에서 page router 방식을 사용하는것이 문제일지 궁금합니다

이력서에 잘만든 프로젝트 1개 vs 다수 프로젝트

안녕하세요. 2년 반 정도 백엔드 개발자로 일하다가 작년 9월에 퇴사하고 11월부터 Next.js, typescript 등의 스택으로 포트폴리오용 사이트를 지금까지 제작중입니다..... 주말빼고 매일 8~9시간을 투자했는데 아직 프로젝트가 안 끝난 이유는 다음과 같습니다.... 1. React, js 지식은 있었지만 Next, typescript, react-query, recoil 등 다른 기술스택은 새로 공부해야했는데, 제대로 쓰고싶은 마음에 공부기간이 너무 길었던것 같아요 (공부욕심이 있어서 너무 하나하나 꼼꼼하게 보고 노션에 정리도 하고 하느라 프로젝트 진행이 지체된게 있습니다... ) 2. 실서비스에 가깝게 만들고 싶다는 욕심으로 프로젝트 규모는 컸지만 협업하던 사람들은 프로젝트 경험이 아예 없거나, 작업한지 1~2달만에 취업 등의 이유로 그만두고 올해 상반기부터 저 혼자서만 프론트/백엔드 모두를 작업했는데, 혼자서도 구현하고 싶은 기능이나 전체적인 퀄리티를 못내려놔서 수정에 시간이 많이 걸렸습니다 애초에 프로젝트 시작할때, 새로 배우는 기술스택이지만 실서비스에 가까운 프로젝트 만들면서 실무에서 무리없이 쓸 만큼 경험을 해보자는 생각이었고, 실제로 원없이 욕심부리고 고생하고 배우면서 스스로 자신감이 생긴 상태이긴 한데요.. 앞으로 조금이긴 하지만 프로젝트도 아직 마무리가 안 되었고, 취준기간동안 한 프로젝트가 이것 하나밖에 없는게 이제서야 돌아봐지면서 이력서 쓸 내용이 걱정이 되네요ㅠ..... 프로젝트 하나지만 하면서 배운것, 경험한건 정말 많아서 지금당장 실무 한다고 해도 겁나지 않고 이 프로젝트에 대해서 기술적으로 무슨 고민을했고 뭘 배웠는지 구체적으로 쓰는건 자신이 있는데요.. 다른 이력서들 랠릿 등에서 보면 프로젝트 하나가지고 자세하게 쓴 경우는 거의 없더라구요.. 지금이라도 간단하게 프로젝트를 하나 더 해야하는걸까요.... 아니면 알차게 쓰면 프로젝트 하나로도 좋은 이력서 만들수 있는걸까요ㅠ?.....

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

Next.js 사용 시 SyntaxError: Expected property name or '}' in JSON at position 61의 에러위치가 어딘지 어떻게 알수있나요?

"next-auth": "^5.0.0-beta.20" 사용 중인데 해당 에러를 검색해보니 JSON 형식의 문자열이 아니기 때문에 에러가 발생한 것이라고 하던데 에러가 일어난 코드의 위치를 정확히 말을 안해주니 어디서 어떻게 고쳐야할지 도통 모르겠습니다....ㅠㅠ 해당 에러를 야기하는 것으로 의심되는 파일의 코드와 에러메시지를 띄운 터미널을 캡처하여 첨부드립니다... 혹시 어디서 문제인지 힌트라도 주신다면 열심히 찾아 해결해보겠습니다!!!

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

프로젝트나 공부를 할 때 chat gpt를 사용하는게 괜찮을까요?

현재 프론트엔드 개발자를 목표로 공부중인 취준생입니다 react, next.js로 팀 프로젝트와 개인 공부를 하고 있는데 궁금한 점이 있습니다. 개발이나 공부를 하면서 구글링을 많이 하게 되고 막히는 부분(기능구현)이 너무 어렵다고 느껴지는 경우에 chat gpt를 사용하곤 하는데 chat gpt가 알려준 코드를 그대로 사용하지 않고 참고만 하면서 공부하거나 개발을 하고 있는 상태 입니다. 주변에 개발자로 일하고 계신분들이 몇 명 있어서 질문을 했는데 의견이 반으로 갈려서 여쭤봅니다. “chat gpt를 사용하기 보다 단순히 구글링으로만 문제를 해결해라. ” 와 “지금도 ai가 계속 발전해가고 있으니 chat gpt 같은 ai기술(툴)을 잘 활용하는것이 좋다.“ 이런 조언을 받았습니다. 다른 현직자 분들의 생각이 궁금합니다. 그리고 현업에서 개발자로 일을 하며 chat gpt를 사용하여 개발하는 빈도(?)가 많이 있나요?

로그인 구현 관련 질문 subdomain.com

안녕하세요 슬랙처럼 로그인을 하면 워크스페이스 리스트가 나오고 해당 워크스페이스를 클릭하면 해당 워크 스페이스로 로그인이 되는 페이지를 구현하려 하는데요. Next.js를 사용중이고 iron-session 라이브러리 통해서 세션을 저장하고 있습니다. ex) app.oursite.com <- 통합 로그인 페이지 워크스페이스 클릭하면 해당 워크스페이스 로그인을 하고 세션을 저장해서 워크 스페이스 사이트로 redirect 시키려 하는데, const session = await getIronSession<Session>(cookies(), { cookieName: 'cookie', password: IRON_SESSION_SECRET_KEY, cookieOptions: { secure: false, // 로컬 테스트에서는 false, 실제 배포에서는 true로 설정 sameSite: 'Lax', // sameSite 옵션을 Lax로 설정 domain: 'localhost', // 로컬 테스트 시 domain 설정을 제거하거나 localhost로 설정 path: '/', }, }); {workspace1}.ourstie.com {workspace2}.ourstie.com 세션 저장이랑 redirect 처리했을때 세션 저장하고 해당 페이지 확인은 하였는데 해당 페이지에서 로그인 인증은 제대로 되지 않고 있습니다. 로그인 페이지로 이동되더라고요 로그인이 안되는 원인으로 짐작가는게 있으면 알려주시면 감사하겠습니다

Next.js axios patch메서드 cors error

현재 마이스터고 재학 중인 2학년 학생입니다. 학교에서 Next.js를 사용하여서 서비스를 만드는 프로젝트를 하고있습니다 이 프로젝트 중 서버와의 통신을 위한 axios를 customAxios로 만들었고 기존 put메서드로 수정 api를 호출했을 당시엔 요청이 갔는데 patch메서드로 하니 CORS에러가 계속 뜹니다. velog와 wrtn등을 이용하여 withCredentials: true도 줘보고 package.json에 "proxy"도 줘봤는데 계속 CORS에러가 뜨네요.. 혹시 몰라서 postman으로 호출했을때는 정상적으로 호출이 가는데 이 경우는 무엇이 문제일까요? 도와주시면 감사하겠습니다.. ㅠㅠ

이력서에 첨삭할 진행했던 프로젝트들 내용을 보다 더 잘 적고 싶어요.

이력서에 첨삭할 지금까지 진행했던 프로젝트들 내용을 적고 있는데 한눈에 보기 쉽게 큰 범주로 적기에는 너무 포괄적으로 적는것 같고 개발한 기능들을 세부적으로 적거나 해당 프로젝트 진행 후 낸 성과들을 다 나열하면 내용이 너무 길어지는것 같아서 어느정도로 구체화해서 적어야될지 헷갈려서 조언을 구해 봅니다. 아래는 지금 작성된 내용입니다. 현재는 프로젝트별로 포괄적으로 적거나 좀 더 디테일하게 적거나 기준점을 못찾은 상황입니다. [ 2022. 12 ~ 2022. 01 • 프로젝트 명 : 집 클릭 • 주요 설명 : 전세임대 지원 사이트로 권리분석을 의뢰할 수 있는 사이트 • 담당 업무 : 자사 서비스 웹 크롤링 기능 개발 -puppeteer 사용 등기부등본 발급 자동화 웹 크롤링 작업 • 기술 스택 : Node.js 2023. 06 ~ 2023. 07 • 프로젝트 명 : 브릭 인프라 • 주요 설명 : 자사 서비스 종합 관리 사이트 • 담당 업무 : 자사 어드민 프론트엔드 개발 • 기술 스택 : React 2023. 08 ~ 2024. 06 • 프로젝트 명 : 키오 솔루션 • 주요 설명 : QR 주문 결제로 보다 편리한 결제 시스템을 이용할 수 있는  솔루션 • 담당 업무 : 자사 솔루션 "키오" 활용 서비스 개발 및 운영 유지 보수 - 메뉴형 결제 서비스 "키오브릭" 프론트엔드 유지 보수 - 금액입력형 결제 서비스 "스마트 노점" 프론트엔드 개발 및 - 해당 서비스 관련 어드민 풀스택 유지 보수 - 자사 어드민 풀스택 유지 보수 • 기술 스택 : React, GraphQL, Node.js, MySQL 2023. 09 ~ 2024. 06 • 프로젝트 명 : 오늘 우리 가게 • 주요 설명 : 자영업자 대상 매출, 리뷰, 주문 현황, 광고 현황 분석 앱 • 담당 업무 : 자사 서비스 오늘 우리 가게 기능 개발 및 운영 유지 보수 - React Native 앱 메인 화면 개발 - 전체 React Native 앱 기반 프로젝트 WebView 기반 프로젝트로 전환 작업 진행 - 리뉴얼 된 WebView 구성 화면 프론트엔드 개발 - 우리 가게 리뷰 듣기 TTS 하이브리드 기능 개발 - 네이버 클라우드 이용 카카오 알림톡 서비스 벡앤드 유지 보수 - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, MobX, React, Redux, TypeScript, Next.js, Node.js, MySQL 2023. 11 ~ 2024. 02 • 프로젝트 명 : 빌딩 CAS • 주요 설명 : 건물 내 입주사들을 위한 공지, 관리비 결제 및 장터 커뮤니티 기능을 제공하는 앱 • 담당 업무 : 외주 서비스 빌딩 CAS 프론트엔드 및 앱 개발 - WebView 기반 프로젝트 초기 환경 구축 및 아키텍처 설계 - React Native 앱 메인 화면 개발 - WebView 주요 기능 프론트엔드 개발(소셜로그인, 회원 정보 관리, 관리비 결제, 문의하기, 중고장터 게시판) - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, React, MobX, Node.js, PostgreSQL *** 포트폴리오 링크를 통해 더 자세한 내용을 확인 하실 수 있습니다. ]