172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 Edit페이지 구현하기 강의 부분에서 16:52 부분에 아직 Edit 컴포넌트가 return하기 전인 상태이다. 그래서 마운트 되기 전이기 때문에 nav("/", {replace: true}) 동작할 수 가없다 라는 게 무슨 말인가요? 이 Edit 즉 이 수정페이지로 처음에 화면이 나타난다(마운트)는 이해가 가는데 왜 nav가 실행을 할 수 가없나요? 조금 쉽게 설명을 부탁드리겠습니다 ㅜㅜ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Home.jsx 에서 import { useSearchParams } from "react-router-dom"; const Home=()=>{ const [params, setParams]=useSearchParams(); console.log(params.get("value")); return <div>Home</div>; }; export default Home; 이렇게 작성했는데 사진과 같이 빨간색 글씨가 뜨는데 어디가 틀린걸까요?? 출력에는 문제가 없습니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 해당 강의는 react-rounter-dom v6.22 이던데 혹시 v7로 강의 업데이트 예정이실까요? 정환님이 말아주시는 리라돔 v7 강의는 어떨지 하여 기대감에 여쭤봅니다!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npx init ~~ 를 실행하면 에러가 자꾸 발생해서, 웹사이트를 가보니 다운받는 방식이 아예 바뀐 것 같습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정페이지, 새일기작성페이지, 등 새로고침하면 404 에러가 뜹니다 ㅠㅠ vercel : https://emotion-diary-ochre-six.vercel.app/ 확인 부탁드립니다 ㅠㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const inputRef = useRef() const onSubmit = () => { if(input.name === "" ){ console.log(inputRef.current) inputRef.current.focus() } } return ( <div> <div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} type="text"/> </div> <div> <input ref={inputRef} name="birth" value={input.birth} onChange={onChange} type="date" /> </div> <div> </div> <div> <textarea ref={inputRef} name="bio" value={input.bio} onChange={onChange} > </textarea> </div> <button onClick={onSubmit}>제출</button> </div> ) 위와같은 코드에서 onSubmit함수내 console.log(inputRef.current)를 해보면 무조건 bio만 출력됩니다. 또한 포커스도 어떤 경우에서든 bio가 있는 textarea쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
정말 친절하고 세세한 강의~ 감동 받으면서 잘 듣고 있습니다. 한가지 궁금한 점은.. 강사님은 Vite로 강의하시는데.. Create React App도구를 사용하는 것과 차이가 많이 있을까요? Create React App으로 강의를 들어도 무방한지도 알고 싶습니다. 감사합니다^^
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import "./TodoItem.css"; import { memo } from "react"; const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => { const onChangeCheckbox = () => { onUpdate(id); }; const onClickDeleteButton = () => { onDelete(id); }; return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} //button이 아닌 input태그이기 때문에 onChange를 사용 readOnly checked={isDone} type="checkbox" /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}>삭제</button> </div> ); }; export default memo(TodoItem, (prevProps, nextProps) => { // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단 // T -> Props 바뀌지 않음 -> 리렌더링 X // F -> Props 바뀜 -> 리렌더링 O if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; return true; // 네 개의 값이 바뀌지 않으면 }); 코드를 따라 치면서 실습을 했는데 위처럼 바꿔도 모든 list가 리렌더링된다고 하이라이트가 뜹니다. 뭐가 문제인지 모르겠습니다ㅜㅜ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 공통 컴포넌트 구현하기 강의 부분에서 Header 컴포넌트에 대해 여쭤볼게 있어 질문을 드립니다. Header컴포넌트가 App컴포넌트에 import 되어 있고 props로 title, leftChild, rightChild가 전달이 되는데 leftChild, rightChild는 버튼이니 만들어 놓은 버튼 컴포넌트를 전달해서 들어갈 내용을 동적으로 바꿔주는건 이해가 되지만 title 부분은 그냥 props로 전달하지 않고 Header 컴포넌트 내부에 그냥 작성을 해도 될것같은데 이렇게 title props로 전달하는 이유가 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요. 수업을 진행하던 도중 오류가 발생하여 문의드립니다. 'npm add mongoose' 를 실행 했는데 Error: EPERM에러가 자꾸 뜨네요. 인터넷에서 찾아가면서 .bin파일을 지워도 보고 npm캐시도 삭제해 보고 oneDrive도 중지 시켜보고 해봤지만 오류가 해결이 안되어서 글 남깁니다. 아래 이미지는 오류 내용 캡쳐했습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 useEffect에 대해 공부를 하다가 궁금한점이 생겨 질문을 드립니다. 강의처럼 useEffect의 배열에 count를 작성하면 컴포넌트가 마운트 될때 먼저 실행되고 그다음 count가 바뀔때마다 useEffect가 실행이된다... 까지는 이해를 했는데 그럼 의존성 배열에 count를 넣으면 이 count의 값만 바뀔때에만 실행되기 때문에 불필요한 렌더링을 줄여주어서 useEffect를 사용하는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님께서 말씀주신대로 년월 증가처리에 대해서 동일하게 코드를 작성하였습니다. <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} /> <DiaryList/> </div> (질문)Home.jsx에서 Button 구성요소 ">" 클릭시에 onClick시에 onIncrease 함수객체가 <Button/> 구성요소가 props형태로 함수객체가 전달되고 있습니다. rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} Button 구성요소에는 전달받은 onClick 전달받은 함수객체에 대해서 별도 처리가 없어도 되는것인가요? const Button = ({text, type, onClick}) => { console.log("Button onClick : ", onClick) return ( <button onClick={onClick} className={`Button Button_${type}`}> {text} </button> ) }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강의를 너무 잘 듣고 있습니다. 강의가 업데이트가 되었다는 공지를 오늘 처음 확인을 하게 되었는데 업데이트 된 내용으로 새로 듣고 싶은데 쿠폰을 혹시 발급 받을 수 있을까요?
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
📢 질문을 작성하기 전에 꼭 읽어주세요! 📢 질문 전에 준비할 것 스스로 먼저 확인하기 같은 문제를 겪은 사람이 있는지 인터넷에서 검색해보세요. 대부분의 경우 비슷한 사례를 쉽게 찾을 수 있습니다. 오류와 코드를 다시 한번 점검하기 간단한 실수나 오타가 없는지 확인해보세요. (예: 변수 이름, 함수 호출 방식 등) 문제 상황 정리하기 본인이 겪고 있는 문제를 정확히 이해하고, 어떤 상황에서 발생하는지 메모해보세요. 질문 작성 시 유의할 점 간결하고 명확한 제목 문제를 한눈에 이해할 수 있도록 제목을 작성하세요. ("React에서 상태값 초기화 문제"처럼 구체적으로!) 상황 설명 포함 문제가 발생한 맥락과 이미 시도했던 해결 방법을 간략히 정리해서 알려주세요. 코드 공유 문제가 발생한 코드를 첨부하여 보여주세요. 강의 관련 질문 강의 내용과 관련된 질문이라면 문제가 발생한 강의의 시간이나 챕터를 반드시 적어주세요. 추가 안내사항 답변을 받으면 꼭 확인하고 감사 인사를 남겨주세요. 작은 반응도 답변자에게 큰 동기부여가 됩니다! 질문 게시판에서는 서로를 존중하며 커뮤니케이션해주세요. 강의 외적인 문의(예: 계정 문제, 결제 등)는 고객센터 를 이용해주세요. 여러분의 꼼꼼한 질문이 더욱 빠르고 정확한 답변으로 이어질 수 있습니다. 😊
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요~ 커스텀훅을 만들 때, 커스텀훅 안에도 스프레드 연산자를 넣어서 통합핸들러처럼 사용하면 되는걸까요? 커스텀훅을 훅 파일로 만들어 놓으면, 다른 컴포넌트에서도 비슷한 함수면 가져다 쓰는 용도라고 이해했는데 맞는걸까요? 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
home으로 들어가서 보이는 화면에는 Home이라고 잘 보이는데 주소뒤에 /new나 /diary를 붙여서 검색해봐도 계속 Home으로 고정되어있습니다 코드는 밑에와 같은 방식으로 작성하였습니다. import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' import { BrowserRouter } from 'react-router-dom'; createRoot(document.getElementById('root')).render( <BrowserRouter> <App /> </BrowserRouter> ) const Diary=()=>{ return <div>Diary</div>; }; export default Diary; import './App.css' import {Routes,Route} from "react-router-dom"; import Home from './pages/Home'; import Diary from './pages/Home'; import New from './pages/Home'; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 function App() { return <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary" element={<Diary />} /> </Routes>; } export default App
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql 연습 관련 주소가 더 이상 유지되고 있지 않는 것 같습니다. 일단은 새 강의 쿠폰 관련 문의 드렸는데, 이전 강의에 해당하는 주소들은 이제 유지하지 않는 건가요?
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
강의중 설명에서 알려주시는 노션 사이트는 어떻게 접속해야 하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 강의 너무 잘 듣고 있습니다! 다름이 아니라 css 거의 마지막까지 왔는데 새 강의가 나왔다는 사실을 알게 되어서 저도 새로운 버전으로 강의를 수강하고 싶은데요! ㅠㅠ 실제로 82강에 나오는 my-shop 깃헙 페이지가 다운되기도 했고 해서 새로운 버전으로 꼭 수강하고 싶습니다!! 저도 쿠폰을 받을 수 있을까요? 좋은 강의 제공해 주셔서 정말 감사합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 이전 memo 강의에서 useCallback를 들고 context 듣다 보니 궁금한 사항이 있습니다. 리로딩 방지를 위한 onCreate, onUpdate, onDelete에 이전 강의에 useCallback이 되어있는 상태에서 TodoDispatchContext하는 과정에서 useMemo로 리턴해서 전달하는데 context를 사용시 한번만 리로딩 방지를 위해서는 useMemo와 useCallback를 중복으로 사용 되어야하는걸까요?? 아님 useMemo를 사용하여 useCallback는 사용해도 안해도 무방한지 영상을 보다가 궁금합니다...! 추가적으로 이건 아주 소소한 궁금증인데 함수를 쓰실때 카멜표기법과 파스칼표기법을 번갈아가면서 쓰시는데 어떤 용도에 따라서 사용하시는지 궁금합니다..ㅎㅎㅎ
