묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
비동기 방식에서 콜백함수 사용 이유
강의 10분 경 비동기 방식에서 코드 실행 결과를 확인하기 위해 콜백함수를 사용해야 한다고 하셨는데, 아래와 같이 예시를 들어주신 콜백함수를 사용하는 코드와 그렇지 않는 코드의 다른 점이 무엇인지 궁금합니다. 두 코드의 결과는 똑같이 -1 -> 12 -> 7 순서로 콘솔창에 출력됩니다.첫 번째는 예시를 들어주신 코드이고, 두 번째는 왜 콜백함수를 써서 결과를 봐야하지??라는 궁금증으로 수정해본 코드입니다. function taskA(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskB(a, b, cb) { setTimeout(() => { const res = a * b; cb(res); }, 2000); } function taskC(a, b, cb) { setTimeout(() => { const res = a - b; cb(res); }, 1000); } taskA(3, 4, (res) => { console.log(res); }); taskB(3, 4, (res) => { console.log(res); }); taskC(3, 4, (res) => { console.log(res); }); taskA1(); // 이후 실행 console.log("코드 끝"); // taskA1 를 기다리지 않고 // 먼저 실행function taskA(a, b) { setTimeout(() => { const res = a + b; console.log(res); }, 3000); } function taskB(a, b) { setTimeout(() => { const res = a * b; console.log(res); }, 2000); } function taskC(a, b) { setTimeout(() => { const res = a - b; console.log(res); }, 1000); } taskA(3, 4); taskB(3, 4); taskC(3, 4);
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
백엔드는 명령어 많이 알아야 하나요?
vscode에서 명령어 입력하고 docker 실행 명령어도 입력했는데 powershell이나 다른 프로그램에서도 명령어 많이 알아야하나요
-
미해결처음 만난 리액트(React)
(실습) JSX 코드 작성해보기
이 화면이 나오게 하고 싶습니다. npm start 엔터 이후로 어떻게 해야 하는지 모르겠습니다
-
미해결처음 만난 리액트(React)
섹션 2 create-react-app
npx create-react-app my-app이라고 작성했는데 오류가 나타납니다. node.js와 npm버전은 모두 14.0과 6.14 이상입니다PS C:\Users\이민준> npx create-react-app my-app npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\이민준\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\이민준\AppData\Roaming\npm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\이민준\AppData\Local\npm-cache\_logs\2023-08-02T12_46_01_759Z-debug-0.log PS C:\Users\이민준>
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이 코드도 맞을까요?
이렇게 풀어도 맞을까요?function solution(necc, course) { let answer = "YES"; let lst = []; for (c of course) { for (n of necc) { if (c === n) { lst.push(c); break; } } } let compare = lst.join(""); if (necc !== compare) answer = "NO"; return answer; } console.log(solution("ABC", "ACBC"));
-
미해결처음 만난 리액트(React)
섹션 2 리액트 시작하기 (실습) 직접 리액트 연동하기
click 버튼이 나타나지 않습니다.코드는 정상적으로 오타가 없는지 여러 번 확인했습니다.function MyButton(props){ const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {onClick: () => setIsClicked(true)}, isClicked ? 'Clicked!' : 'Click here!' ) } <html> <head> <title>민준의 블로그</title> <link rel="stylesheet" href="sylesj.css"> </head> <body> <h1>민준의 블로그에 오신 여러분들 환영합니다</h1> <div id="root"></div> <!--리액트 가져오기--> <script src="https://unpkg.com/react@17/umd/react.decelopment.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react.decelopment.js" crossorigin></script> <!--리액트 컴포넌트 가져오기--> <script src="MyButtonj.js"></script> </body> </html>
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onEdit setData 없어도 되는건가요?
안녕하세요 강사님!강의를 따라가는 도중 제가 onEdit 함수에 setData를 하지 않았다는 사실을 알게 되었습니다.하지만 setData를 해주지 않고 data에 map 함수로 변경 해주는 동작만 해도 정상적으로 수행되는데 왜 그런지 알 수 있을까요?useCallback 해주기 전에도 정상 동작한 이유도 궁금하고 강사님께서 알려주신 대로 data에는 컴포넌트가 마운트 됐을때 data 상태인 빈 배열이 들어가 있어야 하는 것이 아닌가요?아래는 제가 짠 onEdit 함수 입니다const editDiary = useCallback((targetId, editedContent) => { data.map((e) => e.id === targetId ? {...e, content: editedContent} : e ) }, [])
-
미해결처음 만난 리액트(React)
npm start해도 안됩니다.
index.jsLibrary.jsxBook.jsx
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 추가 시 DiaryEditor 리렌더링 질문
안녕하세요 강사님강의를 듣고 저는 React.memo로 DiaryEditor를 고차 컴포넌트를 만들어 동일한 prop을 받았을 때 리렌더링 되지 않도록 해주고 onCreate 함수를 useCallback을 통해 메모리제이션 하여 같은 함수를 DiaryEditor에 prop으로 전달한다고 이해했습니다그래서 제가 생각했을 땐 일기를 새로 저장하거나, 삭제, 수정하는 작업 중에는 DiaryEditor가 아예 리렌더링이 되지 않아야 된다고 생각했는데 강의 14분 17초에서도 그렇고 제가 직접 짠 코드에서도 일기를 새로 저장할 때 리렌더링이 되는데 제가 이해한게 잘못 된건가 싶어 질문 드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
이메일 템플릿 이메일 전송
구글 앱 비밀번호 설정 떄문에 막힙니다 2단계 인증했고 앱 비밀번호 생성해서 그걸 구글 비밀번호로 바꾸고 선생님 코드를 잘 따라해서 적었는데 Error: Invalid login: 535-5.7.8 Username and Password not accepted.라고 에러 납니다혹시 방법 없을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
apollo 서버 코드 질문합니다
질문입니다type Mutation {createBoard(createBoardInput: CreateBoardInput!):String } 에서맨 마지막에 왜 createBoard는 String이 붙고type Query{fetchBoards: [MyResult]}에서 fetchBoards는 맨 마지막에 String이 안 붙나요?fetchBoards: [MyResult]:String 이렇게 될수도 있지 않나요 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ const typeDefs = `#graphqltype Query{fetchBoards: [MyResult]}type Mutation {createBoard(createBoardInput: CreateBoardInput!):String } `;const resolvers = {Query: {fetchBoards: (parent, args, context, info) => {const result = [ { number: 1, writer: "철수", title: "제목입니다", contents: "내용이에요", },{number: 2,writer: "영희", title: "제목입니다",contents: "영희이에요",},{ number: 3, writer: "훈이", title: "제목입니다",contents: "훈이이에요", },];return result;} },Mutation: { createBoard: (_, args) => { console.log(args); onsole.log("========================="); console.log(args.createBoardInput.writer);console.log(args.createBoardInput.title);console.log(args.createBoardInput.contents);return "게시물 등록에 성공하였습니다"; }, }, };
-
미해결자바스크립트 제대로 배워볼래?
Async Await 오류가 나서 문의드립니다.
안녕하세요.스크립트는 아래와 같이 작성하였으며,콘솔에는 3-12.AsyncAwait.html:20 Uncaught (in promise) TypeError: data is not iterableat calculateSum 이라는 오류가 나왔습니다.<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> var url ="https://74f8c451-bcda-46f0-820b-f63caee12b28.mock.pstmn.io/productList"; async function getData2(){ return (await axios.get(url)).data; } async function calculateSum(){ var data = await getData2(); var total = 0; for(var item of data){ total += item.price; } console.log(total); } calculateSum(); </script> </body> </html>어디가 잘못된걸까요...강의랑 똑같이 작성을 한거같은데..
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
비동기 코드 질문
호출스택에 먼저 (anonymous)가 있고 a를 호출하니 a함수가 그 위에 쌓이고그 다음 setTimeout은 비동기코드이니까 백그라운드에 있다가 콜백함수가 태스크큐를 거쳐 이벤트루프를 타고 호출스택으로 가기전에 호출스택이 비어져있어야 콜백함수가 호출스택으로 가는데 a안에 setTimeout이 있으니 동기코드가 아직 안끝났는데 콜백함수가 어떻게 호출스택으로 갈 수 있나요?동기코드는 그 안의 비동기코드가 아직 안끝났어도 자기 할일이 다 끝나면 호출스택에서 벗어나는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
학습조언 해주세요
인강 40분짜리 3개 듣고 복습해서 총 5시간을 소비했는데 잘 하고 있는 건지 궁금해요
-
미해결처음 만난 리액트(React)
npm start
npm start를 하면 여기서 멈추고 원하는 화면이 안나오는데 어떻게 해야하나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
mysql 관련 docker-compose 빌드 시 에러
강의 하나 들을 때마다 에러가 너무 많이 떠서 진도가 안나가서 미칠 지경이네요 ㅠㅠdocker-compose.yaml 파일을 아래와 같이 설정하고 docker-compose build를 하니 services.mydb.environment.0 must be a string 라는 에러가 떠서 구글링을 하니 environment: - MYSQL_DATABASE: 'dockerProject' - MYSQL_ROOT_PASSWORD: 'root'여기서 띄어쓰기를 없애보라고 하길래 아래와 같이 띄어쓰기를 없앤채로 .yaml파일을 변경하였습니다. version: '3.7' services: mybackend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker mydb: # platform: linux/86_64 image: mysql:8.0.34 environment: - MYSQL_DATABASE:'dockerProject' - MYSQL_ROOT_PASSWORD:'root' ports: - 3306:3306그리고는 docker-compose build 이후 up을 실행했으나 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 계속 발생합니다.(docker 말고 내 로컬컴퓨터에서는 mysql 연결 잘 되었음) 다른 질문자 분들 내용을 참조하여 package.json 파일의 mysql2와 typeorm의 버전을 아래와 같이 바꾸었고, .yaml 파일에서도 mysql 버전을 latest에서 8.0.34로 지정해주었습니다. { "name": "graghql", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev": "nest start --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@apollo/server": "^4.9.0", "@nestjs/apollo": "^12.0.7", "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.0.0", "@nestjs/core": "^10.0.0", "@nestjs/graphql": "^12.0.8", "@nestjs/platform-express": "^10.0.0", "@nestjs/typeorm": "^10.0.0", "graphql": "^16.7.1", "mysql2": "3.2.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1", "typeorm": "^0.3.12" }, "devDependencies": { "@nestjs/cli": "^10.0.0", "@nestjs/schematics": "^10.0.0", "@nestjs/testing": "^10.0.0", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/supertest": "^2.0.12", "@typescript-eslint/eslint-plugin": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^29.5.0", "prettier": "^2.8.8", "source-map-support": "^0.5.21", "supertest": "^6.3.3", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.1.3" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } }그런데도 똑같이 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...에러가 발생하여 node_modules 파일 및 dist 파일을 삭제 후 다시 yarn install을 했는데,이제는 import도 되지 않습니다....에러 때문에 진도가 나가질 않아, 중간중간에 강의를 멈춰가며 강의와 똑같이 따라가고 있는데 왜 이런 에러가 계속 발생할까요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
별거 아니지만 항상 궁금했던거요
객체로 나타낼 떄 따옴표 쓰는 거 하고 쌍따옴표 쓰는 거 하고 뭔 차이인가요? 그리고 따옴표 쓰면 계속 따옴표 쓰고, 쌍따옴표 쓰면 계속 쌍따옴표로 써야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
graphql 궁금한게 있습니다
선생님께서는type Mutation { createBoard(createBoardInput: CreateBoardInput!):String }밸류 CretaBoardInput !을 그룹으로 묶어서input CreateBoardInput{ writer:String title:String contents: String }이렇게 나타내셨는데 ,그런데 키 createBoardInput은 뭘 나타내는 건가요?혹시, 객체를 그룹으로 묶으면 키,밸류를 똑같은 이름으로 지어야 하나요>?
-
미해결처음 만난 리액트(React)
(실습_리액트18)시계만들기_코드_index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); },1000);
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청 드립니다.
인프런 아이디 : @rnrn48159인프런 이메일 : rnrn48159@gmail.com깃헙 아이디 : rnrn48159@gmail.com깃헙 Username : thomasisong
