inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

스프링부트와 리액트 연동관련해서

해결됨

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

스프링부트와 리액트를 연동하는 강의를 본격적으로 듣기전에 궁금한게 있어서 글을 남깁니다. 스프링부트로만 작업을 할경우 저희에겐 타임리프라는 SSR 기술이있어서 서버의 데이터도 쉽게 웹페이지에 전달할 수 있었습니다. 하지만 리액트의 경우 타입스크립트를 기반으로한 next.js 기술이 있는데 이 기술은 node.js를 상정하고 만들어진 기술인 것 같습니다. 이때 next.js 기술이 스프링부트의 타임리프를 대체할만한 SSR기술인지 아니면 next.js 같은 SSR기술이없어도 서버의 데이터를 쉽게 웹페이지에 전송할 수 있는지 궁금합니다. 기술이 필요하다면 어떤 종류의 기술을 익히는 것이 좋을지 알려주시면 너무 감사드립니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
이동건 댓글 2 좋아요 0 조회수 338

타입스크립트/next.js 추가학습 관련해서 문의 드립니다

해결됨

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

최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다. 필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.

  • javascript
  • react
  • node.js
이동건 댓글 2 좋아요 0 조회수 133

강의자료

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

-요구사항 분석 챕터에서 중요한 부분 정리 - 통합 구현 등등 동영상아니고 문서형태 강의인데 이 파일들은 다운로드가 안되나요?

  • python
  • java
  • c
  • 정보처리기사
김유라 댓글 2 좋아요 0 조회수 118

[질문 x 공유용] tailwind v4.0 으로 강의랑 다를 때 (import 다름, tailwind.config.js 없어짐 등)

미해결

실무에 바로 적용하는 스토리북과 UI 테스트

강의랑 다른 부분 1. tailwind 설치 커맨드 : 커맨드가 간단해졌어요. npm install tailwindcss @tailwindcss/vite 강의랑 다른 부분 2. vite.config.ts : 이제 ***.tsx, ***.jsx 를 일일히 넣지 않아도 됩니다. import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) 강의랑 다른 부분 3. @import ~ 3줄 @import "tailwindcss"; 한 줄로 초간단해짐.. 강의랑 다른 부분 4. tailwind.config.js : config.js 가 없어졌습니다. (자세한 내용: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration ) 대신 index.css 에 아래와 같은 형식으로 theme 을 적용할 수 있습니다. @import 'tailwindcss'; @theme { --color-primary: #1d2745; --color-secondary: #1de5d4; --color-tertiary: #1d2745; --color-white: #ffffff; --color-mono100: #f1f1f1; --color-mono200: #bebebe; --color-mono300: #d6d7d9; --color-error: #d01e1e; --color-social: #395997; }

  • react
  • typescript
  • tailwindcss
  • storybook
  • ui-testing
윤삼삼 댓글 2 좋아요 6 조회수 521

Outlet 질문이요

미해결

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

IndexPage.js 에서 <Outlet/>을 했는데 todo메뉴를 클릭하면 "/list" 페이지로 이동을 안 합니다. console창을 보니 This means it will render an <Outlet /> with a null value by default resulting in an "empty" page 문구가 뜨는데 왜 그러는걸까요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
hlkang 댓글 2 좋아요 0 조회수 76

jsbundle의 이름이 도중에 변경 되어도 nextjs가 인지하고 받아올 수 있나요??

해결됨

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

안녕하세요 덕분에 next.js를 깊게 공부할 수 있었습니다. next.js는 기존 리액트와 다르게 jsbundle(청크) 파일을 나누어 받아 옵니다. 강의에서 본 것처럼 청크 파일들이 각각의 유니크한 해쉬 값을 가지는 것도 확인했습니다. 시나리오 next 프로젝트를 빌드 배포 된 웹페이지를 오픈 next 프로젝트를 다시 빌드 기존의 웹페이지를 새로고침 하지 않고, 페이지 이동 기존 리액트 프로젝트에서는 하나의 청크 파일을 처음 한 번에 받아서 새로고침 전까지 1번의 이전 빌드된 웹페이지로 동작이 되는 것으로 알겠는데요. next프로젝트에서는 jsbundle과 rsc_payload를 필요한 시점에 받으니까 새로 빌드한 파일엔 기존 청크해시 값과 달라서 문제가 생기지 않을까? 라는 생각이 들었습니다. 그런데 테스트 해보니 별다른 문제가 생기지 않는 것 같더라구요.. jsbundle과 rsc_payload의 유니크한(해쉬) 파일 이름이 도중에 변경 되더라도 next 서버측에서 찾을 수 있게 조치가 되어 있는 걸까요?

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

강의 3-1 인증 스크린 마크업중에 ..

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

안드로이드 버전 14 해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고 홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???

  • javascript
  • react
  • react-native
  • typescript
  • react-query
김지환 댓글 2 좋아요 0 조회수 170

section02에다 프로젝트 설치후 npm run dev 입력했더니 이미지가 깨집니다

미해결

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

안녕하세요 npx create-next-app@14 section02 설치 후 (강의 8분49초), npm run dev 실행후 브라우저에 localhost:3000 입력했더니 이미지가 깨져서 나옵니다. 해당 프로젝트를 지우고 다시 설치해도 그대로입니다.

  • react
  • typescript
  • next.js
김지민 댓글 4 좋아요 2 조회수 487

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 결제 관련 문의드립니다.

해결됨

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

현재 강의와 관련없는거 알지만 혹시나해서 문의남깁니다. 현재 강의 구매한 분들 대상으로 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의 90% 할인해서 구매할 수 있었던 것으로 기억하는데, 이미 기간이 끝난거 알지만 지금이라도 할인된 가격으로 구매할 수 있을까 해서 문의남깁니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
jihun6548 댓글 2 좋아요 0 조회수 109

배열 크기 자동으로 설정되나요?

미해결

김영한의 실전 자바 - 기본편

입문편에서는 배열의 크기를 입력하지 않고 데이터를 직접 넣어서 자동으로 크기를 설정할 수 있었는데 int[] students; students = new int[]{90, 80, 70, 60, 50}; 강의에서 실습했던 코드 Student[] students = new Student[2]; students[0] = student1; students[1] = student2; 여기에서 new Student[2]; 의 부분을 new Student[]={student1,student2}; 이렇게 고치면 자동으로 크기를 설정 해 주나요?

  • java
  • 객체지향
dg845704 댓글 1 좋아요 0 조회수 140

같은 이름의 회원 저장

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 안녕하세요, 강의 내용 잘 수강하고 있습니다. 회원 웹 기능 -조회 까지 수강한 뒤 데이터베이스 연동을 아직 하지 않은 상태입니다. 코드를 모두 따라쳐서 정상작동은 하는 중인데, 웹에서 중복되는 이름을 저장 시 오류가 나면 앞부분 예외처리 부분에서 코드를 잘못 입력한 것일까요 ?

  • java
  • spring
  • mvc
  • spring-boot
wonderwall09in 댓글 2 좋아요 0 조회수 106

서버, 클라이언트 데이터 중복 호출 문제

미해결

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

강의와 같이 구현한다면 page.tsx 에서 데이터 fetch PostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용 이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ? 제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요. 이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠? 아 강의는 " 클라이언트 react-query" 입니다.

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

강의자료.zip 를 다운로드 받았는데 압축이 풀리지 않습니다. 확인 부탁드려요

미해결

스프링 시큐리티 OAuth2

강의자료.zip 를 다운로드 받았는데 압축이 풀리지 않습니다. 확인 부탁 드려요 - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • java
  • spring
  • spring-boot
  • oauth
forrest.choi 댓글 2 좋아요 0 조회수 163

회원가입 insert테스트가 안됩니다

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] join 테스트를 돌리면 insert가 제대로 안됩니다 (select로 확인 안됨) 테스트 후 스프링을 돌려 웹에 등록하면 시퀀스는 테스트 한만큼 증가했습니다

  • java
  • spring
  • mvc
  • spring-boot
