inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

npx tailwindcss init 가 안되네요.

해결됨

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

강의대로 npx tailwindcss init 을 하게되면 'tailwind'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라고 뜨네요. 어떻게 해결 방법이 없을까요? vscode 재시작해봐도 똑같네요. 구글링 해보니, 환경변수에 nodejs 경로를 path에 추가하라고 하는데, 이미 추가되어있구요. 아, node버전이 기존에 18버전이 설치되어 있어서 그건 새로 설치하지는 않았습니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
속터져 댓글 1 좋아요 0 조회수 4967

문제와 풀이2번 궁금증

해결됨

김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성

영한님 안녕하세요. 문제와 풀이 2번을 풀고 고민하고 강의를 학습해도 약간의 의문점이 생겨서 질문드립니다. Thread t1 = new Thread(new MyTask(), "t1"); Thread t2 = new Thread(new MyTask(), "t2"); Thread t3 = new Thread(new MyTask(), "t3"); t1.start(); t2.start(); t3.start(); // 1초 t1.join(); t2.join(); t3.join(); // 대기 현재 위와 같은 코드에서 main 쓰레드가 t1, t2, t3에게 작업을 시킵니다. 그리고 t1의 join을 만나니까 t1이 작업이 완전히 끝날때까지 대기상태에 빠집니다. 그리고 t1이 작업이 완료되면 t2.join()이 실행된다면 결과가 아래와 같이 나와야 하는데 왜 이렇게 안 되는지 의문입니다. ㅠㅠ t1: 1 t1: 2 t1: 3 t2: 1 t2: 2 t2: 3 ...

  • java
  • 객체지향
  • 동시성
  • multithread
  • thread
양성빈(Robert) 댓글 2 좋아요 1 조회수 171

npm install --save @tinymce/tinymce-react 오류 입니다.

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

리액트 버젼이 19.0 이상이라서 안된다고하는데 리액트를 다운그레이드해야하나요??...리액트를 다운그래이드 안하고 사용하는 방법은 없을까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
신상 댓글 2 좋아요 0 조회수 288

React 팀 프로젝트 (로그인 검증 기능)

미해결

