inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

register 할때 formatter가 언제 적용이 되는 건가요?

미해결

코드로 배우는 React 19 with 스프링부트 API서버

json으로 date 파라미터를 보낼때 자동으로 변환 되서 들어간다는 건가요??

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
김재원 댓글 2 좋아요 0 조회수 132

testUpdate를 하실때 질문이 있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

강의에서는 명시적으로 todoRepository.save (todo);를 해주셨는데 어떤 강의에서는 더티체킹으로 업데이트를 하는게 좋다고 하는 말을 들었습니다. 보통 실무에서는 어떤 방식을 더 선호하나요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
김재원 댓글 2 좋아요 0 조회수 143

'NavigationContainer' 중첩 오류

미해결

따라하며 배우는 리액트 네이티브 기초

안녕하세요, React Navigation 강의를 수강하다가 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠㅠ

  • react
  • react-native
  • expo
유호준 댓글 1 좋아요 0 조회수 427

앱라우터와 rc버전 & next.js

해결됨

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

섹션04 이후 진행되는 app 라우터 강의에 rc버전을 설치 section04 이후 강의 중 next 14버전(latest)에서 사용하지 못하는 부분이 있을까요??? 그렇다면 어떤 것들이 있을까요? 강의를 바탕으로 개인 블로그를 만들어 배포해 볼 생각인데 rc버전을 활용하는 것에 문제는 없을까요?? next 강의를 들으며 느낀것이 최대한 dynamic한 사이트(페이지)들을 최대한 static하게 만들면서도 dynamic하게 만드는 것. <<< 이것이 next의 핵심 이라고 느껴지는데 제가 이해한 부분이 맞을까요??

  • react
  • typescript
  • next.js
ajrfyd 댓글 2 좋아요 0 조회수 396

삭제 예정 강의는 언제 삭제 되나요? 저것때문에 수강완료를 못하면 회사에서 비용을 청구한다고 합니다~

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

삭제 예정 강의는 언제 삭제 되나요? 저것 때문에 수강완료를 못하면 회사에서 비용을 청구한다고 합니다~ 아니면 삭제 예정 강의를 듣지 않아도 수강 완료 할 수 있는 방법이 있을까요?

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
jy.park92 댓글 2 좋아요 0 조회수 246

hooks console

미해결

처음 만난 리액트(React)

hook 실습중인데 강의에선 클릭했을때만 콘솔이 찍히는거같은데 저는 console이 계속 찍힙니다. ㅜㅜㅜ

  • HTML/CSS
  • javascript
  • react
ahj0156 댓글 2 좋아요 1 조회수 159

루트 디렉토리

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

터미널에서 루트 디렉토리로 이동하라고 하셨는 어떻게 해야하는지 모르겠어 어떻게 해야 루트 디렉토리를 실행할 수 있나요?

  • react
  • node.js
누구게 댓글 1 좋아요 0 조회수 300

서버 액션를 통한 API 통신 시 쿠키 제어

미해결

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

안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다. 로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다.. 정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다.. 보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
해리 댓글 2 좋아요 0 조회수 224

CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가

해결됨

손에 익는 Next.js - 마이그레이션하기

안녕하세요. FatalError: error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'. CRA에서 Next.js로 마이그레이션하기에서 강의를 모두 따라한 뒤 'npm run dev'를 실행하면 위 오류가 발생합니다. 찾아본 결과 TypeScript 버전이 5 이상이어야 tsconfig.json의 compilerOptions.moduleResolution에 bundler 값을 사용할 수 있는 것 같습니다. 하지만 react-scripts에 요구되는 typescript의 버전은 "^3.2.1 || ^4"입니다. TypeScript를 5버전으로 올리면 lint 경고가 발생할 테니, compilerOptions.moduleResolution는 node 또는 nodenext로 설정하는 것이 현재 상황에서는 바람직하지 않나요?

  • react
  • next.js
  • vitejs
yjkim325 댓글 1 좋아요 0 조회수 261

업로드된 파일명 이상함

