묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import { User } from "../entities/User"
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.백엔드 entities에서 Post, Sub, Comment는 아래와 같이import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment"처럼 불러올 수 있게 작성하셨는데 User만import {User} from "../entities/User"중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌export class User extends BaseEntity 로 작성한 이유가 있을까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
post?.voteScore undefined
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다.src/pages/r/[slug]/[identifier]/[slug].tsx 작성중{post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다.타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요.그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get VoteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
DI(의존성 주입)을 왜 해야하나요?
cats.service.ts 파일import { Injectable } from '@nestjs/common'; @Injectable() export class CatsService { getAllCats(): string { return 'get all cats1'; } } export const getAllCatsTest = () => { return 'get all cats2'; }; cats.controller.ts 파일import { CatsService } from './cats.service'; import * as catsService2 from './cats.service'; import { Controller, Get, } from '@nestjs/common'; @Controller('cats') export class CatsController { constructor(private catsService: CatsService) {} @Get() getAllCat() { return this.catsService.getAllCats(); } @Get('2') getAllCat2() { return catsService2.getAllCatsTest(); } } Dependency Injection을 사용해야하는 이유가 명확히 이해가 안됩니다. A라는 클래스에서 B라는 클래스를 인스턴스화 (new 키워드 사용) 했을 때, A클래스가 B클래스에 대해서 의존성이 발생하고만약에 B 클래스의 수정점이 발생한다면, A클래스도 수정해줘야하는 부분은 인지를 했습니다. 그런 경우에 변화를 유연하게 대응하기 위해 A클래스에서 직접 인스턴스화를 하는것이 아니라,인스턴스화된 클래스를 주입받아 사용만 하는걸 Dependency Injection(의존성 주입)으로 이해했습니다. 하지만, import해서 쓰면 되는걸 왜 굳이 의존성주입이라는 형태로 사용해야하는지 이해를 못했습니다. 제가 위에 예시로 작성한 service 파일과 controller를 보시면,getAllCat()는 의존성 주입해서 사용한거고, getAllCat2는 import한 서비스를 사용한겁니다. 어떠한 이유에서 의존성 주입의 개념을 사용해야하는지 명쾌하게 알고 싶습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드 만드는거 질문있습니다
렌딩페이지만들기 - 카드만들기 강의 3분40분에컴포넌트 return 안에 Products.map을 돌리는게 아니고 따로 함수를 빼서 renderCards를 처리하셨는데따로 빼는 이유가 있나요?실무에선 return에서 map으로 거의 돌렸어서 궁금해졌습니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
토큰생성 오류, 무한로딩나시는분들 이거 해보세요
userSchema.methods.comparePassword=function(plainPassword, cbfn){ //암호화된 비밀번호와 plain패스워드가 같은가? //plain패스워드를 암호화 후 체크 console.log("user.jsmethod") bcrypt.compare(plainPassword, this.password, function(err, isMatch){ if(err) return cbfn(err) cbfn(null, isMatch)//ismatch=true }) }if(err) return cbfn(err), 에서 ,빼니까 잘 되네요console.log는 필요없으니 빼시면 됩니다 강의보니까 ,에서 ;로 수정하셨던데 이걸 빼먹으신거 같아요
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
Class-Validator MODULE_NOT_FOUND 에러
강의를 잘 따라 가면서 공부를 하고 있는데 강좌에 나와있는대로 class-validator 을 npm -i class-validator 을 설치 후 nest를 실행하니 nest 에서 Cannot find module 'class-validator/types/decorator/decorators' 라는 에러를 나타냅니다. 혹시 몰라서 API 공식문서 에 있는 npm i class-validator class-transformer 을 다시 설치를 해보아도 같은 에러를 나타내는데 이럴 경우 어디서 확인을 해보아야 할까요?혹시 몰라서 package.json 을 살펴 보았습니다만 dependencies 내에 설치가 되어있는것으로 나왔습니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build가 되지 않습니다..
Windows PowerShellCopyright (C) Microsoft Corporation. All rights reserved.PS C:\Users\PC\Desktop\emotion diary> npm install -g servechanged 89 packages, and audited 90 packages in 10s23 packages are looking for funding run npm fund for detailsPS C:\Users\PC\Desktop\emotion diary> cd helloPS C:\Users\PC\Desktop\emotion diary\hello> serve -g buildserve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\PC\AppData\Roaming\npm\ser ve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.mic rosoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ serve -g build+ ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccessPS C:\Users\PC\Desktop\emotion diary\hello> npm run build> hello@0.1.0 build> react-scripts buildCreating an optimized production build...Compiled with warnings.[eslint] src\components\DiaryItem.js Line 32:16: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-textsrc\components\DiaryList.js Line 1:15: 'useEffect' is defined but never used no-unused-varssrc\components\EmotionItem.js Line 6:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-textsrc\pages\Diary.js Line 20:7: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 37:7: React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 58:25: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-textsrc\pages\Edit.js Line 5:9: 'getStringDate' is defined but never used no-unused-vars Line 22:7: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 39:7: React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array react-hooks/exhaustive-depsSearch for the keywords to learn more about each warning.To ignore, add // eslint-disable-next-line to the line before.File sizes after gzip: 54.79 kB build\static\js\main.544a876e.js 1.42 kB build\static\css\main.b7fc6af2.cssThe project was built assuming it is hosted at /.The build folder is ready to be deployed.You may serve it with a static server: serve -s buildFind out more about deployment here: https://cra.link/deploymentPS C:\Users\PC\Desktop\emotion diary\hello> serve -s buildserve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\PC\AppData\Roaming\npm\serve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.mic rosoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ serve -s build+ ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccessPS C:\Users\PC\Desktop\emotion diary\hello> npm install -g serve와npm run build를 했습니다 you may serve it with a static server라는 메시지와함께 serve -s build라는 메세지도 떴는데 serve -s build라고 명령어를 입력했는데도 입력이 되지 않습니다... 루트폴더 문제인가요? 문제가 무엇인가요
-
미해결
sequelize cascade 옵션을 사용해서 delete 할때
안녕하세요.웹 프로젝트를 진행하면서 궁금한 점이 있어서 질문드립니다.mysql과 sequelize를 사용하며users 테이블과 contents 테이블이 1:N 관계를 가지고 있습니다.그래서 users 데이터를 delete 할 때 자식으로 묶인 contents 데이터들을cascade 옵션을 통해 같이 delete 시키고자 합니다.models/contents.jsmodels/users.js 이때 그냥 삭제시키는 게 아니라 users 테이블과 contents 테이블 모두paranoid 옵션을 통해 deletedAt을 생성시키고 삭제된 날짜를 찍히게 하고자 하는데현재 user를 delete 하면 user는 삭제가 되어 deletedAt이 잘 나오지만 content는 삭제가 되지 않아deletedAt이 나오지 않는 상황입니다.구글링을 통해 여러 방법을 시도해 보았지만 해결되지 않아 질문드립니다.hooks나 api를 사용하지 않고 cascade를 통해 자식 요소까지삭제되면서 deletedAt이 잘 나올 수 있는 효과적인 방법이 있을까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
class name 질문
안녕하세요.classname 작성하실때 어떤건 className = {name} 이런식으로 괄호 안에 넣고 어떤건 단순히 className = "name" 이렇게 하시는데 혹시 어떤 차이가 있고 이유는 무엇인지 궁금합니다 ㅠㅠ 이미 가르쳐주셨던건데 제가 모르는거 같기도 하네요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
cookie-parser Invalid or unexpected token error
영상에 따라서 단순하게 cookie-parser 설치하고 import cookie-parser 한다음에 app.use(cookieParser()) 진행하면 상단에 이미지처럼 에러가 발생하더라구요. cookie-parser을 제거하면 cookie가 정상적으로 저장되는 것을 볼 수 있었습니다. 어떤 부분을 놓친 것일까요server.tsimport express from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source" import authRoutes from "./routes/auth"; import subRoutes from "./routes/subs"; import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); dotenv.config(); app.use(cors({ origin: process.env.ORIGIN, credentials: true })) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()) app.get("/", (_, res) => res.send("running")); app.use('/api/auth', authRoutes); app.use("/api/subs", subRoutes); const PORT = process.env.PORT; console.log('PORT', PORT) app.listen(PORT, async () => { console.log(`server running at http://localhost:${PORT}`); AppDataSource.initialize().then(async () => { console.log("data initialize...") }).catch(error => console.log(error)) })
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Router 예제 복붙 - 오류
20강에서Router 예제 복붙 시 오류안나는 최종본입니다 !!import React from "react"; import { Route, Routes, BrowserRouter } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import RegisterPage from "./components/views/RegisterPage/RegisterPage"; function App() { return ( <BrowserRouter> <div> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Routes> <Route exact path="/" element={LandingPage()}/> <Route exact path="/login" element={LoginPage()}/> <Route exact path="/register" element={RegisterPage()}/> </Routes> </div> </BrowserRouter> ); } export default App;
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
return문
자바스크립트 함수 인강에서 return문 개념이 너무 헷갈려서요.function getArea(width*height){let area = width* height;return area;}let area1 = getArea(100,200); return을 쓰면 위와 같이 항상 새로운 변수를 지정해서 getArea함수를 호출해야하나요? 왜 return을 사용하는지 잘 모르겠어요..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
CREATE 상태변화 로직 분리 시 newItem 생성을 reducer에서 하는 이유
안녕하세요~ 강의 듣던 중 궁금증이 생겨 질문 남깁니다useReducer로 CREATE 상태 로직을 분리할 때, 기존과 다르게 newItem을 reducer에서 생성하는 이유가 무엇인가요?아래처럼 기존과 동일한 방식으로 newItem을 onCreate 내에서 생성했을 경우에도 정상 동작하는 것 같은데 혹시 동작이나 성능면에서 차이점이 있나요?+) 계속 생각할수록 로직을 분리할 때 어디서부터 어디까지 분리해야할지 기준을 잘 모르겠어요,,ㅠ강의에서 CREATE로직 분리 시 newItem을 reducer에서 생성한 것 처럼, INIT로직 분리 시에도 initData를 reducer에서 생성 할 수 있을 것 같은데(아래 코드).. 분리하는 로직의 기준점? 같은걸 어떻게 잡아야할지 잘 모르겠습니다ㅜㅜ 혹시 어떤 기준으로 분리해야할지 규칙이나 팁같은게 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onCreate에서 data상태 관련 질문입니다
안녕하세요 강사님!최적화3 - useCallback 강의 듣던 중 의문점이 생겨 질문 남깁니다.onCreate에 useCallback을 사용하고 의존성 배열을 빈 값으로 두면 mount시에 한번만 실행되기 때문에 data state가 초기값인 빈 배열인 상태이다 <= 까지는 이해하였습니다.그런데 함수형 업데이트를 이용해서 인자로 data를 전달하면 최신 data state를 반영할 수 있다는 부분이 잘 이해가 안갑니다.onCreate가 mount시에 생성되고 생성시의 data state가 계속 유지된다면 인자로 전달되는 data state또한 초기값인 빈 배열이 들어가게되어 결국 setData(([]) => [ newItem, [] ]) 처럼 동작해야 하는것이 아닌가요?어떻게 인자로 전달되는 data에는 최신 상태가 반영되는건가요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
도저히 모르겠어서 질문 남깁니다
TypeError: user.comparePassword is not a function >>비주얼에서는 이런식으로 자꾸 오류가 뜨고, 포스트맨에서는 Could not get responseError: read ECONNRESET이렇게 뜹니다,,!!! post는 http://localhost:5000/api/users/login 이던 http://localhost:5000/login이던 다 안돼요,,, 답변 부탁드립니다ㅠㅠㅠㅠㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 redux-persist 질문 드립니다.
안녕하세요 제로초님redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다.import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper;이렇게 스토어를 만들었습니다.그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나.next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다.둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
혹시 저처럼 s3에 업로드할 때 아무 이미지도 안 올라시는 분들이 있으면 봐주세요
혹시 저처럼 buffuer가 찍히지 않으신 분들은storage에 multer.memoryStage()를 추가하면 buffer가 찍히실 겁니다.https://github.com/expressjs/multer#memorystorage
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.
안녕하세요?강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가.env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
GET /api/auth/me 304
커뮤니티생성 - 커뮤니티 생성핸들러 생성하기(2) 까지 강의를 들은 상황에서 첫 로그인은 network status가 200이 뜨는데 그 다음부터는 어느 페이지든 접근시 GET /api/auth/me 304 가 나옵니다. routes/auth.ts 에서 [변경전] const me = async (_: Request, res: Response) => { return res.json(res.locals.user) } [변경후] const me = async (_: Request, res: Response) => { return res.status(200).json(res.locals.user) }바꾸었으에도 계속 그러네요.. 왜 그런지 아시나요 아래와 같은 글을 발견했지만 캐싱 이후 그냥 304를 날린다는데 이게 맞는건가요..?https://www.inflearn.com/questions/14571
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run start 오류 제발요,,ㅠ
위와 같이 정상적으로 컴파일 되었다고 하지만,이렇게 오류가 뜹니다... 도저히 해결 방법을 모르겠어요!!proxy설정 전에는 정상적으로 작동해서 다시 proxy에 관한 코드를 다 주석처리하고 해봤는데 저렇게 뜨네요 ㅠㅠ