#라우팅

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

리액트 프로젝트에 FSD 아키텍처 적용. 이 구성이 맞을까요?

안녕하세요. 현재 진행 중인 리액트 프로젝트에서 유지보수성과 확장성에 어려움을 느껴 폴더 구조를 Feature-Sliced Design(FSD) 아키텍처 기반으로 전면 리팩토링했습니다. 기존에는 `components/`, `pages/`, `apis/` 등 기능과 역할이 섞인 구조로 되어 있어, 코드의 위치가 불분명하고 협업에 어려움이 있었습니다. 이를 해결하고자 다양한 아키텍처를 조사한 끝에, FSD의 레이어 개념(Layers)에 맞춰 다음과 같은 방식으로 구조를 정리했습니다. - `app/`: `App.js`, `index.js` 등 프로젝트 진입점과 글로벌 설정 파일을 포함 - ` entities/`: `User`, `Article`, `CodingZone` 등 주요 도메인의 데이터 모델과 API 연동 담당 - `features/`: 로그인, 게시글 작성, 코딩존 출석 등 각 기능별로 모듈화하고, 필요한 경우 `hooks/` 등의 내부 디렉토리로 세분화 - `pages/`: 라우팅과 연결된 실제 페이지 컴포넌트 관리 (예: `CreatePage`, `EditPage` 등) - `widgets/`: 재사용 가능한 독립 UI 요소들 (예: `Footer`, `Navbar`, `Pagination` 등) - `shared/`: 공통 API, 유틸, 모달 컴포넌트 등 여러 기능에서 공유되는 요소들을 배치 기능 중심의 구조로 바꾸면서, 각 요소의 역할이 명확해지고 코드 탐색 및 유지보수가 훨씬 쉬워졌습니다. 현재는 복잡한 비즈니스 로직이 없어 `processes/` 레이어는 생략했지만, 추후 워크플로우가 필요한 기능이 생긴다면 도입할 계획입니다. 제가 구성한 이 폴더 구조와 레이어 분리가 실제 FSD 아키텍처 가이드에 부합하는 방향인지, 혹시 보완하거나 개선할 부분이 있다면 조언을 구하고 싶습니다. 자세한 내용은 블로그에 정리해 두었습니다. 👉 [https://juncci.tistory.com/4](https://juncci.tistory.com/4) 읽어주셔서 감사합니다!

프로필 스택 네비게이션 구조 설계하는 법 (React Navigation)

React Native로 프로젝트를 진행 중이고, React Navigation으로 라우팅 설계를 했습니다. 프로필 같은 스크린은 어떤 화면에서든 공통적으로 떠야 하잖아요, 예를 들어 커뮤니티 서비스면 어떤 화면에서든 유저 프로필 아이콘을 누르면 상세 프로필 화면으로 갈 수 있고, 프로필과 관련된 화면으로 또 다시 이동할 수 있도록 하는 것 같은데.. (프로필 수정, 프로필 선택, 이 유저가 가입한 커뮤니티 목록 등등) 이러한 경우의 네비게이션 설계를 실제 프로덕트 프로젝트에서는 어떻게 진행하시나요? 저는 가장 바깥의 root 네비게이션에서 프로필 스택 네비게이션을 두고 사용하면 어떨까 생각하고 있습니다. 참고로 현재 프로젝트에 적용된 네비게이션 구조는 아래와 같습니다. - 메인 화면 (바텀 탭 네비게이터) - 탑탭 네비게이터 - 스택 네비게이터1 - 스택 네비게이터2 - 스택 네비게이터3 - 단일 스크린

expo에서 tabs로 동적라우팅 설계할때

지금 expo 사용해서 공부하는 중인데 tabs 컴포넌트 사용해서 바텀네비게이션 구현하고 tabs를 사용해서 동적라우팅 설정하려면 폴더구조를 어떻게 해야하나요? (tabs)폴더로 그룹화 해서 gym, board, search, profile 폴더 만들어준 후에 tabs에 4개 항목 유지하면서 /profile/:userid 경로로 동적라우팅 하고 싶은데 여기에 사진처럼 profile 폴더-> [userId]폴더-> index 파일 설정하면 디바이스의 tabs 항목에 /profile/ [userId]/index 가 같이 나옵니다... tabs에 4개 항목만 유지하면서 동적라우팅 하려면 폴더구조 어떻게 해야하나요 ㅠㅠ

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

안녕하세요. 커리어리에서 자주 질문하면서 현직 개발자분들의 다양한 의견을 듣고 많은 도움을 받고있는 취준생입니다. 그 중엔 가끔 쓴소리하시는 분들도 계시지만 그런 부분들이 진심으로 제 고민거리에 대해 생각해주시는 거 같아 오히려 믿을만한 이야기구나 하고 받아들이는 경우도 많네요. 본론부터 말하자면 공부방향을 제대로 잡지 못하는 듯 하여 현업 분들이나 저와 같은 취준생 위치에 있는 분들의 다양한 의견을 듣고 싶습니다. 저는 국비를 수료 후 근 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 방식을 사용하는것이 문제일지 궁금합니다

중국 유학생이 한국에서 Java 개발 직업을 찾으려면 어떻게 해야 하나요?

안녕하세요, 저는 중국에서 온 유학생입니다. 25년 2월에 졸업 예정입니다. 한국에서 Java 백엔드 개발자 직업을 찾고 싶습니다. 현재 개인적으로 진행한 프로젝트가 두 가지 있습니다. 프로젝트 1: Hash 해시 알고리즘을 기반으로 한 데이터베이스 라우팅 컴포넌트 프로젝트. 사용한 기술 스택: Springboot, MySQL, ThreadLocal, Mybatis, AOP 어노테이션. 프로젝트 2: 커뮤니케이션 플랫폼 시스템. 사용한 기술 스택: Springboot, Redis, Kafka, MySQL, ElasticSearch, Spring Security. 이 프로젝트들이 한국의 Java 개발 직무와 부합할까요?

nextjs typescript 실용성

저는 원래 백엔드 개발자인데 현재 이직한곳에서 사정상 프론트 서버를 공부하면서 하나 올리게 되었습니다. 공부하면서 개발 진행중인데 잘 이해되지 않는 부분이 있어서 여쭤 봅니다. 기술 스펙은 프론트 nextjs typescript, 백엔드 springboot gradle입니다. 1. 폴더로 라우팅하는게 편해보여서 nextjs로 선택했는데 합리적인가요?? 현재는 nextjs api는 사용계획 없습니다. 2. js 보다는 그래도 미래지향적인 ts를 선택했는데 뭔가 개발하다보니 괜히 사용중인 기술에 비해 오바했다는 생각이 좀 듭니다. 쭉 진행해도 괜찮을까요?? 지금이라도 js react로 바꿔야 할지 제가 프론트적 지식이 많이 부족하여 자문을 좀 구합니다. 감사합니다.

SSR을 사용하지 않는 next.js 앱의 장점은 뭐가 있나요?

SSR을 사용해 next.js 앱을 만들었는데 서버 컴포넌트쪽 인증을 처리하지 못해 전체 앱을 CSR로 전환하자는 의견이 나왔습니다. SEO도 필요하지 않은 앱이라 SSR을 사용하지 않으면 라우팅을 제외하곤 next.js의 어떤 장점을 살릴 수 있는지 잘 모르겠습니다. SSR을 적용한 컴포넌트를 CSR로 전환할바에 앱을 리액트로 변환하는게 프론트 서버를 신경써야하는 단점도 없어질 것 같고 시간도 비슷할거 같아서요. 추가적으로 only CSR로 next.js 사용하시는 분도 계실까요?

네이버 지도 api 라우팅이 궁금합니다 ㅠㅠ

마커를 생성하고 마커를 클릭시 페이지 이동을 하고 싶은데 아무런 미동조차 없어서 해결하고자 올려봅니다 ㅠㅠ 페이지 구조는 넥스트 앱라우터 /dashboard/[shipId]/page.tsx 로 되어있습니다. 클릭시 아무런 반응도 없고 지피티나 구글을 찾아봐도 저렇게 이벤트를 주는 방법 말고는 보이지가 않아서 질문드립니다 ㅠㅠ

프로젝트 기술을 선택할 때, 폴더 라우팅같은 장점들 때문에 ssr을 사용하지 않고 Next를 이용하는 것이 타당한 이유가 될까요?

<프로젝트에 대한 설명을 간단히 드리자면...> 동아리 프로젝트입니다. 학교 학우들을 대상으로 하는 고정 타겟층이기에, ssr을 통해 SEO를 높일 필요가 없고, 서비스 크기가 작은 서비스를 만들려합니다.(앱 내의 웹뷰로만 이용자가 접근 가능하게 하려합니다.) <next를 선택한 이유는 아래와 같습니다.> 1. 이미지 최적화와 같은 자동 최적화 기능과 폴더 구조를 통한 직관적 라우팅 등의 이유 (인터렉션이 많아서 서버 컴포넌트보단 클라이언트 컴포넌트의 사용 비중이 더 높을 것 같습니다.) 2. 채용 공고에서 기업들의 next.js 사용 경험에 대한 선호도 (많은 기업들이 next에 대한 경험을 이력에 요구하기 때문에, 괜스레 next를 실제 서비스에서 한 번쯤을 활용해봐야 하는것은 아닌가 조바심도 듭니다.) <제가 고민하는 부분은...> next를 사용하는 가장 큰 이점은 ssr이라고 생각이 됩니다. 선택한 기술의 가장 큰 이점을 사용하지 않고 다른 이점들을 이유로 기술을 선택했다라는게 이력서를 확인한 면접관 입장에서 과연 수긍할 수 있는 부분일까 의문이 듭니다. 개발을 시작한지 2년이 채 안되가기에, 기술 선택에 있어 확신이 없는 것 같습니다. 현업자 분들의 조언이 정말 큰 도움이 될 것 같습니다!

취업을 위한 프로젝트 기술 스택 React vs. Next.js

안녕하세요. 프론트엔드 취업을 준비 중이에요. 이제 포트폴리오용 프로젝트를 진행하려고 하는데, 기술 스택에 고민이 있어 질문 올려요! 혼자하는 프로젝트여도 좀 규모를 크게 완성도 있게 가져가려고 계획 중이고, 기간은 3개월 안 쪽으로 잡고 있어요. 하나 고민인게, 아직 react만 써서 어떤 프로젝트를 개발해 본 적이 없는데, 요즘 회사에서 많이 요구하는 next.js 프레임워크를 바로 플젝에 사용하는 것이 옳은 것인지 조언를 구해요. 물론 next.js를 쓰면 리엑트가 따라오겠지만, 리엑트와 next.js 사이에도 차이는 존재할텐데요. 예를 들어 라우팅하는거나 이미지 태그 등등 지금은 사소한 것 밖에 차이를 모르지만 아마 둘 사이에 많은 것들이 조금씩은 다르겠죠?? 그래서 회사에서 요구하는 next.js를 조금은 나중에 토이 프로젝트로서 경험하고 이번 프로젝트는 제대로 만드는 만큼 오직 리엑트만을 써서 최적화까지 딥다이브하고 나면 다음에 next.js로 프로젝트 할 때 더 많은 것들을 배우지 않을까 싶어서요! 당장 취업도 바라봐야 하지만, 개발자라는 길에 들어선 만큼 리엑트를 깊게 잘 딥다이브를 해야할지 next.js를 쓰면서 리엑트를 같이 배우는 것이 좋을지 의견 듣고 싶습니다!

Nextjs proxy 백엔드협업 질문드립니다.

현재 nextjs config 를 통해 rewrites 함수를통해 proxy를 설정하여 cors를해결하여 백엔드와 통신하고있습니다. 그러나 CHAT/8 이라는 특정페이지에 접속하면 whitelabel error 가 발생합니다. 이런경우 어떻게 해야할까요..? 갈피를 전혀잡지못하겠습니다. 해당에러는 api를 이상한주소로 요청하면 스프링에서 내뱉는 에러라고 알고있는데... ㅠㅠ async rewrites() { return [ { source: '/:path*', destination: `백엔드api주소/:path*`, }, ]; }, 이렇게 config가 설정되어있습니다.. 원인이 백엔드주소/chat/8 이렇게 요청을보냈는데 백엔드에는 없는api여서 내뱉는 에러인걸까요? 그렇다면 프론트쪽에선 채팅방ID를 chat?id=8 이런식으로 url라우팅을 바꿔야 하는걸까요?

react 중첩 라우팅 관련

현재 회원가입 페이지를 만들고 있습니다. 간단하게 설명드리자면 회원가입 페이지는 약관동의 -> 정보 입력 -> 완료 페이지 세 페이지로 이루어 지는데요, 이를 라우팅 할 때 고려할 수 있는 방법이 1. 현재 페이지를 state로 관리하며 컴포넌트만 바꿔준다. 2. 중첩 라우팅을 사용해 /register/terms ... 등으로 구현한다. 3. url hash를 사용해 다른 페이지를 구현한다. 정도가 있는것 같습니다. 이런 경우, 개발자님들은 어떤 구현 방식을 선호하시나요?

Nextjs와 nodejs

Nextjs는 react와 비슷하여 사용하기 편하고 라우팅이 편하다는 장점이 있지만 실시간 데이터 처리 및 분석에는 nodejs를 사용하는게 더 안전하지 않나요??

실시간으로 변하는 좋아요 같은 기능은 SSR로 처리해야되나요, 아님 SSG로 처리해야될까요?

안녕하세요! 혼자서 next로 ssr과 ssg을 얕게나마 경험해보고 싶어서 공부중에 있는데 궁금한 것이 생겨서 질문하려고 찾아왔습니다! 제가 알기로 다이나믹 라우팅을 통하여 데이터의 유동적인 변경이 없는 페이지는 SSG로, 데이터의 변동이 특징인 정적 페이지는 SSR로 데이터를 처리한다고 했던 것 같습니다. 그렇다면 궁금한 부분은 각 컨텐츠의 좋아요 버튼이 있고, 해당 버튼을 클릭 시 좋아요가 증가하게 되는데, 이 좋아요의 개수는 상호작용을 할 시에 꾸준히 변하며 페이지에도 그 변함에 따라서 그 개수를 렌더링에 반영하게 됩니다. 여기서 고민은 SSR인 getServerSideProps랑 SSG인 getStaticProps를 사용하여 get 요청을 받아야되는지 입니다. 제 생각에는 상호작용 컴포넌트를 작동시킬 때마다 Number 타입의 개수를 새로 렌더링에 반영해야되니 getServerSideProps를 써야될 것 같은데, 조금 난해한 것 같아서 다른 개발자분들의 의견을 듣고 싶습니다. 항상 감사합니다 :)