미해결

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요. 질문이 있습니다. "섹션 5 - 상품 API 서버 구성하기 - 파일 업로드 설정과 확인"에서 문의 드립니다. 파일 업로드 테스트는 잘 실행 되지만 아래 그림처럼 업로드된 첨부파일 명이 이상합니다. 강사님의 경우 UUID 값뒤에 OriginalFilename이 붙어있는데요, 제 경우에는 붙질 않습니다. 아래 그림처럼 로그에도 이상히 값이 찍히질 않습니다. 포스트 맨으로 테스트한 결과는 아래 그림과 같습니다. 여기서 한가지 강사님이 실행하고 나서의 화면과 제가 실행하고나서의 화면은 차이가 좀 나는거 같습니다. 추축하자면 포스트맨으로 첨부파일이 제대로 첨부가 안된것으로도 보입니다. 아래 좀더 크게 캡춰해 보았습니다. 분명히 파일을 선택해서 첨부를 했는데 위와 같은 화면으로 나옵니다. 그결과 실제 업로된 파일들은 제대로 복사가 된 상태가 아닙니다. 디렉토리에 생성된 파일들은 아래와 같이 0 kb입니다. 여기까지 작성된 소스는 강사님께서 진행하신 모든 내용을 다 반영하였습니다. 제가 어떤걸 놓친게 있을까요? ------------------------------------------------------------------------------ 위를 다른 포스트맨 확장 프로그램으로 실행하니 잘 되네요. 감사합니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
사랑2 댓글 1 좋아요 0 조회수 150

url 주소에 값을 받아오지 못합니다

미해결

코드로 배우는 React 19 with 스프링부트 API서버

Request URL: http://localhost:3000/todo/read/$%7Bprefix%7D/$%7Btno%7D 게시물 번호값인 tno를 int 로 받아오지 못하고 있습니다 어떻게 해야할까요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
박지영 댓글 1 좋아요 0 조회수 104

사전 렌더링, SSR 질문

해결됨

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

사전렌더링에서 설명해주신 저 일련의 과정들이 SSR, ISR, SSG 모두 공통적으로 동일하게 해당하나요?

  • react
  • typescript
  • next.js
방황하는물고기 댓글 1 좋아요 0 조회수 218

section04 포트폴리오 리뷰 진행중입니다.

해결됨

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

createBoard(createBoardInput: $createBoardInput) { _id } 이 부분에서 _id만 작성하는 이유가 fetchBoard를 할 때 게시글의을 불러오는 기준을 id로 하겠다는 의미인걸까요? 2. apolloclient 를 사용하는 코드들을 안 보고 혼자 힘으로 작성 하는게 너무 어렵습니다.. 다음 수강을 계속 들으면서 계속 사용하게 될텐데 하면서 적응해 나가야 할지, 혼자 작성이 가능할 때 까지 계속 영상 돌려보며 연습을 해야할지 모르겠어요 어떻게 하면 좋을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
이재현 댓글 2 좋아요 0 조회수 169

클라이언트 컴포넌트가 서버에서 어떻게 렌더링되는지 궁금합니다!

해결됨

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

초기 접속 요청을 할 때, Next.js에서는 서버 컴포넌트와 클라이언트 컴포넌트 모두 사전 렌더링을 한 후에 html을 제공하고 이후 Hydration 과정이 이루어지는 것으로 알고 있습니다. 만약 클라이언트 컴포넌트에서 useState 와 같은 훅을 호출해서 사용하는 경우, 서버에서 이런 컴포넌트를 어떻게 렌더링하는지 궁금합니다. 최상위 page 컴포넌트가 아래와 같이 있고, // page.tsx import Client from "@/components/client"; export default function Home() { return ( <div> initial html <div> <Client /> </div> </div> ); } page 컴포넌트에서 불러오는 클라이언트 컴포넌트가 아래와 같을 때 "use client"; import { useState } from "react"; export default function Client() { const [count, setCount] = useState(0); const handleClickPlusButton = () => { setCount(count + 1); }; const handleClickMinusButton = () => { setCount(count - 1); }; return ( <div> I am Client Component <div>count: {count}</div> <div> <button onClick={handleClickPlusButton}>+</button> <button onClick={handleClickMinusButton}>-</button> </div> </div> ); } 서버에서 클라이언트 컴포넌트를 렌더링 할 때, useState 와 같은 훅을 무시하고 렌더링을 진행한다고 생각하여 count에 값이 없을 것이라고 예상을 했지만, 서버에서 초기에 응답해준 html 파일을 보면 count가 0이 되어있었습니다. 서버에서 클라이언트 컴포넌트를 렌더링 할 때 이런 훅을 어떻게 처리하는지, 또 만약 브라우저의 window 객체에 접근하게 될 때는 어떻게 처리하는지 궁금합니다!

  • react
  • typescript
  • next.js
강혁준 댓글 2 좋아요 0 조회수 265

사전 렌더링 시 JS 코드를 HTML 파일로 변환하는 거에 대해 질문이 있습니다

해결됨

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

사전 렌더링 시 처음에 서버 측에서 리액트 앱을 실행해서 모든 리액트 컴포넌트들을 HTML로 변환한다고 하셨는데 저는 거기에 인터렉션 코드를 포함한 모든 리액트 코드가 들어있는 걸로 이해를 했었습니다. 근데 그 후에 인터렉션 코드를 추가로 보내야 된다고 해서 좀 헷갈렸는데요 그럼 처음에 서버에서 HTML로 변환한 JS 파일에는 인터렉션 코드를 제외한 모든 리액트 코드가 들어있는 걸까요?

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

