#nextjs

2일 전 · 커리어리 AI 봇 님의 새로운 답변

Mui x data grid premium 버전 그룹핑 관련 질문입니다. 도와주세요ㅠㅠ

개발환경은 Nextjs, ts 입니다. 유첨사진처럼 그룹헤더에 버튼이 들어가게 구현해야해서 mui data grid 프리미엄 버전에 그룹핑 기능이 있다하여 프리미엄 버전을 구입했습니다. 코드 작업해서 두번째 사진처럼 그룹핑 기능은 만들어놨는데 문제는 그룹헤더 커스텀 하는 방법을 모르겠습니다. 예시 찾아봐도 커스텀헤더는 보이지 않더라구요.. 아예 해당 기능이 존재하지 않는 건지 여부가 궁금합니다ㅠㅠ

기술

#mui

#nextjs

#tablegrid

답변 1

댓글 0

조회 22

NextJS에서 Component 호출 할 때 getServerSideProps 호출 방법이 있나요?

JSTL 이나 Thymeleaf 하다가 NextJS 하려니 많이 해메고 있네요. @,@;;; 우선 시나리오는 ProductList.html 페이지에서 서버로부터 상품 목록 주욱 받아 화면 출력 하는 것 까지는 했어요. 이때 서버 목록은 getServerSideProps 함수에서 받아 처리 했구요. 이제 상품 이름 클릭 했을 때 상세 정보를 Layer 화면으로 띄우려는데 그게 잘 안되네요. Thymeleaf에선 해당 페이지만 빌드 돼 html 형태로 받아 올 수 있었는데 nextjs는 어떻게 해야 하는지 모르겠어요. // 상품 상세 내용 export default function ProductModalLayer({ product }:IProduct) { return (<div> {product.name}</div>); } export async function getServerSideProps(context: any) { // 서버 통신으로 product 상세 정보 전달 const data = ... 생략... return { props: { product: data, }, }; } ------ ProductList 부분에서 상품 이름을 클릭 했을 때 const ModalView = dynamic(() => import("../ProductModal.layer")); // 선언 ... // 화면 그리기 <ModalView seq={prod.productSeq}></ModalView> 이런 형식으로 호출 하니까 getServerSideProps를 호출 하지 않네요. 다른 방법으로 fetch를 이용해 호출 해 봤는데 const res = await fetch("/ProductModal.layer?seq=" + seq); const content = await res.text(); 이렇게 하면 getServerSideProps를 호출 하지만 html Tag가 엄청 붙어 나오고 return 의 결과가 아닙니다. getServerSideProps를 고집 하는 이유는 서버 호출 인터페이스는 꼭 서버에서 이뤄지게 하고 싶어서에요. 브라우져 디버거로 노출 안되게 하고 싶어서. 힌트나 방법좀 부탁 드려요~ 다시 JSTL 이나 Thymeleaf로 돌아 갈 수 없어~~~~

기술

#nextjs

#react

#ssr

#getserversideprops

답변 1

댓글 1

조회 41

media query가 배포환경 mobile에선 작동을 안해요… ㅜㅜ

안녕하세요 ! Nextjs 를 이용해서 프로젝트를 진행하고있습니다 ! 개발중 크롬 개발자도구에서 모바일버전으로 했을땐 잘 동작하다가 배포환경에서 아이폰으로 접속했을때는 제대로 동작을 안하더라구요... // size.ts const MOBILE_PX = '768px' export const MOBILE_MODE = `(max-width: ${MOBILE_PX}) as const` // index.ts import {MOBILE_MODE} from '~~~' @media (${MOBILE_MODE}) { display:flex; flex-direction: column; } 예를 들어 이런형식으로 구성되어있는데 혹시 문제를 아시는 분 있을까요? ㅠㅠ 구글에 가장 많이나오는 글인 <meta name="viewport" ~~~ /> 태그는 예전에 삽입되어있구... 읽어주셔서 감사합니다 !

기술

#css

#react

#nextjs

답변 2

댓글 1

조회 128

next.js 하고 express.js 로 웹앱 개발중인데

next.js 에서 express 쪽으로 request 날릴때 express 에서 csrf 검증을 통해서 요청을 검증하고 싶은데 csrf token 발급을 어떻게 해야할지 감이 잘 안와서요 next.js 에서 express로 csrf token 발급 request를 날려서 발급받은 csrf token을 쿠키에 저장하는 방법이 좋을까요?

기술

#javascript

#nextjs

#expressjs

답변 1

댓글 0

조회 187

nextjs에서 Error: Client network socket disconnected before secure TLS connection was established 오류

nextjs 질문 있습니다! 프로젝트에서 getServerSideProps, getStaticProps를 사용하여 렌더링을 할 경우 페이지 첫 진입 자체는 문제 없는데 새로 고침을 하면 Error: Client network socket disconnected before secure TLS connection was established 위와 같은 오류가 계속 나는데 해결 방법 아시는 분 계신가요?

기술

#nextjs

답변 1

댓글 0

조회 120

Next.js Link의 as속성 질문드립니다.

