inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

블로그 포스팅 질문

미해결

포트폴리오 초간단 배포하기

좋은 강의 만들어주셔서 감사합니다! 덕분에 막연했던 배포에 대해 조금씩 알아가고 있습니다! 혹시 강의 들으면서 정리한 내용을 블로그에 포스팅해도 괜찮을까요?

  • linux
  • github
  • nginx
Chan 댓글 2 좋아요 2 조회수 169

질문 있습니다

미해결

실전 활용을 위한 git/github(feat.각종 충돌상황 해결하기)

안녕하세요. 수업 잘 듣고 있습니다! 한가지 질문을 하려고 하는데요 이미 올라간 소스코드가 있는 github 레파지토리 자체를 삭제한다면 아무도 그 소스코드에는 접근을 못하는 건가요?

  • git
  • github
  • gitlab
열음 댓글 1 좋아요 0 조회수 96

suspense관련 질문 있습니다! 섹션6 5.2풀 라우트 캐시2강의

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 강의 잘 듣고 있습니다! suspense태그 관련 질문이 있습니다! 5.2 풀 라우트 캐시2 강의에서 저희가 useSearchParams() 훅이 빌드타임에서 실행되는 오류를 없애기 위해 <SearchBar/ > 컴포넌트를 suspense로 감싸잖아요 이때 강의 4분45초 쯤에서 사전 suspense를 사용해서 이제 사전 렌더링 과정에서 완전히 배제한다고 하셨는데, 그러면 페이지를 만들때 suspense로 감싼 컴포넌트는 nextjs app router방식이 아니라 csr방식으로 구현이 되는건가요 나머지 컴포넌트들만 approuter의 사전 렌더링 방식으로 구현이 되는건가요?? 제가 정리했을땐 동적 페이지도 정적 페이지도 사전렌더링의 시점은 다르지만 (요청할때, 빌드할때) 사전렌더링이라는 기능은 nextjs에서 기본으로 작동한다고 알고 있습니다! 그래서 사전렌더링에서 완전 배제된다는 부분이 헷갈려서 질문 남깁니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 3 좋아요 0 조회수 191

컴포넌트 단위 에러 처리는 이전 처럼 에러 바운더리를 래핑하면 되나요?

해결됨

한 입 크기로 잘라먹는 Next.js

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • typescript
  • next.js
트릴 댓글 2 좋아요 0 조회수 273

params부분 에러

해결됨

한 입 크기로 잘라먹는 Next.js

