25%
36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react에서 코드 작성하실때 태그 작성하시는것 질문 있습니다.
리액트 강의에서 코드 작성하실 때input이나 button 같은 태그를 작성하실 때한 태그만 작성하실 때에도 굳이 div태그를 만들어서 그 안에 작성하시던데 그 이유가 있을까요??JSX문법에서 전체 태그를 하나의 부모 태그로 감싸야 하는 것은 알고 있지만 왜 태그 하나 하나를 다 div태그로 감싸는지 궁금합니다
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(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를 타는데 이유를 모르겠습니다 .어떻게 해야될까요. ..
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(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 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다라고 이해 했는데요... 이게 맞을까요??아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(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;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
저장을 해도 실행이 안 돼요
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.codesendbox에서 ctrl+s 하면 저장하면서, console에 뜨는 구조가 아닌가요!?올려주신 해결책 다 사용해봤는데도 console창은 묵묵부답이네요...ㅠ
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx create-react-app ./ 사용
npx create-react-app simplediray 를 통해 만들고 파일을 옮기는 것과 create-react-app ./을 사용하는게 동일한건가요 ?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 내 에서 현재 연도와 월 구할 때 +1 안하는 이유
안녕하세요 정환님! 강의 듣다가 궁금한 점이 생겨서 질문드립니다.curDate가 변경되면 diary에서 현재 연도와 월에 해당하는 일기만 보여주려고 가공하는 부분입니다. 강의 13분 37초 쯤에서 useEffect 는 현재 연도와 월의 가장 첫번째 날짜를 구한다고 하시고 코드를 작성하시는데 firstDay의 new Date 내에서 curDate.getMonth() 에서 왜 +1을 하지 않아도 현재 월을 잘 받아오는건가요? (JS 에서 월이 0부터니까 +1을 한다고 알고 있었는데요..!)위의 headText 에서랑 increaseMonth 에서는 모두 +1 을 해서 현재 월을 받아왔는데 useEffect 내에서는 왜 +1을 안했는데도 정상적으로 받아왔는지 궁금합니다 !
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정이 안됩니다..
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 수정하기 다 구현한 것 같은데... 수정이 안됩니다ㅠ 뭐가 문제인지 모르겠어요코드샌드박스 링크 첨부합니다!https://codesandbox.io/p/sandbox/emotion-diary-hnrd4q?file=%2Fsrc%2Fcomponents%2FDiaryEditor.js%3A142%2C17
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새 일기 등록이 안됩니다..(Uncaught TypeError: Cannot read properties of undefined (reading 'date'))
새 일기를 쓰려고 하면 다음과 같은 에러가 발생합니다.해결해보려고 했는데 어떻게 손대야할지 막막하더라구요ㅠ코드를 뒤져보고 강의도 몇번씩 돌려보고 깃헙 소스코드랑 비교도 해봤습니다... 어떤식으로 에러를 해결해야하는지 찾는 방법도 함께 알려주시면 정말정말 감사하겠습니다..!! 아래는 제가 작성한 소스코드입니다!Home.jsimport { useContext, useEffect, useState } from "react"; import { DiaryStateContext } from "../App"; //components 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([]); // 날짜 저장 state 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)); } else { setData([]); } }, [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; App.jsimport React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Route, Routes } 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": { newState = [action.data, ...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: 3, content: "오늘의 일기 1번", date: 1702273692142, }, { id: 2, emotion: 2, content: "오늘의 일기 2번", date: 1702273692143, }, { id: 3, emotion: 5, content: "오늘의 일기 3번", date: 1702273692144, }, { id: 4, emotion: 1, content: "오늘의 일기 4번", date: 1702273692145 }, { id: 5, emotion: 4, content: "오늘의 일기 5번", date: 1702273692146, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", date: { 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/:id" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App;DiaryList.jsimport { useState } from "react"; import { useNavigate } from "react-router-dom"; import MyButton from "./MyButton"; import DiaryItem from "./DiaryItem"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const filterOption = [ { value: "all", name: "전부 다" }, { value: "good", name: "좋은 감정만" }, { value: "bad", name: "안좋은 감정만" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select className="ControlMenu" value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option value={it.value} key={idx}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const navigator = useNavigate(); const [sortType, setSortType] = useState("latest"); const [filter, setFilter] = useState("all"); const getProcessedDiaryList = () => { const filterCallBack = (item) => { if (filter === "good") { return parseInt(item.emotion) <= 3; } else { return parseInt(item.emotion) > 3; } }; // 비교함수 const compare = (a, b) => { if (sortType === "latest") { return parseInt(b.date) - parseInt(a.date); } else { return parseInt(a.date) - parseInt(b.date); } }; const copyList = JSON.parse(JSON.stringify(diaryList)); const filteredList = filter === "all" ? copyList : copyList.filter((it) => filterCallBack(it)); const sortedList = filteredList.sort(compare); return sortedList; }; return ( <div className="DiaryList"> <div className="menu_wrapper"> <div className="left_col"> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> <ControlMenu value={filter} onChange={setFilter} optionList={filterOption} /> </div> <div className="right_col"> <MyButton type={"positive"} text={"새 일기쓰기"} onClick={() => navigator("/new")} /> </div> </div> {getProcessedDiaryList().map((it) => ( <DiaryItem key={it.id} {...it} /> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
라이프사이클에 따른 state에 대한 질문
컴포넌트가 unmount될때 해당 컴포넌트에서 관리하는 state도 함께 사라지는건가요?컴포넌트가 리랜더링될때 해당 컴포넌트에서 관리하는 state는 여전히 유지되나요?부모컴포넌트가 리랜더링 될때 자식컴포넌트도 리랜더링 되는 건 알고있는데요, 이때 자식컴포넌트가 unmount됐다가 리랜더링되나요? ps) 질문이.. 뭔가 너무 당연한 것 같다는 생각도 드네요..?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const사용이유
안녕하세요! 수업 잘 듣고있습니다.수업소스를 보면 함수도 항상 const를 쓰는데 let을 안쓰고 const를 사용하는 이유가 궁금합니다!!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드샌드박스 바닐라 자바스크립트 템플릿 없음
안녕하세요. 4강 듣고있는데 코드샌드박스에서create a sandbox 해서 들어가도템플릿 목록에 vanila codesandbox가 없네요. react, html+css, react typescript, vanila typescript 이렇게 4가지만 보입니다. ㅠㅠ
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react 개발하는데 nodejs가 사용되는 이유가 궁금해요!
react 할때마다 관성적으로 nodejs를 쓰다보니 갑자기 의문이 생겼어요. 왜 nodejs를 써서 개발해야하는지.react 개발 시 필요한 도구들을 설치하기 위해 npm을 사용하는 것이 좋다는 것은 인지하고 있습니다근데 왜 nodejs까지 쓰는지는 잘 모르겠습니다!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
유데미 강의와 내용이 동일한가요??
유데미 강의와 동일한 버전인가요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx create-app reactexam1 에러
PS C:\reactexam1> npx create-react-app reactexam1npm ERR! code ENOENTnpm ERR! syscall lstatnpm ERR! path C:\Users\82108\AppData\Roaming\npmnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\82108\AppData\Roaming\npm'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm ERR! A complete log of this run can be found in: C:\Users\82108\AppData\Local\npm-cache\_logs\2023-11-28T12_12_57_671Z-debug-0.log npx create-react-app reactexam1을 입력했을 때 계속 이런 에러가 뜹니다.폴더 위치를 c드라이브로 옮기는 것도 해보고 node.js를 다시 다운 받는 것도 해보았는데 계속해서 이런 에러가 발생합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
input 태그 사용 시 form 태그 사용 여부
안녕하세요😀 강의 수강하다 궁금증이 생겨서 질문드립니다.보통 로그인 폼이나, 회원가입 폼처럼 보통 <input> 사용할 때 <form> 안에 넣어서 사용했던걸로 알고 있었습니다. 근데 영상 내에서는 <form>를 사용하시지 않는 것 같더라구요! form을 사용하는게 사용자에게 데이터를 입력받아서 서버한테 전달하는 것으로 알고 있는데 영상 내에서는 간단한 input만 받으니까 서버의 전송이 필요없어서 그러신걸까요?<input> 사용할 때마다 궁금했던건데 .. 제가 투두프로젝트를 만들 때도 할일 목록 입력받는 input, 수정할 투두 입력받는 input 이렇게 2개만 필요하고, 로컬스토리지를 사용할거라 서버의 전송이 필요없는 경우라면 굳이 <form> 사용할 필요가 없는건지.. form 태그 사용 여부 기준을 잘 모르겠습니다 ㅠㅠ 사용할 input의 갯수가 1개 밖에 없어도 서버에 전송을 해야하는 경우면 form을 사용하고, 아니라면 form를 굳이 사용할 필요가 없는걸까요? 구글에 검색해봐도 개인마다 작성하는게 다르고.. 제가 원하는 답변을 얻을 수가 없어서 이렇게 질문드립니다. 감사합니다 !
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList.map in not function 오류
안녕하세요.데이터 추가 기능 구현 중 오류가 생겼는데, 여러번 들어봐도 어디서 놓쳤는지 알수 없어서 문의드립니다.저장 성공 얼럿이 뜬 후 diaryList.map is not a function 오류가 발생하는데 이유가 뭘까요ㅠㅠ? 올려주신 코드와 비교해봐도 잘못 작성된 부분을 찾지 못해서.. 확인 부탁드립니다!https://codesandbox.io/p/sandbox/dawn-silence-dtzj4w?file=%2Fsrc%2FApp.js%3A5%2C1 감사합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지구현 - 일기수정(Edit) 수정 에러 질문(세부사항추가)
정환님 안녕하세요.지난번에 동일한 문제로 문의 드렸었는데, 아직 해결이 안되서 문제 재현에 대한 구체적인 정보 올립니다. (댓글문의는 알림이 안가서 확인이 늦어지는 것 같아서요) 문제)첫번째 일기를 쓰고, 이후 두번째 일기를 쓰고 나서 두번째 일기를 수정하면수정된 두번째 일기와 동일한 일기가 생성이 됩니다.이후 세번째, 네번째 일기를 쓰고 마찬가지로 수정을 하면 수정된 일기와 동일한 일기가 생성이 됩니다그럼 확인부탁드리겠습니다.🥲
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
터미널에서 node 설치오류가 계속 뜹니다
하단에 다른분이 글 남겨주신것 확인하고cmd 들어가서 node.js가 잘 설치되었는지도 확인했습니다그런데 터미널상에서 node index.js만 연결하려고하면 계속 오류가 뜹니다 ㅠㅠ다시 설치해도 오류는 같습니다...왜그럴까요?ㅠㅠ처음 터미널을 오픈하면 강의에 나오는window powershell ~ 새로운 크로스 플랫폼~이 문장이 나오지 않는데 이부분에서 무언가 누락된것이 있을까요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
codesandbox ui 패치에 따른 질문
ctrl+s 누를때마다 자바스크립트를 실행하도록 설정하고 싶은데 어떻게 해야할까요?