inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

카테고리도 추가하는 방법이 있나요?

미해결

3분만에 만드는 깃헙 블로그

글을 쓰는데 카테고리를 더 추가하여 더욱 세분화하고 싶습니다. 카테고리를 추가하는 방법이 있나요?

  • github
  • jupyter-notebook
  • markdown
eunseon 댓글 1 좋아요 0 조회수 218

{10.2장] 로그인 후 새로고침 해야 todolist가 보입니다

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

로그인 후에도 로딩 애니메이션만 계속 돌아요. 새로 고침을 눌러야만 todo list 가 보입니다. 뭐가 잘못 된걸까요

  • react
  • 클론코딩
  • next.js
  • supabase
슈퍼아스라다 댓글 1 좋아요 0 조회수 249

serverComponent 가 갑자기 강의에서나와요

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

처음부터 쭉 강의를 따라하고 있습니다. 9.3 장에서 갑자기 serverComponent 라는게 생겼어요. 무슨 용도일까요?

  • react
  • 클론코딩
  • next.js
  • supabase
슈퍼아스라다 댓글 1 좋아요 0 조회수 285

수업질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요, 수업 중 이해가 되지 않는 부분이 있어 질문 드립니다. 훈훈한 JS>섹션7>함수,변수의 호이스팅 강의에서 17:43에서 newLi에 complete 클래스를 추가해주는 기능을 설명에 이해가 되지 않습니다. 위에 content는 부분에서는 전체 todoInput.value를 가져와서 덮어씌우는 것으로 이해했는데, 아래 클래스를 추가하는 부분에 정의된 newLi는 엔터로 인해 함수 실행될 때마다 새로운 createElment("li") 값을 가진 변수인데, 여기에 어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는걸까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
호롤롤로 댓글 1 좋아요 0 조회수 149

Slack 초대 부탁드립니다

해결됨

코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

tlscodns@gachon.ac.kr 입니다 감사합니다!

  • git
  • github
  • 버전관리시스템
codns0621 댓글 2 좋아요 1 조회수 337

supabase.ts 코드 색상이 흰색입니다.

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

'Generating TypeScript Types' 강의에서 supabase.ts 생성할 때 나오는 코드 색상이 영상에서 나오는 색상하고 달라요. 저는 모두 흰색으로 나와서 가독성이 떨어지더라구요. 익스텐션이라던지 테마라던지 등등 구글링해서 나오는건 모두 건드려봤는데 바뀌지 않았습니다. 이건 어떻게 하면 되나요?

  • react
  • 클론코딩
  • next.js
  • supabase
ramcloud 댓글 1 좋아요 0 조회수 229

강의자료

해결됨

팀 개발을 위한 Git, GitHub 입문

강의자료 부탁드립니다. kimjihoon97@hotmail.com

  • git
  • github
  • 버전관리시스템
김지훈 댓글 2 좋아요 0 조회수 218

git username 과 gutHub의 이름이 동일해야 하나요?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

git username을 먼저 정하고 gitHub에 가서 계정을 만들었는데 유저네임 작명 규정때문에 같은 유저네임을 사용하지 못했습니다. 이게 혹시 문제가 될까요? 이미 커밋에 작성자 정보를 입력하고 저장한 상태인데 어떻게 하면 좋을까요?

  • react
  • git
  • github
가을 댓글 1 좋아요 0 조회수 527