안녕하세요. nextjs에서 Link 사용 시 as 속성을 넣었는데 404에러가 발생합니다. 1번 코드로도 해보고, next.config.js에서 2번 코드처럼도 해봤는데 주소창에 url은 as 처럼 보여지고 실제로도 /login으로 이동하더라구요. 무엇이 문제일까요? ㅠ

기술

#next.js

#next

#nextjs

답변 1

댓글 0

조회 260

프론트엔드 주니어 이력서 질문입니다!!

안녕하세요 프론트엔드 국비수료후 12월부터 지금까지 이력서 넣고 있는 취준생입니다. 현재 40개이상은 지원한거 같은데 면접을 한곳봤습니다ㅜㅜ 포토폴리오가 부족해서 그런가 싶어서 next.js로 한 개인프로젝트를 구현중입니다. 하지만 혼자하다보니 막히는부분도 많네요ㅜㅜ 포토폴리오를 추가하며 계속이력서를 넣는게 맞는지 궁금해서 질문드려요!! 추가로 퍼블리셔 구인공고에서 우대사항쪽에 react가능한분을 찾고 있는곳이 많던데 퍼블리셔 지원하는건 어떻게 생각하는지 궁금합니다 선배님들!!

커리어

#이력서

#포토폴리오

#프론트엔드

#react

#nextjs

답변 2

댓글 4

Up 2

조회 437

nextjs 13 getStaticProps 질문

안녕하세요. nextjs 13에서 변경된 app 디렉토리에서는 getStaticProps를 지원하지 않고 fetch의 cache로 getStaticProps 등의 동작을 수행할 수 있게 된 부분에 있어서 의문점이 생겨서 질문 남깁니다. 1. 서버 컴포넌트니까 console등은 서버에서 찍히는 것을 확인하였습니다. 이것은 서버 컴포넌트는 항상 ssr로 동작한다는 의미인것인가요? 2. fetch를 사용하지 않고서는 static, ssr, isr 을 구분시킬 수 없는 건가요? 3. 이전 버전(12)에서는 getStaticProps를 사용해서 fs, gray-matter 같은 static하게 서버에서 생성 해놓기를 원했던 경우에 사용하기도 하였는데 이런 부분은 구현할 수가 없는 건가요? (코드 첨부)

기술

#react

#next.js

#nextjs

답변 1

댓글 0

Up 1

조회 372

next.js 에서 ssr의 경우 쿠키 접근은 어떻게 하나요?

1. next.js 에서 ssr의 경우 로컬스토리지는 접근이 불가능한데 쿠키도 접근이 불가능한가요? 2. 그리고 추가로 궁금한 부분은 accessToken을 로컬 스토리지로 저장하시는 분들은 ssr시에 인증을 어떻게 하시나요??

기술

#nextjs

#cookie

답변 2

댓글 0

Up 1

조회 618

리액트나 뷰로 모바일 앱을 만든다는게

프로젝트들 구경하다가 든 질문인데 모바일 앱인데 프론트 기술 스택으로는 리액트를 썼다고 합니다. 이런 거는 네이티브 테두리 안에 웹뷰로 썼다는 건가요? 아니면 그냥 모바일 페이지를 만들고 브라우저로 사용가능하다는 건가요?? 리액트나 next js 같은 프레임워크를 사용해서 모바일 앱을 만든다는 얘기도 많이 들었고 채용공고에서도 많이 봤었습니다. 리액트 네이티브가 아니라 그냥 리액트로 앱을 만드는데 프론트엔드가 정확히 어떤걸 어떻게 만드는지 궁금해서 질문 남겨봅니다!

기술

#react

#nextjs

#vuejs

답변 1

댓글 1

Up 2

조회 269

next-auth google 로그인 500 server error

next-auth를 사용해서 google 로그인 구현중인데 Signup 버튼을 클릭하면 500 server error가 발생합니다. 로컬에서는 잘 됐는데, vercel로 배포해서 개발도메인으로 연동하려고 하니까 에러가 발생하네요.. ㅠ 혹시 해결해보신 분 있으실까요?

기술

#react

#nextjs

#google

#login

답변 1

댓글 1

Up 2

조회 488

nextjs 13 npm run dev 에러

안녕하세요~ nextjs 13이 나와서 한번 사용해보려고했는데 npm run dev를 해보니까 Error: experimental.appDir requires Node v16.8.0 or later. 가 뜨면서 안되더라구요. 고수님들 도와주세요 (_ _)

기술

#react

#nextjs

답변 1

댓글 0

Up 2

조회 459

next.js url 설정

지금 사용하고 있는 홈페이지의 url을 변경하려고 합니다. 예를들어 /profiles -> /users 로 변경하려고 하는데요. pages에 해당 url에 맞게 코드를 옮겨 놓았습니다. 문제는 이전 url(/profiles)로 들어오는 사람도 변경된 url로 이동시켜주고 싶은데요. 어떤 방법이 있을까요????

기술

#프론트엔드

#nextjs

답변 1

댓글 1

Up 2

조회 191