묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel login이 안돼요
로그인 하고 vercel login 했는데 찾을수 없데요 ㅠ 왜이럴까요?...
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
작성완료 버튼 오류
12.14)New 페이지 구현하기 2. 기능 강의를 따라 코드를 작성했는데작성 완료 버튼을 누르면 데이터가 추가되지 않고 아래 사진과 같은 에러가 뜹니다. 왜 그런지 이유를 몰라 질문 드립니다. 소스코드는 깃헙에 올려놨습니다!https://github.com/dooheeyaa/section12
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
궁금한게 있습니다.
실제 일기장 프로젝트를 보면요 App.js 에 return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> );이렇게 되어있고 다른 페이지 ( Diary,Ediit,Home,New) 등 페이지에서는 Header 을 공통적으로 include 하고 있는데요 .혹시 이걸 시작하는 App에서다가 추가하고 실제 Diary에 적용되도록 하는 방법이 혹시 있을까요 ..? 먼가 페이지 마다 인클루드 할려니깐 .중복되는코드 같아서요
-
해결됨Amazing JavaScript - 입문
코드샌드박스애서 vue강의 따라 코딩하는게 가능할까요?
코드샌드박스애서 vue강의 따라 코딩하는게 가능할까요?npm설치에 문제가 있어서 강의를 못듣고 있거든요
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
[PC 레이아웃 상세 퍼블리싱 - 인클루드] class-detail 에서 인클루드가 작동하지 않아요.
우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다. 하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ인클루드가 안되는 이유를 알 수 있을까요 ?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.13) 비동기 작업 처리하기 2. Promise
promise 객체를 어떻게 사용하는건지 배웠는데요콜백지옥을 해결하기 위해 탄생한건가요?promise 객체를 사용해서 비동기함수를 쓰면 얻는 장점이 무엇인가요? 결과적으로 얻는 이점에 대한 설명이 좀 부족하지 않나 싶고 궁금합니다
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
버전 문제일까요?
안녕하세요 4분 45초에ReactDom.create 이렇게 되어있는데 저의 경우createRoot(document.ge로 시작합니다. 구글에 찾아보니 17과 18의 차이라는데https://velog.io/@citron03/React-18%EC%97%90%EC%84%9C-ReactDOM.render%EC%99%80-createRoot그대로 진행해도 문제되지 않을까여 ? 감사합니다.
-
미해결[2024] 비전공자도 가능한 React Native 앱 개발 마스터클래스
프로젝트 생성에 대해서?
npx react-native init test --version 0.72.6 Expo 아니라면 이렇게 생성해야 하는 거 아닌지요?
-
미해결처음 만난 리액트(React)
useEffect 중 의존성 배열이 있는 부분 관련 질의
import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; //최대 카운트 function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("===========배열없음"); console.log("useEffect is Called"); console.log(`isFull : ${isFull}`); }); //의존성 배열 없음 useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("===========배열있음"); console.log(`Current count value : ${count}`); }, [{count}]); //의존성 배열 있음 return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다`}</p> <button onClick={increaseCount} disabled={isFull}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p style={{color:"red"}}>정원이 가득찼습니다.</p>} </div> ); } export default Accommodate;import React, { useState } from "react"; //custom Hook //초기 카운트 값을 파라미터로 받아서 카운트라는 이름의 //state를 생성하여 값을 제공하고 증감을 편리하게 할 수 있도록 하는 함수 function useCounter(initialValue){ const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count+1); const decreaseCount = () => setCount((count) => Math.max(count-1,0)); return [count, increaseCount, decreaseCount]; } export default useCounter;import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter03_jsx/Library'; //컴포넌트 추가 import Clock from './chapter04_elements/Clock'; import CommentList from './chapter05_component_props/CommentList'; import NotificationList from './chapter06_state/NotificationList'; import Accommodate from './chapter07_hook/Accommodate'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //<React.StrictMode> <Accommodate /> //</React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위와 같이 Accomodate.jsx를 작성했습니다만 정원을 다 채웠을 경우 배열 있음이 한번 더 출력되는 현상이 나왔습니다.의존성 배열이 있는 부분의 ,{count}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다.[]를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다.제가 뭔가 잘못 한 걸까요?
-
해결됨Next.js 시작하기
Image 컴포넌트 width, height 속성
Image 컴포넌트에 css 모듈 방식으로 width와 height 값을 설정하면 width, height 속성을 빼도 되는 줄 알았는데 빼보니까 width 속성이 필요하다고 에러가 나네요.Image 컴포넌트는 무조건 크기를 지정해서 사용해야하나봅니다..item { display: inline-block; width: 300px; height: 300px; margin: 12px; } .img { width: 300px; height: 250px; }import axios from 'axios'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import styles from './ProductList.module.css'; function ProductList() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.data); }); }, []); return ( <ul> {products && products.map(product => ( <li key={product.id} className={styles.item}> <div> <Image src={product.imageUrl} alt={product.name} className={styles.img} /> </div> <div>{product.name}</div> </li> ))} </ul> ); } export default ProductList;
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.11) Home 페이지 구현하기 2.기능 - 버튼 기능 질문
안녕하세요 강사님!12.11) Home 페이지 구현하기 2.기능 강의에서,getMonth( ) 함수는 월이 0부터 시작된다고 말씀하셨습니다. 따라서 아래 코드처럼 Header 컴포넌트에 title의 props 값으로 +1을 하여 전달해야 한다는 것을 이해했습니다. <Header title={`${pivoDate.getFullYear()}년 ${pivoDate.getMonth() + 1}월`} leftChild={<Button text={"<"} onClick={onDecreaseMonth} />} rightChild={<Button text={">"} onClick={onIncreaseMonth} />} /> 그런데 버튼을 누르면 저번 달, 다음 달로 이동하는 함수를 만들 땐 getMonth( ) 함수를 불러오고 각각 1을 더하거나 빼는 함수로 설정한 점이 이해가 가지 않습니다. 0월부터 시작하기 때문에 각각 2를 더하거나 빼야 한다고 생각했는데 왜 1을 더하고 빼는지 모르겠습니다. ㅠㅠ const onIncreaseMonth = () => { setPivoDate(new Date(pivoDate.getFullYear(), pivoDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivoDate(new Date(pivoDate.getFullYear(), pivoDate.getMonth() - 1)); }; 항상 좋은 강의 만들어주셔서 감사합니다!
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들
{ path: '/:pathMatch(.*)*', component: () => import('@/views/NotFoundPage.vue'), },그냥 * 대신 이렇게 넣어주시면 정상적으로 동작합니다!!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
sort 콜백함수
강의 2.9 ) 배열 메서드 3.배열 변형11분이후 sort에 콜백함수에서 조건문으로 return 1을 반환하면두 자리를 교환하는걸로 이해했는데요 -1을 반환하면자리 교환이 일어나지 않는것 같구요 0을 반환했을때랑차이점이 있나요??
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
날짜 비교 방법에 관해서 문의드립니다.
안녕하세요 이정환님!! 강의 잘듣고 있습니다. 12.11) Home 페이지 구현하기 2. 기능 강의 수강중에 궁금한 점이 생겨 문의드립니다.두개의 날짜를 정보를 비교를 하기 위해서는 Date의 객체 형식을 timestamp 형식으로 변경을 한후 두개의 날짜 정보를 비교를 해야 하는 것으로 알고 있습니다.강의에서 pivotDate에 저장이 되어있는 state 날짜 기준으로 data를 필터링 하기 위해서는 시작시간과 끝시간을 timestamp 형식으로 만들고 시작시간과 끝시간 사이에 있는 data 객체 안에 있는 createDate의 값을 필터링 하셨습니다.여기서 궁금한점이 startDate와 endDate 변수에는 timestamp형식의 날짜 정보가 들어가 있지만 data.createDate 정보에는 객체형태의 날짜 정보가 들어가 있습니다. 어떻게 객체 형태의 날짜 정보와 timestamp 형식의 날짜 정보가 비교가 가능한지 궁금합니다.제가 어떤 부분에서 착각을 하고 있는지 궁금합니다. 감사합니다.^^
-
미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
babel-core module 에러
fs를 못찾는다고 해서lecture-vue-trello 에서npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env로 설치 해주었습니다 하지만 똑같은 오류가 뜹니다..아예 폴더를 삭제하고 깃에서 다시 클론하여 npm 설치 후 열어주었습니다그런데도 똑같은 오류가 뜹니다.webpack버전은 5를 쓰고 있습니다어떻게 해야 해결할 수 있을까용..vue cli 로 만든 프로젝트로 다시 해보았습니다퀵픽스에 install bable-core이 있어서 적용해보았는데 똑같습니다..
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정페이지의 작성완료 누를떄 에러가 납니다
Edit 페이지 구현하기 챕터의 작성완료 누를때 에러가 나는데 이유를 모르겠어요https://github.com/dajungleee/section12 확인 한번 부탁드려요ㅠㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
2-6 함수 강의
안녕하세요 2-6 강의부터 4개- 5개 강의 정도 화면이 검정으로 나오는데저만그런것인지 확인 가능할까요??
-
해결됨Azure Native로 나만의 GPT 만들기
프런트와 Pub/Sub연결하기 문의
안녕하세요. 좋은 강의 잘 듣고 있습니다. 프런트와 Pub/Sub연결하기 강의를 듣고 있는데 아래와 같은 문제가 발생하였습니다. 시간 되실 때 확인해 주시면 감사하겠습니다. 빠른 시작 WebSocket API로 서비스에 연결하고 Pub/Sub 시작 -> 2개 새탭 열고 각 url 입력 후 메세지 상호작용 확인. front 소스 코드 적용 후 아래 이미지와 같이 정상적 연결 성공 뜸. front페이지 새로 고침 이 후 url 입력 한 창에서 메세지 입력하여도 front페이지개발자 도구의 console에서는 변화가 없음. data가 있는 json 메세지를 받아야 하는데 변화가 없네요. 유료강의로 상용화 가능한 azure기반 chatbot강의도 해주시면 감사하겠습니다.
-
미해결Vue 3 시작하기
vbc 단축키 질문
vbc + 탭을 하면 기본적인 템플릿 가이드가 나온다고 하는데 저는 나오지 않습니다.vue vscode snippet 플러그인을 다운받았는데도 그러는데 왜 그럴까요??
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vscode 한글 설정이 잘 안되요
다음처럼 설정이나 이런 곳에는 한글 적용이 잘 되는데Error lens 플러그인 설치 후 에러 알려주는 부분에서는 영어로만 됩니다.!