48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
마지막 챕터 - 페이지 구현 , 일기 쓰기 (/new) 파트 40분 경 질문 있습니다.
const [onCreate] = useContext(DiaryDispatchContext) 를 넣자마자 오류가 발생합니다.오류 내용은 object is not iterable 로 뜨고 콘솔의 오류도 저 부분의 에러가 뜨고 있습니다.혹시 뭐가 잘못 되었고 어떤 부분을 체크 해봐야 할까요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정후 리스트 순서가 바뀝니다
감정이나 내용 수정은 잘 되는데 수정완료를 하면 수정한 항목이 list 페이지에 맨 아래로 가는데 어느 부분을 확인하면 좋을까요?그리고 새로고침하면 초기화가 되는데 수정된게 유지가 돼야 하나요?다른 사람들 codesand 박스에 소스를 올리던데 저는 vscode로 작업을 했는데 어떻게 올릴수 있나용? 완성된소스는 따로 볼수 없나요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
40분 30초경 navigate 질문 있습니다
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. navigate('/',{replace:True})가 일기 작성하는 페이지로 뒤로 가기를 해서 못오게 막는다는 말이 무슨 말인지 이해가 안갑니다
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지 라우팅 1
처음 강의를 시작하고 터미널을 열어 npx create-react-app emotion-diary 생성하고 npm install react-router-dom@6을 실행했는데 영상처럼 emotion-diary에 같이 적용이 안되고 따로 다른 파일형식으로 적용이 되는것 같은데 제가 하는 방식이 맞는지 확인 부탁드립니다
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const [sortType, setSortType] = useState("latest");
const [sortType, setSortType] = useState("latest");강사님 하고 똑같이 useState 초기값을 latest로 했는데새로고침 하거나 페이지 이동하고 돌아오면 저는 5번부터 정렬되는데 왜 강사님은 1번부터 정렬되나요?latest니까 5번부터 정렬돼야 하는거 아닌가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
홈 화면 화살표 버튼 눌렀을때 1월에서 2월로 안 가고 3월로 갑니다 나머지 달은 잘 작동합니다.
안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
SPA, MPA, 리액트 Hooks 등의 개념 어디서 참고하시나요?
강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.
- 해결됨[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분경부터 계속 막힙니다. 아무리 정렬을 바꿔도 정렬이 변경되지 않아요. 따라친다고 따라쳤는데 어디가 틀린지 잘 모르겠습니다.