묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Header 컴포넌트 부분에 대해 질문있습니다.
안녕하세요 공부를 하다가 궁금한 점이 생겨 질문을 드립니다. Header 컴포넌트에서 화살표 버튼을 각각 클릭하면 날짜가 증가되었다 감소되는 기능에서 이 부분의 state인 pivotDate를 Header컴포넌트가 아닌 Home컴포넌트에 작성된 이유는 날짜가 바뀌면 아래 리스트도 해당날짜에 작성된 리스트를 보여 줘야하니 전체를 관리하는 Home컴포넌트에 작성이 된 것인가요? 그리고 마지막으로 혼자 공부를 하다가 위 내용처럼 이 코드가 부모컴포넌트에 관리를 하는 것인지 그냥 Header처럼 해당기능을 해당 컴포넌트에 작성을 해야되는 것인지 감이 조금 잡히지 않는데 조금 쉽게 이해할 수 있는 방법이 혹시 있는지 궁금합니다.
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
(실습1) 포모도로 타이머 프로젝트 에러사항 문의드립니다.
<실습1: 포모도로 타이머 프로젝트 세팅>Node Js. 다운로드 후 커서 인터페이스 상에서 실습1 프로젝트 진행을 위해 새폴더 생성 후 불러온다폴더 생성 후 터미널 창을 생성하는데 이때 단축키는 ctrl + J키 이다터미널 창에서 명령어 단축키인 ctrl + k키를 누르고, 프롬프트를 입력한다.--> 프롬프트 : 폴더에 바로 하위폴더를 생성하지 않고, 리액트, 테일윈드, 타입스크립트 프로젝트를 생성하는 명령어 까지 강의해주시는 내용에 맞춰 진행해보았으나, 터미널 창에 에러가 발생하고 별도 하위 폴더라 생성되지 않는 오류가 있습니다. 유사한 질문을 주신 다른 학습자분께 작성해주신 메모를 참고하여 Git Bash를 설치하고 터미널 창에서 변경하여 재시도 해보았으나 문제가 해결되지 않았습니다. 코딩에 대한 지식이 전무하여, 가능하시다면 글로 작성된 설명 보다 캡처화면과 연계하여 별도 세부 설명이 있으면 좋을 것 같습니다. 감사합니다.
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
info 작성 예시 및 다운로드 info 탬플릿 다운로드 가 안되네요.
info 작성 예시 및 다운로드 info 탬플릿 다운로드 가 안되네요.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Link 태그가 동작하지 않습니다.
검사를 해보면 a 태그로는 바뀌어 있는데 커서가 pointer가 되지 않고 클릭이 되지 않습니다.그런데 Link 태그를 NavLink로 바꾸면 router 이동이 정상적으로 잘 됩니다.node - v22.12.0react-router-dom - ^7.1.1strick 모드가 문제 일 수 있어 main.tsx에 strick 모드도 제거해보았지만 LInk 태그로는 router 이동이 되지 않았습니다.혹시 그 이유를 알 수 있을까요?형태는 이렇습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
input type="hidden"으로 설정 시, 오류 미발생
7.2) 리뷰 추가 기능 구현하기 > 15:05~두 방식 모두 동일하게 입력 필드를 숨김 처리하지만1번처럼 input의 type을 hidden으로 설정하게 되면 Next.js에서 오류를 발생시키지 않네요. // 1번 방식 <input type="hidden" name="bookId" value={bookId} /> // 2번 방식 <input hidden name="bookId" value={bookId} />
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 1탄
코드를 아래와 같이 작성하였는데, 이렇게 표시가 됩니다. (사진 참고)레퍼런스도 참고하여 적었는데 해결이 안 되어서 질문 납깁니다. 또한 fontawesome도 강의 내용대로 연동시키려 하였는데 이모티콘이 보이지 않습니다.어떻게 해야 할까요? <!DOCTYPE html> <html lang="ko"> <head> <title>홍길동 님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet" /> <script src="https://kit.fontawesome.com/e3aa47cdec.js" crossorigin="anonymous" ></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <!-- TODAY 0 | TOTAL 12345 --> <div class="today"> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="profile__detail"> <i class="fa-regular fa-face-grin"></i>이름</div> <div class="profile__detail"> <i class="fa-solid fa-phone"></i>Phone</div> <div class="profile__detail"> <i class="fa-regular fa-envelope"></i>E-mail</div> <div class="profile__detail"> <i class="fa-brands fa-instagram"></i>인스타그램</div> </div> <div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="feel__select"> <option>기쁨 😊</option> <option>슬픔 🥲</option> <option>화남 😑</option> <option>분노 🤬</option> </select> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html> ------------- css ------------- * { box-sizing: border-box; margin: 0px; } .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0 0 32px; } .wrapper__left { width: 208px; height: 472px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-left: 3px; margin-right: 7px; } .wrapper__left__header { width: 100%; height: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { padding-top: 10px; font-size: 9px; } .wrapper__left__body { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: 20px 30px 0px 30px; border: 1px solid gray; border-radius: 15px; background-color: white; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: gray; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; } .left__body__profile { font-style: normal; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .profile__detail { color: #999999; font-size: 10px; margin-bottom: 10px; display: flex; flex-direction: row; } .fas { color: black; margin-right: 10px; width: 5px; height: 5px; } .left__body__footer { width: 100%; margin-bottom: 30px; } .wrapper__feel { display: flex; flex-direction: column; justify-content: center; width: 100%; } .feel__title { font-size: 11px; margin-bottom: 5px; color: gray; } .wrapper__right { width: 524px; height: 472px; background-color: violet; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 5px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새로운 강의 쿠폰 질문
개인적인 사정으로 오늘에서야 공지사항을 확인했습니다.기존의 프론트엔드 고농축 코스를 수강중인데 혹시 쿠폰을 다시 발급 받을 수 있을까요? 답변 부탁드립니다.좋은 강의 제공해주셔서 감사합니다. (+쿠폰함을 확인해보았지만 제공받은 쿠폰이 없었습니다. )
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
이 강좌를 수강 하면 게시판을 만들수 있나요?
강좌 목록에는 페이징 게시글 관련사항이 있는데 Db와 연결해서게시판을 만들 수 있나요
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
포스트맨 질문
[그랩마켓] axios로 네트워크 통신하기 편 수강 중 질문이 생겼습니다. 강의 중 31초에 보면 Body 부분이 HTML로 되어있는데 그 전까지는 JSON으로 하라고 했다가 갑자기 언급 없이 변경이 돼있어서 HTML로 해야되는지 JSON으로 해야되는지 헷갈립니다.강의 중 4분 10초와 같이 통신 결과, status:200, 화면도 잘 뜹니다. 그런데 data에 화살표가 생기고 누르면 그 아래 products 객체 아래 배열대로 화살표가 생기고 하는데 저는 그냥 data에 값들이 쭉 나열만 되어있습니다. 이 부분을 강의에서처럼 바꾸고 싶습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
혹시 자바스크립트는 ENUM타입에 대해 잘 취급을 안하나요?
조금 강의 핵심과 동떨어지는 질문인것같아서 죄송합니다,useReducer를 사용할때 reducer함수의 action.type에 대해 String 타입으로 기준이 잡히는거 보니깐 나중에 규모가 커지면 조금 불안할것 같아서요. 자바스크립트는 ENUM타입이 있는걸로 알고있는데 언급을 안하셔서 혹시 잘 안쓰는건가 싶어서 질문드립니다. String타입이 조건문의 기준이 되면 분명 프로젝트 규모가 커졌을때 발견되기힘든 런타임에러에 대한 걱정이 좀 있을것같아요
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
React와 Django-템플릿, HTMX 간의 관계 및 역할에 대한 질문
안녕하세요, 먼저 자세하게 django에 대해 강의해주셔서 감사합니다.강의가 제게 다소 어렵고 양이 방대하여 핵심을 놓치는 부분이 있어 저의 필요와 목적에 의한 질문을 드리게 됐습니다. 핵심적으로 드리고 싶은 질문은 다음과 같습니다.리액트와 django의 관계(리액트 컴포넌트가 적합한 부분, 리액트 컴포넌트에서 장고 템플릿+폼, 뷰와 모델, DB까지의 흐름)리액트 없이 django 기능만 이용하여 datagrid(view), datatable 형식을 사용하는 것이 좋은 방법인지에 대한 강의자님의 의견 django의 템플릿 문법으로 작성된 기본적인 디자인 구성이 된 웹 템플릿을 구하거나 접근하는 방법 웹 개발 숙련도가 매우 미숙하고 질문이 모호해 우선 양해 말씀 구합니다. 상기 질문에 대해서 배경을 부연 설명드립니다. [1번 관련 질의 배경]리액트가 통합된 프로젝트 실습이 todolist 정도인 것 같아서 블로그나 포토로그 등의 앞선 장고 프로젝트에 이를 응용하는게 어렵다고 느껴졌습니다. 혹시 리액트와 django 관계에 대해 조금 더 자세하게 참고할 만한 강의를 짚어주시거나 소스를 알려주실 수 있으실까요? [2번 관련 질의 배경]data-grid / data-table / spreadsheet (표 형태의 데이터를 읽고 수정하는 방식) 형태를 사용하고자 여러 파이썬/장고 라이브러리를 찾아봤으나 pool이 매우 좁고 예시도 매우 부족해 보였습니다. 그러나 react, js 중심으로 프론트 사이드를 구축할 경우 선택지가 매우 다양하고 상태 관리가 안정적일 수 있다는 생각이 들었습니다. (hansongrid, ag grid, MUI datagrid, react datagrid, react spreadsheet grid ...)그리드 어플리케이션 구축은 어떻게 진행하면 좋을까요? [3번 관련 질의 배경]디자인에 소요되는 리소스 측면에서도 장고의 템플릿 문법 보다는 리액트 프레임워크에 적합한 웹사이트 디자인도 더 풍부하고 다양한 것 같습니다. CSS에 상당히 부담을 느껴서 여기에 들이는 노를 줄이고 싶은데 혹시 참고할 만한 사이트나 추천해주시는 방법이 있으실까요? ********답변에 앞서 미리 감사드립니다!********
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
7.6 createReviewAction 서버 액션 컴포넌트에 state 값을 넘기는 것에 관한 질문입니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 7.6 createReviewAction 서버 액션 컴포넌트에 state 값을 넘기는 것에 관한 질문입니다.강의 8분 35초 쯤에, state를 넘긴다고 하셨는데, 함수 내에서 사용하지 않는데 굳이 왜 넘기는 것인가요? 감사합니다.
-
미해결
node.js 설치는 했지만 npm 실행이 안 돼요 ㅠㅠ 도와주세요
node.js 깔고 파워쉘로는 버전이 저렇게 잘 나오는데, 터미널에서 버전 치면 npm에서 저렇게 배치 파일 아니라고 한 다음에 버전이 뜹니다 ㅠㅠ 또, create-react-app 명령어 실행이 가장 밑 사진처럼 뜨면서 계속 실행이 안 되는데 어떻게 해야 하나요 ㅠㅠ 이틀째 이러네요 ㅠㅠ .... node.js도 버전 5개 정도로 다르게 다 다운했다가 삭제해도 제대로 동작이 안 되네요 ... ㅠ.ㅠ jdk는 또 어디서 튀어나오는 건지 모르겠습니다 0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\USER\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js 1 info using npm@11.0.0 2 info using node@v23.5.0 3 silly config load:file:C:\Users\USER\AppData\Roaming\npm\node_modules\npm\npmrc 4 silly config load:file:C:\Users\USER\Desktop\r\.npmrc 5 silly config load:file:C:\Users\USER\.npmrc 6 silly config load:file:C:\Users\USER\AppData\Roaming\npm\etc\npmrc 7 verbose title npm exec create-react-app my-app 8 verbose argv "exec" "--" "create-react-app" "my-app" 9 verbose logfile logs-max:10 dir:C:\Users\USER\AppData\Local\npm-cache\_logs\2024-12-30T11_35_42_456Z- 10 verbose logfile C:\Users\USER\AppData\Local\npm-cache\_logs\2024-12-30T11_35_42_456Z-debug-0.log 11 silly logfile start cleaning logs, removing 1 files 12 silly logfile done cleaning log files 13 verbose stack Error: spawn C:\Users\USER\Desktop\jdk-17.0.10+7 ENOENT 13 verbose stack at ChildProcess._handle.onexit (node:internal/child_process:286:19) 13 verbose stack at onErrorNT (node:internal/child_process:484:16) 13 verbose stack at process.processTicksAndRejections (node:internal/process/task_queues:90:21) 14 error code ENOENT 15 error syscall spawn C:\Users\USER\Desktop\jdk-17.0.10+7 16 error path C:\Users\USER\Desktop\r 17 error errno -4058 18 error enoent spawn C:\Users\USER\Desktop\jdk-17.0.10+7 ENOENT 19 error enoent This is related to npm not being able to find a file. 19 error enoent 20 verbose cwd C:\Users\USER\Desktop\r 21 verbose os Windows_NT 10.0.19045 22 verbose node v23.5.0 23 verbose npm v11.0.0 24 verbose exit -4058 25 verbose code -4058 26 error A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2024-12-30T11_35_42_456Z-debug-0.log 이후에 node.js를 18버전으로, bpm이 아닌 yarn과 함께 설치하는 것으로 다시 깔고 실행해도 여전히 정상 작동이 안 됩니다 ㅠㅠ 뭐가 문제죠 대체 ㅠㅠㅠㅠ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
params의 type에서 string[]배열타입이 필요한 이유가 있을까요?
안녕하세요 강사님,혹시 한입 북스 UI 구현하기에서, params의 type을string[] 타입이 필요한 이유가 따로 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
7.3) 리뷰 조회 기능 구현하기 any type관련 질문입니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 7.3) 리뷰 조회 기능 구현하기 any type관련 질문입니다.강의 4분 2초에, any type으로 추론해버리면 추후에 타입 오류가 발생할 가능성이 커진다고 하셨는데 혹시 왜 그런 것인지 구체적으로 알 수 있을까요? 감사합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. 오류 해결
npm run build 했을 때, 북 상세 페이지에서 오류 발생하시는 분들은 아래와 같이 수정해보시길 바랍니다.3.6)네비게이팅 진행 중, npm run build를 통해 빌드 시, 아래와 같이 타입 오류가 발생src/app/book/[id]/page.tsx Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]이유: nextjs 최신 버전에서 params가 promise 형태로 바뀌게 되면서 타입 오류가 발생하는 것으로 추정아래와 같이 타입을 정의import ClientComponent from "@/app/components/ClientComponent"; type PageParams = Promise<{ id: string }>; const Page = async ({ params }: { params: PageParams }) => { const { id } = await params; return ( <div> Page {id} <ClientComponent> <></> </ClientComponent> </div> ); }; export default Page;
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
npm run build 시 에러가 발생합니다.
npm run dev로 실행 시 정상 실행되고있고npm run build 시 아래와 같이 에러가 발생하고있습니다.제 소스코드는 아래에서 확인가능합니다https://github.com/redinbluesky/section02 =========npm run build 시 에러 메시지======== D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02>npm run build> section02@0.1.0 build> next build ▲ Next.js 14.2.18./src/components/book-item.tsx....................................................... ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully ✓ Collecting page data Generating static pages (0/7) [ ]인덱스 페이지 Generating static pages (2/7) [= ]Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Z (D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490) ........................................................Error occurred prerendering page "/lib/fetch-bo.............................Error occurred prerendering page "/lib/fetch-rendom-books". Read more: https://nextjs.org/docs/messages/prerender-error.......................................Error occurred prerendering page "/lib/fetch-one-book". Read more: https://nextjs.org/docs/messages/prerender-error.......................................... ✓ Generating static pages (7/7)> Export encountered errors on following paths: /lib/fetch-books /lib/fetch-one-book /lib/fetch-rendom-books
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
서버 컴포넌트 실행 시, 브라우저에서도 콘솔을 확인할 수 있도록 변경된 것 같아요!
next.js 15.1.3 (24.12.30) 기준으로 서버 컴포넌트 실행 시, 아래와 같이 브라우저에서도 콘솔을 확인할 수 있도록 변경된 것 같아요!단 서버 측에서만 실행되기 때문에 앞에 Server 라벨이 붙어서 나오는 것 같습니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.2 단락평가 11:28
printName(); 이렇게 매개변수 값을 안줬을때name 값에 undefine이 들어가는거까지는 이해했습니다.여기 콘솔로그에서 "person의 값이 없음" 이 뜨는이유를 모르겠어요 ,, name || "person의 값이 없음" 이라면 name은 이미 언디파인이기때문에 그다음 문장이 출력되는걸까요? 그리고 그 다음 printName({name:"정환"}) 여기서 이름이 출력되는 이유도 헷깔려요 ,, const name = person && person.name; 객체와 객체의 프로퍼티 값 중 왜 프로퍼티 값이 출력되는걸까요? { console.log(name || "person의 값이 없음"); } printName(); // "person의 값이 없음" // undefine 값이 갈때는 name 에 언디파인 값이 가고 콘솔로그에서 undefine || truthy 기때문에 truthy 값이 출력된다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 관리 기능 구현하기2 부분에 대해 질문이 있습니다.
case "DELETE" 이 삭제 부분에서도 String으로 item.id와 action.id를 넣어 줬는데 수정에서는 사용자가 숫자나 문자로 사용하기 때문에 String을 사용해 줬다라고 이해하는데 삭제 부분에서는 id 하나를 찾아서 삭제버튼만 클릭하면 삭제가 되는데 이 부분은 왜 String을 사용한것인지 궁금합니다.
주간 인기글
순위 정보를
불러오고 있어요