inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

To-do list 강의 세션에서 궁금한게 있습니다.

미해결

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

선생님 궁금한 게 있어서 글을 남겨봅니다 오늘 To-do list 강의 세션을 완강했는데 이해를 하지 못하는 부분이 있었습니다 const onUpdate = (targetId) => { setTodo( todo.map ((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it ) ); }; onUpdate 부분을 만들때 todo.map ((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it 이분에서 ...it : !it.isDone 이 무엇을 의미하는지와 스프레드 연산자를 쓴 이유를 이해하기 어려웠습니다 const onDelete = (targetId) => { setTodo(todo.filter((it) => it.id !== targetId)); }; 에서 todo.filter((it) => it.id !== targetId) 가 삭제를 하기위해 만들어졌는데 .filter((it) => it.id !== targetId filter 를 쓴 이유와 it.id !== targetId 가 뭔지를 아직도 잘모르겠습니다 to-do list 를 배열을 이용하여 상태 관리를 하는것으로 만들었는데 천천히 공부 해보면서 적용 해볼려고 합니다 공부할떄 선생님께서 보는 학습자료나 to-do list 를 만들때 특별히 참고한게 있었는지 궁금합니다

  • javascript
  • react
  • node.js
전수빈 댓글 2 좋아요 0 조회수 86

저도 수정 페이지 왔을때 설명과 다르게 아무것도 보이지 않습니다.

미해결

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

밑에 같은 질문을 하신 분이 계시던데요. 12.15 챕터의 10:33 초에 보면 수정 으로 들어 왔을때 기본값으로 수정 전 데이터가 나온다고 되어 있습니다. 지금까지 영상을 보면서 같이 코딩을 해오고 있었는데요.. 그런데 밑에 질문 하신 분 처럼 10:33 초 전 까지의 코딩으로는 수정 시 데이터가 나오지 않습니다. 그리고 인프런 측 인지..답변 설명에 useEffect 얘기 하시던데.. useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, [initData]); 이 부분은 10:33 초 전 까지는 나오지 않았습니다. 인프런 측도 답변을 주실려면 정확히 파악 후 답변을 주세요.. 뭐가 잘못된 건가요? useEffect 부분이 없어도 설명대로 수정 으로 들어가면 데이터가 나오는게 맞는건가요? 아니면 제가 뭔가 빠트린 것이 있나요?

  • javascript
  • react
  • node.js
댓글 3 좋아요 0 조회수 325

Nextjs 에서의 컴포넌트 작성법

미해결

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

강의 진행 도중 생긴 에러는 아니고, 순수한 궁금증에 질문 남깁니다. 제가 React 로 프론트엔드 개발은 항상 모든 컴포넌트를 화살표 함수로 작성했었습니다. 이를테면 const Home = () => { }; export default Home; 이런식으로 작성하였는데요, 근데 상기 Nextjs 강의에서도 그렇고 다른 수많은 블로그 글들에서는 전통적인 함수 선언식을 사용하더라구요. export default function Home() { }; 그 이유가 무엇일까요? 모두가 사용하는데는 이유가 있는거 같은데 관련 자료를 찾을 수가 없어서 질문드립니다. 혹시나 강제된 문법인가 싶어 해당 강의에서 사용된 페이지들을 화살표함수로 바꿔서 작성해봤는데 똑같이 에러 없이 잘 실행이 되더군요..

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

질문

미해결

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

[username] 라우터의 page.tsx에 현재 들어온 유저정보를 받아오는 prefetchQuery랑 그 유저의 게시글을 받아오는 infinitePrefetchQuery가 있는데 두 번째 Query의 경우 서버 컴포넌트에서 실행되는 함수라 credential:"include"가 작동하지 않아 Cookie값을 따로 명시해줘야 하는걸로 알고있습니다. 근데 Cookie값을 따로 명시해주지않아도 게시글들이 잘 불러와지는데 이 과정이 궁금합니다

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

완벽한 프론트엔드 강의와 이 강의 차이점

해결됨

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

우연찮게 '완벽한' 프론트엔드 강의를 발견하였는데 제가 지금 듣고 있는 강의와 과정이 많이 다른 걸까요? 앱 개발 관련해서도 코드캠프를 통해 공부하고 싶은데 따로 강의가 있진 않은걸까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
won980630 댓글 1 좋아요 0 조회수 177

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

미해결

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

<html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel = "stylesheet" href="styles/card.css"> </head> <body> <section class="container"> <article class ="card"> <header> <div class = "circle-image"> <img src="images/inflearn-project-images/profile.png"/> </div> <div class="card-username"> <span>inflearn</span> </div> <div class="option-more"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/mark.png"/></button> </div> </header> <main> <div class="carousel" data="0"> <!--캐러셀 들어갈 영역--> <div> <ul> <li><img src="images/inflearn-project-images/mountain1.jpg"/></li> <li><img src="images/inflearn-project-images/mountain2.jpg"/></li> <li><img src="images/inflearn-project-images/mountain3.jpg"/></li> <li><img src="images/inflearn-project-images/mountain4.jpg"/></li> </ul> <div class="slide slide-left"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-left.png"/></button> </div> <div class="slide slide-right"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-right.png"/></button> </div> </div> <footer> <div class = "active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class="card-container"> <dic class="card-buttons"> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"/> </button> </div> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/chat.png"/> </button> </div> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/paper-plane.png"/> </button> </div> <div class="last-card-button"> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/bookmark.png"/> </button> </div> </dic> <div class="card-likes"> 좋아요999,999개 </div> <div class="card-content"> <ul> <li> <div> <span> lnflean.user </span>본문 내용 </div> </li> <li class="comment"> <div> <span>lnflean.user</span>댓글 1 <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"> </button> </div> </li> <li class="comment"> <div> <span>lnflean.user</span>댓글 2 <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"> </button> </div> </li> </ul> </div> <div class="card-time">7일전</div> </div> </main> <footer class="card-comment"> <input type="text" placeholder="댓글달기..." name="comment"> <div> <button class ="transparent-button">개시</button> </div> </footer> </article> </section> </body> </html> body { padding : 0; margin : 0; } ul, li{ list-style: none; } button.transparent-button{ background-color: transparent; border: 0; outline: 0; cursor: pointer; } .container{ width: 100%; background-color: #f0f0f0; padding: 20px 0; } article.card{ width: 600px; margin: 20px auto; margin-bottom: 60px; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } /*** header 시작 ***/ article.card header{ height: 40px; padding: 10px; } article.card header > div { display: inline-block; vertical-align: middle; } .circle-image { height: 100%; padding: 5px; box-sizing: border-box; } .circle-image > img { height: 100%; border-radius: 50%; } .card-username { padding: 10px 0; font-weight: 900; line-height: 20px; margin-left: 5px; font-size: 13px; } .option-more { float: right; padding: 7px; } /*** header 시작 ***/ /*** content 시작 ***/ .card-container{ padding: 5px 10px; } /* 버튼 */ .card-buttons{ padding: 0 5px; margin-top: 5px; } .card-buttons > div{ display: inline-block; margin-right: 10px; } .card-buttons > div.last-card-button { float: right; margin-right: 0; } /* 좋아요*/ .card-likes{ padding: 5px; font-size: 13px; font-weight: 900; } /* 본문*/ .card-content{ padding: 2px 5px; font-size: 13px; } .card-content li > div{ padding: 1px 0; } .card-content li > div > span{ font-weight: 900; } .card-content li.comment > div > button{ float: right; } .card-content li.comment > div > button > img{ width: 12px; margin-right: 5px; } /*시간*/ .card-time{ padding: 3px; font-size: 11px; color: #a0a0a0; } /*푸터*/ footer.card-comment{ position: relative; height: 55px; border-top: 1px solid #e0e0e0; } footer.card-comment input{ width: 100%; height: 100%; border : 0; outline : 0; padding: 0 15px; color: #606060; } footer.card-comment >div{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } footer.card-comment > div > button{ color: #0095f6; opacity: 0.5; padding: 10px 5px; } /*캐러셀*/ article.card main .carousel{ width: 100%; position: relative; } article.card main .carousel > div{ overflow: hidden; } article.card main .carousel ul{ width: 10000px; } article.card main .carousel ul >li { display: inline-block; } article.card main .carousel ul > li img{ width: 600; } .slide{ position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; } .slide img { opacity: 0.75; } .slide-right{ right: 0; } .carousel footer{ position: absolute; height: 20px; text-align: center; width: 100%; bottom: -20px; } .carousel footer div{ width: 6px; height: 6px; background-color : #a8a8a8; display: inline-block; border-radius: 50%; } .carousel footer div { width: 6px; height: 6px; background-color: #a8a8a8; } 원인을 찾을 수 없어서 ul style 사용해서 그냥 40px을 지웠는데 왜 40px이 들어가 있는지를 모르겠습니다

  • HTML/CSS
  • javascript
innocent 댓글 1 좋아요 0 조회수 122

섹션1의 17번문제 이 풀이로 풀어도 될까요?

미해결

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

<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(s) { let answer = []; for (e of s) { if (!answer.includes(e)) { answer.push(e); } } return answer; } let str = ["good", "time", "good", "time", "student"]; console.log(solution(str)); </script> </body> </html>

  • javascript
  • 코딩-테스트
박경란 댓글 2 좋아요 0 조회수 176

REST 방식 컨트롤러 만들기(2)-LocalDateFormatter ㅠㅠ;

해결됨

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

선생님, 안녕하세요~ 섹션 3. 스프링부트와 API서버 => REST 방식 컨트롤러 만들기(2)에서 4:06분 근처 => LocalDateFormatter에서 오류가 납니다. CustomServletConfig까지 작성하고 실행하면 아래와 같은 오류가 나옵니다. C:\backend2\serverapi\serverapi\src\main\java\org\zerock\serverapi\controller\formatter\LocalDateFormatter.java:12: error: type Formatter does not take parameters public class LocalDateFormatter implements Formatter<LocalDate> { ^ 앞.뒤로 돌려보면서 찾아 보려 했는데 잘 모르겠습니다. LocalDateFormatter만드는 부분부터 오류가 납니다. 죄송하지만 확인하시면 답변 부탁 드립니다. 감사합니다. 코드 첨부합니다. package org.zerock.serverapi.controller.formatter; import org.hibernate.engine.jdbc.internal.Formatter; import java.text.ParseException; import java.time.LocalDate; import java.time.format.DateTimeFormatter; import java.util.Locale; import static java.awt.SystemColor.text; public class LocalDateFormatter implements Formatter<LocalDate> { @Override public LocalDate parse(String Text, Locale locale) throws ParseException { return LocalDate.parse(text, DateTimeFormatter.ofPattern("yyyy-MM-dd")); } @Override public String print(LocalDate object, Locale locale) { return DateTimeFormatter.ofPattern("yyyy-MM-dd").format(object); } }

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
박정아 댓글 2 좋아요 0 조회수 98

http => htrtps 호출 인증서 신뢰 오류

해결됨

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

self-signed certificate in certificate chain 발생합니다. 1번 process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; 2번 // SSL 인증 무시를 위한 Agent 생성 const httpsAgent = new https.Agent({ rejectUnauthorized: false }); await axios.get("target_url", { httpsAgent: agent }); 1,2 번 외 해결 방법이 있을까요? 또는 2번을 적용하려면 어떻게 해야하나요? 또는 Java에서 로컬 톰캣 서버에서 HTTPS 설정하듯이 할수있는 방법이 있나요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 1 좋아요 0 조회수 407

앱 실행 후 오류 질문드립니다.

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 윈도우, 안드로이드 환경에서 실행하였습니다. 홈화면은 잘 보이지만 profile이나 setting 버튼 클릭시 위의 오류화면이 나오게 됩니다. 서버 연결하는 부분까지도 잘 됐는데 어느 순간 이런 오류가 등장하였습니다. 어떻게 수정해야 할까요..? 감사합니다!

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

self-signed certificate in certificate chain 에러 발생

해결됨

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

안녕하세요. self-signed certificate in certificate chain 에러 발생합니다,

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 1 좋아요 0 조회수 478

새 강의 쿠폰과 관련해서 질문드립니다.

해결됨

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

귀찮게 해서 죄송합니다. 혹시 저도 기간을 놓쳐 쿠폰을 사용하지 못했는데 새로운 강의를 수강하기 위한 할인 쿠폰을 받을 수 있을지 문의드립니다. 좋은 강의를 제공해주셔서 감사드립니다 :)

  • react
  • node.js
  • seo
  • graphql
  • next.js
아이개미 댓글 2 좋아요 0 조회수 107

추천하시는 강의 듣는 방법!

해결됨

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

혹시 강의를 처음에는 쭉 보면서 따라하거나 정리하고 다시한번 한입 북스를 스스로 만들어보면서 nextjs흐름을 파악하면서 잘 모르겠거나 막히는 부분 강의 다시 한번 듣고 소스 코드 보고 이렇게 듣는 방식이 젤 괜찮은가요?? 아니면 스타일링이나 단순 리액트 컴포넌트를 구성하는 부분은 혼자서 해보고 강의를 듣는 방식이 더 나을까요?? 감사합니다

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

StockList 만들기 중 404 ERR_BAD_REQUEST 에러

미해결

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

StockList 만들기 중 404 ERR_BAD_REQUEST 에러 발생하여 한참 구글링 해보다가 아래의 방법으로 해결하였습니다. 혹시 같은 에러 있으신 분들 참고하세요 보안 이슈땜에 proxy 설정 필요합니다. 1) npm install http-proxy-middleware --save 2) src 폴더에 setupProxy.js 생성 후 아래 내용 복사 const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: " http://localhost:3000 ", changeOrigin: true, }) ); };

  • HTML/CSS
  • javascript
  • vue.js
  • node.js
  • mongodb
  • 소프트스킬
