14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?

채찍피티에게 물어보니 try/catch로 처리하라고 하는데 이게 최선일까요..?

최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다.필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.

현재 강의와 관련없는거 알지만 혹시나해서 문의남깁니다. 현재 강의 구매한 분들 대상으로[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 90% 할인해서 구매할 수 있었던 것으로 기억하는데, 이미 기간이 끝난거 알지만 지금이라도 할인된 가격으로 구매할 수 있을까 해서 문의남깁니다. 

강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다.소스는 같은데 머가문제인지 알 수있을까요?<Editor.jsx>const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor;<App.jsx>import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;

매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.

제목 그대로입니다.코드샌드박스 링크좀 어딘가에 달아주시든지, 자료파일에 좀 첨부해주시든지,어떻게 좀 해주세요.화면 스톱 해놓고 일일이 주소창 쳐서 들어가고 있어요.너무 불편해요!질문답변 게시판에 링크 달아놓은거 없는지 검색도 해봤는데 전혀 엉뚱한 대답만 있는 것 같고..  

Router.use() requires a middleware function but got a undefined export require 경로 확인 잘 했는데 왜 발생할까요...?

component 사용 시 에러 발생function App() { return ( <Router> <div> <Routes> <Route path="/" element={Auth(LandingPage, null)} /> <Route path="/login" element={Auth(LoginPage, false)} /> <Route path="/register" element={Auth(RegisterPage, false)} /> */} </Routes> </div> </Router> ); } element 사용 시 아래처럼 진행하심 잘됩니다. (element 안에는 함수가 못들어간다하네요)function App() { const AuthLandingPage = Auth(LandingPage, null); const AuthLoginPage = Auth(LoginPage, false); const AuthRegisterPage = Auth(RegisterPage, false); return ( <Router> <div> <Routes> <Route exact path="/" element={<AuthLandingPage />} /> <Route exact path="/login" element={<AuthLoginPage />} /> <Route exact path="/register" element={<AuthRegisterPage />} /> </Routes> </div> </Router> ) }

vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다.vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요.npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms18:15:46.529error during build:18:15:46.530Could not resolve "./pages/NotFound" from "src/App.jsx"18:15:46.530file: /vercel/path0/src/App.jsx18:15:46.530 at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41)18:15:46.530 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:393:42)18:15:46.530 at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21111:24)18:15:46.530 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21071:2618:15:46.544Error: Command "npm run build" exited with 1

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer 왜 App.js에서 prop에 answers라고 쓰고 QuestionBox.js 에서는 answer로 받는거죠?

/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App 

useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다.화면에는 테이블 1개만 존재한다.데이터는 unknown[] 형태이다.다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다.코드로 예시를 들면 아래와 같습니다.const [items, setItems] = useState<unknown[]>([]);useEffect(() => void, [items]) 답변주시면 감사합니다.

index.html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Emotion Diary</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> New.jsximport Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useNavigate } from "react-router-dom"; import { useContext, useEffect } from "react"; import {DiaryDispatchContext} from "../App"; import usePageTitle from "../hooks/usePageTitle"; const New=()=>{ const{onCreate}=useContext(DiaryDispatchContext); const nav=useNavigate(); usePageTitle(`${useParams.id}번 일기 수정`); const onSubmit=(input)=>{ onCreate( input.createdDate.getTime(), input.emotionId, input.content ); nav('/',{replace: true}); }; return ( <div> <Header title={"write new diary"} leftChild={<Button onClick={()=>nav(-1)} text={"< back"}/>} /> <Editor onSubmit={onSubmit}/> </div> ); }; export default New;usePageTitle.jsximport { useEffect } from "react"; const usePageTitle=(title)=>{ useEffect(()=>{ const $title=document.getElementByTagName("title")[0]; $title.innerText=title; },[title]); }; export default usePageTitle;이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요