Supabase의 DB로 로그인 검증 기능을 만들려고 해요 그런데 로그인 검증을 하기 위해서 예외처리를 테스트 하는데 error 400 (Bad request) 가 발생 합니다. 데이터 값이 있으면 로그인은 됩니다. 하지만 존재 하지 않는 값의 예외처리를 할려 하는데 무조건 error 400 (Bad request) 가 나타나내요 이 문제를 해결해 줄 수 있는분 답변 부탁 드립니다. const handleLogin = async (e) => { e.preventDefault(); if (!email || !password) { alert('이메일과 비밀번호를 입력해주세요.'); return; } // 이메일 형식 확인 (정규식 사용) const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { alert('올바른 이메일 형식을 입력해주세요.'); return; } if (password.length < 6) { alert('비밀번호는 최소 6자 이상이어야 합니다.'); return; } try { const { data, error } = await supabase.auth.signInWithPassword({ email, password, }); if (error) { alert('이메일 또는 비밀번호가 잘못되었습니다.'); return; } if (data?.user) { alert('로그인이 완료되었습니다.'); navigate('/'); } else { alert('회원 정보가 존재하지 않습니다.'); } } catch (err) { console.error('오류 발생:', err); alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.'); } };

  • react
  • supabase
  • vscode
이록기 댓글 1 좋아요 0 조회수 94

마이크로 프론트엔드는 레포가 여러개일까요?

미해결

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

안녕하세요! 강의 잘 듣고 있습니다! 강의 도중 마이크로 프론트엔드에 대해 여쭤볼게 있어 질문 드립니다! 다름이아니라, 3개의 Next 앱을 같은 도메인 아래 뒤에 주소들로만 구분해서 하나로 묶는 마이크로 프론트엔드는 그렇다면 결국 레포지토리가 3개인가요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
amh6281 댓글 1 좋아요 0 조회수 125

C언어 기출문제의 변형 23:00문제 질문할게요

해결됨

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

*ptr++의 경우에는 arr의 값도 증가 시키고 포인터 위치도 변경시키는거고, ++*ptr 일경우에는 바라보고 있는 포인터위치는 변하지 않고 arr의 값만 증가 시키고 끝나는건가요? 제가 지금 이해하고 있는건 *ptr 의 앞에 "++"이 붙으면 값만 선증가시키고, "++"이 뒤에 붙이면 값을 후증가시키고 메모리값도 증가시킨다. 인데 이게 맞나요?

  • python
  • java
  • c
  • 정보처리기사
김영선 댓글 2 좋아요 0 조회수 166

outlet을 이용한 서브메뉴 강의에서 질문있습니다.

미해결

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

outlet을 이용한 서브메뉴에서 질문있습니다. main <-이 부분이 부모페이지고 list add <-서브페이지면 list page component<-자손페이지 인가요? 강의에서 IndexPage.js에서 <Outlet/> 부분에 ListPage.js 코드가 들어가 있는 형태인거 같은데요. 근데 제가 아래처럼 작동해봤을 떄 Todo List Page Component 이 부분이 안나오는데요. 코드 어디가 문제인가요? 코드 복붙했는데요. 아래는 IndexPage.js 코드입니다. import { Outlet } from "react-router-dom"; import BasicLayout from "../../layouts/BasicLayout"; const IndexPage = () => { return ( <BasicLayout> <div className="w-full flex m-2 p-2 "> <div className="text-xl m-1 p-2 w-20 font-extrabold text-center underline">LIST</div> <div className="text-xl m-1 p-2 w-20 font-extrabold text-center underline">ADD</div> </div> <div className="flex flex-wrap w-full"> <Outlet/> </div> </BasicLayout> ); } export default IndexPage; 아래는 ListPage.js 코드입니다. import React from 'react' export default function ListPage() { return ( <div className="p-4 w-full bg-orange-200 "> <div className="text-3xl font-extrabold"> Todo List Page Component </div> </div> ) }

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 102

이해가 되질 않습니다. 선생님이 작성해주신 코드로 제출했는데 오답처리됩니다. ( 배열 11.임시반장정하기)

미해결

자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. package DJ_LEE.Array; import java.util.Scanner; public class Main10 { public int solutionOfLecture(int[][] arr, int num) { int answer =0; int min = 0; for (int i=1; i<= num; i++) { int cnt = 0; for (int j = 1; j <= num; j++) { for (int k = 1; k <= 5; k++) { if (arr[i][k] == arr[j][k]) { cnt++; break; } } } if(cnt>min){ min=cnt; answer=i; } } return answer; } public static void main(String[] args) { Main10 T = new Main10(); Scanner kb = new Scanner(System.in); int num = kb.nextInt(); int[][] arr = new int[num+1][6]; for( int i=1; i<=num; i++){ for(int j =1; j<=num; j++){ int el = kb.nextInt(); arr[i][j]=el; } } System.out.println(T.solutionOfLecture(arr,num)); } }

  • java
  • 코딩-테스트
이동준 댓글 2 좋아요 0 조회수 215

불변 객체가 되기 위한 조건

해결됨

김영한의 실전 자바 - 중급 1편

불변 객체가 되기 위해서는 해당 객체의 상태가 변경될 수 없는 형태여야하는데, 상태(필드, 멤버 변수) 중 변경 가능한 상태와 변경 불가능한 상태가 모두 존재하는 경우는 불변 객체로 보나요?

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

오타 있습니다

미해결

김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성

강의 자료 : 8. 생산자 소비자 문제1.pdf 43페이지 큐가 가득 찾을 때 -> 큐가 가득 찼을 때

  • java
  • 객체지향
  • 동시성
  • multithread
  • thread
재현 댓글 2 좋아요 0 조회수 73

@Value 추가 시 에러 발생

해결됨

스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판

학습 관련 질문을 최대한 상세히 남겨주세요! 고민 과정도 같이 나열해주셔도 좋습니다. 먼저 유사한 질문이 있었는지 검색해보세요. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 좋아요 수 구현 부분 강의를 듣고 따라하던 도중 문제가 생겼습니다. ArticleLikeCount의 엔티티에서 version에 @Version을 붙이고 난 후, 테이블의 값을 모두 삭제하고 나서 테스트를 돌리면 에러가 발생합니다. 계속해서.. Row was updated or deleted by another transaction (or unsaved-value mapping was incorrect): 위 에러가 계속 발생하네요. 테스트는 like 메서드를 실행했습니다. 이상하게도 강사님 코드로는 정상 작동이 되어서, 그대로 복사해서 붙여넣기로 가져와서 돌려보면 안되네요. 테이블에 데이터가 이미 존재하면 그때부터는 정상적으로 되는 것 같은데, 테이블이 비어있으면 에러가 발생합니다 ㅜㅜ 혹시라도 확인하실 수 있도록 제 프로젝트 파일을 압축해서 올려놓은 링크 공유하겠습니다. ㅜㅜ https://drive.google.com/file/d/1H9UR9UXZhgmBH-XrXoXPc2-dgrixF7b-/view?usp=drive_link

  • java
  • mysql
  • spring-boot
  • kafka
  • redis
박상훈 댓글 4 좋아요 0 조회수 404

java -jar jpashop-0.0.1-SNAPSHOT.jar 예외발생

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

20분 47초경에서 정체중입니다. 위와같은 오류가 계속 발생중입니다. 위는 project structure입니다 인텔리제이에서 그냥실행했을떄는 잘 작동합니다.

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
peter 댓글 2 좋아요 0 조회수 113

java -jar hello-spring-0.0.1-SNAPSHOT.jar 까지 가는 경로 질문

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 현재 cmd에서 C:\Users\choiminseok>cd study C:\Users\choiminseok\study>cd hello-spring C:\Users\choiminseok\study\hello-spring>gradlew 이렇게 쳐서 build successful이 나왔고 C:\Users\choiminseok\study\hello-spring>gradlew build 이렇게 입력해서 마찬가지로 build successful이 나왔습니다. 이제 여기서 java -jar hello-spring-0.0.1-SNAPSHOT.jar 이런게 보이는 쪽으로 가야하는데 뭘 입력하면 되나요? 강사님은 ls -arlth를 입력해 뭔가 나오는데 저는 ls를 입력하면 'ls'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라고 나옵니다. 해결방법 알려주세요 참고로 윈도우입니다.

  • java
  • spring
  • mvc
  • spring-boot
최민석 댓글 1 좋아요 0 조회수 199

프론트에서 페이지네이션 count 계산법 질문드립니다!

해결됨

스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판

페이지 번호 공식은 다음 버튼 활성화 유무만 판단하는 거고 이전 버튼 유무는 프론트에서'만' 제어하는 걸까요? 프론트에서도 페이지 번호 공식을 알고 있는걸까요? 2:50초 11~20번 페이지에 있을때 프론트에서 계산한값(601) == 백엔드에서 내려준 값(601) => 같으므로 '다음' 버튼 활성화 프론트에서 계산한값(601) == 백엔드에서 내려준 값(500) => 601 미만 이므로 '다음' 버튼 비활성화 (강의 넘 재밌어요. 게임 하는거 보다 재밌다..)

  • java
  • mysql
  • spring-boot
  • kafka
  • redis
soap 댓글 2 좋아요 0 조회수 222

build 질문

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. C:\Users\choiminseok\study\hello-spring>gradlew build ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Files\Java\Java\jdk-17 Please set the JAVA_HOME variable in your environment to match the location of your Java installation. 이렇게 cmd에서 오류가 나서 환경변수에서 jdk-17에 맞게 설정해줘야한다는 이해했습니다. 근데 제가 jdk-23을 다운을 받아서 23으로 환경변수를 설정해놨는데 ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Files\Java\Java\jdk-17 계속 이렇게 뜨는데 directory가 17말고 23으로 가게 하고싶은데 방법이 있을까요?

  • java
  • spring
  • mvc
  • spring-boot
최민석 댓글 1 좋아요 0 조회수 235

윈도우 build 오류

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 윈도우를 쓰고 있어서 cmd를 켠 후 C:\Users\choiminseok\study\hello-spring>gradlew.bat 이렇게 입력하니 아래와 같이 뜨는데 왜 그런가요? ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Files\Java\Java\jdk-17 Please set the JAVA_HOME variable in your environment to match the location of your Java installation. gradlew를 입력했을때도 똑같이 나와요 C:\Users\choiminseok\study\hello-spring>gradlew ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Files\Java\Java\jdk-17 Please set the JAVA_HOME variable in your environment to match the location of your Java installation.

  • java
  • spring
  • mvc
  • spring-boot
최민석 댓글 1 좋아요 0 조회수 275

usereducer 투두리스트 업그레이드 질문

해결됨

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

usereducer 강의를 들으면서 코드를 바꿨습니다 import './App.css' import {useState, useRef,useReducer} from "react"; import Header from './components/Header' import Editor from './components/Editor' import List from './components/List' const mockData = [ { id : 0, isDone : false, content : "react study", date : new Date().getTime(), }, { id : 1, isDone : false, content : "lol", date : new Date().getTime(), }, { id : 2, isDone : false, content : "fifa", date : new Date().getTime(), }, ]; function reducer (state,action) { switch(action.type){ case 'CREATE' : return [action.data,...state]; case 'UPDATE' : return state.map((item)=> item.id === action.targetId ?{...item, isDone : !item.isDone} : item ); case 'DELETE' : return state.filter((item)=> item.id !== action.targetId); default: return state; } } function App() { const [todos, dispatch] = useReducer(reducer,mockData); const idRef = useRef(3); const onCreate = (content) => { dispatch({ type : "CREATE", data : { id : useRef.current++, isDone : false, content : content, date : new Date().getTime(), } }) } const onUpdate = (targetId)=> { dispatch({ type : "UPDATE", targetId : targetId, }); }; const onDelete = (targetId)=> { dispatch({ type : "DELETE", targetId : targetId, }); }; return ( <div className="App"> <Header/> <Editor onCreate = {onCreate}/> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete}/> </div> ) } export default App; 문제는 이렇게 바꾼 후에 초기 mock data는 check box와 삭제가 문제가 없지만 새롭게 추가한 리스트에 대해서는 check box와 삭제가 제대로 실행되지 않습니다. 강의를 몇번 돌려봐도 app.jsx를 제외한 부분을 고치는 과정은 없었고 usereducer로 바꾸기 직전으로 넘어가서 section 08에서는 새롭게 추가된 리스트에 대하여 check box와 삭제가 문제없는걸 보면 usereducer를 사용하면서 문제가 생긴 것 같은데 뭐가 문제인지 잘 모르겠습니다

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