김동석 댓글 2 좋아요 0 조회수 160

home 화면에 불러와지지 않아요!

미해결

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

BMI 계산기 프로그램 완성하기 5:14 ~ APP.vue 파일에서 <router-view></router-view> main.js 파일에서 import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App) .use(router) .mount('#app') 작성하면 선생님이 보여주신 거처럼 하단에 HomePage가 나와야 하는데 저는 HomePage 가 나오지 않아요. BMI를 눌러도 BMI 가 나오지 않습니다. BMI를 클릭하면 BMI를 클릭하면 path만 변경되지 다른 반응이 나오지 않습니다. 코드는 제가 직접 적진 않았고 선생님이 작성해준 코드를 그대로 넣었습니다 index main app.vue

  • HTML/CSS
  • javascript
  • vue.js
  • node.js
  • mongodb
  • 소프트스킬
최진아 댓글 1 좋아요 0 조회수 98

todolist 새로고침 했을때 추가했던 데이터들 초기화 되지 않게는 어떻게 하나요??

해결됨

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

삭제하기 강의 까지 들었는데 따로 데이터를 삭제하지 않았어도 새로고침을 하면 기본 mockData들만 다시 화면에 나타납니다. 새로 고침을 해도 이전 데이터들이 그대로 나오게 하려면 어떻게 해야 하나요?

  • javascript
  • react
  • node.js
