inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

새일기쓰기하고 새로고침하면 새로쓴일기가 사라져요

미해결

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

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 https://drive.google.com/drive/folders/1lRO0fOAae3cWJUtuNK7L5atrGTgFFRWO?usp=drive_link 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!

  • javascript
  • react
  • node.js
  • 카카오공채-개발
hee011396 댓글 3 좋아요 0 조회수 90

context 강의 중 질문

해결됨

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

11.2 context 사용하기 강의 중에서 질문이 있습니다. 아직 context에 대해 이해를 잘 못하고 있는데 강의 중 10분쯤에 return 문에서 context를 사용하기 위해 이전에 작성해놓은 onUpdate, onDelete 함수를 지웠는데 TodoItem 에 todo도 context를 사용해서 지울 수 있는게 아닌 건지 질문드립니다. app.jsx에서 <List > 부분에서 todos를 지웠던 것처럼 가능한게 아닌지 궁금합니다 div className="todos_wrapper"> {filteredTodos.map((todo) => { // 필터링 된 값들이 나온다 필터링을 거치지 않으면 todos 데이터가 다 나옴 return <TodoItem key={todo.id} {...todo} />; })} </div>

  • javascript
  • react
  • node.js
  • 카카오공채-개발
vmvmxx 댓글 2 좋아요 0 조회수 55

강의자료는 어디서 다운받나요?

미해결

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

이런 질문 드려 죄송해요...;;

  • node.js
  • express
  • nestjs
  • typeorm
김성환 댓글 4 좋아요 0 조회수 170

prettier 이슈

해결됨

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

Prettier 이슈 관련한 Q&A 확인해서 default 설정이나 format on save도 체크했는데 강의에서 보여주신 것 처럼 가독성이 좋은 상태가 아니고 의미없다고 판단한 괄호나 줄넘김을 다 없애버려서 자꾸 이런식으로 코드가 줄어듭니다 ㅠㅠㅠ const Main = () => { const user = { name: "안넝", isLogin: -1, }; return <>{user.isLogin ? (<div>로그인</div>) : (<div>로그아웃</div>)}</>; }; export default Main;

  • javascript
  • react
  • node.js
  • 카카오공채-개발
아연 댓글 2 좋아요 0 조회수 100

소스 코드 부탁드립니다~

해결됨

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

안녕하세요~ 강의 듣는데, 소스코드가 필요해서, 소스코드 보내주시면 감사하겠습니다~ sunshinew@naver.com

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
김주원 댓글 2 좋아요 0 조회수 127

안녕하세요 선생님 도와주세요

미해결

코로나맵 개발자와 함께하는 지도서비스 만들기 2

네이버지도 Api키가 원래 잘되던데 어느순간부터 안되네 오류생기네요 네이버지도 Api키 왜 안될까 원래 됐는데 NAVER Maps JavaScript API v3 신규 Maps API 전환 안내안녕하세요. 네이버 클라우드 플랫폼입니다. AI NAVER API 상품에서 제공되던 지도 API 서비스는 점진적으로 종료될 예정에 있습니다. 아래 공지사항 및 가이드 참고해서 신규 클라이언트 아이디 발급받아 사용 부탁드립니다.■ 공지사항 : https://www.ncloud.com/support/notice/all/1930■ 변경 적용 가이드 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html 이런오류가 생겨요 도와주세요

  • node.js
  • 웹앱
  • mongodb
  • express
  • mongoose
임권일 댓글 1 좋아요 0 조회수 186

React.memo 를 TodoItem 에 적용하는 부분에서 질문 있습니다.

해결됨

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

const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => { const onChangeCheckbox = () => { onUpdate(id); }; const onClickDeleteButton = () => { onDelete(id); }; return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} type="checkbox" checked={isDone} /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}>삭제</button> </div> ); }; export default memo(TodoItem, (prevProps, nextProps) => { // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단 // T -> Props 바뀌지 않음 -> 리렌더링 X // F -> Props 바뀜 -> 리렌더링 O if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; return true; }); TodoItem 의 props 에 함수(객체 타입의 값)을 받고 있어서 export default memo(TodoItem); 이렇게만 적용할 경우 리렌더링 시, 함수를 새로운 객체로 인식해서 TodoItem 컴포넌트 입장에서는 props가 바뀌었다고 인식한다는 거 까지는 이해가 됐습니다. 근데 memo 의 두 번째 인수에서 if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; 이렇게만 비교하면 결국 onUpdate, onDelete 는 비교를 하지 않은거같은데 왜 동작이 잘 되는지 모르겠습니다. true 값을 반환해주면 함수는 변하지 않았다고 정해주는 걸까요?

  • javascript
  • react
  • node.js
  • 카카오공채-개발
XEMI 댓글 2 좋아요 0 조회수 86

생성한 newTodo 객체를 setTodos 를 이용해 추가하는 부분에서 질문 있습니다

미해결

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

const onCreate = (content) => { const newTodo = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }; setTodos([newTodo, ...todos]); }; 지금처럼 이렇게 newTodo 를 todos 배열의 맨 앞에 붙이면 원래 기존의 todos 요소 전체의 인덱스가 변화해야해서 동작시간이 오래 걸린다고 앞의 수업에서 들었던 것 같아서 왜 이렇게 하는지 의문이 들었습니다. 이렇게 해야 나중에 등록한 newTodo 객체가 맨 위로 올라오게 되어서 그런건가요?

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

Components 와 Profiler 탭이 나오지 않습니다.

해결됨

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

크롬에서 추가하고 설정 다 따라서 했는데 components 탭이 나오지 않습니다...

  • javascript
  • react
  • node.js
  • 카카오공채-개발
XEMI 댓글 3 좋아요 0 조회수 171

forEach에서 continue, break 동작안하는 문제

해결됨

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

forEach에서 continue, break 동작안하는 문제 가 발생하였는데 continue랑 break를 쓸거면 일반적인 for문을 이용할 수밖에 없는 건지 궁금합니다. ^^

  • javascript
  • react
  • node.js
  • 카카오공채-개발
JS K 댓글 1 좋아요 1 조회수 69

react도 포멧팅 스타일이 따로 있나요?

미해결

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

구글 스타일 처럼 대표적인 포맷팅 스타일이 있나요?

  • javascript
  • react
  • node.js
  • 카카오공채-개발
문수 댓글 2 좋아요 0 조회수 43

12.13 new 페이지 구현하기 1.UI 부분에서 마지막 설명부분이 이해가 가지 않습니다

해결됨

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

마지막에서 작성완료와 취소하기 버튼 부분에 배경색 하얀색 부분 즉 #root background-color:white부분이 적용되지 않았습니다. 이때 해결방법을 body에 display:flex를 넣음으로써 해결이 된다하셨는데, 이게 root부분에 어떤 영향을 끼치길래 height가 늘어났는지 궁금합니다

  • javascript
  • react
  • node.js
  • 카카오공채-개발
남기정 댓글 2 좋아요 0 조회수 82

response 함수에 대해

미해결

대용랑 채팅 TPS에 대한 stateful 서비스 구축하기

이전 강의를 듣지않고 수강하고 있습니다. 이전 강의에 대한 정보가 없어서 간혹 영상에 보이는대로 따라서 메우고 있는데, response 함수에 대한 정보는 아직 화면에 나온 적이 없는거 같아서요. 어차피 JSON으로 응답이 오는거 같아서 c.JSON 을 통해 처리했습니다. 아직 완강하기 전이라 후반부에 나오는지는 잘 모르겠지만 뼈대가 되는 코드에 대한 정보가 조금 더 있었으면 좋겠습니다. 강의 잘 듣고 있습니다. 감사합니다.

  • node.js
  • mysql
  • go
  • kafka
  • websockets
seoh 댓글 1 좋아요 0 조회수 65

useState vs useReducer 실무에서 주로 사용하는 것은??

미해결

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

강의를 통해 useReducer를 사용하면 복잡한 useState의 set 함수 들로 case로 깔끔하게 정리할 수 있는 것을 보았습니다. 그렇다면 실무에서는 어떤 것을 더 많이 사용하나요? 아니면 두 hooks의 대표 사용하는 케이스 ?? 경우 들을 알려주시면 감사하겠습니다!!! 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!

  • javascript
  • react
  • node.js
동원참치 댓글 2 좋아요 0 조회수 131

리액트 기본기 이해도 기준에 대해 질문드립니다

미해결

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

강의를 통해 React의 여러 개념을 배웠습니다. 어느 정도 수준에 도달해야 리액트의 기본기를 제대로 이해했다고 스스로 판단 할 수 있을 지 궁금합니다. 예를 들어, 이 강의에서 다룬 TodoList 프로젝트를 혼자서 처음부터 끝까지 구현할 수 있는 정도라면, React의 핵심원리를 충분히 체화했다고 볼 수 있을까요 ?

  • javascript
  • react
  • node.js
  • 카카오공채-개발
BT 댓글 2 좋아요 0 조회수 132

DTO에 대한 질문

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

안녕하세요 강의 잘 듣고 있습니다. DTO에 대한 궁금증이 있어 질문 남깁니다. DTO에서 Class-Validator를 통해 유효성 검사를 하는데, 섹션5까지 학습했을 때는 Schema에서 검사를 진행했습니다. DTO에서 PickType Request로 전달되는 데이터만 명시만 하고 Schema에서 유효성검사를 하는 이유가 있는지, 아래 내용처럼 DTO에서 유효성 검사를 분리해서 하는게 이상적인 형태인지 궁금합니다. // src/cats/dto/cats.request.dto.ts import { PickType } from '@nestjs/swagger'; import { IsEmail, IsNotEmpty, IsString } from 'class-validator'; import { Cat } from '../cats.schema'; export class CatRequestDto extends PickType(Cat, [ 'email', 'name', 'password', ] as const) { @IsEmail() @IsNotEmpty() email: string; @IsString() @IsNotEmpty() name: string; @IsString() @IsNotEmpty() password: string; }

  • node.js
  • mongodb
  • express
  • nestjs
BestPlus 댓글 2 좋아요 1 조회수 118

모듈 시스템 질문

해결됨

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

4.2) 첫 React App 생성하기 강의 질문 입니다. 10:15에서 module.exports = { … } 로 시작하는데 이건 cjs 시스템 문법으로 알고 있는데, 5:14에서 나오는 package.json의 type은 module로 되어있는데 두개의 시스템을 동시에 사용하는게 가능한건가요?

  • javascript
  • react
  • node.js
  • 카카오공채-개발