localhost:8080 연결할 수 없음이 떠요

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 이렇게 해두고 서버 재시작 누르고 확인해봐도 연결할 수 없다고 뜹니다. C:\Users\choiminseok\.jdks\corretto-17.0.13\bin\java.exe "-javaagent:C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2024.1.4\lib\idea_rt.jar=5957:C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2024.1.4\bin" -Dfile.encoding=UTF-8 -classpath C:\Users\choiminseok\OneDrive\Desktop\inflearn\inflearnSpringstart\hello-spring\out\production\classes;C:\Users\choiminseok\OneDrive\Desktop\inflearn\inflearnSpringstart\hello-spring\out\production\resources;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-thymeleaf\3.4.2\8dcb10dc369c51639b32bcc2a423fd5625c299f4\spring-boot-starter-thymeleaf-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-web\3.4.2\cf1c8efe77dccf221acf5f0ce9cc24c718c0ca44\spring-boot-starter-web-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter\3.4.2\9d914208449fce99a67d3def60957cdcc98b552a\spring-boot-starter-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.thymeleaf\thymeleaf-spring6\3.1.3.RELEASE\4b276ea2bd536a18e44b40ff1d9f4848965ff59c\thymeleaf-spring6-3.1.3.RELEASE.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-json\3.4.2\e413d51228ddaf6a9644533987faa0ae6e18fe47\spring-boot-starter-json-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-webmvc\6.2.2\9b1aeb179ba9667bc78a4a5cec4ec8087db404d7\spring-webmvc-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-web\6.2.2\bd2ef98bf98b6ecf8dd29106ae27b7515524c21\spring-web-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-autoconfigure\3.4.2\c50511dba751ffe7df320d27c6875feb2745654e\spring-boot-autoconfigure-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot\3.4.2\b2514201ba6b838bd638a51619515501c5baefea\spring-boot-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework.boot\spring-boot-starter-logging\3.4.2\be7631ab8d3cb2a6a3c9981dcaa6d0867c964772\spring-boot-starter-logging-3.4.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-core\6.2.2\94269e888dc979e75a1a1b9600d7153d72e6a7f1\spring-core-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.yaml\snakeyaml\2.3\936b36210e27320f920536f695cf1af210c44586\snakeyaml-2.3.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.thymeleaf\thymeleaf\3.1.3.RELEASE\51474f2a90b282ee97dabcd159c7faf24790f373\thymeleaf-3.1.3.RELEASE.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.slf4j\slf4j-api\2.0.16\172931663a09a1fa515567af5fbef00897d3c04\slf4j-api-2.0.16.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.datatype\jackson-datatype-jsr310\2.18.2\7b6ff96adf421f4c6edbd694e797dd8fe434510a\jackson-datatype-jsr310-2.18.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.module\jackson-module-parameter-names\2.18.2\72960cb3277347a748911d100c3302d60e8a616a\jackson-module-parameter-names-2.18.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.datatype\jackson-datatype-jdk8\2.18.2\9ed6d538ebcc66864e114a7040953dce6ab6ea53\jackson-datatype-jdk8-2.18.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-databind\2.18.2\deef8697b92141fb6caf7aa86966cff4eec9b04f\jackson-databind-2.18.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-context\6.2.2\aa01a7faa3694983339ca7e45619860ef34052d6\spring-context-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-aop\6.2.2\2a1a445d4cd8e5fe2311df04fc25c0bc54bd2ce4\spring-aop-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-beans\6.2.2\ec8ee520ff7b147de8ac04d330848d468253f84d\spring-beans-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-expression\6.2.2\20164dd3a70d0048185cf02bb1b097b22e73d820\spring-expression-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\io.micrometer\micrometer-observation\1.14.3\cd66186a1fe8465dc732d9514bade1104044b56d\micrometer-observation-1.14.3.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\ch.qos.logback\logback-classic\1.5.16\113979db51dfad6dc895b34460d7b7ff64ffe7d2\logback-classic-1.5.16.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.apache.logging.log4j\log4j-to-slf4j\2.24.3\da1143e2a2531ee1c2d90baa98eb50a28a39d5a7\log4j-to-slf4j-2.24.3.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.slf4j\jul-to-slf4j\2.0.16\6d57da3e961daac65bcca0dd3def6cd11e48a24a\jul-to-slf4j-2.0.16.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.springframework\spring-jcl\6.2.2\1fbbb0b2e85c6eac7c366c5eed5b124785f05ac8\spring-jcl-6.2.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.attoparser\attoparser\2.0.7.RELEASE\e5d0e988d9124139d645bb5872b24dfa23e283cc\attoparser-2.0.7.RELEASE.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.unbescape\unbescape\1.1.6.RELEASE\7b90360afb2b860e09e8347112800d12c12b2a13\unbescape-1.1.6.RELEASE.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-annotations\2.18.2\985d77751ebc7fce5db115a986bc9aa82f973f4a\jackson-annotations-2.18.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\com.fasterxml.jackson.core\jackson-core\2.18.2\fb64ccac5c27dca8819418eb4e443a9f496d9ee7\jackson-core-2.18.2.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\io.micrometer\micrometer-commons\1.14.3\bf17f05dd6343d36ecc31076197a962cfdf46131\micrometer-commons-1.14.3.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\ch.qos.logback\logback-core\1.5.16\4f17700f046900aea2fadf115e2d67fec921f7fd\logback-core-1.5.16.jar;C:\Users\choiminseok\.gradle\caches\modules-2\files-2.1\org.apache.logging.log4j\log4j-api\2.24.3\b02c125db8b6d295adf72ae6e71af5d83bce2370\log4j-api-2.24.3.jar hello.hello_spring.HelloSpringApplication . ____ _ __ _ _ /\\ / ___'_ __ _ ( )_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v3.4.2) 2025-02-14T17:51:51.150+09:00 INFO 24936 --- [hello-spring] [ main] h.hello_spring.HelloSpringApplication : Starting HelloSpringApplication using Java 17.0.13 with PID 24936 (C:\Users\choiminseok\OneDrive\Desktop\inflearn\inflearnSpringstart\hello-spring\out\production\classes started by choiminseok in C:\Users\choiminseok\OneDrive\Desktop\inflearn\inflearnSpringstart\hello-spring) 2025-02-14T17:51:51.153+09:00 INFO 24936 --- [hello-spring] [ main] h.hello_spring.HelloSpringApplication : No active profile set, falling back to 1 default profile: "default" 2025-02-14T17:51:52.245+09:00 WARN 24936 --- [hello-spring] [ main] ion$DefaultTemplateResolverConfiguration : Cannot find template location: classpath:/templates/ (please add some templates, check your Thymeleaf configuration, or set spring.thymeleaf.check-template-location=false) 2025-02-14T17:51:52.363+09:00 INFO 24936 --- [hello-spring] [ main] h.hello_spring.HelloSpringApplication : Started HelloSpringApplication in 1.931 seconds (process running for 4.824) Process finished with exit code 0 이게 콘솔에서 나온 값이구요

  • java
  • spring
  • mvc
  • spring-boot
