25%
36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
0은 양수가 아닌거아닌가요? a >= 0 ?이렇게하면 0도 양수가 되는데..
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새로고침을 하면 작성한 일기가 사라집니다
안녕하세요 새로고침을 하면 작성한 일기가 사라집니다 그런데 뒤로가기나 달을 바꾸면 다시 나옵니다 어디가 잘못됐는지 잘 모르겠습니다.... 부탁드립니다 찾아주세요ㅠㅠhttps://codesandbox.io/p/github/jeain/Diary/main?workspaceId=6483b4dd-e9cf-44d0-9814-c78d2f8b83b4
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Router가 설치가 안됩니다.
npm i react-router-dom@6 로 설치하려하면 npm WARN EBADENGINE Unsupported engine {npm WARN EBADENGINE package: 'lru-cache@10.1.0',npm WARN EBADENGINE required: { node: '14 || >=16.14' },npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.1.0' }npm WARN EBADENGINE } 라 뜨는데요, 현재 노드버전이 v16.13 이라 그런것같은데이럴때는 어떻게 해야되나요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
New 작성한 일기가 렌더링 되지 않아요
https://codesandbox.io/p/sandbox/emotion-diary-cl2v7q?file=%2Fsrc%2FApp.js 새로운 일기가 저장되지 않습니다.. 몇번을 다섯번은 강의를 다시 돌려보며 오류를 찾아봤지만,, 재 눈에는 보이지 않습니다 ㅜㅜ 일기를 추가하고, app.js를 확인해보니깐 0번으로 추가되는데 이것때문에 출력이 안되는걸까요..?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 소스 질문
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.강의를 집에서 또는 사무실에서 들으니 진도가 나간 부분에 대한 코딩을 이어서 나가질 못하는데 혹시 강의에 대한 소스를 어디서 어떻게 쉽게 찾아볼 수 있을까요?답변 부탁드립니다.감사합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
샌드박스코드 콘솔창
콘솔창이 보이지 않는데 어떻게 열어야되는지 궁금합니다!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
App.css에서 질문드립니다
.MyButton_positive{}이부분에서 앞서 MyButton.js 에서 className을 'MyButton MyButton_positive' 로 해주었는데왜 .MyButton MyButton_positive{} 가 아닌.MyButton_positive{}로 작성하는 걸까요??
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo 사용 시 의존성 배열을 전달해주지 않으면 어떻게 되는 건가요?
강의 진행 도중 ContextProvider 에 전달할 memoizedDispatches 를 선언하는 도중 useMemo 의 2번째 인자를 뺐더니, DiaryItem 내용을 수정해도 수정사항이 화면에 렌더링되지 않고 수정 전의 내용이 그대로 출력되었습니다.2번째 인자를 빈 배열로 넣어주면 정상적으로 동작하는 것은 확인했고, 구글링해봐도 useMemo(()=>{}) 이렇게 사용하는 건 올바른 리액트 구문이 아니다 라고만 나오는데왜 수정사항이 반영되지 않는 것인지 궁금합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Firebase CLI 로그인 메시지
안녕하세요. Firebase로 프로젝트 배포하기 강의에서 login을 시도하려고 하는데 아래와 같은 메시지가 뜹니다.Node버전을 올리라는 얘기인거 같은데 메시지대로 버전만 올리면 되는건지,버전 변경으로 프로젝트에 영향이 가진 않을지 궁금해서 질문 드립니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백지옥 isPositived()와 isPositiveP()
isPositive함수를 주석 처리하고 실행해도 문제 없이 돌아가는데 isPositiveP 함수를 사용할 때는 isPositive 함수가 없어도 되는 건가요? 프로그램이 실행될 때 두 함수의 관계를 잘 모르겠습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
localhost 충돌문제
diaryediter.jsonCreate(state.author, state.content, state.emotion);넣는 순간 충돌이 일어납니다. 주석 처리하면 저장 성공은 확인되지만 일기리스트에 추가가 안됩니다.넣으면 이런현상이 발생합니다
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useReducer 상태관리 질문있습니다 ㅠㅠ
https://github.com/diderot7/REACT-PRACTICE/blob/master/src/Logout.js 강의를 들으면서 1. 로컬스토리지로 로그인 기능 구현로그인 시 로컬스토리지에 동일한 아이디 패스워드가 있다면 컨텐츠 보여주는 기능 구현이렇게 만들어봤습니다. 그런데 useEffect로 로그인 유지기능이 어떻게해도 안되서.. 혹시 힌트를 좀 얻을 수 있을까요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
한입리액트 섹션 6 - 페이지 구현 - 홈(/) 코드
// Home.js import { useState, useContext, useEffect } from "react"; import { DiaryStateContext } from "../App"; import MyButton from "./../components/MyButton"; import MyHeader from "./../components/MyHeader"; import DiaryList from "./../components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); const [data, setData] = useState([]); const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(() => { if (diaryList.length >= 1) { const firstDay = new Date( curDate.getFullYear(), curDate.getMonth(), 1 ).getTime(); const lastDay = new Date( curDate.getFullYear(), curDate.getMonth() + 1, 0 ).getTime(); setData( diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay) ); } }, [diaryList, curDate]); useEffect(() => { console.log(data); }, [data]); const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) ); }; const decreaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; return ( <div> <MyHeader headText={headText} leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data} /> </div> ); }; export default Home; // DiaryList.js import { useState } from "react"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option key={idx} value={it.value}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const [sortType, setSortType] = useState("lastest"); return ( <div> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> {diaryList.map((it) => ( <div key={it.id}>{it.content}</div> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; // App.js import React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } case "EDIT": { newState = state.map((it) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 1, content: "오늘의일기 1번", date: 1704809815768, }, { id: 2, emotion: 2, content: "오늘의일기 2번", date: 1704809815769, }, { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1704809815770, }, { id: 4, emotion: 4, content: "오늘의일기 4번", date: 1704809815771, }, { id: 5, emotion: 5, content: "오늘의일기 5번", date: 1704809815772, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); console.log(new Date().getTime()); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", data: { id: dataId.current, date: new Date(Date).getTime(), content, emotion, }, }); dataId.current += 1; }; // REMOVE const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; // EDIT const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(Date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App; 해당 강의 23분경부터 계속 막힙니다. 아무리 정렬을 바꿔도 정렬이 변경되지 않아요. 따라친다고 따라쳤는데 어디가 틀린지 잘 모르겠습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Console창 로그 문제
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.=====================================1강 부터 듣고 있는데 CodeSandBox에서 1강이 끝나고 나와 있는 링크를 따라 CodeSandbox를 연결하였는데 console.log를 찍어도 아무런 반응도 없네요.어디가 문제인가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Counter 컴포넌트가 2번씩 호출되는 이유
안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최적화 8분 55초 / 15분 24초
안녕하세요! 강의 수강 중 궁금한 점이 생겨서 질문 드립니다.해당 부분은 8분 55초 , 15분 24초 입니다! 8분 55초 부분에서 설명하실 때 'useState의 상태변화 함수인 setState는 리렌더가 일어나도 동일한 id를 보장한다' 라고 하시는데 이게 클로저랑 연관있는 설명이 맞을까요? setState가 클로저 특성으로 이전의 상태 값을 기억해서 리렌더가 일어나도 상태 값을 기억해서 state를 바꿔주는..! 그래서 동일한 id를 보장하는게 맞을까요? 15분 24초에서는 'setEmotion에서는 emotion을 받아서 보여주고 있기 때문에 가장 최신의 state를 참조할 필요가 없다. 그래서 함수형 업데이트를 전달할 필요가 없다' 하셨는데 이 부분을 잘 이해 못했습니다..! setEmotion으로 최신의 emotion state를 받으니까 최신의 상태인 건 알겠는데 그래서 함수형 업데이트를 할 필요가 없다는 부분을 모르겠습니다.. 함수형 업데이트가 뭐죠..😥제가 이해한게 맞는지, 틀린 부분있다면 말씀해주시면 감사하겠습니다!!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포 후 글 작성하고 새로고침하면 게시물이 사라집니다.
배포 후 정상작동을 확인하기위해글 작성하고 새로고침을했는데 로컬스토리지에 제대로 저장안되는 문제가 발생합니다. 그리고 components탭을 확인해보니 ye he me le ... 이런식으로 나오는데왜이렇게나오는지 이게 문제의 원인인지 모르겟습니다..!수정이나 삭제 기능은 정상작동합니다. 로컬스토리지에 왜 저장이안될까요...수업보면서 작성한코드와https://github.com/hunffy/emotion_diaryfirebase 배포 주소는https://hunffy-individual-project.web.app/여기있습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const{}=getDiaryAnalysis() 부분이 잘 이해가 안가요
const{goodCount,badCount,goodRatio}=getDiaryAnalysis() 7:40초에 이 코드가getDiaryAnlysis()를 통해 받아온 것을각각 다시 할당 하는건가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback이 적용 되지 않습니다.. (onRemove, onEdit)
안녕하세요 강사님! 강의 잘 보고 있습니다 :)섹션 5 - 최적화 4 강의에서 5분정도 쯤에 나오는 내용에 관한 것 입니다.저와 같은 질문을 하신 분의 답변을 보면, DiaryList에서 DiaryItem 컴포넌트의 key 값을 인덱스를 사용했기 때문에 자꾸 렌더링이 되고 강의에서는 dataId 를 사용해서 렌더링이 안된다고 답변 주셨는데, 저는 dataId를 key로 사용하고 있는데도 렌더링이 일어납니다..! 왜 그럴까요..ㅠㅠhttps://github.com/LEESOLL/EmotionDiary/commit/5acc047e645124b86601161ab7f3d3b40a4c62cc깃 링크 첨부하여 드립니다..!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
State 문제
useState(0) 에서 결과값을 볼려고 했는데 0이 안떠서 값을 못보겠습니다. 코드에 문제가 있는걸까요?