176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
안녕하세요 node js로 웹 개발을 시작하게 된 학생입니다 아직 많은 정보가 없어서 node js 코드를 보면서 강의를 공부하고싶은데 리엑트 템플릿 파일 제공해준 폴더에 있는 js 코드가 node js 파일인가요?? 좋은 강의 감사합니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장은 아니지만 앞서 연습한 todolist 를 일단 배포해보고싶어서 vercel 에 회원가입을 하고 로그인까지 해놓고 다시 vscode에서 터미널에서 vercel login 을 입력하고 엔터를 치면 아래와 같이 에러메시지가 떠서 더이상의 진행을 못했는데요, 혹시 다른 뭔가를 더 해야 하는건지요 F:\★수업★\WEB수업\웹퍼블리싱\11-Front-End\React\react-study\6-todolist>vercel login 'vercel'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
현재 아래와 같은 에러를 마주쳤습니다. my-server_1 | TypeError: res.setHeader is not a function my-server_1 | at JwtGoogleStrategy.strategy.redirect (/myFolder/node_modules/passport/lib/middleware/authenticate.js:340:13) my-server_1 | at stored (/myFolder/node_modules/passport-oauth2/lib/strategy.js:285:14) my-server_1 | at NullStore.store (/myFolder/node_modules/passport-oauth2/lib/state/null.js:5:3) my-server_1 | at JwtGoogleStrategy.OAuth2Strategy.authenticate (/myFolder/node_modules/passport-oauth2/lib/strategy.js:297:28) my-server_1 | at attempt (/myFolder/node_modules/passport/lib/middleware/authenticate.js:378:16) my-server_1 | at authenticate (/myFolder/node_modules/passport/lib/middleware/authenticate.js:379:7) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:88:3 my-server_1 | at new Promise (<anonymous>) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:80:83 my-server_1 | at GqlAuthGuard.canActivate (/myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:44:32) 제 코드는 다음과 같습니다. auth.resulver.ts 파일의 일부분입니다. @UseGuards(GqlAuthGuard('google')) @Mutation(() => String) loginGoogle( @Context() context: IContext, // ): void { console.log('context::', context); } 그래프큐엘 가드 부분입니다. import { ExecutionContext } from '@nestjs/common'; import { GqlExecutionContext } from '@nestjs/graphql'; import { AuthGuard } from '@nestjs/passport'; // graphql 인가 가드 설정 export const GqlAuthGuard = (name: string) => { return class GqlAuthGuard extends AuthGuard(name) { getRequest(context: ExecutionContext) { const gqlContext = GqlExecutionContext.create(context); return gqlContext.getContext().req; } }; }; jwt google 부분입니다. import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-google-oauth20'; export class JwtGoogleStrategy extends PassportStrategy(Strategy, 'google') { constructor() { super({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: 'http://localhost:3001/login', scope: ['email', 'profile'], }); } validate(accessToken, profile) { console.log('profile:', profile); return { ... }; } } 혹시 제가 실수한 부분이있을까요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
freeboard_frontend 이미지 업로드 부분 진행중인데 upload 버튼 클릭해서 이미지를 선택하면 Cannot destructure property 'url' of 'undefined' as it is undefined. 이라는 안내창이 뜨면서 정상적으로 실행이 되지 않습니다.. 원인을 알 수 있을까요? 다른 분 문의 글을 보고 혹시 apollo셋팅 문제인가 싶어 yarn add apollo-upload-client 와 yarn add -D @types/apollo-upload-client 를 추가로 설치 해봤는데도 문제 해결이 안됩니다..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위 사진과 같이 search에 'Terra'를 검색했는데 "usedItem":null 인 정보까지 받아와지는데 왜 이런가요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 실행은 되는데 왜이렇게 자꾸 오류가 나는걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
브라우저에 내용은 모두 잘 입력이 되고 console창에서도 _id가 잘 나왔는데 graphql로 넘어가서 등록된 부분을 확인하려 하니 등록된 게시물이 없다고 나옵니다. 어떤 부분이 문제인걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
필요한 요소들 다 설치 되어있고, 오타없이 작성했는데도 Unable to find template plugin matching '-typescript' 오류와 함께 types.ts가 생성이 안됩니다. 혹시나해서 >yarn add -D @graphql-codegen/typescript 다시 설치했지만 같은 오류가 뜹니다. >@graphql-codegen/typescript-plugin 도 설치해봤는데 아래와 같은 오류로 설치가 안되네요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
background-image에 적용하는데 있어서 문의가 있습니다.outerbox.png 이미지 키기는 807px 544px 로 나옵니다.현재 outerbox css class에서 width 888px로 주면서 대략 81px 정도가 이미지가 반복되어서 표시됩니다. 이미지 반복을 없애기 위해서 아래와 같은 css를 추가했는데 이번에는 이미지가 잘려서 보입니다. background-repeat: no-repeat background-size: cover 강사님 처럼 888px 544px div에 다른 이미지를 일치시켜서 표기하려면 어떻게 해야하나요 ?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의대로 package.json에 scripts 내 start에 경로 추가 후("node src/index.js) 터미널에 npm run start 입력 시 아래와 같은 error가 발생됩니다. PS C:\Users\HOME\Desktop\oneBite-React\section03> npm run start > section03@1.0.0 start > node src/index.js npm error code ENOENT npm error syscall spawn C:\Program Files\Git\bin\git.exe npm error path C:\Users\HOME\Desktop\oneBite-React\section03 npm error errno -4058 npm error enoent spawn C:\Program Files\Git\bin\git.exe ENOENT npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\HOME\AppData\Local\npm-cache\_logs\2024-07-14T05_57_50_914Z-debug-0.log
미해결
실무 중심! FE 입문자를 위한 React
제목 그대로 SurveyPie 기획서 pdf를 어디서 받아야 하는지 모르겠습니다. 처음에 받은 "학습노트_리엑트기초심화.pdf" 파일에서는 디자인 가이드와 코드만 존재합니다. 기획서 어디서 받을 수 있는지 알려주시면 감사하겠습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다. onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다. 또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다. 몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다. App.jsx import './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번 오류가 수업(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 답변 말고 강사님 답변 듣고싶습니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
혹시 저처럼 초보분들을 위해서 남깁니다. 저 혼자 삽질할께요 여러분들은 빠르게 세팅하고 빠르게 강의를 들어요 ✨ 혹시나 이 글을 강의 처럼 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-store cache-manager-redis-store만큼은 2.0.0으로 설치해주셔야 합니다. 그래야 redisStore에대한 타입에러가 안납니다. 출처: https://4sii.tistory.com/689 이 아래부터는 그냥 제 코드 복붙입니다. 아래 코드는 위의 출처 사이트를 가보시면 다 적혀있으니 제 코드를 복붙하셔도되고 출처 사이트가셔서 코드 복붙하셔도됩니다. app.module.ts import { 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.ts import { 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; } }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
판매자: name 2019 LTE 32GB: remarks 240.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 를 직접 찌르는 걸까요?