최민석 댓글 4 좋아요 0 조회수 411

23-05의 hoc적용시의 렌더링에 대한 질문드립니다.

해결됨

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

강의를 너무 잘 듣고 있습니다. 쉽게 설명해주셔서 들으면 이해가 잘되지만, 혼자 코드할때에는 실수나 어림 짐작으로 적용했던 부분이 잘 작동되지 않는데, 이런 저런 시도로도 잘못한 부분을 이해하기 어려워 질문드립니다. 23강의 질문입니다. high-order-function을 진행하면서 hoc로 구분하여 설정하는 경우 렌더링에 대해 질문을 남깁니다. 특히 쿼리에 이름을 주어 작동하는 경우에 대해 질문드립니다. 23-3에서 login-success를 확인하는 쿼리를 제가 짰는데 쿼리에 이름을 주었습니다. 23-3의 login-success화면에서는 오류가 없어서, 해당 코드를 복붙하여 hoc부분에도 적용하였는데 초기 렌더링시에 데이터를 받아오지 못하는 현상이 발생하였습니다. 새로 고침을 해야 데이터가 받아와져서 나타납니다. 순서를 붙여 1~4번까지 차례로 진행하였습니다. 23-3 코드의 정상 렌더링 (쿼리 네임을 주어도 정상 렌더링) loginCheck와 mypage로 구분되지 않는 코드에서 graphql에 query를 보내면서 이름을 주었습니다. ( hoc가 아닌 전체 로직이 한꺼번에 구성되는 경우 쿼리에 이름을 주는 경우에도 ---> 정상 렌더링 되었어요. ) 해당 부분의 쿼리는 아래와 같으며 JWT로서 데이터를 받아와 사용자명이 렌더링 되었습니다. const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn{ fetchUserLoggedIn { email name } } `; 23-5부분에 hoc를 이용하여 loginCheck를 분리한 경우 (이 부분은 1번의 (23-3의 코드를 복붙하여 mypage와 logincheck로 분리하였습니다. 오류가 없어서 굳이 수정하지 않아도 될것 같아 그냥 두었던 부분입니다) 그런데 사용자명을 받아오지 못한채로 화면이 렌더링이 되었습니다. (graphql이 실패한 것으론 나타납니다. 네트워크를 보면 쿼리를 보내면서 토큰을 첨부하지 못해서 bearer뒷 부분이 없었습니다.) 다만 새로고침을 하면 정상 렌더링이 됩니다. MyPage 코드는 아래와 같습니다. import { gql, useQuery } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; import { loginCheck } from "../../../src/components/commons/hocs/loginCheck"; const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn{ fetchUserLoggedIn { email name } } `; function MyPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님, 환영합니다.</>; } export default loginCheck(MyPage); loginCheck는 아래와 같습니다. import { useEffect } from "react"; import { useRouter } from "next/router"; export const loginCheck = (컴포넌트: any) => (프롭스: any) => { const router = useRouter(); useEffect(() => { if (localStorage.getItem("accessToken") === null) { alert("로그인 후 이용가능합니다"); void router.push("/section23/23-05-login-check-hoc"); } }, []); //if return <컴포넌트 {...프롭스} />; }; hoc를 이용하여 loginCheck를 분리한 경우에 작동원리에 대해 여러가지 검색을 하고, 그 결과를 참조하여 loginCheck에서 accessToken을 받아오고, 만약에 토큰이 없으면 myPage를 렌더링하지 않도록 설정했더니 쿼리네임이 있는 경우에도 정상렌더링이 되었습니다. import { useEffect } from "react"; import { useRouter } from "next/router"; export const loginCheck = (컴포넌트: any) => (프롭스: any) => { const router = useRouter(); const accessToken = localStorage.getItem("accessToken"); useEffect(() => { if (localStorage.getItem("accessToken") === null) { alert("로그인 후 이용가능합니다"); void router.push("/section23/23-05-login-check-hoc"); } }, []); if(accessToken == null ) return null; return <컴포넌트 {...프롭스} />; }; 그리고 더불어, 원두님이 하신것처럼 이름이 없는 쿼리로 설정하였을 때는 loginCheck에 토큰 관련 설정을 넣지 않아도 페이지는 정상 렌더링 되었습니다. (이 부분은 수업에서 진행하신 것입니다) const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; 인공지능 모델들은 쿼리에 이름이 있는 경우는 cash에 내용을 참조하여 Header에 토큰이 없는 상태의 설정대로 query를 보내고 받아온다고 설명합니다. 그리고 원두님처럼 쿼리명을 주지 않으면 무명쿼리로서 새로 토큰을 붙이고 쿼리를 보내는 과정을 수행한다고 합니다. 그러나 제가 항상 토큰을 지우고 새로 고침한후에 로그인 부분을 확인하므로 기존의 쿼리를 받은 기록이 캐시에 남아서 영향을 미칠것 같지는 않습니다. 그리고, hoc가 아닌 기존의 23-3은 잘 작동했으니, 이 부분의 통신에 대해서 어떤 부분인가 제가 잘 이해하지 못하는 부분이 있는 것 같습니다. 이후 hoc함수를 사용할때에도 유의해야 할것 같아 왜 이러한 현상이 나타나는 것인지에 대해 조언해 주시면 추가적으로 검색을 통해 이해고자 합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
이지은 댓글 1 좋아요 0 조회수 110

인기 태그

인프런 TOP Writers

주간 인기글