인코딩 안됨

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

js 파일에서 콘솔 찍으면 한글이 계속 깨져서나와서 인코딩 설정도 euc-kr로 다 바꿨는데도 계속 디버그 콘솔창이랑 크롬 콘솔 둘다 한글이 깨져서 나오는데 혹시 왜그런지 알 수 있을까요 ..?

  • javascript
  • react
  • node.js
pys 댓글 2 좋아요 0 조회수 165

router를 사용할 때 왜 페이지가 갱신되는지에 대한 질문

해결됨

Next.js 시작하기

안녕하세요. 면접준비에 도움이 될 거 같고 개념적으로도 궁금해서 질문드립니다. 장바구니에서 삭제를 하면 갱신되는데에 동작원리에서 처음엔 router.replace(router.asPath) 때문에 url이 변경되진 않아도 단순하게 /cart 로 이동이란 동작을 해서 페이지를 다시 그린다고 생각했습니다. CartList 는 CartPage 의 자식 컴포넌트이다. CartPage 는 getServerSideProps 로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList 에게 전달해주고 있다. CartList 는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제하고 router.replace 를 통해( router.push 도 동일) 현재 페이지(asPath)인 /cart 로 이동한다. /cart 페이지(즉, CartPage.jsx )가 리렌더링된다. 리액트는 리렌더링되면 컴포넌트의 모든 코드를 다시 실행하게 된다.(고 알고 있습니다.) 그로 인해 getServerSideProps 가 다시 실행되고 갱신된(장바구니에서 상품을 삭제한) 데이터를 다시 CartPage 에게 프롭스로 내려주게 된다. 프롭스가 변경됐으니 자식 컴포넌트인 CartList 도 리렌더링되어 모든 코드가 다시 실행된다. 바뀐 장바구니 데이터로 보여지게 된다. 라고 생각했는데요. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#behavior 공식문서를 살펴보니 사용자가 Link 컴포넌트 또는 router를 통해 페이지를 방문할 때 , Next.js는 서버에 API 요청을 보내 getServerSideProps를 실행 합니다. 라고 되어있습니다. 이러면, 현재 CartList 는 CartPage 의 자식 컴포넌트이다. CartPage 는 getServerSideProps 로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList 에게 전달해주고 있다. CartList 는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제한다. router.replace 를 통해( router.push 도 동일) 현재 페이지(asPath)인 /cart 로 이동한다. router를 통해 페이지를 방문했으므로 CartPage 의 getServerSideProps 가 다시 실행되고 갱신된 데이터를 CartPage 에게 프롭스로 내려주게 된다. 프롭스가 변경됐으니 자식 컴포넌트인 CartList 도 리렌더링되어 모든 코드가 다시 실행된다. 바뀐 장바구니 데이터로 보여지게 된다. 이렇게 이해하면 될까요? 그리고, getServerSideProps 가 있는 페이지 컴포넌트는 getServerSideProps 가 재실행되면 자동으로 리렌더링되게 되는 구조인가요? 설명해주셨는데 제가 놓친거면 죄송합니다.

  • javascript
  • react
  • next.js
ys5133 댓글 2 좋아요 1 조회수 355

완강 했어요 ^^

미해결

코드로 배우는 React 19 with 스프링부트 API서버

드디어 완강 하였네요.. 이 강의 난의도가 초급이라던데 어려운 부분도 많긴 했어요. 이제 중급 실력되는건가요? ^^;;; 스프링은 모든 내용이 이해가되긴한데 React 쪽이 어렵네요... 아마도 문법이 다양하고 오류 잡기도 어려워서 그렇겠죠? ㅎㅎㅎㅎ intelij 도 만기가 끝나가네요... visual studio code, intelij community학습 목적엔 위 2개로 개발 연습해도 되나요?? 다음으로 학습해야될 스프링 학습은 어떤걸 해야될까요? 잡 사이트 보니깐 코틀린 + 스프링은 쓰는 곳이 없네요... 인기가 없나... 진짜 매력적인 언어인데.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
just kim 댓글 1 좋아요 0 조회수 151

변경된 api 사용시 text 안나오는 문제

미해결

만들면서 배우는 리액트 : 기초

변경된 api 주소를 사용하면 text가 안나오는데, 이럴 경우에는 이미지 위에 text가 나오도록 기능을 따로 만들어야 하나요?

  • javascript
  • react
코딩쿤스트 댓글 1 좋아요 0 조회수 169

인기 태그

인프런 TOP Writers

주간 인기글