묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 이메일 찾기부분
중고마켓 피그마에서 로그인부분에 이메일 찾기가 있는데, 플레이그라운드에 없는 것 같아서 문의 드립니다. 비밀번호는 resetUserPassword를 사용하면 될 것은데, 이메일찾기는 제가보기엔 보이지 않아서요!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onRemove 원리 질문
안녕하세요! useReduce를 사용하고 최적화를 한 단계에서 onReduce() 함수가 어떻게 최적화 되는지 원리에 의문이 생겨 질문 드립니다. const [data, dispatch] = useReducer(reducer, []); //reducer 생략 case "REMOVE": return state.filter((it) => it.id !== action.targetId); 해당 코드에서 REMOVE를 실행하면 data 배열이 새로운 배열로 업데이트가 됨 -> 2. 그러면 data를 prop으로 받고 있는 DiaryList.js에서 이를 감지하고 처음부터 끝까지 DiaryItem.js를 다시 생성함. ->3. 그런데 DiaryItem은 React.memo로 prop를 비교하는데, 얕은 비교를 하기에 data에 새로 생성된 배열과는 주소가 달라 새로운 컴포넌트를 다시 생성. 이 되어야 하지 않을까요? 혹시 저의 논리에서 어디 부분이 잘못되었는지 모르겠어서 질문합니다... ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useMutation에러
Server ErrorInvariant Violation: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a documentThis error happened while generating the page. Any console logs will be displayed in the terminal window. 이러한 에러가 뜨는데 왜 발생하는 걸까요.const [contents, setContents] = useState(""); 18 | > 19 | const [나의함수] = useMutation(나의그래프큐엘셋팅) | ^ 20 | 21 | const onClickSubmit = async () => { 22 | const result = await 나의함수({ import { useState } from "react" import {나의그래프큐엘셋팅} from './BoardWrite.queries' // export는 골라서 가져오기 import BoardWriterUI from "./BoardWrite.presenter"; // export-default로 한 개만 가져오기 import { useMutation } from "@apollo/client"; // import BoardWriterUI from "./BoardWrite.presenter"; // export-default로 한 개만 가져오기 // import BoardWriterUI, {apple} from "./BoardWrite.presenter"; // export-default와 export 함께 가져오기 // import * as S from './BoardWrite.styles' // 모든 export를 가져와줘 // S.BlueButton // S.RedInput export default function BoardWrite() { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [나의함수] = useMutation(나의그래프큐엘셋팅) const onClickSubmit = async () => { const result = await 나의함수({ variables : { // variables 이게 $ 역활을 함 writer : writer, title : title, contents : contents } }) console.log(result) } const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangeTitle = (event) => { setTitle(event.target.value) } const coChangeContents = (event) => { setContents(event.target.value) } return ( <BoardWriterUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={coChangeContents}/> ) }-컨테이너import { gql } from "@apollo/client" const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer : String, $title : String, $contents: String) { createBoard(writer : $writer, title : $title, contents : $contents) { _id number message } } ` -쿼리
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
컴포넌트 부모 태그
안녕하세요! 좋은 수업 잘 듣고 있습니다 :)props로 컴포넌트를 받는 Container 컴포넌트에 대해 질문이 있습니다!JSX 규칙 중에 모든 컴포넌트는 부모 태그를 가지고 있어야 한다고 말씀해주셨는데 아래 코드처럼 Container는 부모 태그가 없이도 잘 동작하기에 이유가 무엇인지 궁금합니다!function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <Container> <div className="App"> <Counter {...counterprops}/> </div> </Container> ); }또한 function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <div className="App"> <Container> <Counter {...counterprops}/> </Container> </div> ); }이렇게 코드를 짜면 동작하지 않더라구요! 왜 첫번째 코드는 동작하고, 두번째 코드는 동작하지 않는지 궁금합니다!감사합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
10.4 토큰테스트에는 표시되지만 api 서버에는 유효하지 않다고 나와요.
질문1)4000/test에서는 토큰이 표시되지만, 8002/v1/test 에서는 유효하지 않은 토큰으로 뜨는 이유가 무엇일까요?로그에서는 401코드가 뜨다가 4000/test 접속 후 새로고침을 하면 200 코드가 로그에 다시 뜹니다. api 코딩 내용 첨부합니다.app.jscontrollers/v1middleware/v1routes/v1
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs autoSchemaFile에러
import { ApolloDriver, ApolloDriverAsyncConfig as ad } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { AppController } from './app.controller'; import { AppService } from './app.service'; @Module({ imports: [ GraphQLModule.forRoot<ad>({ // forRoot의 데이터타입지정 <> -> 제네릭 부분 driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {} import { Field, Int, ObjectType } from '@nestjs/graphql'; @ObjectType() // graphql에서 type을 의미함 예)type Board export class Board { @Field(() => Int) // Int를 import를 해서 사용해야한다 number: number; // ;을 기준으로 구분함 @Field(() => String) // graphql을 위한 용도 writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } 단순히 graphql shema를 자동생성 해주는 거만 테스트할려고했는데 경로를 잡아주니 에러가나와서 true도 해보고 playground : true도 추가해보고했는데 계속 해서 오류가 나고 계속해서 오류는 type이 존재하지않는다고해서 이유를 모르겠습니다 Argument of type '{ driver: typeof ApolloDriver; autoSchemaFile: string; }' is not assignable to parameter of type 'ApolloDriverAsyncConfig'.Object literal may only specify known properties, and 'autoSchemaFile' does not exist in type 'GqlModuleAsyncOptions<ApolloDriverConfig, GqlOptionsFactory<ApolloDriverConfig>>'.ts(2345)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
관계등록 강의에서 product service 파일의 create 함수 생성시 문법 관련 질문
해당 강의에서 product service의 create 함수를 아래와 같이 코딩하는 것을 가르쳐주셨는데요.아래 코드에서const tags = [...prevTags, ...newTags.indentifiers];부분에서 prevTags에도 .identifiers가 붙어야 될 것같다는 생각을 했습니다.prevTags는 this.productsTagsRepository.find 함수를 통해서 찾아오는데, 이는 where 조건문에 의해 name이 tagNames인 것을 찾아내어 productTags의 프로퍼티인 id와 name을 둘다 return 하지 않나요?이전 조회API를 만드는 강의에서도 find 함수를 통해 id만 가져오는 것이 아닌 다른 칼럼들도 모두 가져왔었습니다.그런데 prevTags 뒤에 .indentifiers를 붙이니 에러가 뜨더라구요...분명 조회API 강의에서는 find를 통해 모든 칼럼을 다 가져왔던것 같은데, 왜 이번에는 똑같은 find 함수를 통해 id만 리턴이 되는 건가요? async create({ createProductInput }: IProductServiceCreate): Promise<Product> { const { productSalesLocation, productCategory, productTags, ...product } = createProductInput; const result = await this.productsSalesLocationService.create({ productSalesLocation }); const tagNames = productTags.map((el) => el.replace('#', '')); const prevTags = await this.productsTagsRepository.find({ where: { name: In(tagNames) }, }); const temp = []; tagNames.forEach((el) => { const isExist = prevTags.find((prevEl) => el === prevEl.name); if (!isExist) temp.push({ name: el }); }); const newTags = await this.productsTagsRepository.insert(temp); const tags = [...prevTags, ...newTags.identifiers]; const result2 = this.productsRepository.save({ ...product, productSalesLocation: result, productCategory: productCategory, productTags: tags, }); return result2; }
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
async await 함수 사용에 대해서 문의드립니다.
아직 노드버드 ch10 진행중입니다.진행하면서 다른 글들도 참고하면서 진행중인데요async await 사용 방식에 대해 문의드립니다.DB 데이타 조회, 생성 시 async 로 진행하는데코딩 방식1try{ const user = await User.findOne(...); ... await user.addFollowing(...);}catch(err){ next(err);}코딩 방식2User.findOne().then((result) => { user.addFollowing(...);}).then((result) => {...}).catch((err) => { next(err)});방식1은 await 키워드로 비동기 함수 호출하는 방식이구아래는 then 을 통해 비동기 함수 호출 하는 방식인듯 한데요.둘중 많이 쓰는 방식이 있을까요..?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
checkAuction() 호출 위치 질문
const checkAuction = require("./checkAuction"); const app = express(); passportConfig(); checkAuction(); app.set("port", process.env.PORT || 8010); app.set("view engine", "html"); nunjucks.configure("views", { express: app, watch: true, }); sequelize .sync({ force: false }) .then(() => { console.log("데이터베이스 연결 성공"); }) .catch((err) => { console.error(err); });이렇게 checkAuction함수의 호출이 sequelize.sync호출보다 위에있는데 어떻게 시퀄라이즈를 쓰는checkAuction함수가 에러없이 돌아가는게 가능한 것이죠?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 27번은 문제가 저만 있는건가요?
라우팅을 넘어갈수가 없습니다Application error: a client-side exception has occurred (see the browser console for more information). 이런 오류가 뜨네요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
index.js React 17, React 18 버전 질문
안녕하세요. 강의를 계속 듣다가 App.js가 자꾸 두번 실행되어 index.js를 제외한 모든 코드를 강사님의 sandbox 코드를 복붙하였는데 계속 코드가 두번 실행이 되었습니다.그리하여 이렇게 dataId가 20부터 실행되는 문제가 발생하였는데요, 그래서 index.js를 강사님 버전(React 17)로 바꾸었더니 이 문제가 해결되었습니다. React18버전으로 하면 이런 문제가 발생하는 이유가 무엇인가요?? 다음은 저의 index.js 코드입니다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const rootNode = document.getElementById("root"); ReactDOM.createRoot(rootNode).render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
API 1:1 관계등록 및 1:다 관계등록 관련 질문
안녕하세요!강의 잘 듣고 있는 학생입니다. 1:1관계등록 강의에서는 product sales location 관계를 등록할 때는 따로 sale location에 대한 모듈 파일과 리졸버 파일은 만들지 않고 서비스 파일만 만들어서 관계를 등록하였는데,1:다 관계등록 강의에서는 product category에 대한 모듈파일과 리졸버 파일까지 만들어 관계등록을 하는 것으로 가르쳐주셨습니다.코드 구성은 크게 다르지 않은 것 같은데, 카테고리 관계등록 강의에서는 일대다 관계이기 때문에 리졸버와 모듈파일까지 만들어서 관계등록을 하는 것인가요? 그렇다면 이유를 좀 알 수 있을까요..?코드 구성은 비슷하고, 차이라고 할 것은 1대1이냐 1대다이냐 밖에 없는 것 같은데 이렇게 모듈파일을 만들어주고 안만들어주고의 차이가 발생하는 이유가 이해가 안가서요 ㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
cors 설치하고 404, 500 status 에러가 납니다
npm cors를 설치하고회원가입 버튼을 누르니까 에러가 납니다왜 안되는 건지 알려주세요..
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onDelete관련
안녕하세요 onDelete관련 질문 드립니다. <DiaryList onDelete={onDelete} diaryList={data} />해당 부분에서 onDelete와 {onDelete} 의 역할이 다른 것인지 궁금합니다 두번째 onDelete는 앞서 작성한 함수를 전달한 것으로 이해했는데 앞에 있는 onDelete는 js의 onClick onFocus 처럼 이벤트핸들러인지 단순 설정한 props명 인 것인지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ERROR [TypeOrmModule] Unable to connect to the database
ERROR [TypeOrmModule] Unable to connect to the database이 에러가 일어났다 안일어났다가해요. nestjs에서 typeorm으로 mysql에 table entity를 저장해주는 과정에서 db에 접속이 안되었다. 1. TypeOrmModul.forRoot안의 오타확인 -> 없었다 2. Entity에 이상이 있는지확인 -> 없었다 3. 구글링에서는 대부분이 오타문제이거나 데이터베이스를 생성해주지않았다는 문제라고했다 -> 데이터베이스도 켜져있었고 티미널이랑 dbeaver에서도 mysql과 접속이 되고있는것으로 확인 4. 컴퓨터가 버그로 안되는 걸로 예상해 잠시 종료했다가 실행 -> 역시안됐다 5. 비밀번호를 숫자로 입력해서 string이아닌 number형식으로 작성했는데 password는 string 타입만 작성가능하다고 오류가나왔다 - 문제해결 -> root 비밀번호를 string타입으로 변경하니까 오류가 해결되었다 -> 숫자로 입력하니 넘어오는 과정에서 숫자가 string형태로 변경되어 접속오류로 판명 -> 비밀번호는 문자열로.....-> 이게 전날에 연결이 안되어서 해본결과였고 오늘 했을때에는 연결이되었는데 두번째 접속을 하니까 연결이 안되서dbeaver에서랑 터미널에서 접속을 했을때는 문제가 없었습니다.왜계속해서 이런오류가 불규칙적으로 일어나는지 모르겠습니다.그리고 두번째 질문은 nestjs독스에서는 synchronize: true,이부분을 false로 권장하고있는데 그이유로는 데이터 손상?유실이 있을수있다고 써져있는데 수업중에는 true로되어야지 동기화가 된다고 하셔서 이부분도 설명 부탁드릴수있을까요마지막으로 세번째 질문으로는 dbeaver에서재연결요청을 했을때 Datasource was invalidatedLive connection count: 2/2이렇게 나오는데 이러면 mysql이 켜져있는 상태인건가요? 해당 database는 다볼수있는데 offline인데 그전에 연결이되서 볼수있는건가하는 의심이 들어서질문드렸습니다import { ApolloDriver, ApolloDriverConfig as ad } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { BoardsModule } from './apis/boards/boards.module'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Board } from './apis/boards/entities/board.entity'; @Module({ imports: [ BoardsModule, // ProductsModule, // UsersModule, GraphQLModule.forRoot<ad>({ // forRoot의 데이터타입지정 <> -> 제네릭 부분 driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', // 자동으로 스키마 파일을 생성 .gql로마무리 해주기 // 실행은 package.json이 있는 위치에선 // graphql은 스키마 파일이 있어야 실행이 가능하다 // 자동이든 직접 작성하든 작성해주어야한다. }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', // 도커할때는 네임레졸루션이 들어가야함 port: 3306, username: 'root', password: 'root', database: 'myproject', entities: [Board], // 해당하는 테이블을 작성 logging: true, // 어떻게 변형되어서 넘어가는지 디버깅 synchronize: true, // entity.ts와 db를 동기화 해주는 작업 }), ], // 합치는 부분 }) export class AppModule {}
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
면접볼 떄 알아햐 하는 것
CS는 기본으로 물어볼테고,node 개발자라면 node,자바스크립트 개념,뜻,장점,단점,예시 같은거 알면 되나요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
api 서버 만들기: 도메인주소, 클라이언트비밀키가 화면에 표시되지 않습니다.
무료/프리미엄 고르고 도메인주소 입력하면 밑에 화면에 주소와 타입 비밀키가 표시되지 않습니다. 로그는 계속 이렇게만 뜨고, 워크벤치 들어가보면 키는 보입니다.키가 발급은 되었는데, 브라우저로 못 띄우는 것 같다고 판단했습니다.어떤 부분을 확인해봐야 될까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setState관련
20분경 나온 setState관련해서 미리 코드를 짜보았었는데용 <div className="DiaryEditor"> <h2>오늘의 일기</h2> <div> <input value={state.author} onChange={(e) => { setState(e.target.value); }} /> </div> <div> <textarea value={state.content} onChange={(e) => { setState(e.target.value); }} placeholder="내용을 입력해주세요" /> </div> </div> 이렇게 짜도 정상적으로 작동이 되는데 더 깊이 들어가서 문제가 생기는 경우일까요??
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
git 수업 부분 오류 발생했습니다
git remote add origin https://github.com/JIWONKIMS/grab-market-client.git git branch -M main git push -u origin main터미널에 입력했을 때 마지막 git push -u origin main 부분을 실행하면 아래 에러가 뜹니다fatal: failed to load library 'libcurl-4.dll' 에러 해결법이 뭔가요?
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
Entity, Dto 관련해서 궁금증이 있습니다! (오류 사항은 아니지만.. 갑자기 궁금해져서 글을 남기게 되었습니다.)
안녕하세요. 해당 강의를 보다가 궁금증이 생겨서 글을 남기게 되었습니다.Entity는 디비 테이블의 컬럼들을 작성(실제 컬럼 및 디비에 없는 컬럼들까지)하고 Dto는 요청에서 받는 타입들을 작성하고 해당 타입들을 Controller 전에 검증해주는 클래스라고 알고 있었습니다. 궁금한건 아래 2가지 인 것 같습니다.Entity는 디비 테이블의 컬럼을 / Dto는 타입 검증을 위한 데코레이터들을 작성하는 클래스로 분리되는 개념으로 생각해왔었는데 잘 못 생각하고 있었던건가요??만약, Dto 클래스에 있는 컬럼들을 생략하면 nickName?: string; 처럼 선택적 옵션들과 @IsString()등 타입 검증을 해주는 데코레이터들을 전부 Entity에 작성해주는 건가요?? 저는 Entity는 건들이지 않고 Dto에서 선택적 옵션과 타입 검증들의 데코레이터를 사용하고 있었어서 궁금해졌습니다..!