172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요. 02-03 장고 핵심 기능 리뷰 #02 - 폼, 템플릿 강의 수강하다가 템플릿 부분에서 궁금한 점이 있어 문의드립니다. 마지막에 별도의 txt 파일로 나누어 관리를 하면 더 좋다고 말씀해주셨는데, txt 파일을 사용하면 I/O 바운드로 성능 많이 저하될 거 같습니다. 아니면 템플릿 엔진을 사용하면 별도로 메모리로 관련 txt 파일을 들고 있나요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
똑같이 코딩해서 테스트를 했는데 에러가 발생합니다. 이유가 무엇일까요? 똑같이 코딩해도 에러가 발생하니 답답하네요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
리스폰스로 json값이 오는건 이해가가는데 ], "pageNumList": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], "pageRequestDTO": { "page": 5, "size": 10 }, "prev": false, "next": true, "totalCount": 105, "prevPage": 0, "nextPage": 11, "totalPage": 0, "current": 0 } 이값들은 api어느부분에서 전송하는건지 알수있을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유? handleLogout function에서 local storage의 accessToken을 삭제시키고, store의 user 정보만 initial state, 그리고 isAuth 등을 false로 바꾸면 그만일텐데, 왜 server에 요청을 보내는 과정이 필요할까요!?
미해결
MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
질문 있어서 남깁니다. 메인페이지에서 Link를 타고 upload, list 들어가서 화면이 로드 돼야하는데 돼지 않고 하얀바탕으로 돼면서 Error표시 없이 No routes matched location "/list" Error Component Stack가 표시 됍니다. 어떤문제이고 해결 방법이 무엇인지 궁금합니다. Ps. 질문이 이해 안가실것 같아서 스샷 올려놨습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
3.6 네비게이팅 18분 10초 관련해서 질문있습니다. 이전 서버 컴포넌트 강의에서는 상호작용이 없는 페이지는 JS가 없기 때문에 RSC로 HTML을 만들어 보내고, JS 번들은 보내지 않는다고 이해했습니다. 그래서 프로젝트상 /book1/1 페이지는 상호작용이 없는 페이지라 프리페칭 받아도 RSC Payload만 받는게 맞지 않나?라 생각했습니다. 그런데 /book/1 페이지가 동적인 페이지라서 JS 번들을 안 받는다고 말씀하셔서 좀 헷갈립니다. 즉, 말씀하시는 부분이 상호작용이 있는 페이지라도 동적인 페이지라면 RSC만 보내주신다는 말씀인가요??
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
왜 이러는지 알 수 있을까요? 찾아봐도 모르겠습니다... '-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Swagger 사용 가능한 건지 문의드립니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의에서 보여주시는 코드와 같이 작성하면 모양이 사진과 같이 나와요 emotion_img_wrapper영역 background-color영역에 emotionName이 안들어가는거 같아요. height를 300으로 늘리면 포함이 되긴해요. width도 같이 300으로 늘리면 다시 안들어가고요
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 강의를 듣다가 deleteReviewAction 에서 _: any 타입에 질문이 있습니다. 타입스크립트를 배울 때 되도록이면 any 는 쓰지 말아야 한다고 알고 있는데 만약 팀원끼리 any 를 쓰지 말자고 약속을 한다면 any 말고 unknown, never 라는 타입을 써야 하는지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
[섹션4-4 클라이언트 컴포넌트에서 ServerActions 사용하기] 제가 사용하고있는 라이브러리 버전입니다. "next": "^15.0.0-canary.181", "next-auth": "^5.0.0-beta.22", "react": "^18", "react-dom": "^18" useFormState 현재 공식문서 에선 useFormState from 'react-dom' 이 아닌 useActionState from 'react` 로 사용하도록 되어있더라구요. 그래서 해당 변경사항대로 사용해도 문제가 없을지 궁금합니다. useFormStatus 공식문서 를 읽어보는데 " useFormStatus 는 동일한 컴포넌트에서 렌더링한 <form> 에 대한 상태 정보를 반환하지 않습니다." 라고 명시가 되어있더라구요. 그런데 현재 제로초님의 코드는 동일한 컴포넌트의 form에 대해서 pending 값을 받고 있는데, 문제가 발생하지 않는 이유에 대해서 궁금합니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
저기 부분만 자꾸 빨간줄로 뜨는데 왜이러는지 모르겠습니다.. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
사진처럼 보시면 text 태그를사용하지 않아서 import 문에서 빨간줄이 생기고 오류가 뜹니다. 원래같은 경우에는 어두워지기만하고 에러가 뜨지 않는 걸로 알고 있습니다. 혹시 어떤 패키지를 깔아야 저 오류가 해결될까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 투두리스트 ui 구현 중 질문이 생겨 댓글 남깁니다 "Header.css" 파일은 h1 태그에 접근 시 ".Header > h1" 과 같이 > 표시를 사용하는데 "Editor.css" 파일은 > 표시 없이 그냥 ".Editor input" 로 작성하시더라구요 이 둘의 차이가 뭔가요? 좋은 강의와 친절한 답변 항상 감사드립니다 :) 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import { Route, Routes } from "react-router-dom"; import { useReducer, useRef, createContext, useEffect, useState } from "react"; import Home from "./pages/Home"; import New from "./pages/New"; import Diary from "./pages/Diary"; import Notfound from "./pages/Notfound"; import Edit from "./pages/Edit"; const mockData = [ { id: 1, createdDate: new Date("2024-10-01").getTime(), emotionId: 1, content: "1번일기 내용", }, { id: 2, createdDate: new Date("2024-10-10").getTime(), emotionId: 2, content: "2번일기 내용", }, { id: 3, createdDate: new Date("2024-09-09").getTime(), emotionId: 3, content: "3번일기 내용", }, { id: 4, createdDate: new Date("2024-10-04").getTime(), emotionId: 3, content: "3번일기 내용", }, ]; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { nextState = [...state, action.data]; break; } case "UPDATE": { nextState = state.map((item) => item.id === action.data.id ? action.data : item ); break; } case "DELETE": nextState = state.filter((item) => item.id !== action.id); break; default: return state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const persedData = JSON.parse(storedData); if (!Array.isArray(persedData)) { setIsLoading(false); return; } let maxId = 0; persedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; dispatch({ type: "INIT", data: persedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; if (isLoading) { return <div>데이터 로딩중입니다...</div>; } const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; 질문폭탄 죄송합니다ㅠㅠㅠ 왜 저는 새로고침하면 빈배열로 화면에 나타날까요? 로컬스토리지에 저장은 되더라구요 그리고 let nextState; 이렇게 저장하면 state값이 바뀔 때 nexState도 초기화 되지 않나요? 초기화 되고 나서 값을 저장한 후 사용해서 상관이 없는건가요?
해결됨
손에 익는 Next.js - 블로그 만들기
선생님 혹시 next-theme 사용 안 하시는 이유가 있을까요? 궁금합니다...!!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const Diary = () => { const params = useParams(); const nav = useNavigate(); const currentDiaryItem = useDiary(params.id); if (!currentDiaryItem) { return <div>데이터로딩중</div>; } const { createdDate, emotionId, content } = currentDiaryItem; const Edit = () => { const nav = useNavigate(); const { onDelete, onUpdate } = useContext(DiaryDispatchContext); const params = useParams(); const currentDiaryItem = useDiary(params.id); Diary컴포넌트와 Edit컴포넌트 둘 다 useDiary로부터 currentDiaryItem을 받아오고 있는데, Diary는 undefined일 때경우를 처리해주고 있는데, Edit컴포넌트는 그렇지 않습니다. useEffect(() => { if (initData) { // undefined일 때 setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, [initData]); 위코드는 Editor컴포넌트 안의 코드입니다. 여기서 undefined룰 걸려주기 때문에 Edit컴포넌트에서 처리를 안해도 되는 건가용?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import { useContext, useState, useEffect } from "react"; import { DiaryStateContext } from "../App"; import { useNavigate } from "react-router-dom"; const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currentDiaryItem, setCurrentDiaryitem] = useState(); const nav = useNavigate(); useEffect(() => { const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrentDiaryitem(currentDiaryItem); }, [id, data]); //data는 왜쓰는지? return currentDiaryItem; }; export default useDiary; 강의 내용코드입니다. 현재의 일기를 가져오는 커스텀훅입니다. 여기서 문제는 "존재하지 않는 일기입니다"라는 경고창이 2번뜹니다. http://localhost:5173/diary/1234 처럼 아무숫자나 입력했을 때 그리고 http://localhost:5173/ 으로 이동한 후에 경고창이 한번 더 뜹니다. useEffect가 id가 변함에 따라 계속 실행되어서라는 이유로 알고 있습니다. 그러면 왜 선생님코드에서는 경고창이 2번 뜨지 않았을까용? 그리고 의존성 배열에 [id, data] 2가지를 담는 이유가 궁금합니다. 현재 prams.id가 바뀔 때만 작동하게 해도 되지 않을까요? 사용자가 data를 수정하면서 페이지의 파라미터가 바뀌는 상황이 동시에 일어나지 않을 거 같아서요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
does not provide an export named 'userReducer' 라는 에러가 뜹니다. 맞게 작성한거 같은데... 설정을 잘못했을까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 어느 날 갑자기 로그인 페이지가 무한 새로고침 현상이 발생 됩니다 백엔드 쪽에는 로그 /api/users 304로 새로고침마다 계속 응답해줘서 문제가 없는 것 같고 프런트쪽 문제인 것 같은데 개발자 도구를 볼 수 없을정도로 계속 새로고침 되서 당황스럽네요 ㅠㅠ 그래서 제로초님 깃허브 front/App/index.tsx, front/LogIn/index.tsx 코드 전체 붙여넣어도 동일 현상이 발생됩니다... 무언가 라이브러리 충돌이 있나 싶은데 package.json 코드입니다 { "name": "artus-sleact-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "ethan", "license": "MIT", "dependencies": { "@emotion/babel-plugin": "^11.11.0", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@loadable/component": "^5.16.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15", "autosize": "^6.0.1", "axios": "^1.7.2", "cross-env": "^7.0.3", "css-loader": "^7.1.2", "dayjs": "^1.11.12", "gravatar": "^1.8.2", "react": "^17.0.2", "react-custom-scrollbars": "^4.2.1", "react-dom": "^17.0.2", "react-mentions": "^4.4.10", "react-refresh": "^0.14.2", "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-toastify": "^7.0.4", "regexify-string": "^1.0.19", "socket.io-client": "^4.7.5", "style-loader": "^4.0.0", "swr": "^2.2.5", "ts-node": "^10.9.2", "typescript": "^5.5.3", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4" }, "devDependencies": { "@babel/core": "^7.24.7", "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", "@types/autosize": "^4.0.3", "@types/loadable__component": "^5.13.9", "@types/node": "^20.14.9", "@types/react-custom-scrollbars": "^4.0.13", "@types/react-mentions": "^4.1.13", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.5", "@types/webpack-bundle-analyzer": "^4.7.0", "@types/webpack-dev-server": "^4.7.2", "@types/gravatar": "^1.8.6", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.25", "babel-loader": "^9.1.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.4", "fork-ts-checker-webpack-plugin": "^9.0.2", "prettier": "^3.3.2", "webpack": "^5.92.1", "webpack-dev-server": "^4.15.2" } }
