25%
36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm install -g serve 설치 오류가 납니다..ㅠㅠ
hyunwooji@jihyeon-uui-MacBook-Air emotiondiary % npm install -g servenpm WARN config global --global, --local are deprecated. Use --location=global instead.npm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/servenpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/serve'npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR! /Users/hyunwooji/.npm/_logs/2023-02-19T07_24_53_420Z-debug-0.log 구글링 해봣을때는 npm 업데이트 문제인거같다고로 찾아서npm update 도 해봣는데 전혀 해결되지 않고 더 꼬이고 있는거같습니다.. 완강을 앞두고 좌절중이네요ㅠ 오늘 다 완강하고 싶었는데 도저히 해결이 안되어 질문남깁니다 감사합니다!!
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Props를 받는 쪽은 무조건 객체 {} 하나만 만드나요?
질문 제목 그대로입니다.props를 주는쪽은 객체 하나에 모든 값들을 프로퍼티로 보내고, 받는쪽도 객체 하나로 모든걸 컨트롤해야한다고, 이해하면 될까요? 객체 두개( { }로 묶인친구 두 덩어리)를 따로따로 보낼려고 하면 어떻게 해야할지도 모르겠고, 시도만 하면 전부 에러가 납니다...
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정 페이지에서 감정 이미지 오류
이번 EDIT 구형하기 강의를 모두 마치고다른 부분에는 문제가 없는데수정 페이지에서 감정 이미지가 나타나지 않는 오류가 발생합니다ㅠ코드 샌드박스에 이미지 파일을 어떻게 올리는지 모르겠어서 우선 코드만 올려봤습니다..!https://codesandbox.io/s/frosty-leaf-63db3g?file=/src/App.js
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 작동
import React, { useEffect, useState } from "react"; const ImageView = ({ image }) => { useEffect(() => { console.log("이미지이펙트"); }); console.log("image"); return <div>{image}</div>; }; const TextView = React.memo(({ text }) => { useEffect(() => { console.log("텍스트 이펙트"); }, []); console.log("text"); return <div>{text}</div>; }); const CountView = React.memo(({ count }) => { useEffect(() => { console.log("카운트이펙트"); }); return <div>{count}</div>; }); const OptimizeTest = () => { const [count, setCount] = useState(1); const [text, setText] = useState(""); const [image, setImage] = useState(5); return ( <div style={{ padding: 50 }}> <ImageView image={image} /> <h2>count</h2> <CountView count={count} /> <button onClick={() => setCount(count + 1)}>+</button> <div> <h2>text</h2> <TextView text={text} /> <input value={text} onChange={(e) => setText(e.target.value)} /> </div> </div> ); }; export default OptimizeTest;OptimizeTest가 App.js 자식으로 있는데 콘솔 창 보면 희한한 결과가 나옵니다. image랑 이미지이펙트가 2번 찍히는데 이유를 모르겠습니다. index.js strict 모드도 아닙니다.또한 실행 순서가 궁금한데 이미지이펙트가 콘솔창보면 image보다 늦게 찍히고 텍스트 이펙트가 text보다도 늦게 찍히는데 이 이유도 궁금합니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 사용하신 이유가 궁금합니다.
안녕하세요. 강의 열심히 듣고 있습니다.최적화2 - React.memo 듣고 있는데저기 빨간색 줄친 곳을 확인하면 굳이 useEffect로 console을 감싼 이유가 있으신가요?useEffect(() => { }) : Componet가 Update(리렌더) 되는 순간마다 실행되는데 저기에선 prop 값이 바뀐다면 어차피 console 이 실행되지 않나요? useEffect를 사용하신 이유가 궁금합니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo 강의 듣고 있습니다.
선생님 화면 제 화면 선생님 화면처럼 위에 에러 뜨게 하려면 어떻게 해야하나요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
단락 회로 평가
단락 회로 평가에서 isVisible이 true이면 반드시 뒤에 컴포넌트가 렌더가 되는데 왜 그럼 컴포넌트는 항상 true인가요?근데 원래가 && 연산자는 앞 뒤 모두 true여야 true인데 이지비지블이 true면 왜 뒤에 컴포넌트는 항상 true인지 궁금합니다?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이런 버그(?)는 왜 발생하는 걸까요?
강의를 따라서 simplediary 코드를 작성해보는데 첫번째 일기 id가 계속 20으로 떠서 제가 코드를 잘못 적은 부분이 있나, 싶어 codesandbox에 올려주신 코드를 붙여넣기 해도 제 브라우저에서는 계속 id가 20 - 39로 생성이 되더라구요.그래서 뭐가 문젠가 싶어서 봤는데 강의 버전의 npm은 프로젝트 생성시 index.js 코드가 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );이렇게 생성이 되는데 제가 설치한 8.19.3 npm 버전에서는const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );이렇게 생성이 됩니다.src에 App.js와 컴포넌트 코드들만 수정했다가 index 코드도 강의 버전대로 수정을 하니 해결이 되던데, 제가 보기엔 두 코드가 그렇게 다르지 않은 것 같은데 왜 다른 결과가 나오는지 궁금합니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 수정 오류
바로 이전 강의인 useReduce까지는 모두 작동이 잘 되었습니다.이번 강의에서 일기 생성과 삭제는 잘 이루어지는데 수정에서만 오류가 발생하고 있습니다.강의를 세 번 돌려봤는데 무슨 문제인지 모르겠습니다ㅠhttps://codesandbox.io/s/gallant-kilby-4l2tr7?file=/src/App.js
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리스트 조회할 떄 스프리드 연산자 사용하는 이유가 궁금합니다.
안녕하세요 🙋♂️import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { return ( <div className="DiaryList"> <h2>일기 테스트</h2> <h4>{diaryList.length}개의 일기가 있습니다.</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id} {...it} /> ))} </div> </div> ); // 컴포넌트 이름과 동일하게 만들기 }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; // es 모듈 내보내기{diaryList.map((it) => ( <DiaryItem key={it.id} {...it} /> ))}맨 밑에 부분을 보면 diayList가 부모한테 받은 리스트를 map으로 하나씩 찾은 it 객체 까지는 이해가 됩니다. 그리고 아이템 컴포넌트한테 id까지 전달 하는것도 이해됩니다.이해가 조금 안 된 부분을 말씀 드릴게요1. {...it}이 아이템 컴포넌트한테 보내는 prop인데 이전까지의 prop은 name={name} 이렇게 앞에 변수명이 있었는데 왜 이건 없이 보내는데아이템에서 저렇게 받을 수 있나요?const DiaryItem = ({ author, content, emotion, created_date }) => {2. 여기서 it이라는 것은 내가 쓴 일기 하나하나 객체인데 일기리스트 state를 하나씩 map으로 접근해서 it 객체를 얻어내고 있는데 {...it} 이것은 스프리드 연산자로 전체 보내는 거 아닌가요? {it} 으로 보내도 되는지 확인해봤는데 에러가 뜨네요 map으로 돌면서 얻은 객체 it을 보내는데 왜 스프리드 연산자를 사용하는지 궁금합니다. it 안에 어떤 리스트의 하나의 일기 객체가 있을 텐데요 {diaryList.map((it) => ( <DiaryItem key={it.id} {...it} /> ))} console.log(it) 해봤는데 아래와 같은 객체를 그냥 뿌리면 되는데 {...it}을 왜 사용하는지 궁금합니다. it 자체에 정보가 다 있지 않나요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
빌드하기 에서 npx serve build 시 오류
빌드하고 테스트? 하는 작업 할때 명령어 오류가 발생합니다.install 할때도 serve 가 잘 안되는거 같습니다. 실행하는 디렉토리 위치나 필요한 파일이 있을가요 ..?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
삼항 연산자에서 조건 비교할때 === 인가요? ==인가요?
강의에서는 const ar = []ar.length === 0 ?console.log("true"):console.log("FALSE");이런식으로 코드를 보여주셨는데제가 궁금한건 const ar = []; !ar.length ? console.log("Something exist"):console.log("EMPTY");이렇게 코드를 작성하면 물론 Something exist가 출력이 되겠지만제가 궁금한건 저기서 ar.length === 0 // 또는 FALSY? 인지ar.length ==0 // 또는 FALSY ?인지 궁금함다.질문을 한줄 요약하면삼항 연산자에서 조건 비교를 할때 내부적으로 == 가 사용되는지 아니면 === 로 사용되는지 궁금함다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
선생님 key 값에 괄호표기법 쓰는 이유가 뭔가요?
다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target.name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target.name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요?[e.target.name] 왜 이렇게 써야하는지 궁금합니다.위에선 괄호없이 string으로 썼는데
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useContext질문드립니다
선생님 useContext 다른 강의를 보다가 궁금한 점이 생겨서 질문드립니다.우리 수업에서는 context를 위한 파일을 따로 만들지 않고 app.js에 바로 context를 만들었잖아요..?그래서 app.js에 import {createContext} from "react"로 안쓰고 그냥 import React from "react"로 쓴 것인가요?파일을 따로 만들 때랑 아닐 때랑 import를 다르게 하는 것 같아서요..그리고 파일을 따로 만드는 것이 더 일반적인 방식인지 궁금합니다!
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useRef와 변수의 차이
import "./App.css"; function App() { const count = 0; const increaseCountState = () => { count++; }; return ( <div className="App"> <p>State : {count}</p> <button onClick={increaseCountState}>State 올려</button> </div> ); }안녕하세요 1. useRef 를 공부하고 있는데 리액트의 변수를 관리할 때 state랑 useRef 를 사용하는 것은 알겠습니다.그런데 왜 그냥 일반 변수에서 값을 수정하면 되는데 복잡하게 useRef를 사용할까요? 렌더링 그런것을 떠나서 useRef랑 일반 변수를 사용할 때 차이가 궁금합니다.2. 리액트에서 저 코드가 왜 작동이 안될까요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 질문있습니다.
안녕하세요 페이지 구현 일기쓰기(new)까지 수강하고코딩을 완료하였는데 수정완료 버튼을 누르면 수정이 되질 않는 버그와 console.log(targetDate)를 하면 콘솔에 두번 출력되는 버그가 있어서 깃 링크를 드리고 질문을 하려했으나 깃이 자꾸 오류가나서 그런데 혹시 메일로 파일을 보내드리면 그거에 대한 답변이 가능하신지 궁금하여 여쭤봅니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
5분13초 부분에서 삭제버튼을 누르면 onDelete가 함수가 아니라고 에러메세지가 뜨는데요.
5분13초 부분에서 삭제버튼을 누르게 되면 다음과 같은 에러가 발생하여, 원인을 찾고 있는데Uncaught TypeError: onDelete is not a function강의영상 화면의 소스코드와 비교를 해봐도 원인을 찾기가 어려워, 강의 진행에서 사용된 소스를 직접보려고 합니다. (Props으로 넘기는 부분을 몇번을 확인했는데 강의영상과 다른 부분을 찾을 수 없었습니다.)구글 리서치중 import관련된 부분의 가능성을 제시한 글이 있어 찾아보다가,import관련된 소스코드부분이 이번회 강의영상에서 화면에 보이지 않아,밑의 강의 진행 중 사용된 소스코드 링크를 타고 들어가봤는데, 소스가 현재부분의 소스가 아닙니다.(DiaryItem.js, DiaryList.js 등의 파일이 빠져있습니다.)현재강의(6-5 리스트 데이터 삭제하기) 기준으로, 소스코드 링크를 받을 수 있을까요?(아니면 완성본이라도... ^^;)감사합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의를 보며 작업한 코드를 개인 깃허브에 올려도 되나요?
강의를 보며 작업한 코드(실습코드, 일기장 등)를 깃허브 공개 레포에 올려도 되나요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
상태변화 이후 렌더링에 대해서
안녕하세요 🙋♂️-State, 9분 32초즈음State가 변화할 때 마다 그 컴포넌트가 계속 호출되어 새로운 요소(혹은 DOM)를 반환하는 것은 알겠습니다.그러나, 함수가 호출되어, return을 꾸준히 해준다 하더라도,App.js에서, import를 한번만 한다면, 변화 내용은 업데이트 되지 않을 것입니다. 또, index.js에서 변화한 App.js를 다시 import를 해야겠죠즉 State의 변화에 따라서 import도 계속해줘야 업데이트가 반영될 것입니다.우리는 import를 꾸준히 동작하도록 코드를 작성한 적이 없는데 불구하고, 업데이트가 반영되고 있습니다.어떻게 이것이 가능한 건지 궁금합니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
code sandbox 호이스팅 질문
안녕하세요. 강의 들으면서 호이스팅에 대해서 조금 찾아봤습니다.let 과 const 는 호이스팅이 일어나서 선언은 되지만 초기화는 이루어 지지 않아서, 접근을 시도하면 에러를 발생 시킨다고 알고 있습니다. 하지만, 코드 샌드박드에서 console.log(aa); let aa;라는 코드를 실행하니 다음처럼 undefined 를 반환합니다.똑같은 구문을 개발자도구의 콘솔창에서 실행하니 오류를 다음처럼 오류를 반환합니다. 제가 알기로는 오류를 반환하는 것이 맞는 걸로 알고 있는데,, 혹시 자바스크립트 엔진 동작 방식이 변경된건가요? 아니면 단순히 코드샌드박스의 버그일까요?MDN문서를 봤을 때도 에러를 반환하는게 맞는 것 같은데, 혹시나 제가 모르는 부분이 있는가 하여 질문 남깁니다. 좋은 강의 감사합니다. 즐거운 설 명절 보내세요.