리액트 라우팅을 이렇게 하는게 맞는지 모르겠습니다..

안녕하세요 독학 하고 있는 학생입니다.. 작은 프로젝트로 혼자서 홈페이지를 만들고 있습니다. 우선 로그인 페이지부터 만들고 있는데, 로그인페이지에는 아이디찾기 비밀번호찾기 등등 많은 페이지가 들어가더라구요.. 그래서 리액트 라우터를 공부하고 적용시켰습니다. 코드는 아래와 같습니다. 이렇게 해도 제가 원하는대로 로그인페이지에서 아이디 찾기 페이지로 이동하고 하는 것은 맞는데 App.js에 이렇게 주저리주저리 원하는 것을 다 넣어두면 나중에 전체적으로 페이지를 완성시켰을 때 App.js에 너무 방대한 내용이 들어가지않나..? 싶더라구요.. 그래서 중첩된 라우트도 찾아서 공부했는데 크흡..암만해도 적용이 안됩니다.. 그래서 그냥 이대로 홈페이지를 계속 만들어도 되는지,,아니면 저의 고민을 해결할 방법이 중첩된 라우트가 맞는지 알고싶습니다.. 맞다면 다시 공부해야겠죠 ㅜ.. 답변부탁드립니다 (_ _) import "./App.css"; import { Route, Routes } from "react-router-dom"; import WigTemplate from "./components/wigtemplate"; import FindId from "./components/findId"; import FindPwd from "./components/findPwd"; import SignIn from "./components/signIn"; import NotFound from "./components/notFound"; function App() { return ( <Routes> <Route path="/" element={<WigTemplate />} /> <Route path="/findId" element={<FindId />} /> <Route path="/findPwd" element={<FindPwd />} /> <Route path="/signIn" element={<SignIn />} /> <Route path="*" element={<NotFound />} /> </Routes> ); } export default App; ---------------------------------------------------------- import React from "react"; import styled from "styled-components"; import WigLoginButton from "./wigLoginButton"; import WigHeader from "./wigHeader"; import WigInput from "./wigInput"; import WigFind from "./wigFind"; const WigTemplateContainer = styled.div` height: 100vh; display: flex; align-items: center; justify-content: center; `; const WigTemplateBlock = styled.div` width: 500px; height: 600px; background: #d0ebff; border-radius: 80px; `; function WigTemplate() { return ( <WigTemplateContainer> <WigTemplateBlock> <WigHeader></WigHeader> <WigInput></WigInput> <WigFind></WigFind> <WigLoginButton></WigLoginButton> </WigTemplateBlock> </WigTemplateContainer> ); } export default WigTemplate; ------------------------------------------------------- import React from "react"; import styled from "styled-components"; import { RxDividerVertical } from "react-icons/rx"; import { Link } from "react-router-dom"; const FindBlock = styled.div` display: flex; justify-content: center; `; const ABlock = styled(Link)` color: black; font-size: 0.9rem; text-decoration: none; `; function WigFind() { return ( <FindBlock> <ABlock to="/findId">아이디 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/findPwd">비밀번호 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/signIn">회원가입</ABlock> </FindBlock> ); } export default WigFind;

