48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Firebase CLI 로그인 메시지
안녕하세요. Firebase로 프로젝트 배포하기 강의에서 login을 시도하려고 하는데 아래와 같은 메시지가 뜹니다.Node버전을 올리라는 얘기인거 같은데 메시지대로 버전만 올리면 되는건지,버전 변경으로 프로젝트에 영향이 가진 않을지 궁금해서 질문 드립니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백지옥 isPositived()와 isPositiveP()
isPositive함수를 주석 처리하고 실행해도 문제 없이 돌아가는데 isPositiveP 함수를 사용할 때는 isPositive 함수가 없어도 되는 건가요? 프로그램이 실행될 때 두 함수의 관계를 잘 모르겠습니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
localhost 충돌문제
diaryediter.jsonCreate(state.author, state.content, state.emotion);넣는 순간 충돌이 일어납니다. 주석 처리하면 저장 성공은 확인되지만 일기리스트에 추가가 안됩니다.넣으면 이런현상이 발생합니다
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useReducer 상태관리 질문있습니다 ㅠㅠ
https://github.com/diderot7/REACT-PRACTICE/blob/master/src/Logout.js 강의를 들으면서 1. 로컬스토리지로 로그인 기능 구현로그인 시 로컬스토리지에 동일한 아이디 패스워드가 있다면 컨텐츠 보여주는 기능 구현이렇게 만들어봤습니다. 그런데 useEffect로 로그인 유지기능이 어떻게해도 안되서.. 혹시 힌트를 좀 얻을 수 있을까요?
- 해결됨한입 크기로 잘라 먹는 리액트(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분경부터 계속 막힙니다. 아무리 정렬을 바꿔도 정렬이 변경되지 않아요. 따라친다고 따라쳤는데 어디가 틀린지 잘 모르겠습니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Console창 로그 문제
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.=====================================1강 부터 듣고 있는데 CodeSandBox에서 1강이 끝나고 나와 있는 링크를 따라 CodeSandbox를 연결하였는데 console.log를 찍어도 아무런 반응도 없네요.어디가 문제인가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Counter 컴포넌트가 2번씩 호출되는 이유
안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다.
- 해결됨한입 크기로 잘라 먹는 리액트(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를 받으니까 최신의 상태인 건 알겠는데 그래서 함수형 업데이트를 할 필요가 없다는 부분을 모르겠습니다.. 함수형 업데이트가 뭐죠..😥제가 이해한게 맞는지, 틀린 부분있다면 말씀해주시면 감사하겠습니다!!
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포 후 글 작성하고 새로고침하면 게시물이 사라집니다.
배포 후 정상작동을 확인하기위해글 작성하고 새로고침을했는데 로컬스토리지에 제대로 저장안되는 문제가 발생합니다. 그리고 components탭을 확인해보니 ye he me le ... 이런식으로 나오는데왜이렇게나오는지 이게 문제의 원인인지 모르겟습니다..!수정이나 삭제 기능은 정상작동합니다. 로컬스토리지에 왜 저장이안될까요...수업보면서 작성한코드와https://github.com/hunffy/emotion_diaryfirebase 배포 주소는https://hunffy-individual-project.web.app/여기있습니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const{}=getDiaryAnalysis() 부분이 잘 이해가 안가요
const{goodCount,badCount,goodRatio}=getDiaryAnalysis() 7:40초에 이 코드가getDiaryAnlysis()를 통해 받아온 것을각각 다시 할당 하는건가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback이 적용 되지 않습니다.. (onRemove, onEdit)
안녕하세요 강사님! 강의 잘 보고 있습니다 :)섹션 5 - 최적화 4 강의에서 5분정도 쯤에 나오는 내용에 관한 것 입니다.저와 같은 질문을 하신 분의 답변을 보면, DiaryList에서 DiaryItem 컴포넌트의 key 값을 인덱스를 사용했기 때문에 자꾸 렌더링이 되고 강의에서는 dataId 를 사용해서 렌더링이 안된다고 답변 주셨는데, 저는 dataId를 key로 사용하고 있는데도 렌더링이 일어납니다..! 왜 그럴까요..ㅠㅠhttps://github.com/LEESOLL/EmotionDiary/commit/5acc047e645124b86601161ab7f3d3b40a4c62cc깃 링크 첨부하여 드립니다..!
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
State 문제
useState(0) 에서 결과값을 볼려고 했는데 0이 안떠서 값을 못보겠습니다. 코드에 문제가 있는걸까요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react에서 코드 작성하실때 태그 작성하시는것 질문 있습니다.
리액트 강의에서 코드 작성하실 때input이나 button 같은 태그를 작성하실 때한 태그만 작성하실 때에도 굳이 div태그를 만들어서 그 안에 작성하시던데 그 이유가 있을까요??JSX문법에서 전체 태그를 하나의 부모 태그로 감싸야 하는 것은 알고 있지만 왜 태그 하나 하나를 다 div태그로 감싸는지 궁금합니다
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 질문드립니다.
import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Board from "./common/Board"; import Login from "./component/Login"; import { useEffect } from "react"; function App() { useEffect(() => console.log("app is loading"), []); return ( <BrowserRouter> <Routes> <Route path="/login" element={<Login />}></Route> <Route path="/board/:boardId/page/:page" element={<Board />}></Route> <Route path="/board/:boardId/new" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId/edit" element={<Board />} ></Route> </Routes> </BrowserRouter> ); } export default App; import React, { useEffect, useState, useContext } from "react"; import { useNavigate, useParams } from "react-router-dom"; // useParams를 import import BoardList from "../component/BoardList"; import BoardEdit from "../component/BoardEdit"; import BoardView from "../component/BoardView"; import Layout from "../layout/Layout"; import axios from "axios"; import { TokenProcess } from "../common/TokenProcess"; export const BbsSettingContext = React.createContext(); const Board = () => { const { boardId, postId, page } = useParams(); // const [currentUrl, setCurrentUrl] = useState(null); const [boardSettData, setBoardSettData] = useState(null); const navigate = useNavigate(); useEffect(() => { console.log("board:::::::::::::::::"); const fetchData = async () => { const access_token = localStorage.getItem("Authorization"); try { const response = await axios.get( `http://localhost:8080/api/board/${boardId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); setBoardSettData(response.data.returnData.board); let mode = ""; if ( window.location.pathname.split("/")[3] == "page" && window.location.pathname.split("/")[5] == null ) { mode = "page"; } else if ( window.location.pathname.split("/")[3] == "post" && window.location.pathname.split("/")[5] == null ) { mode = "view"; } else if (window.location.pathname.split("/")[5] == "new") { mode = "new"; } else if (window.location.pathname.split("/")[5] == "edit") { mode = "edit"; } else { mode = ""; } setCurrentUrl(mode); console.log("모드" + mode); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); }, [window.location.pathname]); return ( <BbsSettingContext.Provider value={boardSettData}> {currentUrl == "page" ? ( <Layout> <BoardList boardId={boardId} page={page} /> </Layout> ) : currentUrl == "new" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "edit" ? ( <Layout> <BoardEdit boardId={boardId} postId={postId} /> </Layout> ) : currentUrl == "view" ? ( <Layout> <BoardView boardId={boardId} postId={postId} /> </Layout> ) : null} </BbsSettingContext.Provider> ); }; export default Board; 아래는 상세 보기입니다.import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; import { TokenProcess } from "../common/TokenProcess"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const navigate = useNavigate(); const [post, setPost] = useState({ postId: "", postTitle: "", postContent: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { console.log("view>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"); if (boardSetData) { setBoardSetting(boardSetData); const access_token = localStorage.getItem("Authorization"); const fetchData = async () => { try { const response = await axios.get( `http://localhost:8080/api/board/${boardSetData.boardId}/post/${postId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); console.log(response.data.returnData); setPost({ postId: response.data.returnData.postId, postTitle: response.data.returnData.postTitle, postContent: response.data.returnData.postContent, regDate: response.data.returnData.regDate, }); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); } }, [boardSetData, postId]); const editBoard = async () => { navigate(`/board/${boardSetting.boardId}/post/${postId}/edit`); }; return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.postTitle} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.postContent}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" onClick={editBoard} /> </div> </section> </div> ); }; export default BoardView; 리스트이동이라는 버튼을 누르면 바로 이동을 하는데브라우저에서 <- 뒤로가기 버튼을 누르면 갑자기 BoardView의 useEffect를 타는데 이유를 모르겠습니다 .어떻게 해야될까요. ..
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
async/await 질문 있습니다.
해당 강의에서 예로 들어주신 부분 코드를 가져와 보면async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } getData();위 코드를 예로 들어 주셨는데요 여기서 질문이 있는데async 내부에서 await은 비동기를 동기적으로 실행하게 하는 거라고 해주셨는데요그러면 위 코드에서 async await 자체를 쓸 필요가 없는거 아닌가 하는 궁금증이 들었는데요혹시 말씀해주신 '비동기를 동기적으로 실행하게 한다' 라는게 해당 함수 내부에서만을 말씀해주신 걸까요??제가 이해한게 맞나 확인 부탁드립니다.코드를 실행 하면 차례대로 한줄씩 실행된다.getDate함수를 호출하는 코드가 실행되면 코드의 실행 순서는 getDate함수로 이동한다.getDate함수 내부의 await을 만나면 거기서 getDate함수의 실행은 멈춘다.getDate함수의 await 작업이 끝날 때까지 getDate함수는 실행을 멈추고 실행은 다시 전체 코드에서 getDate함수를 호출한 부분 이후의 코드가 실행된다.await 작업이 끝나면 실행은 다시 getDate함수 내부의 await 이후 코드가 실행되고 getDate 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다라고 이해 했는데요... 이게 맞을까요??아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
emotion_img를 못받아오고 있어요
이번에 페이지 구현-일기 쓰기 (/new) 를 듣고 따라 적어보는 중에 잘 해결되지 않는 부분이 있어서 질문을 올립니다! 다른 기능은 정상적으로 작동하고 다른 컴포넌트에서도 img파일을 정확히 불러오는데 DiaryEditor.js 에서만 emotinItem으로 emotion_img를 전달하는데 이미지가 뜨지 않고 오류가 발생합니다 이런식으로 onClick is not a function 이라고 나오고 DiaryEditor에도const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || "";를 추가해봤지만 해결되지 않았습니다 어떻게 해야될까요?import { useRef, useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; import MyHeader from "./MyHeader"; import MyButton from "./MyButton"; import EmotionItem from "./EmotionItem"; import { DiaryDispatchContext } from ".././App"; const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; const emotionList = [ { emotion_id: 1, emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`, emotion_descript: "완전 좋음", }, { emotion_id: 2, emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`, emotion_descript: "좀 좋음", }, { emotion_id: 3, emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`, emotion_descript: "그럭저럭", }, { emotion_id: 4, emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`, emotion_descript: "별로임", }, { emotion_id: 5, emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`, emotion_descript: "최악임", }, ]; const getStringDate = (date) => { return date.toISOString().slice(0, 10); }; const DiaryEditor = () => { const contentRef = useRef(); const [content, setContent] = useState(""); const [emotion, setEmotion] = useState(3); const [date, setDate] = useState(getStringDate(new Date())); const { onCreate } = useContext(DiaryDispatchContext); const handleClickEmote = (emotion) => { setEmotion(emotion); }; const navigate = useNavigate(); const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } onCreate(date, content, emotion); navigate("/", { replace: true }); // 뒤로가기 막기 }; return ( <div className="DiaryEditor"> <MyHeader headText={"새 일기쓰기"} leftChild={<MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />} /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className="input_box"> <input className="input_date" value={date} onChange={(e) => setDate(e.target.value)} type="date" /> </div> </section> <section> <h4>오늘의 감정</h4> <div className="input_box emotion_list_wrapper"> {emotionList.map((it) => ( <div key={it.emotion_id}> <EmotionItem key={it.emotion_id} {...it} onClick={handleClickEmote} isSelected={it.emotion_id === emotion} /> </div> ))} </div> </section> <section> <h4>오늘의 일기</h4> <div className="input_bot text_wrapper"> <textarea placeholder="오늘은 어떤가요?" ref={contentRef} value={content} onChange={(e) => setContent(e.target.value)} /> </div> </section> <section> <div className="control_box"> <MyButton text={"취소하기"} onClick={() => navigate(-1)} /> <MyButton text={"작성완료"} type={"positive"} onClick={handleSubmit} /> </div> </section> </div> </div> ); }; export default DiaryEditor;
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
저장을 해도 실행이 안 돼요
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.codesendbox에서 ctrl+s 하면 저장하면서, console에 뜨는 구조가 아닌가요!?올려주신 해결책 다 사용해봤는데도 console창은 묵묵부답이네요...ㅠ
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx create-react-app ./ 사용
npx create-react-app simplediray 를 통해 만들고 파일을 옮기는 것과 create-react-app ./을 사용하는게 동일한건가요 ?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 내 에서 현재 연도와 월 구할 때 +1 안하는 이유
안녕하세요 정환님! 강의 듣다가 궁금한 점이 생겨서 질문드립니다.curDate가 변경되면 diary에서 현재 연도와 월에 해당하는 일기만 보여주려고 가공하는 부분입니다. 강의 13분 37초 쯤에서 useEffect 는 현재 연도와 월의 가장 첫번째 날짜를 구한다고 하시고 코드를 작성하시는데 firstDay의 new Date 내에서 curDate.getMonth() 에서 왜 +1을 하지 않아도 현재 월을 잘 받아오는건가요? (JS 에서 월이 0부터니까 +1을 한다고 알고 있었는데요..!)위의 headText 에서랑 increaseMonth 에서는 모두 +1 을 해서 현재 월을 받아왔는데 useEffect 내에서는 왜 +1을 안했는데도 정상적으로 받아왔는지 궁금합니다 !
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정이 안됩니다..
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 수정하기 다 구현한 것 같은데... 수정이 안됩니다ㅠ 뭐가 문제인지 모르겠어요코드샌드박스 링크 첨부합니다!https://codesandbox.io/p/sandbox/emotion-diary-hnrd4q?file=%2Fsrc%2Fcomponents%2FDiaryEditor.js%3A142%2C17