172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
IndexPage.js 에서 <Outlet/>을 했는데 todo메뉴를 클릭하면 "/list" 페이지로 이동을 안 합니다. console창을 보니 This means it will render an <Outlet /> with a null value by default resulting in an "empty" page 문구가 뜨는데 왜 그러는걸까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 덕분에 next.js를 깊게 공부할 수 있었습니다. next.js는 기존 리액트와 다르게 jsbundle(청크) 파일을 나누어 받아 옵니다. 강의에서 본 것처럼 청크 파일들이 각각의 유니크한 해쉬 값을 가지는 것도 확인했습니다. 시나리오 next 프로젝트를 빌드 배포 된 웹페이지를 오픈 next 프로젝트를 다시 빌드 기존의 웹페이지를 새로고침 하지 않고, 페이지 이동 기존 리액트 프로젝트에서는 하나의 청크 파일을 처음 한 번에 받아서 새로고침 전까지 1번의 이전 빌드된 웹페이지로 동작이 되는 것으로 알겠는데요. next프로젝트에서는 jsbundle과 rsc_payload를 필요한 시점에 받으니까 새로 빌드한 파일엔 기존 청크해시 값과 달라서 문제가 생기지 않을까? 라는 생각이 들었습니다. 그런데 테스트 해보니 별다른 문제가 생기지 않는 것 같더라구요.. jsbundle과 rsc_payload의 유니크한(해쉬) 파일 이름이 도중에 변경 되더라도 next 서버측에서 찾을 수 있게 조치가 되어 있는 걸까요?
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
안드로이드 버전 14 해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고 홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요 npx create-next-app@14 section02 설치 후 (강의 8분49초), npm run dev 실행후 브라우저에 localhost:3000 입력했더니 이미지가 깨져서 나옵니다. 해당 프로젝트를 지우고 다시 설치해도 그대로입니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 강의와 관련없는거 알지만 혹시나해서 문의남깁니다. 현재 강의 구매한 분들 대상으로 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의 90% 할인해서 구매할 수 있었던 것으로 기억하는데, 이미 기간이 끝난거 알지만 지금이라도 할인된 가격으로 구매할 수 있을까 해서 문의남깁니다.
미해결
Next + React Query로 SNS 서비스 만들기
강의와 같이 구현한다면 page.tsx 에서 데이터 fetch PostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용 이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ? 제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요. 이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠? 아 강의는 " 클라이언트 react-query" 입니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
heidisql로 mariadb 연결하는 방법도 알려주실수 있나요? 인터넷에 검색해봐도 잘 안나와서 모르겠습니다.
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
eas와 notification 설정 후에는 로그인 시에 android emulator 상에서 코딩해주신 대로 '실제기기를 사용해주세요' 문구가 나옵니다. ios 는 개발자모드 설정을 구매해야 한다고 해서 기기는 안드로이드로 진행하려고 하는데 android 기기가 따로 없고 emulator 로는 실행이 안되는 걸까요? expopushToken만 보내고 로그인이 되지는 않습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님, 질문이 있어서 남깁니다. 만약 book/4를 URL로 요청하면 과정이 URL로 book/4 요청 시 Link 등이 없으므로 프리페칭은 안됨 - 서버에서 JS 실행 (렌더링) - 렌더링 된 HTML 브라우저에 넘김 - 브라우저에서 화면에 렌더링 - 서버에서 JSBundel, RSC payload 브라우저에 넘김 - 수화과정 - 상호작용 가능 이게 맞나요? book/1~3은 staticPage로 풀라우트캐시되어있으니 URL로 요청하면 풀라우트캐시에서 바로 HIT해서 주는거고요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의내용에 보면 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;
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
문제상황: ch6 마지막 파일 다운 받은 후 npm i react react-dom 하고 npm start 했습니다. product와 todo를 누르면 아래와 같은 상황이 나옵니다. 혹시 첨부 파일이 잘못된거 아닐까요? ERROR Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') at ListComponent
미해결
실무 중심! FE 입문자를 위한 React
제목 그대로입니다. 코드샌드박스 링크좀 어딘가에 달아주시든지, 자료파일에 좀 첨부해주시든지, 어떻게 좀 해주세요. 화면 스톱 해놓고 일일이 주소창 쳐서 들어가고 있어요. 너무 불편해요! 질문답변 게시판에 링크 달아놓은거 없는지 검색도 해봤는데 전혀 엉뚱한 대답만 있는 것 같고..
미해결
웹 게임을 만들며 배우는 React
master 브랜치가 더 최신 수정일이라서 master꺼 복붙해서 쓰다가 계속 createRoot 관련 에러가 나서 30분정도 헤매었네요.. 확인해보니 master 내 코드 일부가 react 18로 변경이 안되어서 그런거 였네요.. (사용X) 리액트 16버전 (master 브랜치에서 복사 시, createRoot 사용 시 에러남) <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> (이걸로) 리액트 18버전 (react18 브랜치에서 복사 시) <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
미해결
이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
Router.use() requires a middleware function but got a undefined export require 경로 확인 잘 했는데 왜 발생할까요...?
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
안녕하세요! 선생님 글쓰기 누르고, 제목, 내용 밑에 카메라 모양 눌러서 사진을 추가하면 사진이 매우 느리게 뜹니다... 혹시 이건 왜 그런건가요??
미해결
코드로 배우는 React 19 with 스프링부트 API서버
db 포스트맨: 에러상황: 포스트맨으로 db에 있는 email과 패스워드 입력해도 로그인이 안됩니다. 참고로 db에 있는 이메일 : user9@aaa.com 직접 db에서 수정하고 저장했습니다. 그리고 user8@aaa.com로 해도 안됩니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 강의 잘 듣고 있습니다! suspense태그 관련 질문이 있습니다! 5.2 풀 라우트 캐시2 강의에서 저희가 useSearchParams() 훅이 빌드타임에서 실행되는 오류를 없애기 위해 <SearchBar/ > 컴포넌트를 suspense로 감싸잖아요 이때 강의 4분45초 쯤에서 사전 suspense를 사용해서 이제 사전 렌더링 과정에서 완전히 배제한다고 하셨는데, 그러면 페이지를 만들때 suspense로 감싼 컴포넌트는 nextjs app router방식이 아니라 csr방식으로 구현이 되는건가요 나머지 컴포넌트들만 approuter의 사전 렌더링 방식으로 구현이 되는건가요?? 제가 정리했을땐 동적 페이지도 정적 페이지도 사전렌더링의 시점은 다르지만 (요청할때, 빌드할때) 사전렌더링이라는 기능은 nextjs에서 기본으로 작동한다고 알고 있습니다! 그래서 사전렌더링에서 완전 배제된다는 부분이 헷갈려서 질문 남깁니다!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
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> ) }
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다. vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요. npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms 18:15:46.529 error during build: 18:15:46.530 Could not resolve "./pages/NotFound" from "src/App.jsx" 18:15:46.530 file: /vercel/path0/src/App.jsx 18: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:26 18:15:46.544 Error: Command "npm run build" exited with 1