Next.js 14 배포 후 액세스토큰 업데이트 안되는 문제

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님 강의 잘 듣고 있습니다. 사실 이 문제가 몇개월동안 계속 해결이 안되어서 강의를 수강한거나 마찬가지인데요. 아무리 스택오버플로우나, next.js issue에 직접 글을 올려도 해결이 안되어서 이렇게 질문 글 올립니다. 일단 Next.js 14 + Express 조합으로 배포를 한 상황이고 jwt 토큰을 쿠키에 담아서 로그인 기능을 구현했습니다. 또한 next.js Middleware 내부에서 액세스토큰을 재발급 받아주고 있습니다. 순서는 이렇습니다. 로그인 시에 사용자가 아이디 + 비밀번호를 입력해서 서버에게 요청한다. 서버에서 해당 아이디 값을 받아서 조회 후, 새로운 리프레시 토큰 + 액세스 토큰을 클라이언트로 보내준다. 백엔드 내부 코드는 다음과 같습니다. const newAccessToken = createNewAccessToken(existingUser); const newRefreshToken = createNewRefreshToken(existingUser); const hashedToken = await hashValue(newRefreshToken); await deleteRefreshTokenData(existingUser.id); await createRefreshTokenData(hashedToken, existingUser.id); return res.json({ success: true, accessTokenValue: newAccessToken, refreshTokenValue: newRefreshToken, }); Next.js 측에서 액세스 토큰과 리프레시 토큰을 받아서 API ROUTE로 POST 요청을 날려서 set cookie를 해준다. const sendTokenCookieToHandler = async (accessTokenValue: string, refreshTokenValue: string) => { await fetch('/api/token', { method: 'POST', body: JSON.stringify({ accessTokenValue, refreshTokenValue }), headers: new Headers({ 'Content-Type': 'application/json', }), cache: 'no-store', }); }; export default sendTokenCookieToHandler; ``` 그 후 액세스 토큰이 만료 되면, Next.js 미들웨어 단에서 리프레시 토큰을 다시 백엔드로 보내서 새로운 액세스 토큰을 받아온다. Next.js 미들웨어 코드는 이렇습니다. export async function middleware(request: NextRequest) { const { accessToken, refreshToken } = getTokenValues(request); if (!accessToken && refreshToken) { const res = await getNewAccessToken(refreshToken); if (res && res.newAccessToken) { const response = NextResponse.next(); const { newAccessToken } = res; response.cookies.set('accessToken', newAccessToken, { expires: new Date(Date.now() + 24 * 60 * 60 * 1000), }); return response; } } return NextResponse.next(); } ``` 받아온 액세스 토큰 값을 아예 middleware 단에서 set cookie 를 통해 쿠키로 설정해준다. 근데 여기서 문제는 초기에는 정상적으로 잘 작동합니다. 액세스 토큰이 만료 된 후에도 정상적으로 새로운 액세스토큰을 받아오기도 하고요 근데 문제는 일정 시간 후에(제가 생각했을때 리프레시토큰이 만료 된 후, 다시 로그인 요청을 보냈을때 같습니다.) 아예 새로운 리프레시 토큰과 액세스 토큰을 제대로 받아오지 못하는거 같습니다. 근데 F12 를 켜서 확인해보면 백엔드로 api 콜은 정상적으로 가고 있습니다.. 그래서 현재 다시 재배포를 할때마다 초기 상태로 돌아가서 로그인이 정상적으로 작동 하게 되는데요. 어디가 문제인걸까요 ? 여러 오픈톡이나 커뮤니티에 물어봤지만, 어떤분은 Next.js 내부에서 같은 라우트 그룹이면 미들웨어를 거치지 않아서 발생하는 문제라고도 하시는데 초기 배포 당시에, 리프레시 토큰을 처음에 잘 받았을때 일부러 액세스 토큰을 삭제하고 다시 새로고침하면 액세스 토큰을 제대로 잘 받아오고 있습니다.. 도저히 아무리 이리저리 수정해봐도 몇개월 동안 고치지 못해서 이렇게 글 남깁니다. 읽어주셔서 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
댓글 3 좋아요 0 조회수 958

공지

해결됨

Git과 GitHub 활용

강좌 운영이나 강의 내용에 관해 궁금한 점이 있으면 자유롭게 나누어주세요. 교수자, 수강생 누구나 글쓰기와 댓글 쓰기가 가능합니다.

  • git
  • github
부산대학교 AI융합교육원 댓글 1 좋아요 0 조회수 198

결제관련

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

결제를 구현하는 중인데 여기 프로젝트에서 결제 과정이 로그인 한 후에 그 아이디로 포인트 충천 API를 날려서 포인트를 충전후 상세 페이지에서 결제버튼 클릭시 포인트가 충분하면 성공 포인트가 부족하면 실패 이런식으로 만들어져야 하는 건가요??

  • react
  • node.js
  • seo
  • graphql
  • next.js
박현민 댓글 1 좋아요 0 조회수 171

서버컴포넌트, 클라이언트 컴포넌트

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 . 아직 리액트에 빠져살아서 서버컴포넌트와 클라이언트 컴포넌트 사용 구분이 잘 가지 않아 질문드립니다. 1번 질문. 예를들어 3개의 페이지가 존재한다고 했을때, 각 페이지는 navbar(하위컴포넌트)를 가지려고 하는데요 navbar의 버튼은 각 페이지 마다 다 다른 함수로 동작하게 된다고 가정하면, 3개의 페이지 컴포넌트는 'use-client'를 사용하여 클라이언트 컴포넌트가 되어야 하는게 맞나요? 그렇다면 페이지의 하위컴포넌트를 서버컴포넌트로 만들면 서버컴포넌트로 사용하면 ssr을 사용하는 이유가 충분할까요? 2번질문. after_login 폴더 안에 _lib폴더에서 'getTrends'함수로 패치를 했는데요, 결국에는 클라이언트 컴포넌트에서 usequery로 데이터를 패치해오고 있습니다. 그러면 데이터 패치도 클라이언트컴포넌트에서 진행하는것인데, 1번상황에 패치도 2번과 같이 한다면 서버사이드렌더링의 장점은 어떤것이라고 볼 수 있을까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
다삐 댓글 6 좋아요 0 조회수 687