fetch 부분에서 다음과 같이 작성하였는데 params.id부분에서 id 부분에 Property 'id' does not exist on type 'Promise<{ id: string | string[]; }>'.ts(2339) 이러한 에러가 발생합니다. const result = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` );

  • react
  • typescript
  • next.js
손성오 댓글 3 좋아요 0 조회수 431

캐싱 옵션이 적용되질않아요.

미해결

한 입 크기로 잘라먹는 Next.js

어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요? 새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.

  • react
  • typescript
  • next.js
트릴 댓글 3 좋아요 0 조회수 226

강사님 혹시 vscode 어떤 테마 쓰시나요..?

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

강사님 테마가 너무 좋은거 같아서 그런데.. 찾아봐도 똑같은게 없네요 ㅠㅠ

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
DevHyun2 댓글 1 좋아요 0 조회수 351

react-beatiful-dnd에서 문제가 발생합니다.

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다. 사용하고 있는 버전의 문제일까요? { "name": "react-todo-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.2.0", "@testing-library/user-event": "13.5.0", "react": "^19.0.0", "react-beautiful-dnd": "13.1.1", "react-dom": "^19.0.0", "react-scripts": "5.0.1", "web-vitals": "2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "10.4.20", "postcss": "8.5.3", "tailwindcss": "3.4.17" } } Lists.js import React from 'react'; import List from './List.js' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; const Lists = React.memo(({todoData, setTodoData}) => { // console.log('Lists Component') const handleEnd = (result) => { if(!result.destination) return; const newTodoData = Array.from(todoData); const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); } return <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId='todo'> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {(todoData ?? []).map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} provided={provided} snapshot={snapshot} todoData={todoData} setTodoData={setTodoData} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div>; }) export default Lists; App.js import React, {useState} from 'react' import "./App.css" import Lists from './components/Lists' import Form from './components/Form' export default function App() { // console.log('App Component') const [todoData, setTodoData] = useState([ { id: 1, title: '운동하기', completed: false, }, { id: 2, title: '공부하기', completed: false, } ]) const [value, setValue] = useState("") return ( <div className="flex items-center justify-center w-screen h-screen bg-blue-100" > <div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'> <div className="flex justify-between mb-3"> <h1>할 일 목록</h1> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form value={value} setValue={setValue} setTodoData={setTodoData}/> </div> </div> ) }

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
  • react-beatiful-dnd
  • isdropdisabled
고유림 댓글 1 좋아요 0 조회수 127

Error: Route "/search" used `searchParams.q`. `searchParams` should be awaited before using its properties.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요 강사님 해당 오류는 최신버전에서 발생하는건가요?! Error: Route "/search" used searchParams.q . searchParams should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src/app/(with-searchbar)/search/page.tsx:12:32) 10 | return ( 11 | <div> > 12 | Search 페이지 : {searchParams.q} | ^ 13 | <ClientComponent> 14 | <></> 15 | </ClientComponent> import ClientComponent from "@/components/client-component"; export default function Page({ searchParams, }: { searchParams: { q?: string; } }) { return ( <div> Search 페이지 : {searchParams.q} <ClientComponent> <></> </ClientComponent> </div> ) }

  • react
  • typescript
  • next.js
강프로그래머 댓글 2 좋아요 0 조회수 253

router.replace를 하는데 setCurrent에서 변경한 상태가 유지?

미해결

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

라우터가 이동하면 상태가 초기화 됐던걸로 아는데, setCurrent는 왜 계속 유지가 되나요? 쉘로우 라우팅도 아닌데,,, 제가 잘못알고있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
트릴 댓글 2 좋아요 0 조회수 184

rebase conflict 질문

해결됨

Git & GitHub, 원리부터 차근차근 - 근본깃

rebase conflict 질문드립니다. 강의에서는 rebase시에 test branch에서 main branch로 범위가 수정되면서 main branch의 최신 commit을 가리키고 있다가 베이스로부터 기존 test branch에 있다가 떨어져 나온 커밋들의 변경분에 대해 하나씩 tracked area와 staging area에 반영이 되고 여기서 같은 위치에 수정이 일어났으니 conflict가 난다고 말씀주셨는데 이게 기존 3-way-merge 와는 좀 다른 거 같아서요. 기존 3-way-merge에서는 base 커밋에 따른 diff를 찾다 보니 두 브랜치의 같은 위치에 동시에 수정이 일어났을 경우에는 git이 어떤 걸 최종적으로 반영해야 할 지 몰라 conflict가 난다고 알고 있는데 여기서는 base 커밋에서의 diff를 확인하는게 아니기 때문에 노란색이 초록색으로 수정되었다고 생각해야 하는 거 아닌가요 ? 예를 들어 main branch가 하나만 있고 여기서 yellow를 green으로 수정해서 커밋하는게 가능하듯이 설명에서 보면 head가 가리키는 게 최신 커밋이고 여기서 변동분을 반영하는 거니까 동시에 같은 부분이 변경이 되어서 뭘 반영해야 할지 모르는 것과는 좀 다른 거 같아서요. 감사합니다.

  • git
  • github
인프린 댓글 3 좋아요 0 조회수 185

next 에러 로그 관련 질문

해결됨

한 입 크기로 잘라먹는 Next.js

현재 RecoBooks 함수 정의가 위와 같고, 3초마다 캐시를 업데이트하는 속성이 설정되어 있습니다. 그런데 저는 강사님처럼 error 노출이 되지 않고 캐시되어 있는 동일한 랜덤 도서 목록이 계속 나오고 있습니다. 아래는 npm run dev로 실행했을 때 나온 로그입니다. 여기서 하나 더 궁금한게 있는데 현재 전체 도서 목록을 불러오는 fetch 함수는 요청한 결과를 무조건 캐싱하는 속성이 설정되어 있습니다. 그런데 제 로그를 보면 http://localhost:12345/book 이 api가 두 번 호출되고 있습니다. request memoization이 호출이 안되는 거 같은데 데이터 캐시가 우위적으로 호출되는 건가요??

  • react
  • typescript
  • next.js
jwcheon 댓글 1 좋아요 0 조회수 199

node_modules에서 export 오류

미해결

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

수업과 같이 npm에 배포하고 제가 만든 ui를 다운받아 import하는 과정에서 해당 이미지와 같이 node_modules에서 export가 나타납니다. 1) lib파일과 index.ts파일을 myapp 폴더로 직접 import했을때는 정상적으로 작동하였습니다. 2) 해당 수업에서 codecamp-ui가 npm 사이트에 아직 배포중이기에 그것도 시험삼아 다운받아서 import하였지만 똑같은 오류가 나타났습니다. 3) node_modules 파일 삭제하고 다시 yarn install로 다운받았지만 같은 오류가 나타났습니다. 그 전 수업까지는 동일하게 오류없이 진행했습니다. 무엇이 문제일까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 162

next-auth 사용 이유

미해결

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

안녕하세요. 백엔드에서 connect.sid 쿠키와 next-auth의 auth.js-session-token을 사용해서 유저 인증을 하는 것 처럼 보입니다. 프론트서버에서 유저가 접근 시 세션 쿠키(connect.sid)를 받아 백엔드에 유저 세션을 확인한다면 next-auth를 사용하지 않아도 되는 것처럼 보입니다. 백엔드에서 auth.js-sessoin-token으로 유저 인증을 한다면 역시 세션 쿠키(connect.sid)가 필요없는 것처럼 보입니다. connect.sid와 auth.js-session-token 쿠키를 모두 사용해야 하는 이유가 있을까요? 만약 둘 다 사용하는게 좋다고 한다면 동기화가 필요할 것 같은데(만료 시간, 세션 무효화 등..), 이건 어디서 어떻게 처리하는게 좋을까요? (예외 질문) connect.sid의 쿠키에 httpOnly 옵션이 false여도 괜찮은가요? 혹시 백엔드에서 connect.sid의 쿠키를 httpOnly로 보냈다면 쿠키파싱이 제대로 안된 것 같습니다. 아래 모듈로 쿠키파싱하면 되는 것 같습니다. 혹시나하고 남겨봅니다. //현재 코드 //import cookie from "cookie"; //const parsed = cookie.parse(setCookie); import { parseSetCookie } from "next/dist/compiled/@edge-runtime/cookies"; const parsed = parseSetCookie(setCookie);

  • react
  • next.js
  • next-auth
송지훈 댓글 2 좋아요 0 조회수 239

cache: "force-cache" 질문이 있습니다.

미해결

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

const res = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, //cache: "force-cache", } ); '/home'에서 포스팅 로딩 시 또는 새로고침 시에 데이터를 최초 조회하는 시점에서 cache: "force-cache"를 제거하면 포스팅이 노출되고 포함하면 포스팅이 안 나오는 현상이 있는데 어떤 이유인지 의심 가는 부분을 못 찾겠어서 질문 드립니다. cache: "force-cache" 주석처리 데이터 존재 cache: "force-cache" 빈 배열

  • react
  • next.js
  • react-query
  • next-auth
  • msw
yskim 댓글 2 좋아요 0 조회수 145

백엔드 서버 세팅 오류

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! https://www.inflearn.com/community/questions/1528169 이 분과 똑같은 오류가 발생하는데요! 혹시 해결된 방안이 있을까요,,? 어디서 확인할수있을까요?

  • react
  • next.js
댓글 2 좋아요 0 조회수 261

on-Demand-ISR 사용질문드립니다!

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! on demand isr 의 실제 사용 관련해서 질문 드려요! const revalidate = async () => { try { const response = await fetch("/api/revalidate"); const result = await response.json(); if (result.revalidate) { //페이지 갱신이 됐을 때 } else { //페이지 경신 안됐을 때 } } catch (error) { //에러처리 } };특정 조건에 따라 on demand isr을 제대로 사용하려면 이런식으로 저희가 만든 api를 호출하는 비동기 함수를 만들어서 특정 조건문 아래에서 이 새로만든 함수를 호출하면 되는걸까요?? 감사합니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 3 좋아요 0 조회수 234

useEffect 경고

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 섹션3 2.14)SSG2.정적 경로에 적용하기 강의 17분23초에서 useEffect 의존성 배열 관련해서 React Hook useEffect has a missing dependency: 'fetchSearchResult' 라고 이 함수를 의존성 배열에서 빠트렸다고 경고가 저도 나왔는데 여기서 함수를 의존성 배열에 꼭 넣어야 하는건가요?? 감사합니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 2 좋아요 0 조회수 161

인기 태그

인프런 TOP Writers

주간 인기글