묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[section08, 투두리스트] 할일 추가가 한개밖에 안되는 문제
안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다.onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다.또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다.몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다. App.jsximport './App.css' import Header from "./component/Header.jsx"; import Editor from "./component/Editor.jsx"; import List from "./component/List.jsx"; import {createContext, useMemo, useRef, useState} from "react"; export const ContextStateData = createContext(); export const ContextDispatchData = createContext(); const mockData = [{ id: 0, isDone: false, content: "Study react", date: new Date().getTime() }, { id: 1, isDone: false, content: "go to bed", date: new Date().getTime() }, { id: 2, isDone: false, content: "play game", date: new Date().getTime() },]; function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (content) => { const newTodos = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime() } setTodos([newTodos, ...todos]); } const memorizedDispatch = useMemo(() => { return {onCreate} }, []); return (<div className="App"> <Header/> <ContextStateData.Provider value={todos}> <ContextDispatchData.Provider value={memorizedDispatch}> <Editor/> <List/> </ContextDispatchData.Provider> </ContextStateData.Provider> </div>) } export default App 전체 코드 깃허브 주소https://github.com/ironwhale1014/one-bite-react/tree/main/todo_list_train
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
500 오류
강의 듣고 복습하면서 과제도 푸는 중에 갑자기 인터넷 페이지로 보기 위해 실행을 하니, 500번 오류가 수업(example)랑 과제(practice) 둘다 뜨면서 아무것도 뜨지 않습니다.. import 해오는 부분은 아무 이상이 없고, 과제 같은 경우도 이전에 문제 없었던 페이지에서도 같은 500번 오류가 뜹니다 ㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 문의
안녕하세요 강사님! 리액트, 타입스크립트 강의 너무 잘 듣고 있습니다. 8월 중에 nextjs 도 나온다니 기대됩니다!혹시 리액트 심화버전도 추후 진행하실 예정이 있나요? Redux 등등.. 강사님버전으로 배우면 이해하기 좋을 것 같아서요 🙂
-
해결됨대용랑 채팅 TPS에 대한 stateful 서비스 구축하기
포스트맨 테스트
안녕하세요 강사님 프론트 서버를 실행시켜 로컬에서 채팅을 입력하는 것은 아주 잘 동작하고 있습니다.다만 강의 제목 처럼 대용량에 대한 테스트를 하고 싶어서 부하 테스트를 구상중입니다.부하 테스트 구상 중에 포스트맨으로 소켓 연결을 할 때 궁금한 점이 생겨 질문드립니다. 우선 포스트맨으로 채팅 서버의 url (ws://localhost:1010/room-chat) 을 찔러보려 했습니다.웹소켓 연결은 잘 맺어졌는데, 테스트 메시지(test chatting send) 를 Send 하면 아래처럼 response 탭에 3개의 응답이 동시에 나옵니다.채팅서버로 텍스트를 보낸것 까진 잘 된 것 같은데 응답 받을 때는 항상 disconnected 문구가 나오네요,,제 추론으로는 포스트맨에서 테스트할 때 Room 에 대한 정보를 넣어주지 않아서 그런것 같습니다.프론트 코드 소스에서는 입장시 웹소켓이 연결되면서 방의 정보가 연동(?) 되는 것 같은데,,,그럼 포스트맨에서는 채팅방 정보를 어떻게 넣어줘야 테스트 할 수 있는지 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
재질문 합니다
위와 같이 작성하여 요청하였을 때이러한 에러가 나타납니다무엇이 문제일까요?검색해보니 전에도 질문이 올라왔는데 답변이 안달려있네요_id 값은 받아와지는데 name과 email 등 다른 정보 요청하면 위와 같은 오류가 나타납니다AI 답변 말고 강사님 답변 듣고싶습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs graphql Redis 최신버전 연동 방법입니다.
혹시 저처럼 초보분들을 위해서 남깁니다.저 혼자 삽질할께요 여러분들은 빠르게 세팅하고 빠르게 강의를 들어요✨혹시나 이 글을 강의 처럼 install 다해주고나서 발견하셨다면간편하게 패키지.json에서 관련된거 다 지워주고 yarn.lock를 지워주시고 yarn install 입력해주세요yarn instlal @nestjs/cache-manager cache-manager-redis-store@2.0.0 yarn install -D @types/cache-manager @types/cache-manager-redis-storecache-manager-redis-store만큼은 2.0.0으로 설치해주셔야 합니다. 그래야 redisStore에대한 타입에러가 안납니다.출처: https://4sii.tistory.com/689이 아래부터는 그냥 제 코드 복붙입니다.아래 코드는 위의 출처 사이트를 가보시면 다 적혀있으니 제 코드를 복붙하셔도되고 출처 사이트가셔서 코드 복붙하셔도됩니다.app.module.tsimport { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { CacheModule } from '@nestjs/cache-manager'; import { ConfigModule } from '@nestjs/config'; import { GraphQLModule } from '@nestjs/graphql'; import { TypeOrmModule } from '@nestjs/typeorm'; import { AuthModule } from './apis/auth/auth.module'; import { BoardsModule } from './apis/boards/boards.module'; import { FilesModule } from './apis/files/files.module'; import { PaymentsModule } from './apis/payments/payments.module'; import { PointsTransactionsModule } from './apis/pointsTransactions/pointsTransactions.module'; import { ProductsModule } from './apis/products/products.module'; import { ProductsCategoriesModule } from './apis/productsCategories/productsCategories.module'; import { UsersModule } from './apis/users/users.module'; import { CacheConfigService } from './cacheConfig.service'; @Module({ imports: [ AuthModule, BoardsModule, // FilesModule, PaymentsModule, PointsTransactionsModule, ProductsModule, ProductsCategoriesModule, UsersModule, ConfigModule.forRoot(), // env를 사용할 수 있게 해줌 GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', // context 부분이있어야~ resolver나 다른데에서 // @Context() context:IContext, context.res 등등으로 사용가능함 // req는 기본적으로 들어오지만, res는 이걸 작성해야 들어옴 context: ({ req, res }) => ({ req, res }), }), // https://docs.nestjs.com/techniques/database 참고 TypeOrmModule.forRoot({ type: process.env.DATABASE_TYPE as 'mysql', host: process.env.DATABASE_HOST, port: Number(process.env.DATABASE_PORT), username: process.env.DATABASE_USERNAME, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE_DATABASE, entities: [__dirname + '/apis/**/*.entity.*'], synchronize: true, logging: true, }), CacheModule.registerAsync({ isGlobal: true, useClass: CacheConfigService }), ], }) export class AppModule {} cache-config.service.tsimport { CacheModuleOptions, CacheOptionsFactory } from '@nestjs/cache-manager'; import { Injectable } from '@nestjs/common'; import redisStore from 'cache-manager-redis-store'; @Injectable() export class CacheConfigService implements CacheOptionsFactory { createCacheOptions(): CacheModuleOptions { const config: CacheModuleOptions = { store: redisStore, host: 'localhost', port: 6379, ttl: 60, }; return config; } }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchUseditems 나 fetchUseditem에 제목이 어떤걸로 사용하나요?
판매자: name2019 LTE 32GB: remarks240.120원: price내용: contents태그: tags찜: pickedCount주소: useditemAddress를 사용을 하는데 "삼성전자 갤럭시탭 A 10.1" 이건 어디서 가져왔는지 모르겠습니다.title은 playground를 봐도 안 나와 있는데 어떤 걸 사용을 해야 하나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
보다 직관적으로 수정하면 안되나요?
interface IUseMoveToPageReturn { onClickMoveToPage: (path: string) => () => void } export const useMoveToPage = (): IUseMoveToPageReturn => { const router = useRouter() const onClickMoveToPage = (path: string) => () => { void router.push(path) } return {onClickMoveToPage} }위 처럼 작성 후<button onClick={onClickMoveToPage("/markets")}>마켓 이동</button>호출 할 수도 있지만import { useRouter } from "next/router" export const useMoveToPage = (path: string) => { const router = useRouter() return () => router.push(path) }보다 직관적으로 하면 인터페이스로 typescript 지정 안하고<button onClick={useMoveToPage("/boards")}>게시판 이동</button>호출해서 쓸 수 있지 않나요?
-
해결됨대용랑 채팅 TPS에 대한 stateful 서비스 구축하기
채팅 클라이언트는 누구와 연결되는지
안녕하세요 강사님복습을 하다가 궁금한 점이 3가지 정도 생겨 질문드립니다.1) 채팅 유저가 최초 접속을 하면컨트롤 서버에 접속가용 가능한 채팅 서버의 주소를 응답받음해당 채팅 서버와 소켓 연결이런 흐름으로 이해했는데 맞을까요?프론트 단 코드에서는 채팅 서버와 직접 소켓 연결하는 코드만 있어서 질문드립니다. 2) 사용자가 채팅 시, 채팅 서버가 도중에 다운되면 사용자는 컨트롤 서버에 재연결 시도하여 가용가능한 채팅 서버를 재할당 받는 것인가요?3) 컨트롤 서버에 api 주소 중 /server-list 라는 api 가 있던데 해당 API 는 누가 호출하는 것인가요? 가용가능한 서버 리스트를 내려주는 API 로 이해했는데, 그럼 채팅 사용자가 해당 API 를 직접 찌르는 걸까요?
-
미해결습관부터 바꿔주는 Node.js & Express 기초
nodemon -exce 관련 오류가 나오실 때
nodemon -x babel-node src/index.js --extensions \".js,.jsx,.ts,.tsx\" --watch src위 명령어로 실행하시면 됩니당
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
frontend 강의 노션 학습 자료가 전혀 보이질 않습니다.
이렇게 다 사라졌습니다. 다른 학습 자료들은 잘 보이는데 갑자기 왜 frontend학습 자료만 안보이는 걸까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장에서 일기추가와 정렬기능이 되지않습니다.
https://github.com/heeyoung123/OneBite안녕하세요 감정일기장 부분에서 문제가 2가지 생겨서 질문 남깁니다. 일기 작성 후 리스트에 렌더링이 되지않습니다.임시일기데이터에서 정렬을 최신순,오래된순을 바꿔도 적용이 안됩니다.무엇이 문제일까요..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 공부 방식에 대해 질문드립니다.
현재 18강까지 강의를 들었습니다. 수업 방식이 굉장히 효율적이고 짜임새가 있어 독학하기 굉장히 좋다는 느낌을 많이 받았습니다. 근데 저의 공부 방식이 효율적인지 비효율적인지 이 글을 보고 코드캠프 측의 견해를 알려주시면 좋겠다는 생각을 들어 글을 남겨봅니다.현재 저의 방식은 이렇습니다. ex) 섹션 17, 18강을 듣는다 -> 개념을 노션에 정리하고 이해한다 -> 퀴즈와 포트폴리오를 될 수 있으면 하루에 한개씩 푼다 -> 다 풀기 전에 다음 섹션의 강의를 듣는다.입니다.그런데 한 차례의 섹션을 듣고 퀴즈와 포트폴리오를 모두 클리어하고 다음 강의를 듣는게 맞는지,아님 저처럼 미리미리 들어놓고 다시 한번 재복습 느낌으로 그날그날 해당 섹션의 퀴즈와 포트폴리오를 풀면서찾아보는게 맞는건지 의문이 들어 글을 남겨봅니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Cannot return null for non-nullable field ~~~ 에러
위와 같이 작성하여 요청하였을 때이러한 에러가 나타납니다무엇이 문제일까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
트랜잭션 기능을 서비스 함수로 구현하는 방법
안녕하세요 스스로 해보기를 위해 강의 후반부에 있는 sequelize 에서 제공하는 transaction 기능을 추가하여 낙찰한 경우에 t수행하는 상품에 낙찰자 ID를 넣고 낙찰자의 금액을 까는 함수를 서비스 함수로 처리해서 하려고 하는데 상품등록을 하는 단계에서 다음과 같은 에러가 발생합니다 .어떻게 하면 될까요?관련된 코드 부분을 같이 올립니다sequelize trasnation 을 적용해서 auctionedOff 함수를 다음과 같이 생성하였습니다services/index.jsconst sequelize = require('sequelize'); const { Auction , Good, User}= require('../models'); exports.auctionedOff = async ( good ) => { const t = await sequelize.transaction(); try { const success = await Auction.findOne({ where: { GoodId: good.id }, order: [['bid', 'DESC']], transaction : t, }); if (!success) { return; } await good.setSold(success.UserId); //낙찰 await User.update({ money: sequelize.literal(`money - ${success.bid}`), }, { where: { id: success.UserId }, transaction: t, }); await t.commit(); } catch (error) { await t.rollback(); } };그리고 이 함수를 다음과 같이 contollers/index.js 파일에서 아래 코드 처럼 불러서 실행 하고자 했습니다const { Op } = require('sequelize'); const { Good, Auction, User, sequelize } = require('../models'); const auctionedOff = require('../services'); const schedule = require('node-schedule'); exports.createGood = async(req, res, next) => { try { const { name, price } = req.body; const good = await Good.create({ OwnerId: req.user.id, name, img: req.file.filename, price, }); const end = new Date(); end.setDate(end.getDate() + 1); // 하루 뒤 const job = schedule.scheduleJob(end, auctionedOff(good)); job.on('error', (err) => { console.error('스케줄링 에러', err); }); job.on('success', () => { console.log(`${good.id} 스케줄링 성공`); }); res.redirect('/'); } catch (error) { console.error(error); next(error); } };
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 배포관련 질문드립니다 !
안녕하세요 배포를 마쳐서 이런식으로 떠서 Production 링크를 누르면 저는 잘 들어가지는데 이 링크를 공유를 하면 다른사람들은 Vercel에 로그인을 하라는 창이 뜨더라고요,,, 어떤 해결방안이 있을까요,,,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
선생님 근데 docker로 mysql 돌릴때 데이터는
데이터는 어디에 저장이될까요?도커컨테이너에 저장이되는걸까요?만약에 이 강의를 완강하고 제 컴퓨터로 서버를 만들어 돌린다고했을때 보통 데이터는 어디에 저장하는걸 추천하시나요?도커컨테이너에 저장하드디스크에 저장하고 주기적으로 aws s3에 업로더해준다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel 배포 설정 오류
안녕하세요.vercel를 통한 배포를 위해 설정을 하던 중 In which directory is your code located? ./이 부분에서 엔터를 눌러서 넘어가려 했는데 엔터를 누르자Error: Your Team encountered an unknown problem. Please reach out to our support team for details.이런 에러가 뜨면서 진행이 막히고 있습니다.혹시 해결 방법을 알려 주실 수 있으신가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
el.createReadStream is not a function이라고나옵니다
graphql-upload 버전 13.0.0으로 강의와 똑같이 맞춰줬는데도 에러가납니다 ㅠ_ㅠ혹시 해결방안이있을까요?계속 검색중인데 힘드네유..혹시나 제가 해결했다면 해결했다고 댓글달겠습니다해결했다는 댓글이 없으면 계속해서 트라이중인거니 댓글로 도와주시면 너무 감사하겠습니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장 useRef
강의 내에서 mockData를 id: 3 까지 만들고, useRef 초기값을 3으로 주었는데, 이렇게되면 onCreat가 처음으로 호출됐을 때 최초 생성된 일기가 id를 3으로 가지게되고(후위증감연산자로 그 다음 생성된 일기부터 id가 4로 생성됨), 이미 만들어져있는 3번일기랑 id값이 같아지게 됩니다. 그래서 최조 생성된 일기를 onUpdate해주었을때 수정내용으로 바뀐 최초 생성된 일기, 수정내용으로 바뀐 3번일기 이렇게 똑같은 내용으로 2개가 생기는 상황이 발생합니다. 따라서 useRef 초기값을 4로 주는게 맞지않나 문의드립니다.