ab kim 댓글 2 좋아요 0 조회수 126

Relay나 다른 GraphQL Client가 아닌 Apollo를 사용하는 이유가 궁금합니다.

미해결

얄팍한 GraphQL과 Apollo

Relay는 React 개발팀이 만든걸로 알고 있는데요! 그래서 더 매력적이라고 느껴지는데 어떤 특징과 장단점으로 Apollo로 강의를 진행하게 되셨는지 궁금합니다. 다른 클라이언트들 대비해서 어떤지도 궁금하네요!

  • node.js
  • apollo
  • graphql
Wontory 댓글 1 좋아요 0 조회수 71

4강 http 서버 만들때 ESM방식으로 해도 될까요?

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

{ "name": "package-manager", "version": "1.0.0", "main": "app.js", "license": "MIT", "type": "module", "dependencies": { "express": "^5.1.0" } } package.json 에 type: "module" 넣고 import express from "express"; const app = express(); const PORT = 3000; 요런식으로 해도 괜찮겠죠?!

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
SangMin Lee 댓글 2 좋아요 0 조회수 120

모듈 사용 시 단점이 있나요?

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

모듈 사용 시 장점은 알게 되었는데 혹시 모듈로 많이 쓸 경우 단점 같은 경우도 있을까요? 용량이든지 등등 궁금합니다.

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
우냥 댓글 1 좋아요 0 조회수 113

인기 태그

인프런 TOP Writers

주간 인기글