next js middleware 사용시 404페이지 에러문제

안녕하세요, next js middleware를 사용해 라우팅 제어를 하고있습니다. 허나 404에러 페이지 테스트를 위해 아무 경로를 입력하고 들어가니 아래와 같은 에러를 발생시키더군요, 구글 검색결과 현재까지 수정되지 않은 버그인듯 합니다만,, middleware파일을 삭제하면 에러가 발생하지 않습니다. 혹시 아래와 같은 버그를 해결해보신분 계신가요? next 버전은 13.1 입니다. 이미지가 화질이 안좋은데 Unhandled Runtime Error Error: Invariant: attempted to hard navigate to the same URL /dashboard/customdashboard http://localhost:3000/dashboard/customdashboard 에러입니다.

next.js 다국어 지원 어떤식으로 구현하시나요?

안녕하세요, next.js로 여러가지 언어를 지원하는 웹사이트를 만드려고 합니다. 주로 react-i18next또는 next-i18next을 사용해서 라우팅을 변경하는 것으로 구현 하는 것 같은데요. next.js에서는 주로 어떤 라이브러리를 사용하나요? 그리고 다국어 json 폴더 구조를 어떤식으로 잡으시나요 next.js로 다국어 지원 구현해보신 선배님들의 조언을 얻고싶습니다. 감사합니다!

