묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
소괄호 자동 생성
안녕하세요 강사님, 강의 잘 듣고 있어요!!다름이 아니라,강사님 화면에서는 return 뒤에 작성하시고 소괄호가 자동으로 생성되면서 작성한 내용을 감싸주던데, 어떻게 하는건가요?ESLint, Prettier등 설치는 했어요 ㅠ.ㅠ 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전
"devDependencies": { "webpack": "^4.41.5", "webpack-cli": "^3.3.10" }수업과 동일한 명령어를 실행하려면 강의 내용과 동일한 버전을 사용하시면 문제 없이 실행됩니다. 버전이 바뀜에 따라 --help 결과물과 명령어 옵션들이 다소 변경되네요. (webpack major version이 4여도 변경 여부가 있습니다) 수업 노트에 webpack@4.41.5 버전을 사용하도록 안내해주시면 어떨까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
빌드 배포
안녕하세요 강사님 !쇼핑몰 만들기 강의 빌드 배포과정에서 헤매는 수강생들이(저 포함) 많은 것 같은데 혹시 빌드 배포과정까지 영상으로 올려주실 계획은 없으실까요??
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
마커이미지가 깨집니다
content:'<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png">',아무리 봐도 주소가 잘 입력된 것 같은데 마커가 깨져서 보입니다 ㅠㅠ 대체이미지 링크 넣었을 때는 잘 되는 걸로 보아 문제는 없어 보이는데 주소 문제인 것 같습니다...
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<Editor onCreate={onCreate} />인 이유가 뭘까요
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
yarn seed 명령어 실행 시 데이터 삽입 안됨
이렇게 성공 메세지는 뜨는데 테이블 조회를 해보면 데이터 삽입이 안되어 있습니다.어떤부분에서 오류를 해결해야 할까요?....
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션8 라이프 사이클 unmount 관련 질문
import { useState } from 'react' import Viewer from './components/Viewer' import Controller from './components/Controller' import { useEffect } from 'react' import { useRef } from 'react' import Even from './components/Even' import './App.css' function App() { const [count, setCount] = useState(0); const [input, setInput] = useState(""); const isMount = useRef(false); //1. 마운트 : 탄생 useEffect(()=>{ console.log("mount") },[]) //2. 업데이터 : 변화, 리렌더링 useEffect(()=>{ if(!isMount.current){ isMount.current = true; return; } console.log("update") }) //3. 언마운트 : 죽음 //useEffect(()=>{console.log(count)},[count, input]) // 의존성 배열, dependency array, deps const onClickButton = (value)=>{ setCount(count + value); } return ( <div className='App'> <h1>Simple Counter</h1> <section> <input value={input} onChange={(e)=>{ setInput(e.target.value) }}/> </section> <section> <Viewer count={count}/> {count % 2 === 0 ? <Even/> : null} </section> <section> <Controller onClickButton = {onClickButton}/> </section> </div> ); } export default App import { useEffect } from "react"; const Even = () => { useEffect(() => { //클린업, 정리함수 return () => { console.log("unmount") }; }, []); return <div>짝수입니다</div>; }; export default Even; 새로고침이나 초기 호출시에도 unmount가 출력되고 홀수로 카운팅이 올라가 컴포넌트가 삭제되는 경우는 update이후 unmount가 정상적으로 출력되는 것을 확인할 수 있는데 짝수로 카운팅이 올라가 컴포넌트가 생성되는 경우는 unmount 이후 update가 됩니다.컴포넌트가 삭제되는 경우에만 unmount가 진행되는 것으로 알고 있는데 혹시 코드에 문제가 있을까 질문드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
28-01-payment
포트원 사이트에 나와있는 내용이랑 인강내용이랑 코드가 전혀다릅니다.인증 결제 연동하기 (portone.io)바뀐거 같은데 어떤것으로 공부해야 하나요
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
vscode 자동완성 확장 질문
안녕하세요! 강의 잘 듣고 있는 수강생 입니다!제로초님 강의를 보면 다음과 같은 코드가 있을 때const express = require('express'); const path = require('path'); const app = express(); app.get('/',(req,res)=>{ res.sendFile(path.join(__dirname,'index.html')); console.log('GET / '); })app에 대한 HTTP METHOD 를 지원하는 라우팅 함수 및 req, res 에서 사용할 수 있는 함수들에 대해 자동 완성 되는 부분을 봤는데요. (예:`app.get()`,`res.writeHead()` 등) vscode의 각종 extensions 들을 설치해보고 vscode 자체의 옵션도 찾아봤지만 도저히 제로초님 처럼 자동 완성 되지가 않네요ㅜㅜ제가 이클립스를 사용하다가 이번에 노드 공부해보려고 다른 IDE를 사용해서 그런지 자동완성이 되지 않는 부분이 매우 불편한데 혹시 강사님 개발 환경 공유 가능할까요?강의와는 상관이 없는 질문인 점 죄송합니다
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
yarn run db:create 시에 발생하는 데코레이터 오류
제목처럼 명령어 실행시 아래와 같은 오류가 발생했습니다.Decorating class property failed. Please ensure that transform-class-properties is enabled and r uns after the decorators transform.이 오류는 타입스크립트 데코레이터와 클래스 필드초기화 문제로 보입니다. 엔티티를 처리하는 과정에서 데코레이터가 클래스 필드와 충돌을 일으키는 것으로 보입니다. 갑자기 생긴 오류에 tsconfig.ts 파일도 수정해보고 엔티티를 다시 점검해봐도 오류가 해결이 안되서 질문드립니다.오류가 발생하는 부분입니다.at _initializerWarningHelper (src/entities/DMs.ts:12:964) at DMs.<instance_members_initializer> (src/entities/DMs.ts:58:286) at new DMs (src/entities/DMs.ts:58:270) at EntityMetadata.create (node_modules/src/metadata/EntityMetadata.ts:568:23) at EntityMetadataValidator.validate (node_modules/src/metadata-builder/EntityMetadataValidator.ts:211:47) at node_modules/src/metadata-builder/EntityMetadataValidator.ts:43:18 at Array.forEach (<anonymous>) at EntityMetadataValidator.validateMany (node_modules/src/metadata-builder/EntityMetadataValidator.ts:42:25) at DataSource.buildMetadatas (node_modules/src/data-source/DataSource.ts:730:33) at processTicksAndRejections (node:internal/process/task_queues:95:5) error Command failed with exit code 1.DMs 엔티티의 문제인가 싶어서 제로초님의 코드를 다시 작성해보고 살펴보아도 문제가 해결되지 않습니다.추가로 yarn seed명령어도 안됩니다,,,
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
nodemon설치와 express-generator 오류
이러한 오류가 뜨는데 어떻게 해결할 수 있을까요?개발환경은 windows입니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
memoizedDispatch 말고 MemoizedProvider
const MemoizedProvider = React.memo(TodosStateContext.Provider);TodosStateContent가 컴포넌트이니까 memoizedDispatch의 useMemo말고 아예 React.memo를 사용해서 최적화 해도 되나요? 이렇게 하면 안에 있는 객체 {onCreate, onUpdate, onDelete}도 재생성 안되지 않을까요..?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
npm run db:create 시에 발생하는 decorating 오류
cli 통해서 db생성을 하면 migration 테이블이 생기지 않아서 오류를 들여다 봤더니 아래와 같은 오류가 생겼습니다.ERROR Decorating class property failed. Please ensure that transform-class-properties is enabled and runs after the decorators transform. 데코레이터를 적용하는 과정에서의 이슈로 보이는데 수업 과정을 이수하는 시점까지 별다른 문제나 별개의 코드를 작성하지 않았기에 의문점이 있는 상태입니다. 오류가 발생하는 구간은 아래 코드와 같습니다.at _initializerWarningHelper (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:12:1005) at Mentions.<instance_members_initializer> (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:61:291) at new Mentions (C:/Users/user/Desktop/Study/nestjsbook/src/entities/Mentions.ts:61:270) at EntityMetadata.create (node_modules\src\metadata\EntityMetadata.ts:568:23) at EntityMetadataValidator.validate (node_modules\src\metadata-builder\EntityMetadataValidator.ts:211:47) at node_modules\src\metadata-builder\EntityMetadataValidator.ts:43:18 at Array.forEach (<anonymous>) at EntityMetadataValidator.validateMany (node_modules\src\metadata-builder\EntityMetadataValidator.ts:42:25) at DataSource.buildMetadatas (node_modules\src\data-source\DataSource.ts:730:33) at processTicksAndRejections (node:internal/process/task_queues:95:5) Mentions만에 문제인가 싶어서 Entities를 제거하고 다른 특정 하나(Users)의 Entity만 포함시켜서 실행했을 때도 동일한 오류를 뱉고 있어요.tsconfig가 컴파일될 때, 제 때 동작이 안되는가 싶어 바벨을 설치해서 플러그인을 주입해도 동일한 현상이 발생되네요 ㅠㅠ 물론 tsconfig에 데코레이터 관련 옵션이 true이긴 합니다. emitDecoratorMetadata: true experimentalDecorators : truescript"db:create": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:create -d ./dataSource.ts", "db:drop": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:drop -d ./dataSource.ts",참고로 db:drop시에는 오류가 없이 잘 동작합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
비동기 함수로 불러온 데이터를 화면에 렌더링
강의 내용을 바탕으로 프로젝트를 하나 만들다 안되는 부분이 있어 질문드립니다.제가 axios를 이용해서 데이터를 받는 함수를 만들었는데요 const [posts, setPosts] = useState(); const getAllPosts = async () => { try{ const {data} = await axios.get("/api/posts"); console.log("axios - getAllPosts: ", data); setPosts(data); } catch(error){ console.log("getAllPosts 에러: ",error); } }getAllPosts(); 이런 코드를 작성했을때 렌더링할때 axios를 이용해서 받은 데이터를 posts란 state에 저장하고 이를 리스트 형태로 렌더링하려고 하는데 저기서 그냥 getAllPosts(); 를 해버리면 콘솔창에 무한하게 posts 값이 찍히고 화면에는 렌더링이 되지 않더라고요 ㅠ 콘솔창에는 그래도 데이터가 찍히긴 하는데 말이죠..ㅠgetAllPosts메서드는 비동기 함수니깐 컴포넌트들이 렌더링되기 전에 실행되고 컴포넌트들이 렌더링되는거 아닌가요? 그럼 저 메서드를 호출하면 잘 렌더링이 되야하는거 아닌가요??ㅠㅠ왜 저렇게 콘솔창에는 무한하게 데이터값이 찍히고 컴포넌트에는 왜 렌더링이 되지 않는건가요??
-
미해결차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)
앱에 refreshToken을 전송할때 궁금한점이 있습니다.
앱은 쿠키가 따로 없는걸로 알고있습니다 웹과 앱을 제작할때 서버를 하나만 사용하게된다면 refreshToken에대한 처리는 어떻게 해주는게 좋을까요??
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 사이클
function App() {const [count, setCount] = useState(0);const [input, setInput] = useState("");const isMount = useRef(false);// 1. 마운트 : 탄생useEffect(() => {console.log("mount"); }, []);// 2. 업데이트 : 변화, 리렌더링useEffect(() => {if (!isMount.current) {isMount.current = true;return; }console.log("update"); });// 3. 언마운트 죽음const onClickButton = (value) => {setCount(count + value);// console.log(count + value); };return (... );} 위 코드를 작성하고 새로고침을 하면위 처럼 콘솔에 모든 mount, unmount, update가 뜹니다....코드상 update도 안떠야하는데 왜 뜨는걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 내용 변경된건가요?
제가 작년에 구매하여 section 10 정도 까지 듣다가 중단했었는데요,, 그땐 싸이월드만들기 이런 강의가 없던거같은데 강의가 개정된걸까요..? 어디서부터 다시 들어야할지 모르겠네요 ..
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
프록시 관련 질문
안녕하세요 강사님,proxy 설정을 하면 이렇게 오류가 뜨면서 서버 시작이 안돼요.프록시 부분을 지우면 잘 작동하는데어디가 잘못된걸까요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 가 정확히 언제 실행되는건지 헷갈립니다
강의를 다 듣고 뭔가 아직 useEffect의 개념이 명확히 잡히지 않았는데요..바뀐 state 값을 바로 이용하려고 할때, 컴포넌트가 렌더링된 후에 사용한다고 하셨는데그럼 만약 컴포넌트를 렌더링할때 바뀐 state값을 같이 렌더링해줘야 하는 경우에는 useEffect는 컴포넌트가 렌더링 된 이후에 사용하니깐 useEffect를 못쓰는건가요??여기서 useEffect가 컴포넌트가 렌더링 된 이후에 사용한다는게 모든 컴포넌트가 완전히 화면에 그려지고 나서 사용된다는 의미 맞나요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS 배포했는데 CORS 에러떠요
AWS에 정적페이지 동적페이지 분리해서 배포했는데 https://backendonline.codebootcamp.co.kr/graphql 이주소로 API 요청하면은 CORS 에러납니다. 해당 주소로 API 요청하는게 잘못된걸까요 본강의에서 ??