묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새일기 작성시 브라우저 콘솔창 오류메시지
강사님 새 일기 작성 시 브라우저 콘솔창에 아래와 같은 오류 메세지가 나오는데요.Warning: Encountered two children with the same key, undefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. at div at div at DiaryList (http://localhost:5173/src/components/DiaryList.jsx:23:22) at div at Home (http://localhost:5173/src/pages/Home.jsx?t=1713771954091:46:16) at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3558:5) at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3993:5) at App (http://localhost:5173/src/App.jsx?t=1713771954091:63:37) at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3936:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:4676:5) 두개의 자식요소가 동일한 키를 가지고 있다고 되있는데 오류 나는 곳을 아무리 봐도 어디서 오류가 나는지 찾을 수가 없습니다 ㅠㅠ뭐가 문제 일까요? ㅠㅠ
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
CSS 적용 안되는 현상
위와 같이 코드를 작성하였습니다만, body 부분의 css가 적용이 안됩니다.여기서 제가 궁금한 것은 .html 파일 위의 <!DOCTYPE html>을 삭제하면 body값이 100%에 맞게 보여지는데, 왜 이렇게 적용 되는지 잘 모르겠습니다..<!DOCTYPE html>의 태그 같은 경우는 문서 형식을 선언하는것으로 알고있는데..해당 코드의 존재 유무에 따라 CSS 적용이 되다 안되다가 하는지 잘 모르겠습니다.. 답변 주시면 감사드리겠습니다!!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
map 함수에서 cannot read properties of undefined 에러 발생
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql-codegen 설치중에 에러
Graphql-codegen 설치중에 에러가 계속 나서 node-module 과 yarn.lock 을 삭제 한후 다시 yarn install 실행 후 yarn add --dev typescript @graphql-codegen/cli 에러가 났습니다 내친구 쳇에게 물어봤더니 제가 한거처럼 하라고 하네요 매번 환경설정시 긴장의 연속!!! 왜이러는 걸까요?? 혹시 yarn add -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher 요걸 해줘야되는지 ??:~/codecamp/class$ yarn add --dev typescript @graphql-codegen/cliyarn add v1.22.22[1/4] Resolving packages...error AggregateError at internalConnectMultiple (node:net:1102:18) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5)info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오픈그래프 태그
배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Apollo-Client 설치 에러
안녕하세요, 섹션 7 듣고 있습니다.Apollo-Client를 설치하고 yarn dev 실행하니 저렇게 뜨네요.해당 파일을 지우거나 해도 이번엔 그 파일이 없다는 이유로 에러가 뜹니다.Node.modules랑 package.lock.json 삭제 후 재설치해도 똑같고요.조속한 해결 부탁 드리겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
404에러
//section05/05-05-dynamic-routing-board-mutaton import { gql, useMutation } from "@apollo/client"; import { useRouter } from "next/router"; const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutationPage() { const router = useRouter(); const [myFunction] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { try { // 코드 시도하다 실패하면 catch로 넘어감 const result = await myFunction({ variables: { //variables === $ 역할을 함. 그렇다고 여기선 $를 쓰면 안됨 writer: "훈이", title: "안녕하세요", contents: "반갑습니다.", }, }); console.log(result); console.log(result.data.createBoard.number); router.push( `/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}` ); } catch (error) { alert(error.message); } }; //한줄일땐 괄호 생략 가능 return ( <> <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> </> ); } //section05/05-05-dynamic-routing-board-mutation-moved/[number] import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; // 폴더 [qqq] 대괄호로 감 싸놓으면 폴더가 변수가됨 const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; export default function StaticRoutingMovedPage() { const router = useRouter(); console.log( router); const { data } = useQuery(FETCH_BOARD, { variables: { number: Number(router.query.number) }, //graphql fetchBoard에 자료가 없거나 null이면 오류가 뜸 }); console.log(data); return ( <> <div> {router.query.number}번 게시글 </div> <div>작성자 : {data?.fetchBoard?.writer}</div> <div>제목 : {data?.fetchBoard?.title}</div> <div>내용 : {data?.fetchBoard?.contents}</div> {/* 자료가 없거나 null이 뜨면 fetchBoard에 옵셔널체이닝('?' 자료가 오면 다시 리 렌더링 해줌) 붙이기 */} </> ); } 게시물을 정상적으로 잘 등록이 됩니다 플레이그라운드에서 fetchboard 조회를 해봐도 잘 나옵니다.네트워크 탭에 들어가도 아무것도 안나오고 콘솔에는 그저on-demand-entries-client.js:86 GET http://localhost:3000/section05/05-05-dynamic-routing-board-mutation-moved/23131 404 (Not Found) 뭐가 문제일까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 설치 강의를 듣고 있는데 자꾸 에러가 납니다.
해당 영역 을 17.0.2로 바꾸는데도 "@types/node": "^17.0.2", "@types/react": "^17.0.02",이렇게 뜨더니 18.2.79로 바뀌고 에러가 뜹니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.이런경우는 도대체 뭐때문에 그럴까요? 용량이 커서 그럴까요?백 서버 도메인은 접속이 잘됩니다..vscode에서도 front터미널만 자꾸 렉걸리는 현상이 생겨요 ㅠㅠ
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
socket io 미 연결 문제 (nest & flutter)
안녕하세요! socket관련한 서비스를 진행해보고 싶어서 제로초님의 강의를 들은 수강생입니다.현재 nest & flutter를 이용하고 있는데, flutter에서의 연결 및 다른 tool에서 socket io 연결이 되지 않으며 “외부 사이트로는 접근이 불가능한 오류”가 생겨서 조심스럽게 여쭤봅니다. 현재 로직은 채팅을 생성시, 채팅을 보여주는 리스트가 실시간으로 새로고침이 되는 부분을 작업중입니다.하지만, postman, httpie, hoppscotch의 부분에서 연결이 되지 않는 문제가 발생합니다.많은 방법을 찾아봤지만, 터미널에서 socket io cli를 통해서 로그는 볼 수 있지만, 다른 tool에서는 이용이 불가능한 방법에 대해서 알고 싶어서 질문드립니다!Socket io를 통해서 local, dev서버 연결 완료 하지만 postman의 socket io기능을 통해서 테스트를 진행하려고 할 때,postman으로 연결local에서는 문제가 없이 연길이 되지만, dev서버에서는 이러한 에러가 발생합니다. 또한 flutter 앱에서 연결을 하려면 다음과 같은 에러가 발생합니다.오류 메시지 "WebSocketException: Connection to 'http://~~~~.com:81/socket.io/?EIO=4&transport=websocket#' was not upgraded to websocket"는 클라이언트가 WebSocket 연결을 시도하였으나, 서버가 해당 연결을 WebSocket 프로토콜로 업그레이드하지 않았다는 것을 의미합니다. 이는 여러 가지 원인에 의해 발생할 수 있습니다: upgrade가 되지 않았다고 나와서 ,ngnix의 socket 부분에서 upgrade부분도 잘 넣어줬는데, 오류가 해결되지 않아서... 고민 끝에 질문 올립니다.Ngnix 설정부터 2주정도 시간을 들였지만, 해결이 되지 않아서…여쭤봅니다.방화벽도 해제가 되어 있는데 연결이 안되고 있습니다..다음은 nest에서 작성한 코드 입니다![chat.gateway.ts]import { WebSocketGateway, WebSocketServer, SubscribeMessage, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, ConnectedSocket, MessageBody, } from '@nestjs/websockets'; import { Server, Socket } from 'socket.io'; @WebSocketGateway() export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect { @WebSocketServer() server: Server; afterInit(server: Server) { console.log('WebSocket initialized'); } handleConnection(client: Socket) { console.log(`Client connected: ${client.id}`); // 수정: client 객체 직접 출력 대신 id 출력 } handleDisconnect(client: Socket) { console.log(`Client disconnected: ${client.id}`); } @SubscribeMessage('sendMessage') handleMessage( @ConnectedSocket() client: Socket, @MessageBody() data: { message: string } ): void { console.log(`Received message from ${client.id}: ${data.message}`); this.server.emit('newMessage', data); // 모든 클라이언트에게 메시지 전송 console.log(`Received message: ${data.message}`); } } [main.ts]import { ConfigService } from '@nestjs/config'; import { NestFactory } from '@nestjs/core'; import { NestExpressApplication } from '@nestjs/platform-express'; import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'; import { join } from 'path'; import { AppModule } from './app.module'; import { HttpExceptionFilter } from './common/exceptions/http-exception.filter'; import { SuccessInterceptor } from './common/interceptors/success.interceptor'; import { IoAdapter } from '@nestjs/platform-socket.io'; import { CustomIoAdapter } from './adapters/custom-io.adapter'; async function bootstrap() { const app = await NestFactory.create<NestExpressApplication>(AppModule); app.useWebSocketAdapter(new CustomIoAdapter(app)); const configService = app.get(ConfigService); const port = configService.get('server.port'); const mongoUrl = configService.get('DB.MONGO_URL'); console.log('MongoDB URL:', mongoUrl); app.enableCors({ origin: true, credentials: true, }); app.useStaticAssets(join(__dirname, '..', 'client'), { prefix: '/api/v1/client', }); app.useGlobalInterceptors(new SuccessInterceptor()); app.useGlobalFilters(new HttpExceptionFilter()); app.setGlobalPrefix('api/v1'); const swagger_options = new DocumentBuilder() .setTitle('Nyam-Docs') .setDescription('API description') .setVersion('2.0.1') .addApiKey( { type: 'apiKey', name: 'x-token', in: 'header', description: 'Enter token', }, 'x-token', ) .addApiKey( { type: 'apiKey', name: 'x-type', in: 'header', description: 'Enter type', }, 'x-type', ) .build(); const document = SwaggerModule.createDocument(app, swagger_options); SwaggerModule.setup('api-docs', app, document); await app.listen(port, '0.0.0.0'); console.log(`Application Listening on Port : ${port}`); } bootstrap();다음은 custom한 io입니다[custom.io.adpter.ts]import { IoAdapter } from '@nestjs/platform-socket.io'; import { INestApplication, Injectable } from '@nestjs/common'; import { ServerOptions } from 'socket.io'; @Injectable() export class CustomIoAdapter extends IoAdapter { constructor(app: INestApplication) { super(app); } createIOServer(port: number, options?: ServerOptions): any { const serverOptions: ServerOptions = { ...options, cors: { origin: '*', // 모든 도메인에서 접근 허용 methods: ['GET', 'POST', 'PUT', 'DELETE'], credentials: true }, transports: ['websocket', 'polling'], //pooling 없으면 연결 안 됨(socket) allowEIO3: true // Engine.IO 3.x 버전 클라이언트 허용 }; return super.createIOServer(port, serverOptions); } } 혹시 해결방법을 아시거나, 도움을 주실만한 정보가 있으시다면 알려주시면 정말 감사하겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 중간중간에 1일차 2일차 몇교시 알려주시는거
지켜보고 싶습니다 제가 분량조절이 잘 안될것같아서요혹시 일정표같은게 있을까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
map foreach 매개변수 이름은 product, index아니여도 되네요
그냥 첫번째 매개변수가 대상이고 두번째 매개변수는 index취급하는건가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman으로 만든 주소는 만든사람 본인만 들어가지는건가요
다른 사람은 못보는걸까요
-
미해결Do it! Node.js 프로그래밍 입문
8:34초 간단한 질문있습니다
hashedPassword 부분에서 10이 의미하는 것은 무엇인가요??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer설정 중 user 초기값이 undefined로 나오는 에러
안녕하십니까 형님진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } }default: state vs default: { return {...state}}문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 자료 다운 로드 뜨면 에러가 떠용 XML 이랑 에러..!
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
display flex 및 link가 제대로 작동 안합니다...ㅠ
안녕하세요! 두 가지 질문이 있어서 글 남깁니다. display flex가 특정 id에 적용이 안됩니다 ㅠㅠapp.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다. app.js 코드import logo from './logo.svg'; import './App.css'; import MainPageComponent from "./main/index.js" import React, { Component } from 'react'; import {Link, Switch, Route, useHistory} from 'react-router-dom' import UploadPage from './upload/index.js'; import ProductPage from './product/index.js'; import { Button } from 'antd'; import {DownloadOutlined} from '@ant-design/icons' function App() { const history = useHistory(); return ( <div> <div id="header"> <div id="header-area"> <Link to="/"> <img src="/images/icons/logo.png" /> </Link> <Button size="large" onClick={function(){ history.push('/upload'); }} icon={<DownloadOutlined />} > 상품 업로드 </Button> </div> </div> <div id="body"> <Switch> <Route exact={true} path="/"> <MainPageComponent /> </Route> <Route exact={true} path="/products/:id"> <ProductPage /> </Route> <Route exact={true} path="/upload"> <UploadPage /> </Route> </Switch> </div> <div id="footer"></div> </div> ); } export default App; app.css* { margin: 0; padding: 0; line-height: normal; } html, body, #root, #root > div { height: 100%; }; #header { height: 64px; /*가운데 정렬하는 방법*/ display: flex; justify-content: center; border-bottom: 1px solid gray; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; justify-content: space-between; } #header-area img { width: 128px; height: 36px; } #body { height: 100vh; width: 1024px; margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/ padding: 24px; } #footer { height: 200px; background-color: rgb(230,230,230); }이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요) Link 제대로 작동 안됨Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...? 감사합니다!
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
no elements in sequence 에러 관해서 질문이 있습니다.
안녕하세요. nestjs를 사용해서 백엔드를 구성하고 있는데 RxJS의 no elements in sequence라는 에러에 대해서 질문이 있습니다.const findObject = await this.respository.findOne({ where: { data } }) if (findObject) { throw new HttpException("중복 접수 되었습니다.", HttpStatus.CONFLICT); }DB에서 찾은 객체가 있을 경우, Exception으로 에러를 내면서 종료를 시키는 로직을 생각하고 작성을 했습니다. 그런데 정작 오류는 no elements in sequence 와 함께 500 응답코드가 반환되는데요.반환 할 값이 없을경우 나는 에러로 알고있는데, throw만 하고 리턴하는 값이 없어서 발생 하는 것 같습니다.그리고 발생하는 두 오류 중, no elements in sequence가 먼저 반환되어 종료되기때문에 409에러가 묻히는 것으로 추측을 하고있는데 409에러를 먼저 내는 방법은 없을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[ 오류 NotAuthRoutes ] error 'isAuth' is missing in props validation react/prop-types
ProtectedRoutes & NotAuthRoutes 에서 지속적으로 해당 에러가 뜹니다error 'isAuth' is missing in props validation react/prop-types구글링해서 여러 방법들을 동원햇지만 어떻게 해야될지 모르겟습니다
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리랜더링 highLight 질문..
10.3) React.memo와 컴포넌트 렌더링 최적화위 강의를 보다보니, 뭔가 이상해서 질문드립니다...여기서 Header컴포넌트에 memo함수로 감싸서최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..)아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?