next.js pages 폴더에 라우팅 관련이 아닌 컴포넌트 파일을 넣는 것은 안티패턴인가요?

안녕하세요. next.js로 프로젝트를 하고 있는데요, 팀원이 작성해준 코드를 보다가 궁금한 점이 생겨서 질문드립니다. next.js는 파일 기반 라우팅 시스템이어서 pages에 작성한 컴포넌트는 실제로 라우팅이 되는것으로 알고있습니다. login이라는 폴더에 작성한 index.tsx는 login으로 접속할 수 있는데요. 팀원이 login폴더에 라우팅과 관련되지 않은 LoginButton, LoginAuth와 같은 컴포넌트를 한곳에 같이 작성해두었습니다. 이렇게하면 라우팅할때 문제가 되지 않나요? 팀원의견은 같은 역할을하는 코드가 한 폴더에 있으면 관리하기 쉬워서 위와같이 작성했다고 했는데. 저는 실제 path와 연관된 컴포넌트만 pages에 있고, 나머지 컴포넌트는 별도 폴더로 구분해야 한다고 생각합니다. 기준을 어떻게 가져가면 좋을까요.. pages에 라우팅 관련이 아닌 컴포넌트를 넣어도 괜찮나요? 감사합니다.

next.js dynamic route slug 에러

next page에서 interest라는 폴더가 있고 user, company로 path를 나누려고 합니다. interest/[id] interest/user/[id] interest/company/[id] interest/[id], interest/[keyword]/[id] <- 이렇게 폴더를 만들었는데 에러가 발생하네요.. You cannot use different slug names for the same dynamic path ('id' !== 'keyword'). interest/[id]도 필요하고 interest/[keyword]도 필요할 경우 동적라우팅을 사용하는 방법이 있을까요?

next.js router 이동할때 보여지는 url 변경

router.push를 사용하여 라우팅을 변경해주고 있는데 url을 통해 페이지에 쿼리를 전달해야합니다. 지금은 /books/create?bookId=106?username="john"?keywordId=200 이런식으로 보내주고 있습니다. url이 너무 길어지고 있어서 데이터는 그대로 전달받고 url을 간결하게 변경하고 싶은데 방법이 있을까요?