인터셉팅 라우트에서 메타데이터를 적용할수 없는가요?

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 유저정보를 모달창으로 보여주게 하기위해 아래와같이 user를 사용해서 적용했었습니다. 처음 만들었을때 메타데이터도 유저정보에 맞게 변경시켜줘야하는데 인터셉팅 라우터를 사용하면 메타데이터를 적용하지 못한다는 걸 어디서 본거같아서 테스트해보고 적용했었습니다. (user 폴더) 그리고나서 테스트를 하던중에 ux가 어색한거같아서 다시 검색해보니 인터셉팅라우트에서 메타데이터 적용하는 부분을 했다는 사람도 있는것 같더라구요 그래서 (.)tester 폴더를 만들어서 실험해봤는데 메타데이터가 적용 안되서 혹시 선생님은 인터셉트 라우트에서 메타데이터를 적용하는 방법을 아실까해서 여쭤봅니다! 📦@modal ┣ 📂(.)promise ┃ ┗ 📂form ┃ ┃ ┗ 📜page.tsx ┣ 📂(.)tester ┃ ┣ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜default.tsx ┣ 📂user ┃ ┗ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┗ 📜page.tsx ┗ 📜default.tsx 시도했던 방법은 1. page.tsx에서 직접 generateMetadata를 사용. layout.tsx를 만들고 거기에 generateMetadata를 사용후 page.tsx를 children으로 받기 여유되실때 확인해주시면 정말 감사하겠습니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
챠챠_ 댓글 1 좋아요 0 조회수 207

bun, biome 사용 질문

해결됨

Next.js 시작하기

안녕하세요, 강의 잘 보고 있습니다. React Native 프로젝트를 진행할 때 Bun을 사용하여 패키지 매니징을 했을 때 굉장히 개발 경험이 쾌적했던 기억이 있습니다. 그리고 비교적 최근 ESLint와 Prettier의 단점을 상쇄해줄 Biome라는 솔루션이 나와서 도입해보려고 하던 상태였습니다. 선생님은 Bun, Biome에 대해 어떻게 생각하시는지 궁금합니다!

  • javascript
  • react
  • next.js
popo 댓글 2 좋아요 0 조회수 371

ssh 관련 문제

해결됨

모두의 깃 & 깃허브

안녕하세요 선생님. 깃허브와 소스트리 연동하기 강의에서 문제가 생깁니다. Window 에서 진행하고 있습니다. 일단 ssh-keygen을 이용해서 key를 생성 했습니다. 그리고 만든 퍼블릭 키를 깃허브에 등록하는것 까지 했고 이후 도구에 들어가서 ssh 클라이언트 설정에 Openssh로 했지만 키 경로가 강의에서 보는것처럼 자동으로 뜨지 않았습니다. 그래서 여러가지 시도를 해봤습니다. 일단 앱에서 Openssh 서버를 깔았습니다. 클라이언트는 깔려있었습니다. 그래도 안됐습니다. 그래서 openssh해도 자동으로 안뜨니까 제가 직접 개인키 경로를 복사해서 입력해줬습니다. 그래도 선생님의 레포지토리가 클론되지 않습니다. 먼저 이렇게 나오고 기다리다보면 이런 에러메세지가 나옵니다. 아래는 위의 사진에 나온 에러메세지를 그대로 복붙한 것입니다. Command: git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks ls-remote git@github.com :kangtegong/collaboration.git 출력: 오류: ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 제가 해볼수 있는것은 해본것 같은데 혹시 도와주실수 있을까요?

  • git
  • github
박갓 댓글 2 좋아요 0 조회수 381

기능

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

taliWindcss를 사용해서 클래스네임에 작성을하고 마우스를 가져다 대면 75% 이런식으로 나온다고 하셨는데 아무것도 안나오는데 어떻게 하나요? 이 부분 강사님처럼 모양 바꾸고 싶은데 어떻게 하나요?

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
Full Stack 개발자 댓글 1 좋아요 0 조회수 221

오류가 안보여요

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

Form 컴포넌트를 신규로 만들어서 기존 컴포넌트에서 가져왔는데 강의에서는 오류가 표시가 되지만 저는 오류가 나타나지 않아서 현재, Form.js 파일에는 오류가 없는걸로 나오는데 어떻게 해야 하나요?

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
Full Stack 개발자 댓글 1 좋아요 0 조회수 222

Infinite Scroll: pageParam 질문

해결됨

Next + React Query로 SNS 서비스 만들기

제로초님 안녕하세요! 제가 개발중인 프로젝트에서 최신순, 조회순 정렬과 키워드 검색을 통해 도서 목록을 출력하고 있는데요. Infinite scroll을 적용하려다 보니 강의에서 처럼 cursor로 전달할 postId 같은 값이 없고, 도서 데이터의 키 값은 uuid로 되어있습니다. 커서 기반으로 개발하려면 백엔드에서 별도 값을 내려준다거나, 조회 SQL을 변경 해야 할까요? 어떤 적절한 방법이 있을지 궁금합니다. 감사합니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
도전적인 제비 댓글 1 좋아요 0 조회수 194

깃 브랜치 전략

해결됨

모두의 깃 & 깃허브

강의가 정말 기본적인것만 있어서ㅠㅠ 깃 브랜치 전략에 대해서도 실습까지 보여주실수없나요..

  • git
  • github
플하 댓글 1 좋아요 0 조회수 270

인기 태그

인프런 TOP Writers

주간 인기글