묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
ERROR
App.js파일을 refresh 하면 이렇게 error가 뜨네요 ㅜㅜ 해결책을 아무리 찾아봐도 나오질 않습니다 . .
-
미해결Next + React Query로 SNS 서비스 만들기
Arrow Function vs Regular Function
안녕하세요!React 와 Next 의 component 선언 방식에 대한 convention 이 궁금하여 질문드립니다.Arrow Function vs Regular FunctionComponent 는 사실 하나의 함수입니다. 그리고 JavaScript 에서는 2가지 방식으로 함수를 선언할 수 있습니다. 하나는 화살표 함수이고 또 다른 하나는 function keyword 를 사용하는 것입니다.이 두 함수 선언 방식의 차이에는 크게 hoisting 과 this keyword 가 있습니다. 궁금하신 분들은 Arrow Functions vs Regular Functions in JavaScript – What's the Difference? (freecodecamp.org) 를 읽어보시면 좋을 것 같습니다. 이번 질문은 기능상의 차이 보다는 "일반적으로" 무엇을 사용하느냐 에 대한 질문입니다.Q. React 에서는 component 를 선언할 때 arrow function 을 일반적(많은 개발자들이 사용)으로 사용하는 것으로 알고 있습니다. Next 는 arrow function 를 일반적으로 사용하나요 아니면 regular function 을 사용하나요?Arrow Function Componentinterface ComponentProps { ... } const Component = ({ ... }: ComponentProps) => { ... } export default Component;Regular Function Componentinterface ComponentProps { ... } export default function Component({ ... }: ComponentProps) { ... }제가 생각했을 때는 export default 를 한번에 사용하기 위해서 regular function 으로 공식 문서나 강의 자료가 작성되어 있는 것으로 생각이 되어지는데, 더 일반적인 선언 방식은 무엇일까요? 물론 convention 이라는 게 없을 수도 있고 사실 프로젝트마다 다르게 정할 수는 있겠지만, 더 일반적인 방식이 무엇인지 궁금하여 질문드립니다.
-
해결됨코드로 배우는 React with 스프링부트 API서버
이동한 페이지 번호가 회색 색상으로 변하지 않습니다 ㅠ
데이터는 정상적으로 가져와지고 있습니다. 하지만 선택된 페이지 번호가 회색으로 변경이 안되고 있는데, 어느 부분이 문제인지 모르겠습니다...PageComponent.js 에서 선택된 페이지 번호에 회색을 부여하는 것으로 알고 있는데, 왜 안되는 걸까요..? 아래는 PageComponent.js 코드입니다. 강의 내용과 피피티와 코드가 동일합니다.import React from 'react'; function PageComponent({serverData, movePage}) { // serverData.prev, pageNumList, next 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; 그리고 콘솔창에서 다음과 같은 경고창이 뜨는데 가장 좋은 해결 방법에 대해 알 수 있을까요?이 문제는 해결됐습니다! 제가 ListComponent.js 파일 안에서 div 태그 안의 key 속성에 todo.tno 를 큰따옴표로 묶은 오타였습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요?!
안녕하세요 !Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요 ?!hooks 폴더를 페이지 단위로 두어 RCC 컴포넌트 내부 로직을 hooks으로 관리하는 Custom hook 패턴과 아토믹을 함께 사용하려고 하고 RSC 컴포넌트에서는 아토믹 패턴을 사용하려고 하는데 이렇게 hooks을 next에서 사용해도 괜찮은 건지 고민이 들어서 질문 드립니다 ! (정답이 없는 문제인 건 알지만 어떻게 생각하시는지 궁금하여 질문드립니다.)
-
미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
reset 시점에 searchResult 빈 배열로 update
안녕하세요. 이번 수업에서 사소한? 궁금증이 생겨서 질문 남깁니다! handleReset() { this.setState(() => { return { searchKeyword: "", // searchResult: [], submitted: false, } }, () => { // console.log("TODO: handleReset", this.state.searchKeyword); console.log("TODO: handleReset", this.state.searchResult); // 이전 검색 결과가 그대로 저장되어있음. }); } 위의 handleReset 메서드 실행시, 저 같은 경우엔 주석 친 부분처럼 this.state.searchResult를 빈배열로 무조건 갱신해줘야 한다고 생각 했습니다. 이유는, reset의 동작이 검색 결과 부분에 아무것도 노출하지 않는다는 점 때문에, 검색 결과를 저장하고 있는 searchResult 역시 같이 비워줘야 하지 않나 라는 생각이 들었기 때문입니다. 물론 현재로서는 this.state.submitted으로 노출 제어를 하고 있는 상황이기 때문에 동작에는 전혀 문제가 없긴 하지만요...! 사소한 부분이긴 하지만.. 혹시 강사 님께서는 이 부분에 대해서 어떻게 생각하시는지 여쭤보고 싶습니다!
-
미해결Next + React Query로 SNS 서비스 만들기
GET 오류
dependencies에 next-auth버전입니다"next-auth": "^4.24.7",오류를 보면 import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import { NextResponse } from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); console.log("user", user); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); 이게 제 코드인데 제 코드에서는 credentials 속성이 없다고 뜨는데실행해보면Unhandled Runtime ErrorError: Cannot read properties of undefined (reading 'GET')Sourcesrc/auth.ts (6:14) @ GET 4 | 5 | export const { > 6 | handlers: { GET, POST }, | ^회원가입시 이런 오류가 뜹니다오류와 대조를 하여 공식문서를 보면현재 여기 credentials의 코드가 바뀐것같은데제 코드에서 어떻게 수정을 해줘야할지 모르겠습니다.vscode자체 오류로도credentials' 속성이 '{ authorize(credentials: Record | undefined): Promise; }' 형식에 없지만 'Pick>, "credentials" | "authorize"> 형식에서 필수입니다.라고 뜨는것으로 보아 제 생각에도 공식문서에있는 credentials 속성을 넣어줘야하는것같은데 어떤식으로 해야할지 잘 모르겠습니다.route.ts 역시// api auth와 관련된 주소는 전부 nextauth가 관리 export { GET, POST } from "@/auth"; 이런식으로 잘 넣어주었구요.어떤식으로 수정을해야 GET오류가 나지 않을까요 ?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
아코디언 1/6 강좌 클로져 관련 질문입니다.
안녕하세요 선생님 고급강의 잘보고 있습니다.잘만들어 주셔서 감사합니다. 아코디언 만들기 1/6 을 보다가 궁금한 사항이 있어 질문드립니다. const toggleItem = (id: string) => () => { setCurrent((prev) => (prev === id ? null : id)) } 아코디언 1/6 강의를 듣다가 가운데 () 가 클로져 라고 하셨는데 가운데에 저렇게 () 를 쓰면 클로져가 되는건가요? ( 제가 프론트엔드 개발자가 아니라서 클로져의 장단점을 몰라서 질문을 드리는것 같습니다. ) chatgpt 에게 질문을 남겼는데 더욱 이해가 안되어서 질문드렸습니다..ㅎㅎ 아래는 gpt의 답변 입니다. 여기서 (id: string) => () => {...}는 두 개의 함수를 연속적으로 정의하고 있습니다. 1.외부 함수: (id: string) => {...} 이 함수는 id라는 문자열을 매개변수로 받습니다. 내부에는 또 다른 함수를 반환하고 있습니다. 2. 내부 함수: () => {...} 외부 함수가 반환하는 내부 함수입니다. 외부 함수의 id 매개변수를 사용하여 동작을 수행합니다.
-
해결됨코드로 배우는 React with 스프링부트 API서버
PageResponseDTO 생성자의 매개변수 변수명에 관련된 질문
안녕하세요.현재 섹션 4 서비스계층 - 상품 목록 처리 강의 7분 44초 진행중 문제가 생겨 질문 드려요.제 코드에서는 totalCount 를 사용하지 못하는데, 선생님 강의에서는 totalCount 로 사용 하셨더라구요. 기존의 섹션2 - 페이지처리를 위한 DTO설계 14분 56초 부분에서는 매개변수 명을 total 로 작성 해주셨는데 매개변수 명을 totalCount 로 작성하면 해결 되는건가요??
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새일기 작성시 브라우저 콘솔창 오류메시지
강사님 새 일기 작성 시 브라우저 콘솔창에 아래와 같은 오류 메세지가 나오는데요.Warning: Encountered two children with the same key, undefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. at div at div at DiaryList (http://localhost:5173/src/components/DiaryList.jsx:23:22) at div at Home (http://localhost:5173/src/pages/Home.jsx?t=1713771954091:46:16) at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3558:5) at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3993:5) at App (http://localhost:5173/src/App.jsx?t=1713771954091:63:37) at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3936:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:4676:5) 두개의 자식요소가 동일한 키를 가지고 있다고 되있는데 오류 나는 곳을 아무리 봐도 어디서 오류가 나는지 찾을 수가 없습니다 ㅠㅠ뭐가 문제 일까요? ㅠㅠ
-
미해결웹 게임을 만들며 배우는 React
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
안녕하세요 제로초님덕분에 좋은 강의 너무 잘 보고 있습니다.이 강의 정리하고 다음 리액트로 sns만들기를 보려고 하는데지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.라이브로 설명해주시면 코드 작성해주시다가 에러가나서이전에 테스트용으로 만들어주셨던 코드를 가져와서 사용해주셨는데,처음에 설명해주실때와,테스트용 코드에서 다른점을 발견했는데그 이유가 궁금합니다.아래 코드에서 if (count === 0){아래에 if (row > -1) { 이 코드가 추가가 되었는데,이유를 잘 모르겠더라구요.여유되실 때 확인해주시면 감사하겠습니다. :Dif (count === 0) { // 주변칸 오픈 if (row > -1) { const near = []; if (row - 1 > -1) { near.push([row - 1, cell - 1]); near.push([row - 1, cell]); near.push([row - 1, cell + 1]); } near.push([row, cell - 1]); near.push([row, cell + 1]); if (row + 1 < tableData.length) { near.push([row + 1, cell - 1]); near.push([row + 1, cell]); near.push([row + 1, cell + 1]); } near.forEach((n) => { if (tableData[n[0]][n[1]] !== CODE.OPENED) { checkAround(n[0], n[1]); } }); } }
-
미해결처음 만난 리덕스(Redux)
counter 애플리케이션에서 toString 질문입니다
counter 애플리케이션의 코드 중 render함수에서store에서 getState를 사용해 state 값을 가져오는데 이 때 toString()을 해주는 이유가 궁금합니다. function render() { console.log(typeof store.getState()); valueElem.innerHTML = store.getState().toString(); }
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
django, next.js 관련 질문 있습니다.
안녕하세요 강의 잘 보고 있습니다.강의가 업데이트 될 때까지 django에 대해서 좀 더 연습해보려고 개인프로젝트 준비중에 앞서 질문드릴게 있습니다.1. django를 개발할때 유용한 라이브러리들을 추천 받고 싶습니다.매번 코드 변경 후 브라우저를 새로고침 해야하는게 너무 불편해서 개선할 방법을 찾다가 django-browser-reload 라는 템플릿 내용이 변경될 때 마다 자동으로 브라우저를 새로고침 해주는 라이브러리를 알게되어서 만족하며 사용하고 있습니다.강의에서 소개해주신 라이브러리들도 굉장히 편하더라고요 물론 사용할 때는 사용법도 익혀야 한다는 점이 있지만 그런 라이브러리와 달리 django-browser-reload 처럼 간단하고 개발자의 편의성을 개선할 수 있는 라이브러리가 또 무엇이 있는지 궁금합니다.crispy-form은 편리합니다. 다만 html과 달리 forms에서는 css_class를 사용하여 레이아웃을 지정할 때 어떠한 css class가 존재하는지 알려주지 않는다는것이 아쉽네요. 개선할 방법이 있을까요?Javascript의 prettier처럼 django templates에서 html 파일을 저장하는 액션이 발생할 때 자동으로 코드 정리 할 수 있는 포멧터도 있을까요?2. 이후에 다룰 섹션 16 SPA 하이브리드 방식으로 장고/리액트 중심의 서비스 만들기에서 입력 form은 django form을 사용하여 작성해서 사용자가 form을 사용 할 때에만 django 페이지로 이동하고 그 이외에 디자인을 세심하게 해야 되는 페이지들은 drf + next.js로 다루게 되는건가요?React 기반 프레임워크에서 form 유효성 검사를 하는것은 생각보다 까다롭더라고요.그런데 django form을 사용하게되면 그 부분을 빠르게 처리 할 수 있고 나머지 페이지들에 대해선 django component를 사용해서 템플릿을 구성하는거 보다는 React 기반에서 컴포넌트를 구성해서 페이지를 렌더링 하는게 더 편할거 같다고 생각했습니다.만약 해당 방법대로 프로젝트를 구성하게 된다면 장점도 있겠지만 단점도 존재하게 될텐데 단점들은 무엇이 있을까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
CSS 적용 안되는 현상
위와 같이 코드를 작성하였습니다만, body 부분의 css가 적용이 안됩니다.여기서 제가 궁금한 것은 .html 파일 위의 <!DOCTYPE html>을 삭제하면 body값이 100%에 맞게 보여지는데, 왜 이렇게 적용 되는지 잘 모르겠습니다..<!DOCTYPE html>의 태그 같은 경우는 문서 형식을 선언하는것으로 알고있는데..해당 코드의 존재 유무에 따라 CSS 적용이 되다 안되다가 하는지 잘 모르겠습니다.. 답변 주시면 감사드리겠습니다!!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
map 함수에서 cannot read properties of undefined 에러 발생
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
gnb 만들기를 실무 next js 프로젝트에서 사용할수 있나요?
catch-all segments 를 루트 페이지에 적용해서nextjs 의 파일 기반 라우트를 무력화 하기 때문에nextjs 에서 제공해주는 다양한 라우터 기능들route intercepting , parallel route 같은것들은사용할수 없게 된다?맞나여?그럼 실무의 next js 프로젝트에서 똑같이 gnb 를 구현 하면 안되겠죠?단순히 수업을 위해 임의로 구현한 포트폴리오 프로젝트용gnb 라고 보면 되는거져?아니면 실무에서라도 catch-all segments [...slug] 폴더를 디폴트 페이지가 아니라 특정 하위 페이지에 대해서만 적용 해서 구현 하는식으로 실무에서도 사용 할수 있나여?그리고 순수 바닐라 js를 이용한 구현 부분도 실무에서는 별로 안쓸것 같고 어려울것 같아서 skip 해도 되나여?
-
미해결프로젝트로 배우는 React.js
설명이 부족 한 듯..
router 영상을 보고 있는데..browserRouter 가 뭔지.. router가 뭔지..이런 기초적인 개념 설명도 없고..그냥 불러다 쓰라고 하면..이건 좀 아니지 않나?
-
미해결만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
npm 대신 yarn
안녕하세요! npm 대신 yarn 사용하는게 더 좋은가요??
-
미해결Next + React Query로 SNS 서비스 만들기
context provider에 관한 질문
Tab.tsx에서 "추천"과 "팔로우 중"을 클릭하면 상태가 "rec", "fol"로 변경되는 것을 확인했습니다. 이후 TabProvider.tsx 파일을 만들고 <TabProvider>로 상태를 공유할 하위 컴포넌트를 감싸는 것 까지 되었습니다. TabProvider.tsx에 있는 state를 하위 컴포넌트가 구독하여 상태 공유를 할 수 있는 것으로 알고있습니다.여기서 질문입니다.TabProvider.tsx로 감싼 하위 컴포넌트인 Tab.tsx에서 상태가 변경되었을 때, TabProvider에 변경된 상태를 공유할 수 있는지 궁금합니다. (자식 컴포넌트에서 상태가 변경되면, Provider 상태도 변경할 수 있는지) Post.tsx에서 상태공유 확인하는데, Tab.tsx에서 상태가 변경되어도 Provider에서는 변경되지 않아 질문 올립니다.. import { TabContext } from "../home/_component/TabProvider"; const Post = () => { const { tab } = useContext(TabContext); return ( <> <div>TabContext Value = {tab}</div> </> ); };
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
11-23 컴포넌트가 제대로 동작하지 않는것 같습니다.
https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/ea385575c83d8a2ff6b0407352ec419034a1be30관련커밋 내용을 그대로 복사하여 적용하였습니다. (image_overlay, index.html)컴포넌트에서 첫 번째 레코드 요소만 반복되어 적용 됩니다. (이미지를 포함하여 제목까지 똑같습니다.)myproj/photolog/templates/photolog/index.html 가 문제 인거 같습니다.myproj/photolog/templates/photolog/index.html 임의 수정{% extends "photolog/base.html" %} {% load component_tags %} {% block photolog-content %} <div class="container"> <div class="row"> {% for note in note_list %} {% with img_url=note.photo_set.all.0.image.url %} {% component "image-overlay" href="/" target="_blank" class="col-xl-3 col-lg-4 col-md-6 mt-4" %} {% fill "img-src" %}{{ img_url }}{% endfill %} {% fill "text" %} {{ note.title }}<br/> <small>by {{ note.author.username }}</small> {% endfill %} {% endcomponent %} {% endwith %} {% endfor %} </div> </div> {% endblock %}기존 코드에서 with, {{ img_url }}을 추가하여 수정 하였습니다.위와 같이 수정하니 컴포넌트가 정상적으로 불러와졌습니다.myproj 버전[[source]] url = "https://pypi.org/simple" verify_ssl = true name = "pypi" [packages] django = "*" black = "*" django-extensions = "*" django-environ = "*" django-template-partials = "*" django-htmx = "*" django-crispy-forms = "*" crispy-bootstrap5 = "*" django-components = "*" pillow = "*" django-lifecycle = "*" [dev-packages] django-debug-toolbar = "*" ipython = "*" [requires] python_version = "3.12"
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
Hot reload 오류 문의 드립니다.
안녕하세요강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다.감사합니다.수고하세요.===================================================================⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] {errno: -4094,code: 'UNKNOWN',syscall: 'open',path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js'===================================================================