172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(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/ 확인 부탁드립니다 ㅠㅠ
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
최신 버전에선 강의의 설정을 적용할 수 없습니다. 아래의 것을 참고하세요. (강사님 이렇게 해도 되긋죠? 구조 제대로 이해 못한채 chatgpt에게 물으면서 했네요 ㅎㅎ; 강의 유지보수 하시기 힘드시겠어요. ) django_components 0.128 설정 1. 폴더명 및 트리구조 변경. myproj/ ├── core/ │ ├── init .py │ ├── apps.py │ ├── src_django_components/ * 폴더명 변경. 하이픈 인식 못함. │ │ ├── init .py │ │ ├── modal_ form.py * 상위로 이동 │ │ ├── modal_form/ │ │ │ ├── modal_form.html │ │ │ ├── modal_form.css │ │ │ ├── modal_form.js ├── mysite/ │ ├── settings.py │ ├── urls.py ├── manage.py 2. settings.py INSTALLED_APPS = [ ..., 'django_components', ] MIDDLEWARE = [ ..., "django_components.middleware.ComponentDependencyMiddleware", ] STATICFILES_FINDERS = [ "django.contrib.staticfiles.finders.FileSystemFinder", "django.contrib.staticfiles.finders.AppDirectoriesFinder", "django_components.finders.ComponentsFileSystemFinder", ] TEMPLATES = [ ..., "DIRS": [BASE_DIR / "core" / "src_django_components"], ], "OPTIONS": { "context_processors": [ "django.template.context_processors.debug", "django.template.context_processors.request", "django.contrib.auth.context_processors.auth", "django.contrib.messages.context_processors.messages", ], "builtins": [ "django_components.templatetags.component_tags", # 추가된 부분 ], ..., STATICFILES_DIRS = [BASE_DIR / "core" /"src_django_components"] COMPONENTS = ComponentsSettings( dirs=[ Path(BASE_DIR) / "core" / "src_django_components", ] ) 3. core/ apps.py -modal_form 등록 from django.apps import AppConfig from django_components import component class CoreConfig(AppConfig): default_auto_field = "django.db.models.BigAutoField" name = "core" def ready(self): from .src_django_components.modal_form import ModalForm component.registry.register("modal_form", ModalForm) # 설명: ModalForm 클래스를 modal_form 이름으로 등록합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(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쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.
해결됨
너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어
안녕하세요 강의를 너무 잘 보고 있습니다 강의를 보다가 궁금한 점이 파이어베이스 프로젝트 설정 강의 부분에서 displayName이라는 state를 작성했는데 이건 파이어베이스에 약속된 이름이라고 하셨는데 그럼 닉네임 할때만 이 이름으로 작성하면 되는 건가요?
미해결
Next + React Query로 SNS 서비스 만들기
이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
리눅스로 하느라 힘들다.. 공식 문서 언제 다 읽고 어떻게 선별적으로 잘 읽는지 GPT 없던 시절 .. .대단하다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다! 다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다! 찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!
미해결
Next + React Query로 SNS 서비스 만들기
로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우, 미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다. / / middleware.ts import { NextResponse } from "next/server"; import { auth } from "./auth"; export { auth } from "./auth"; export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect(`http://localhost:3000/i/flow/login`); } } export const config = { matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"], }; 로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
return HttpResponse(""" <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Melon List</title> <style> body { width: 400px; margin: 0 auto; } table { width: 100%%; border-collapse: collapse; } table, th, td { border: 1px solid black; } </style> </head> <body> <h1>Melon List</h1> <table> <thead> <tr><th>팀명</th><th>순위</th></tr> </thead> <tbody> %s </tbody> </table> </body> </html> """ % (partial_html,)) 여기에서 굳이 % (partial_html)) 또 잘 실행 되는데 % (partial_html,)) 쉼표를 사용하는 이유는 정확하게 뭔지 알 수 있을까요? gpt는 튜플로 만든다고 설명 해주었는데 td안에 튜플로 넣는 이유를 알고 싶습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(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로 가는 길 [Full vers.]
안녕하세요 /* */ 맥북에서의 여러줄 주석 처리 단축키 알려주세요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
뭔가 잘 모르겠는데.. 아래 확인 부탁드려도 될까요? 설정한것도 없는것 같은데 기본 생성 명령어자체가 실행이 안된다니..ㅠㅠㅠㅠ manijang2@gimseonman-ui-MacBookAir VSProjects % npx create-react-app cra-react-app Creating a new React app in /Users/manijang2/VSProjects/cra-react-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1324 packages in 40s 268 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cra-react-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed manijang2@gimseonman-ui-MacBookAir VSProjects %
미해결
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
(사진)
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 보통의 리액트경우 새로고침이 일어나지 않기 때문에 서브밋 됬을시 보통 상태값을 초기화 하지 않는 이상 input값의 value가 원래 남아 있지 않나요? button 태그때문에 새로고침이 일어난건지 제가 이해한 랜더링 방식과 좀 다른건가요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
yarn codegen을 입력하면 이런 에러가 뜹니다 Not all operations have an unique name: fetchBoard: success Saved 1 new dependency. info Direct dependencies └─ @graphql-codegen/cli@5.0.4 info All dependencies └─ @graphql-codegen/cli@5.0.4 코드젠은 이렇게 잘 설치가 되었고 package.json 에도 이렇게 추가해 놓았습니다 "codegen": "graphql-codegen --config codegen.ts" PS C:\Users\young\Desktop\frontend\class-example\my-app> yarn codegen yarn run v1.22.22 warning ..\..\..\..\package.json: No license field $ graphql-codegen --config codegen.ts ✔ Parse Configuration ❯ Generate outputs ❯ Generate to ./src/commons/graphql/ ✔ Load GraphQL schemas ✔ Load GraphQL documents ⠏ Generate [client-preset] the following anonymous operation is skipped: mutation { createBoard(writer: "윰", title: "작성중", contents: "내용작성중") { _id number message } } [client-preset] the following anonymous operation is skipped: query { fetchBoard(number: 1) { number writer title contents } } [client-preset] the following anonymous operation is skipped: query { fetchBoard(number: 2) { number writer title contents } } [client-preset] the following anonymous operation is skipped: query { fetchBoards { number writer title contents } } [client-preset] the following anonymous operation is skipped: query { fetchBoards { number ✔ Parse Configuration ⚠ Generate outputs ❯ Generate to ./src/commons/graphql/ ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Not all operations have an unique name: fetchBoard: * fetchBoard found in: - C:/Users/young/Desktop/frontend/class-examp… error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
페이지처리하는 부분 오류 발생하여 질문 드립니다. import React, { useEffect, useState } from "react"; import { getList } from "../../api/todoApi"; import useCustomMove from "../../hooks/useCustomMove"; import PageComponent from "../common/PageComponent"; const initState = { dtoList: [], pageNumList: [], pageRequestDto: null, prev: false, next: false, totalCount: 0, prevPage: 0, nextPage: 0, totalPage: 0, current: 0, }; const ListComponent = () => { const { moveToList, page, size } = useCustomMove(); const [serverData, setServerData] = useState(initState); useEffect(() => { getList({ page, size }).then((data) => { setServerData(data); }); }, [page, size]); return ( <div className="border-2 border-blue-100 mt-10 mr-2 ml-2"> <div className="flex flex-wrap mx-quto justify-center p-6"> {serverData.dtoList.map((todo) => ( <div key={todo.tno} className="w-full min-w-[400px] p-2 m-2 rounded shadow-md" > <div className="flex"> <div className="font-extrabold text-2xl p-2 w-1/12"> {todo.tno} </div> <div className="text-1xl m-1 p-2 w-8/12 font-extrabold"> {todo.title} </div> <div className="text-1xl m-1 p-2 w-2/10 font-medium"> {todo.dueDate} </div> </div> </div> ))} </div> <PageComponent serverData={serverData} movePage={moveToList} ></PageComponent> </div> ); }; export default ListComponent; listComponent에서 initState 생성하고, setServerData 해서 pageComponent로 전달. const PageComponent = ({ serverData, movePage }) => { console.log("data.prev: " + serverData.prev); return ( <div className="m-6 flex justify-center"> {serverData.prev ? ( <div className="m-2 p-2 w-16 text-center font-bold text-blue-400 " onClick={() => movePage({ page: serverData.prevPage })} > Prev{" "} </div> ) : ( <></> )} {serverData.pageNumList.map((pageNum) => ( <div key={pageNum} className={`m-2 p-2 w-12 text-center rounded shadow-md text-white ${ serverData.current === pageNum ? "bg-gray-500" : "bg-blue-400" }`} onClick={() => movePage({ page: pageNum })} > {pageNum} </div> ))} {serverData.next ? ( <div className="m-2 p-2 w-16 text-center font-bold text-blue-400" onClick={() => movePage({ page: serverData.nextPage })} > Next </div> ) : ( <></> )} </div> ); }; export default PageComponent; pageComponent에서 serverData받아서 데이터 사용하는 부분. 이러한 오류 발생합니다... 아무리 봐도 어느 부분이 문제 인지 모르겠어요. serverData.prev 로그 찍어봐도 false라고 남는데.. 그리고 또 렌더링을 해서 undefined상태인건지... 어느 부분이 문제일가요 ㅠㅠ? prev를 부분을 지우면 pageNumList 에서 문제가 발생하여 prev만의 문제가 아니라 serverData자체를 받아오지 못하는거같습니다..