hg05095 댓글 3 좋아요 0 조회수 237

5.2강의에서 header태그 에러

미해결

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

const Header = () => { return { <header> <h1>header</h1> </header> }; }; 위의 코드 작성시 속성 할당이 필요합니다. 선언 또는 문이 필요합니다. 식이 필요합니다. 선언 또는 문이 필요합니다. 이 4가지 에러가 표시됩니다.

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

코드 다시 만져보면서 추가질문입니다.

해결됨

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

문의하기에서 접수 완료 후 (현재 기본 로컬~문의완료되었습니다.) 알럿 뜨는거 저번에 배운 게시글 처럼 넣어서 이쁘게 꾸며도 사용상 문제없는거 맞죠? 만약에 참고할만한 알럿 다른 라이브러리나 깃허브 같은건 보통 실무에서 어떻게 참조하나요? 몽고DB랑 AWS_S3로 저희가 이미지 및 데이터를 저장하잖아요, 그럼 실무에서는 그냥 도메인 및 호스팅만 따로 구매해서 넘겨드리고 사용 하시면 된다고 하면서 넘겨드리고, 몽고DB 및 AWS_S3는 제가 한 계정(제 개발계정)에 같이 폴더만 나눠서 관리하는 식으로 많이하나요? 궁금합니다.

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

.forms[0]

해결됨

핵심만 골라배우는 JavaScript

document.forms에서 [0]은 뒤에 왜 붙는 건가요???

  • javascript
luciaaa a 댓글 1 좋아요 0 조회수 121

인기 태그

인프런 TOP Writers

주간 인기글