inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

컴포넌트 렌더링 과정이 궁금합니다.

해결됨

처음 만난 리액트(React)

안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다. 코드는 다음과 같습니다. 각각 1번씩 호출되지 않고 2번씩 호출되는 이유가 뭘까요.. ㅠ import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("============"); console.log("useEffect() is called."); console.log(`isFull : ${isFull}`); }); useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log(`Current count value: ${count}`); }, [count]); return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다.`}</p> <button onClick={increaseCount} disabled={isFull}> 입장 </button> <button onClick={decreaseCount}> 퇴장 </button> {isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>} </div> ) } export default Accommodate;

  • HTML/CSS
  • javascript
  • react
OnlyOne 댓글 1 좋아요 1 조회수 473

override 질문

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] override오류로 test 작동이 안됩니다ㅠ

  • java
  • spring
  • mvc
  • spring-boot
댓글 1 좋아요 0 조회수 328

선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?

미해결

SVG 마스터

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • HTML/CSS
  • svg
JiHyeon Han 댓글 1 좋아요 0 조회수 608

관련 영상은 어디있나요~?

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

더블 보더 다음인 막대 그래프에 대한 영상이 없는데 어디서 확인할 수 있나요?

  • HTML/CSS
  • jquery
예리 댓글 1 좋아요 1 조회수 163

Fiama 링크 찾기

해결됨

[코드캠프] 시작은 프리캠프

피그마 링크는 인프런 강의실 하단에 (강의실에서 아래로 스크롤) 수업자료로 가는 노션링크가 있고, 노션에 피그마로 넘어가는 링크가 있습니다. 라고 안내를 받았습니다. 그런데 인프런 강의실은 어느 화면을 이야기 하는지요? 동영상 강의를 보고 있는데 어디를 찾아가야 하는지 모르겠습니다. 세션별 학습 자료 이미지를 보내 주셨는데 이런 자료를 찾을 수가 없습니다. 자세한 그리고 쉬운 설명을 부탁 드릴께요.

  • HTML/CSS
  • javascript
ktkong 댓글 2 좋아요 0 조회수 271

비쥬얼스튜디오 코드 환경설정

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

비쥬얼스튜디오 코드 환경설정 강의에서 beautify 익스텐션에서 다운 받으시라고 하셨는데, 이제 지원하지 않는다고 나오는데 다운 없이 그냥 해도 상관없는걸까요? 그리고 처음부터 강의를 보고 있는데 비쥬얼스튜디오 코드를 쓰면 브라켓은 따로 설치하고 사용을 하지 않아도 되는걸까요?

  • HTML/CSS
  • jquery
  • 웹-디자인
ay1124 댓글 2 좋아요 1 조회수 294

투두리스트 과제 힌트 좀 주세요 ㅠ

미해결

자바스크립트 : 기초부터 실전까지 올인원

투두리스트 마지막에서 과제로 내주신 '끝남' 에서 Delete 버튼을 눌렀을 경우 삭제가 안되는거 어디를 봐야하는건지 모르겠어요 ㅠㅠ

  • HTML/CSS
  • javascript
bbd 댓글 1 좋아요 0 조회수 440

마크다운 이미지가 잘 작동안합니다.

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요. 조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
액트나우 댓글 2 좋아요 1 조회수 596

@JsonIgnore 관련 ClassNotFoundException 발생

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. @JsonIgnore을 어느 클래스에 어디어디 붙여야 할까요? " http://localhost:8080/api/v1/simple-orders " api 테스트를 해보니 아래와 같은 에러가 나서 질문드립니다 2024-01-25T22:37:28.102+09:00 DEBUG 32028 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 join member m1_0 on m1_0.member_id=o1_0.member_id fetch first ? rows only 2024-01-25T22:37:28.226+09:00 ERROR 32028 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Handler dispatch failed: java.lang.NoClassDefFoundError: javax/persistence/Transient] with root cause java.lang.ClassNotFoundException: javax.persistence.Transient at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641) ~[na:na] at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188) ~[na:na] at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na] 2024-01-25T22:37:28.277+09:00 ERROR 32028 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost] : Exception Processing ErrorPage[errorCode=0, location=/error] jakarta.servlet.ServletException: Handler dispatch failed: java.lang.NoClassDefFoundError: javax/persistence/Transient

  • java
  • spring
  • spring-boot
  • jpa
김란 댓글 2 좋아요 0 조회수 818

맥 사용시 2002 오류 나오실 경우

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

mysql.server start 명령어 사용해보세요 아직원리는 모르겠는데 명령어 사용 후 mysql -u root 입력하시면 sql작동 됩니다

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
준영 댓글 3 좋아요 1 조회수 382

섹션 5 클립패스 - 동영상이 중심에서 커지는게 아니고 우측하단에서 커져요,,

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

왜 그런걸까요? ;; 이것때문에 진도를 못나가고있어요 ~ ㅠㅠ 파일을 똑같이 복사해서 동영상에서 이미지로 변경하면 선생님처럼 중심에서 애니메이션이 진행되네요... 왜 동영상을 넣으면 우측하단에서 동영상이 진행될까요? 동영상 파일이 좀 크지만 선생님 메일에 보내볼게요~ ㅠㅠ

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
김은정 댓글 3 좋아요 1 조회수 332

N:1 단방향, 다대다(1:N 양방향, N:1 양방향) 이 좋은 매핑인 건가요?

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 강사님께서 양방향은 최대한 지양하고 단방향만을 이용해서 설계하고 나중에 굳이 필요하다면 양방향을 추가해라 라고 말씀하셨고 일대다 단방향, 일대일도 지양하고, 다대다는 풀어쓰라고 하셨는데요. 다대다를 풀게 되면 1:N 양방향, N:1 양방향이 되고 결국 연관관계를 설정할 때는 N:1 단방향, 다대다(1:N 양방향, N:1 양방향) 만을 가지고 설계하는 것이 가장 좋은 방법인가요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 312

Figma는 어디에 있나요?

해결됨

[코드캠프] 시작은 프리캠프

별도로 제공되는 Figma를 통해서 과제를 한다는 것이 무슨 뜻인가요? Figma는 어디로 가야하나요?

  • HTML/CSS
  • javascript
ktkong 댓글 1 좋아요 0 조회수 262

준영속 상태의 객체인 이유, 영속 상태의 객체인 이유

미해결

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

안녕하세요. 강의 내용과 관련하여 질문이 있어 글 남깁니다. 강의에서 10:00 정도에 변경 감지 방법에 대해 설명하시는 부분입니다. 트랜잭션 상에서 엔티티를 다시 조회하여 내용을 변경하면 이 엔티티는 영속 상태이므로 변경 감지가 된다. 따라서 save() 를 하지않아도 알아서 변경 감지되어 DB에 update된다. 라고 이해했습니다. 제가 궁금한 부분은, itemRepository.findOne(itemId); 부분에서 엔티티를 조회하는데, 이 엔티티는 원래 준영속 상태의 엔티티였고, findOne() 을 함으로써 다시 영속성 컨택스트에 들어온 건가요? 아니면 생성된 때부터 지금까지 죽 영속 상태였나요? 강의의 맥락상, 지금 준영속 객체를 변경하는 방법에 대해 배우고 있으니 전자일 것이라고 생각했습니다. 만약 제가 생각한대로 준영속 상태에서 변경된 것이 맞다면, merge와 역할 자체는 같은게 맞나요? 물론 디테일한 로직이 좀 다르지만, 역할 자체만 보면 merge또한 준영속 객체를 기발으로 영속 객체를 만들어 반환해주는 거고, 변경 감지 기법도 findOne()을 통해 준영속 객체를 영속 객체로 다시 만들어주는 것이니까요. 이 둘의 차이점은 객체가 통째로 갈아치워지느냐, 부분 수정이 가능하냐 이것 정도만 있다, 라고 이해해도 될까요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
김민희 댓글 2 좋아요 0 조회수 889

주문상품_재고수량초과 테스트 질문있습니다(fail())

미해결

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

[질문 내용] 여기서 주문상품수량이 10개니 예외가 터지지않고 fail로 가는거로 알고있는데요 Expected jpabook.jpashop.exception.NotEnoughStockException to be thrown, but nothing was thrown 이러한 에러는 뜨는데 예외가 터지지않았기에 fail이 떠야하는데 fail안에 있는 메세지가 안뜹니다 한가지 더 질문이 있씁니다 주문상품수량을 11로 바꿧을떄 마지막에 fail을 적지않고 테스트를 돌렸을땐 예외를 터트려서 테스트가 성공적으로 끝나는데요 여기서 위와같이 fail메서드를 적어도 원래는 위에서 예외가 처리됏기떄문에 테스트가 정상적으로 끝나야 되는게 맞는거 아닌가요? 테스트를 돌렷는데 fail문이 뜹니다 그 뜻은 예외가 터지지않았다는 말이죠.. 의문이 듭니다 도와주세요ㅠㅠ

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
동형 댓글 2 좋아요 2 조회수 606

build 에러 Error occurred prerendering page

미해결

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

Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: document is not defined at 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980) at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146) at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049) at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464 at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902) at JSON.parse (<anonymous>) at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770) at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155) ✓ Generating static pages (5/5) > Export encountered errors on following paths: /newpost/page: /newpost npm run build시에 발생하는 에러입니다. 각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다.. gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데 잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다. "use client"; import React, { ChangeEventHandler, useState } from "react"; import LexicalEditor from "@/app/newpost/LexicalEditor"; function Page({ props }: any) { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => { setTitle(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault(); console.log("제목 : ", title); console.log("내용 : ", content); }; return ( <form className="postForm" onSubmit={onSubmit}> <div className="postForm__titleInputSection"> <input className="postForm__titleInput" type="text" name="title" value={title} onChange={onChangeTitle} placeholder={"제목을 입력하세요."} /> </div> <div className="postForm__editorWrapper"> <LexicalEditor /> </div> <button>작성하기</button> </form> ); } export default Page; 깃허브 링크 입니다. https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx

  • react
  • next.js
  • react-query
  • next-auth
  • msw
Gyeongdeok PARK 댓글 2 좋아요 0 조회수 2048

nginx 후 Front(502 Bad Gateway), back(welcome to nginx) 라고만 나오는 문제

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님 front, back nginx 한 뒤로 둘다 https라고 바뀌고 인증서도 있긴한데, Front(502 Bad Gateway)라고 나오고 back(welcome to nginx) 라고만 나오는 상태입니다. (설치는 Nginx Ubuntu20보고 했습니다 https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard ) 문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다. 0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process. 질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소( MemoryStore )를 사용할 때 MemoryStore 가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started 질문2)찾아보니 Nginx 설정 파일 내에 서 api.luckyhaejin.com 이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용) front=> /etc/nginx/nginx.conf => server관련 (글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,) front/pacakage.json에서 start부분에 3060 잘 되어있음 front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음 back => /etc/nginx/nginx.conf back => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧) const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf 사용중인 Os) macOS

  • react
  • redux
  • node.js
  • express
  • next.js
댓글 2 좋아요 0 조회수 1120

연습 파일은 어디에 있나요?

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

안녕하세요 연습파일을 다운로드 받고 싶은데요.. 유튜브 영상에서 연습파일 다운로드를 못찾았습니다.. 어디에 있을까요?

  • HTML/CSS
  • jquery
d111 댓글 1 좋아요 1 조회수 336

코드 요청합니다

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브) 이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 이부분 코드좀 전달주세요 wssksms@naver.com

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
seojinwoong 댓글 1 좋아요 0 조회수 225

인기 태그

인프런 TOP Writers

주간 인기글