강의에서 모든 부분이 잘 따라왔습니다.다만.. 마지막 안드로이드 가상 에뮬레이터가 작업표시줄 창에는 뜨지만 직접적으로 확인하지 못하고 있습니다. 클릭해도 아무 반응이 없고, 작업 표시줄에 있는 프로그램에 마우스를 올려보면 이렇게만 뜨고 있습니다. adb 설치도 다시 해보았고, 에뮬레이터에서 앱이 실행 중인지도 adb shell pm list packages | grep 명령어로 확인해보았습니다. 제가 놓친 부분이 있는 걸까요?

안녕하세요 강의 잘 듣고 있습니다!  수업 중 reducer의 마지막 부분에 localStorage.setItem()를 호출하여 로컬 스토리지에 데이터를 저장하셨는데요. 그 이유는 데이터의 생성, 수정, 삭제가 reducer 함수 호출 시 이루어지기 때문이라고 이해했습니다.  만약 reducer 내부가 아닌 아래 코드처럼 data를 deps로 가지는 useEffect안에서 데이터를 저장해도 동일하게 동작하는 것이 맞을까요?useEffect(() => { localStorage.setItem("diary", JSON.stringify(data)); }, [data]);

css를 적용하였는데도 감정 이미지의 background가 적용이 되지 않는데 잘못된 것이 있을까요??.Viewer > section{ width:100%; margin-bottom: 100px; display: flex; flex-direction: column; align-items: center; text-align: center; } .Viewer > section > h4{ font-size:22px; font-weight: bold; } .Viewer .emotion_img_wrapper{ width:250px; height:250px; border-radius: 5px; display:flex; flex-direction: column; align-items: center; justify-content: space-around; color: white; font-size: 25px; } .Viewer .emotion_img_wrapper_1{ background-color: rgb(100,201,100); } .Viewer .emotion_img_wrapper_2{ background-color: rgb(157,215,114); } .Viewer .emotion_img_wrapper_3{ background-color: rgb(253,206,23); } .Viewer .emotion_img_wrapper_4{ background-color: rgb(253,132,70); } .Viewer .emotion_img_wrapper_5{ background-color: rgb(253,86,95); }

고농축 프론트엔드 강의와 완벽한 프론트엔드 강의 커리큘럼이 차이가 많이 날까요?추가된 강의 공지는 읽어봤는데 기존의 기본적인 리액트 내용에서 업데이트가 많이 되었다던가 등 차이가 많이 나는지 궁금합니다.

안녕하세요. API 개발을 하다가 클라이언트의 IP를 가져와서 사용 할 일이 생겼습니다.간단하게 Request 객체의 ip 값을 가져와서 사용하려고 하는데, 저희 클라이언트가 NextJS의 SSR을 사용해서 렌더링을 하고있어서 브라우저에서 요청을 하면 NextJS 서버 -> NestJS 서버로 요청이 들어가 IP가 요청을 보낸 유저의 IP가 아닌 배포하고있는 서버의 IP로 들어오고 있습니다. 이 문제는 user-agent 값 확인을 통해서 원인을 파악 할 수 있었습니다. 문제를 해결하기 위해 NextJS에서 axios요청을 할 때, 헤더에 클라이언트의 원본 아이피를 가져와서 달아주고 서버에서 해당 헤더의 값을 가져와서 사용하고자 했습니다.생각처럼 됐으면 좋았겠지만, 왜인지 서버에서는 계속 배포하고있는 서버의 IP를 가져오고 있는 상태입니다. 커스텀 헤더에 달아준 값을 확인해봐도 서버 IP가 찍히고 있는데요. 클라이언트 로그에서는 또 원본 IP가 잘 찍히고 있습니다.Nginx를 사용중인데 Nginx에서 문제가 생기고 있는건지, 어디가 잘못된건지 감이 안와서 질문 남깁니다. 어떻게 하는게 좋을까요? 추가로, 클라이언트의 원본 IP를 받아오는 다른 방법이 있을까요?감사합니다.

header 에서는 header-area를 따로 만들어서 이미지를 관리를 하였는데body에서 배너는 배너-area를 따로 안만들고 바로 banner에 이미지를 넣어서 관리하는 이유가 따로 있나여?? 무슨차이인가요