댓글 2 좋아요 0 조회수 220

(기출) 2024년 2회 기출문제 수업자료가 강의랑 안맞아요

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

섹션7 (기출) 2024년 2회 기출문제 - 이론 포함 강의내용 0:53:26 자료 12페이지 람다 예제 1 만 있어요 예제 2가 없어요

  • python
  • java
  • c
  • 정보처리기사
마이동 댓글 2 좋아요 1 조회수 148

ExecutorService와 CompletableFuture의 차이점과 역할

미해결

백엔드 개발자 성능 개선 초석 다지기

안녕하세요! 비동기 코드에 관해 질문이 있습니다. ExecutorService 는 스레드를 관리하는 역할을 하는것이고 CompletableFuture 가 실제로는 비동기 요청을 처리하는 것으로 이해하였는데 맞을까요? Future 은 예외 처리를 할 수 없기 때문에 잘 쓰이기 않을까요??CompletableFuture 가 지원하는 기능이 더 많기 때문에 주로 CompletableFuture 를 사용하나요?

  • java
  • mysql
  • spring-boot
  • cache
  • index
EunKyung Hwang 댓글 2 좋아요 0 조회수 307

사용 기기 관련해서 질문 드립니다.

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

eas와 notification 설정 후에는 로그인 시에 android emulator 상에서 코딩해주신 대로 '실제기기를 사용해주세요' 문구가 나옵니다. ios 는 개발자모드 설정을 구매해야 한다고 해서 기기는 안드로이드로 진행하려고 하는데 android 기기가 따로 없고 emulator 로는 실행이 안되는 걸까요? expopushToken만 보내고 로그인이 되지는 않습니다.

  • javascript
  • react
  • react-native
  • typescript
  • react-query
host0806 댓글 3 좋아요 0 조회수 179

풀라우트캐시 3강. book/4를 URL로 요청시 렌더링 과정

해결됨

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

안녕하세요 선생님, 질문이 있어서 남깁니다. 만약 book/4를 URL로 요청하면 과정이 URL로 book/4 요청 시 Link 등이 없으므로 프리페칭은 안됨 - 서버에서 JS 실행 (렌더링) - 렌더링 된 HTML 브라우저에 넘김 - 브라우저에서 화면에 렌더링 - 서버에서 JSBundel, RSC payload 브라우저에 넘김 - 수화과정 - 상호작용 가능 이게 맞나요? book/1~3은 staticPage로 풀라우트캐시되어있으니 URL로 요청하면 풀라우트캐시에서 바로 HIT해서 주는거고요?

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

Editor 컴포넌트는 리렌더링되는 것은 맞나요?

해결됨

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

강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다. 소스는 같은데 머가문제인지 알 수있을까요? <Editor.jsx> const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor; <App.jsx> import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;

  • javascript
  • react
  • node.js
Park Ju Yeong 댓글 2 좋아요 0 조회수 188

인기 태그

인프런 TOP Writers

주간 인기글