묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import- export 필수
약 7분경 css는 그냥 import로 불러오시는 강의 내용이 있는데요, 이전에 import를 하기 위해선 원본 파일에서 꼭 export를 해줘야한다고 말씀해주셨던 것 같아서요.js파일과 다르게 css 파일을 불러올때는 꼭 export를 하지 않아도 되는 걸까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
팔로잉, 팔로워 목록은 잘 불러왔으나 콘솔에 Warning: Failed prop type: The prop `data` is marked as required in `FollowList`, but its value is `undefined`. 에러가 발생합니다!
안녕하세요 제로초님!! 해당 강의 영상을 끝까지 수강한 수강생 입니다!항상 강의 영상 잘 보고 있습니다. 복잡한 질문에도 친절히 답해주셔서 감사합니다~! 첫 번째 에러를 번역해보니 'FollowList'에 prop 'data'가 필요한 것으로 표시되어 있지만 값은 'undefined'입니다. 라고 뜹니다.문제가 생긴 profile.js 에서 console.log(data)를 해보니 역시 data가 undefined 가 나옵니다.FollowList.js의 data가 profile.js로 전달이 되지 않은 것인가요? 만약 그렇다면 어디를 봐야 하는지 힌트 부탁 드립니다!(data의 프롭타입은 배열입니다!)https://github.com/ZeroCho/react-nodebird/blob/master/ch6/front/pages/profile.js질문을 올리기 전에 제로초님 깃허브를 꼼꼼히 참고하고 스스로 구글링 해보았지만 해결이 어려워 질문 올립니다!포기하지 않고 끝까지 완강을 목표로 하겠습니다! 아래 사진은 상단 이미지에서 잘린 에러 전체입니다.감사합니다!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
https 적용 후에 이미지 주소에서 에러가 발생합니다.
http일 때는 문제가 없었는데 https 적용 후에 문제가 발생합니다.강의에서 알려주신 대로 하면 에러가 나와서 제로초 님 블로그 보고 cerbot이랑 nginx 설치했습니다.아래 코드만 강의와 다르게 했습니다.sudo snap install certbot --classic sudo apt-get install nginxsudo certbot --nginxhttps://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 에러 내용은 다음과 같습니다.https 적용 전https://abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpg https 적용 후https://abc/https:/abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpghttp://abc/ 이 부분을 없애는 방법을 알고 싶습니다. nginx.conf는 아래와 같습니다.server { // 실제로는 구매한 도메인 넣었습니다. server_name abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }server { // 실제로는 구매한 도메인 넣었습니다. server_name api.abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
Exception Filter편에서 POST할 때 EntityMetadataNotFoundError에러가 납니다.
// users.module.ts import { Module } from '@nestjs/common'; import { UsersService } from './users.service'; import { UsersController } from './users.controller'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Users } from '../entities/Users'; @Module({ imports: [TypeOrmModule.forFeature([Users])], providers: [UsersService], controllers: [UsersController], }) export class UsersModule {}// app.module.ts import { MiddlewareConsumer, Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { ConfigModule } from '@nestjs/config'; import { LoggerMiddleware } from './middlewares/logger.middleware'; import { UsersModule } from './users/users.module'; import { WorkspacesModule } from './workspaces/workspaces.module'; import { ChannelsModule } from './channels/channels.module'; import { DmsModule } from './dms/dms.module'; import { UsersService } from './users/users.service'; import * as process from 'process'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Users } from './entities/Users'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true }), UsersModule, WorkspacesModule, ChannelsModule, DmsModule, TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: process.env.DB_USER, password: process.env.DB_PW, database: process.env.DB_NAME, entities: ['./entities/*.{js,ts}'], synchronize: false, logging: true, keepConnectionAlive: true, migrations: [__dirname + '/src/migrations/*.ts'], }), TypeOrmModule.forFeature([Users]), ], controllers: [AppController], providers: [AppService, UsersService], }) export class AppModule { configure(consumer: MiddlewareConsumer): void { consumer.apply(LoggerMiddleware).forRoutes('*'); } }// users.controller.ts import { Body, Controller, Post, Get, Req, Res, UseInterceptors, } from '@nestjs/common'; import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger'; import { JoinRequestDto } from './dto/join.request.dto'; import { UsersService } from './users.service'; import { UserDto } from '../common/dto/user.dto'; import { User } from '../common/decorators/user.decorator'; import { UndefinedToNullInterceptor } from '../common/interceptors/undefinedToNull.interceptor'; @UseInterceptors(UndefinedToNullInterceptor) @ApiTags('USER') @Controller('api/users') export class UsersController { constructor(private usersService: UsersService) {} //..... @ApiOperation({ summary: '회원가입' }) @Post() async join(@Body() body: JoinRequestDto) { await this.usersService.join(body.email, body.nickname, body.password); }import { HttpException, Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import { Users } from '../entities/Users'; import bcrypt from 'bcrypt'; @Injectable() export class UsersService { constructor() {} @InjectRepository(Users) private usersRepository: Repository<Users>; getUser() {} async join(email: string, nickname: string, password: string) { const user = this.usersRepository.findOne({ where: { email } }); if (!email) { throw new HttpException('이메일이 없습니다.', 400); } if (!nickname) { throw new HttpException('닉네임이 없습니다.', 400); } if (!password) { throw new HttpException('비밀번호가 없습니다.', 400); } if (user) { throw new HttpException('이미 존재하는 사용자입니다.', 400); } const hashedPassword = await bcrypt.hash(password, 12); await this.usersRepository.save({ email, nickname, password: hashedPassword, }); } }// a-nest/src/entities/Users.ts import { Column, Entity, Index, OneToMany, PrimaryGeneratedColumn, } from "typeorm"; import { Channelchats } from "./Channelchats"; import { Channelmembers } from "./Channelmembers"; import { Dms } from "./Dms"; import { Mentions } from "./Mentions"; import { Workspacemembers } from "./Workspacemembers"; import { Workspaces } from "./Workspaces"; @Index("email", ["email"], { unique: true }) @Entity("users", { schema: "sleact" }) export class Users { @PrimaryGeneratedColumn({ type: "int", name: "id" }) id: number; @Column("varchar", { name: "email", unique: true, length: 30 }) email: string; @Column("varchar", { name: "nickname", length: 30 }) nickname: string; @Column("varchar", { name: "password", length: 100 }) password: string; @Column("datetime", { name: "createdAt" }) createdAt: Date; @Column("datetime", { name: "updatedAt" }) updatedAt: Date; @Column("datetime", { name: "deletedAt", nullable: true }) deletedAt: Date | null; @OneToMany(() => Channelchats, (channelchats) => channelchats.user) channelchats: Channelchats[]; @OneToMany(() => Channelmembers, (channelmembers) => channelmembers.user) channelmembers: Channelmembers[]; @OneToMany(() => Dms, (dms) => dms.sender) dms: Dms[]; @OneToMany(() => Dms, (dms) => dms.receiver) dms2: Dms[]; @OneToMany(() => Mentions, (mentions) => mentions.sender) mentions: Mentions[]; @OneToMany(() => Mentions, (mentions) => mentions.receiver) mentions2: Mentions[]; @OneToMany( () => Workspacemembers, (workspacemembers) => workspacemembers.user ) workspacemembers: Workspacemembers[]; @OneToMany(() => Workspaces, (workspaces) => workspaces.owner) workspaces: Workspaces[]; } 서버 실행 후 http://localhost:3002/api/users URL로 빈 값을 POST로 보내면 콘솔창에 400 이메일이 없습니다. 라는 문구가 뜬 이후에C:\Users\xxx\Documents\Project\NestProject\a-nest\src\data-source\DataSource.ts:448 if (!metadata) throw new EntityMetadataNotFoundError(target) ^ EntityMetadataNotFoundError: No metadata for "Users" was found. at DataSource.getMetadata (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\data-source\DataSource.ts:448:30) at Repository.get metadata [as metadata] (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\repository\Repository.ts:53:40) at Repository.findOne (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\repository\Repository.ts:597:42) at UsersService.join (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\users\users.service.ts:13:39) at UsersController.join (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\users\users.controller.ts:37:29) at C:\Users\xxx\Documents\Project\NestProject\a-nest\node_modules\@nestjs\core\router\router-execution-context.js:38:29 at processTicksAndRejections (node:internal/process/task_queues:95:5)위와 같이 EntityMetadataNotFoundError에러가 발생합니다. DB 커넥션 부분도 확인해보고, entities 부분이 문제인가 싶어 아래와 같이 변경도 해보았지만TypeOrmModule.forRoot({ entities: ['./entities/*.{js,ts}'], ],해결되지 않아 질문드립니다.추가적으로 \data-source\DataSource.ts 부분과\repository\Repository.ts부분은 실제 디렉토리에 없는 것들인데 왜 뜨는지도 모르겠습니다.해결 방법이 있을까요?
-
미해결습관부터 바꿔주는 Node.js & Express 기초
해당 강의 깃허브 주소나
해당 강의 깃허브 주소나디스코드 주소는 어디있나요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
혹시 제로초님 webstorm 세팅을 알 수 있을까요?
저번에 Unresolved variable 워닝이 뜬다고 했던 수강생입니다.저 워닝 안 뜨게 하려고 종일 구글링했는데도 해결 방법을 못 찾았습니다 ㅠㅠ제로초님 강의에서는 함수로 잘 인식하던데 혹시 수고롭지 않으시다면 webstorm 세팅을 알려주실 수 있나요?Settings에서 Languages & Frameworks => JavaScript => Libraries에 Node.js Core도 체크되어 있고 구글에서 하라는 건 다 해봤는데 안 되네요 ㅠㅠmodels/index.js에서 const sequelize = new Sequelize(~~); 에서 Sequelize도 constructor가 아닌 function으로 인식하네요따로 설정 안 하셨다면 어쩔 수 없지만 혹시 따로 세팅하신 게 기억이 나신다면 공유해주시면 감사하겠습니다
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
isLoggedIn추가 후 로그아웃 안되는 문제 발생
안녕하세요 선생님상황)req.logout안에 콜백 함수넣어서 로그아웃이 잘 되고 있었는데, isLoggedIn추가 후 상태코드 401이 뜨고 preview에는 로그인이 필요합니다가 뜨며 로그아웃 안되는 상황입니다. network로그인 했을 때로그아웃 했을 때network로그아웃 했을 때preview redux로그인 했을 때로그아웃 했을 때시도해본것)로그인 후 세션정보 콘솔 출력router.post('/login', isNotLoggedIn, (req, res, next)=> { passport.authenticate('local',(err, user, info) => { if(err) { console.error(err); return next(err); } if(info) { return res.status(401).send(info.reason); } return req.login(user,async(loginErr)=> { if(loginErr) { console.error(loginErr); return next(loginErr); } console.log('로그인 후 세션 정보:', req.session); //생략 }); })(req, res, next); }); //POST /user/loginuser.js의 logout에서 에러 발생시 출력 => 출력 xrouter.post('/logout', isLoggedIn, (req, res) => { req.logout((err) => { if (err) { console.error(err); return res.status(500).send('로그아웃 중 오류가 발생했습니다.'); } res.send('ok'); req.session.destroy(); }); });Middlewares에서 req.isAuthenticated()확인 => 결과 falseexports.isLoggedIn = (req, res, next) => { console.log('로그인 상태 확인:', req.isAuthenticated()); if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } }질문)req.isAuthenticated가 false로 나와서 로그아웃이 안되는데 원인과 해결방법이 궁금합니다. 혹시 로그인하면 이것을 true가 되게 바꾸는 방법이 있나요?req.isAuthenticated()작성한 코드) UserProfileimport React, {useCallback} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {Card, Avatar, Button} from 'antd'; import styled from 'styled-components'; import {logoutRequestAction} from '../reducers/user'; const ButtonWrapper = styled(Button)` display: block; margin-left: auto; margin-right: auto; ` const UserProfile = () => { const dispatch = useDispatch(); const { me, logOutLoading } = useSelector((state) => state.user); const onLogout = useCallback(()=>{ dispatch(logoutRequestAction()); }, []); return ( //생략 <ButtonWrapper onClick={onLogout} loading={logOutLoading}>로그아웃</ButtonWrapper> ); } export default UserProfile;reducers/userimport {produce} from 'immer'; export const initialState = { logOutLoading: false,//logout시도중 logOutDone: false, logOutError: null, } export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; export const logoutRequestAction = () => { return { type: LOG_OUT_REQUEST } } const reducer = (state = initialState, action) => produce(state, (draft) => { switch(action.type){ case LOG_OUT_REQUEST: draft.logOutLoading = true; draft.logOutDone = false; draft.logOutError = null; break; case LOG_OUT_SUCCESS: draft.logOutLoading = false; draft.logOutDone = true; draft.me = null; break; case LOG_OUT_FAILURE: draft.logOutLoading = false; draft.logOutError = action.error; break; default: break; } }); export default reducer;sagas/userimport axios from 'axios'; import { all, call, delay, fork, put, takeLatest } from 'redux-saga/effects'; import { LOG_OUT_FAILURE, LOG_OUT_REQUEST, LOG_OUT_SUCCESS, } from '../reducers/user'; function logOutAPI(){ return axios.post('/user/logout'); } function* logOut() { try{ yield call(logOutAPI); yield put({ type: LOG_OUT_SUCCESS, }); } catch(err) { yield put({ type: LOG_OUT_FAILURE, error: err.response.data }); } } function* watchLogOut(){ yield takeLatest(LOG_OUT_REQUEST, logOut); } export default function* userSaga() { yield all ([ fork(watchLogOut), ]) }routes/user.jsconst express = require('express'); const bcrypt = require('bcrypt'); const {User, Post} = require('../models'); const router = express.Router(); const passport = require('passport'); const {isLoggedIn, isNotLoggedIn} = require('./middlewares'); router.post('/login', isNotLoggedIn, (req, res, next)=> { passport.authenticate('local',(err, user, info) => { if(err) { console.error(err); return next(err); } if(info) { return res.status(401).send(info.reason); } return req.login(user,async(loginErr)=> { if(loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: {id: user.id}, attributes:{ exclude:['password'] }, include: [{ model: Post }, { model: User, as:'Followings', }, { model: User, as:'Followers' }] }) return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); //POST /user/login //생략 const {isLoggedIn, isNotLoggedIn} = require('./middlewares'); router.post('/logout', isLoggedIn, (req, res) => { req.logout(() => { req.session.destroy(); res.send('ok'); }); });routes/middlewaresexports.isLoggedIn = (req, res, next) => { if(req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } } exports.isNotLoggedIn = (req, res, next) => { if(!req.isAuthenticated()){ next(); } else { res.status(401).send('로그인 하지 않은 사용자만 접근이 가능합니다.'); } }passport/indexconst passport = require('passport'); const local = require('./local'); const { User } = require('../models'); module.exports = () => { passport.serializeUser((user,done) => { done(null,user.id);//첫번째 인자 에러, 두번째 인자 성공(쿠키와 묶어줄 user아이디만 저장) }); passport.deserializeUser(async(id, done) => { try { const user = await User.findOne({where:{id}}) done(null,user); } catch(error) { console.error(error); done(error); } }); local(); };passport/localconst passport = require('passport'); const {Strategy:LocalStrategy} = require('passport-local'); const bcrypt = require('bcrypt'); const {User} = require('../models'); const express = require('express'); const router = express.Router(); router.post('/login', passport.authenticate('local')); module.exports = () => { passport.use(new LocalStrategy({ usernameField: 'email', passwordField: 'password', }, async(email, password, done) => { try { const user = await User.findOne({ where:{email} }); if(!user) { return done(null, false, {reasone: '존재하지 않는 이메일입니다!'}) } const result = await bcrypt.compare(password, user.password); if(result) { return done(null, user);//성공에 사용자 정보 넘겨줌 } return done(null, false, {reason:'비밀번호가 틀렸습니다.'}); } catch(error) { return done(error); } })); } 사용 하는 OS )mac설치 버전)back{ "name": "react-nodebird-back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "bcrypt": "^5.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "mysql2": "^3.6.5", "passport": "^0.7.0", "passport-local": "^1.0.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" }, "devDependencies": { "nodemon": "^2.0.22" } }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Error: Too many keys specified; max 64 keys allowed (인덱스 관련 에러)
안녕하세요 선생님 상황)백엔드 서버 실행시 인덱스를 64개까지 만들 수 있다는 에러가 발생했습니다. 시도해본 것)인덱스 삭제 명령어를 찾아보았는데 인덱스 명을 붙여줘야해서 한개씩 지울 수 있는 상황입니다.alter table `Users` drop index `email_15` 질문) 혹시 Users테이블에 email 컬럼에 대한 인덱스 전체를 한번에 지울 수 있는 방법이 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 아무것도 안뜹니다.
수업 영상강의처럼 진행하는데 같은 링크를 걸어도 그림이 안뜹니다!!<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <br /> <p>안녕하세요 그랩입니다.</p> <a href="https://naver.com">네이버 넘어가기</a> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="구름 사진" /> </body> </html>
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
포스트맨 styled component 서버사이드 렌더링이 잘 이루어졌는지 궁금합니다!
안녕하세요 제로초님! 항상 강의 잘 보고 있고 질문에 답해주셔서 감사합니다!섹션5 Next.js 서버사이드렌더링 CSS 서버사이드렌더링 강의 끝까지 진행한 수강생 입니다!해당 강의 영상의 2분 45초에서 styled component 진짜로 서버사이드 렌더링 하려면포스트맨에서 게시글에 대한 주소 입력 후 send를 눌렀을 때 화면에 styled component가 떠야 한다고 말씀하셨습니다!send 후 아래의 화면과 같이 뜨는데 CSS 서버사이드 렌더링이 제대로 된 게 맞는 건지 궁금합니다!++++++추가 질문입니다..!<NextScript /> 위에 <script src="https://polyfill.io/v3/polyfill.min.js?......" /> 처럼 코드를 넣지 않아도 되나요?아래 질문 글의 작성자님처럼 io부분을 넣지 않아도 코드가 정상적으로 작동되기에 질문 드립니다!https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=48856&category=questionDetail&tab=community&q=128118++++++++++
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 401 Error (routes에서 user false, 'Missing credentials')
안녕하세요 선생님 상황)쿠키/세션 전체 로그인 흐름 강좌를 따라해보았는데 로그인을 했을 때 401 에러가 발생하는 상황입니다.시도해본 것)아래 파일들의 로그인과 관련된 코드에 로그를 찍어보았고 이런 결과가 출력 되었습니다.1)LoginForm => onSubmitForm함수에서 email,password찍으면 이메일,비밀번호 출력됨2)reducers/user => loginRequestAction함수에서 data찍으면 이메일만 출력되고 loginAction함수에서는 출력안됨3)sagas/user => logIn함수에서 action.data에 이메일만 출력되고 result는 출력안됨4)user/routes => err는 null, user는 false, info는 { message: 'Missing credentials' }라고 출력됨5)passport/index, passport/local => 출력안됨질문1) reducer와 sagas에서는 원래 비밀번호가 출력이 안되는게 맞나요? 질문2) 만약에 reducer와 sagas에서 원래 비밀번호가 안나오는게 맞다면 어떤 부분에 문제가 있어서 reducer와 saga에서 data 나오는데, routes에서는 users가 false로 나오고 Missing credentials가 나오는건가요?질문3)이 문제를 어떻게 해결하면 좋을까요,,?작성한 코드) 글자수 제한이 있어 로그인 부분만 올립니닷,,!LoginFormimport React, { useCallback, useEffect } from 'react'; import {Form, Input, Button} from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; import {useDispatch, useSelector} from 'react-redux'; import useInput from '../hooks/useInput'; import {loginRequestAction} from '../reducers/user'; const LoginForm = () => { const dispatch = useDispatch(); const {logInLoading, logInError} = useSelector((state) => state.user); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); useEffect(() => { if (logInError) { alert(logInError); } }, [logInError]); const onSubmitForm = useCallback(() => { console.log('LoginForm에서 email, password', email, password); //email, password luckyhaejin1@naver.com 1234 dispatch(loginRequestAction(email, password)); },[email, password]); return ( <FormWrapper onFinish={onSubmitForm}> {/* 생략 */} <Button type="primary" htmlType="submit" loading={logInLoading}>로그인</Button> </FormWrapper> ); } reducers/userimport {produce} from 'immer'; export const initialState = { logInLoading: false, //login시도중 logInDone: false, logInError: null, //생략 loginData:{} } export const LOG_IN_REQUEST = 'LOG_IN_REQUEST'; export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS'; export const LOG_IN_FAILURE = 'LOG_IN_FAILURE'; export const loginAction = (data) => { console.log('reducers loginAction에서 data', data);//로그x return (dispatch) => { setTimeout(() => { dispatch(loginRequestAction()); }, 2000); dispatch(loginRequestAction()); } } export const loginRequestAction = (data) => { console.log('reducers loginRequestAction에서 data', data); //luckyhaejin1@naver.com return { type: LOG_IN_REQUEST, data } } const reducer = (state = initialState, action) => produce(state, (draft) => { switch(action.type){ case LOG_IN_REQUEST: draft.logInLoading = true; draft.logInError = null; draft.logInDone = false; break; case LOG_IN_SUCCESS: draft.logInLoading = false; draft.logInDone = true; draft.me = action.data; break; case LOG_IN_FAILURE: draft.logInLoading = false; draft.logInError = action.error; break; //생략 } }); export default reducer; sagas/userimport axios from 'axios'; import { all, call, delay, fork, put, takeLatest } from 'redux-saga/effects'; import { LOG_IN_FAILURE, LOG_IN_REQUEST, LOG_IN_SUCCESS, } from '../reducers/user'; function logInAPI(data){ return axios.post('/user/login', data); } function* logIn(action) { try { console.log('sagas에서 action.data', action.data);//luckyhaejin1@naver.com const result = yield call(logInAPI, action.data); console.log('sagas에서 logIn함수에서 result', result);//로그x yield put({ type: LOG_IN_SUCCESS, data: result.data, }); } catch(err) { console.error(err); yield put({ type: LOG_IN_FAILURE, data: err.response.data, }); } } function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } export default function* userSaga() { yield all ([ fork(watchLogIn) ]) }routes/userconst express = require('express'); const bcrypt = require('bcrypt'); const {User} = require('../models'); const router = express.Router(); const passport = require('passport'); router.post('/login',(req, res, next)=> { console.log('routes 진입'); passport.authenticate('local',(err, user, info) => { if(err) { console.error(err); return next(err); } if(info) { console.log('routes err', err);//null console.log('routes user', user);//false console.log('routes info', info);//{ message: 'Missing credentials' } return res.status(401).send(info.reason); } return req.login(user,async(loginErr)=> { if(loginErr) { console.log('routes loginErr', loginErr); console.error(loginErr); return next(loginErr); } return res.status(200).json(user); }); })(req, res, next); }); //POST /user/login module.exports = router; passport/indexconst passport = require('passport'); const local = require('./local'); const { User } = require('../models'); module.exports = () => { passport.serializeUser((user,done) => { console.log('serializeUser의 user.id', user.id);//로그x done(null,user.id);//첫번째 인자 에러, 두번째 인자 성공(쿠키와 묶어줄 user아이디만 저장) }); passport.deserializeUser(async(id, done) => { try { const user = await User.findOne({where:{id}}) console.log('deserializeUser의 user', user);//로그x done(null,user); } catch(error) { console.error(error); done(error); } }); local(); };passport/localconst passport = require('passport'); const {Strategy:LocalStrategy} = require('passport-local'); const bcrypt = require('bcrypt'); const {User} = require('../models'); const express = require('express'); const router = express.Router(); router.post('/login', passport.authenticate('local')); module.exports = () => { passport.use(new LocalStrategy({ usernameField: 'email', passwordField: 'password', }, async(email, password, done) => { console.log('Passport LocalStrategy - Start');//로그x try { const user = await User.findOne({ where:{email} }); if(!user) { console.log('Passport LocalStrategy - User not found');//로그x return done(null, false, {reasone: '존재하지 않는 이메일입니다!'}) } const result = await bcrypt.compare(password, user.password); if(result) { console.log('Passport LocalStrategy - Login success');//로그x return done(null, user);//성공에 사용자 정보 넘겨줌 } console.log('Passport LocalStrategy - Incorrect password');//로그x return done(null, false, {reason:'비밀번호가 틀렸습니다.'}); } catch(error) { console.error('Passport LocalStrategy - Error:', error);//로그x return done(error); } })); } 사용중인 OS) macOS Apple M1 Pro설치된 버전) back/Package.json "dependencies": { "passport": "^0.7.0", "passport-local": "^1.0.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" },
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
next js 무한 렌더링 문제
import React, { useState } from "react"; const ToggleButtons = () => { const [buttonAActive, setButtonAActive] = useState(false); const [buttonBActive, setButtonBActive] = useState(false); const handleButtonClick = (button) => { if (button === "A") { setButtonAActive((prev) => !prev); setButtonBActive(false); } else if (button === "B") { setButtonBActive((prev) => !prev); setButtonAActive(false); } }; return ( <div> <button onClick={() => handleButtonClick("A")} style={{ backgroundColor: buttonAActive ? "green" : "white" }} > Button A </button> <button onClick={() => handleButtonClick("B")} style={{ backgroundColor: buttonBActive ? "red" : "white" }} > Button B </button> </div> ); };next js로 버튼 A와 B가 있는데 A가 켜져있는 상태에서 B를 누르면 A가 꺼지고 B가 켜져있는 상태에서 A를 누르면 꺼지고 A가 켜져있는 상태에서 A를 또 누르면 꺼지고 B를 누른 상태에서 B를 또 누르면 꺼지는 버튼 2개를 만들고 있는데 이렇게 코드를 작성하니까 무한 렌더링이 걸리는데 해결 방법이 있을까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에 사용되는 노션 링크가 어디있을까요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?
-
미해결Do it! Node.js 프로그래밍 입문
updateContact 함수관련 문의
updateContact 함수에서 findByIdAndUpdate 을 사용하지 않고 아이디를 가져와서 save 함수를 사용한 이유가 있나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 오류
Failed to load resource: the server responded with a status of 403 () 이런 에러가 뜨는데 어떻게 해결하나요ㅜ
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
setCookie 질문입니다.
안녕하십니까 제로초님 질문이 있어 글을 올립니다.현재 next.js를 이용하여 localhost:3000 포트를 이용해 front를 진행하고 있고, back은 제로초님의 강의를 이용하여 localhost:8001 포트로 서버를 만들어 진행하고 있습니다. 그러다, express passport 로그인 후 setCookie로 쿠키에 값을 저장하는 과정에서, front 서버 localhost:3000 포트에서는네트워크 탭에는 위와 같이 Set-Cookie로 명시 되어 있으나, 애플리케이션 탭의 쿠키에는 저장이 되지 않았습니다. 그래서 postman으로 실험을 해본 결과 postman에서는 정상적으로 쿠키가 저장된 모습을 확인할 수 있었습니다. 때문에 이와 같은 경우를 계속 찾아보고, 검색을 해보았는데, 브라우저의 쿠키 정책에 따라, 서로 다른 도메인 간에는 쿠키를 공유할 수 없습니다. 이를 해결하기 위해서는 서버에서 쿠키를 설정할 때 samesite 옵션을 none으로 설정 후 https 를 이용해 통신해야 한다고 나왔었습니다. 위와 같은 설명 때문에 localhost:3000 에서는 쿠키값이 저장이 안 된 것이 맞는 지 궁금합니다.
-
미해결AWS 배포 완벽가이드 (feat. Lightsail, Docker, ECS)
인바운드 규칙 TPC HTTP Port 80을 iPV4와 iPV6에서도 제거해줘도 되나요?
인바운드 규칙 TPC HTTP Port 80을 iPV4와 iPV6에서도 제거해줘도 되나요?로드 밸런서 세팅 강의에서는 iPV4에서만 포트 80을 삭제해주시는데, iPV6도 동일하게 삭제해주면 되는지 궁금합니다!!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
리트윗 라우터에서 설정한 리트윗 검사가 되지 않습니다!(중복 리트윗 체크 및 본인 게시글 리트윗이 막아지지 않는 문제)
안녕하세요! React로 NodeBird SNS 만들기섹션4 리트윗하기 강의 시청 중 발생한 에러에 대해 질문 드립니다!항상 강의 잘 보고 있습니다! 제로초님 감사합니다! [리트윗 라우터에서 설정한 리트윗 검사]1. 자기 게시글을 리트윗한 경우2. 자기 게시글을 리트윗한 다른 게시글을 다시 자기가 리트윗한 경우3. 이미 리트윗한 게시글을 또 리트윗 하는 경우(중복 리트윗) 여러 개의 게시글을 가져오는 라우터에서 리트윗한 게시글, 작성자, 이미지 모델을 넣었으며,게시글 Reducer에서 리트윗 실패 시 실패 확인을 'draft.retweetError = action.error;'로 확인하였습니다.게시글 Saga에서도 리트윗 요청 실패 시 실패 결과를 'error: err.response.data'로 설정했습니다.★ 프론트, 백엔드 쪽 터미널과 콘솔, 리덕스, 네티워크 쪽에 오류가 없음을 확인하였습니다.코드 오타가 원인이라고 파악해 제로초님의 깃허브와 제 코드를 비교하며 확인했으나원인을 찾을 수 없어 질문 올립니다. 아래는 가장 의심되는 코드 입니다.중요하지 않은 코드는 '. . .' 으로 생략하였습니다.front/pages/index.js // React 라이브러리 훅 불러오기 import React, { useEffect } from 'react'; . . . // 홈 컴포넌트(사용자 정의 태그) const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post); . . . // 리트윗 실패 시 리트윗 에러 alert 창 띄우기 useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]);front/components/PostCard.js따로 게시글을 리트윗 실패(RETWEET_FAILURE) 액션을 디스패치 해야 하는지 의심이 들었습니다!// 게시글 카드 컴포넌트(사용자 정의 태그) const PostCard = ({ post }) => { . . . // 리트윗 버튼 콜백 함수 const onRetweet = useCallback(() => { // 로그인을 안했을 때 '로그인이 필요합니다.' alert 창 띄우기 if (!id) { return alert('로그인이 필요합니다.'); } /* 리트윗 요청 액션 객체 디스패치 */ return dispatch({ type: RETWEET_REQUEST, // 리트윗 요청 액션 data: post.id, // 게시글 아이디 }); }, [id]); . . . return ( <div style={{ marginBottom: '20px' }}> <Card /* ---------- 이미지 : 이미지는 1개 이상 ---------- */ cover={post.Images[0] && <PostImages images={post.Images} />} /* ---------- 액션 버튼 ---------- */ actions={[ /* ---------- 리트윗 버튼 ---------- */ <RetweetOutlined key="retweet" onClick={onRetweet} />, . . . ]} /* 카드 제목 */ title={post.RetweetId // 리트윗 게시글이면 게시글 사용자 닉네임님이 리트윗 하셨습니다. 제목 써주기 ? `${post.User.nickname}님이 리트윗 하셨습니다.` // 일반 게시글이면 제목 안 써주기 : null } . . . > {/* Card 닫기 */} {/* ---------- 리트윗 게시글 ---------- */} {post.RetweetId && post.Retweet ? ( <Card /* ---------- 이미지 : 이미지는 1개 이상 ---------- */ cover={post.Retweet.Images[0] && <PostImages images={post.Retweet.Images} />} > <Card.Meta // 메인 게시글 리트윗한 사용자 닉네임의 첫 번째 글자를 // 아바타 아이콘으로 표시 avatar={<Avatar>{post.Retweet.User.nickname[0]}</Avatar>} // 메인 게시글 리트윗한 게시글 작성자 이름 title={post.Retweet.User.nickname} // 메인 게시글 게시글 콘텐츠 description={<PostCardContent postData={post.Retweet.content} />} /> </Card> ) : ( /* ---------- (리트윗을 하지않은) 일반 게시글 ---------- */ <Card.Meta // 메인 게시글 사용자 닉네임의 첫 번째 글자를 아바타 아이콘으로 표시 avatar={<Avatar>{post.User.nickname[0]}</Avatar>} // 메인 게시글 작성자 이름 title={post.User.nickname} // 메인 게시글 콘텐츠 description={<PostCardContent postData={post.content} />} /> )} </Card> back/routes/post.js// 리트윗 라우터 router.post('/:postId/retweet', isLoggedIn, async (req, res, next) => { // POST /post/동적 히든/retweet try { /* 존재하지 않는 게시글이 있는지 검사하는 함수 */ const post = await Post.findOne({ where: { id: req.params.postId }, // 모델 가져오기 include: [{ model: Post, as: 'Retweet', // as: 'Retweet'으로 include를 해주면 post.retweet이 생긴다. }], }); /* ---------- 만약 존재하지 않는 게시글이 있다면 400번대 에러 출력 ---------- */ if (!post) { return res.status(403).send('존재하지 않는 게시글입니다.'); } /* 자기 게시글을 리트윗하기 or 자기 게시글을 리트윗한 다른 게시글을 다시 자기가 리트윗하기 막기 */ if (req.user.id === post.UserId || (post.Retweet && post.Retweet.UserId === req.user.id)) { return res.status(403).send('자신의 글은 리트윗할 수 없습니다.'); } // 리트윗할 Id : 리트윗한 게시글이면 리트윗 아이디 사용 or 아니면 게시글 아이디 사용 const retweetTargetId = post.RetweetId || post.id; /* 이미 리트윗한 게시글을 또 리트윗하는지 검사하는 함수(두 번 리트윗 막기) */ const exPost = await Post.findOne({ where: { UserId: req.user.id, RetweetId: retweetTargetId, }, }); /* ----- 만약 이미 리트윗한 게시글을 또 리트윗한다면 400번대 에러 출력 ----- */ if (exPost) { return res.status(403).send('이미 리트윗했습니다.'); } /* await : 실제로 데이터가 들어감, create : 테이블 안에 데이터를 넣음 */ const retweet = await Post.create({ UserId: req.user.id, RetweetId: retweetTargetId, content: 'retweet', // 게시글 모델에서 allowNull을 false로 설정했기 때문에 게시글 콘텐츠가 필수다. }); /* ---------- 내가 어떤 게시글을 리트윗했는지 찾는 함수 ---------- */ const retweetWithPrevPost = await Post.findOne({ where: { id: retweet.id }, // 모델 가져오기 include: [{ /* ---------- 리트윗한 게시글 ---------- */ model: Post, as: 'Retweet', // 리트윗한 게시글이 post.Retweet으로 담긴다. // 모델 가져오기 include: [{ /* ---------- 리트윗한 게시글의 작성자 ---------- */ model: User, attributes: ['id', 'nickname'], // id, nickname 데이터만 가져오기 }, { /* ---------- 리트윗한 게시글의 이미지 ---------- */ model: Image, }] }, { /* ---------- 게시글 작성자 ---------- */ model: User, attributes: ['id', 'nickname'], // id, nickname 데이터만 가져오기 }, { /* ---------- 게시글 좋아요 누른 사람들 ---------- */ model: User, as: 'Likers', attributes: ['id'], // id 데이터만 가져오기 }, { /* ---------- 게시글 이미지 ---------- */ model: Image, }, { /* ---------- 게시글 답글 ---------- */ model: Comment, // 모델 가져오기 include: [{ /* ---------- 게시글 답글의 작성자 ---------- */ model: User, attributes: ['id', 'nickname'], // id, nickname 데이터만 가져오기 }], }], }); /* 게시글 작성 성공 시 어떤 게시글을 리트윗 했는지에 대한 정보를 프론트로 돌려주기 */ res.status(201).json(retweetWithPrevPost); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } }); +++ 줄바꿈이 되지 않은 문제를 수정하였습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
인피니트 스크롤링 적용시 LOAD_POST_REQUEST 두번 찍히는 문제
안녕하세요 선생님 상황)인피니트 스크롤링 적용시 LOAD_POST_REQUEST 두번 찍히는 상황인데 이거의 원인과 해결방법을 어떻게 찾을 수 있을까요? loadPostsLoading과 throttle을 적용했는데도 2번씩 실행되는 상황입니다.redux) 작성한 코드) 10,000 자이하만 적을 수 있어서 LOAD_POSTS_REQUEST 관련 코드만 올립니다..!!pages/index.jsimport React, { useEffect } from 'react'; import {useDispatch, useSelector} from 'react-redux'; import AppLayout from '../components/AppLayout'; import PostCard from '../components/PostCard'; import PostForm from '../components/PostForm'; import {LOAD_POSTS_REQUEST} from '../reducers/post'; const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post); useEffect(() => { dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight-300) { if(hasMorePosts && !loadPostsLoading) { dispatch({ type: LOAD_POSTS_REQUEST, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostsLoading]); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> ); }; export default Home;reducers/post.jsimport shortId from 'shortid'; import {produce} from 'immer'; import faker from 'faker'; export const initialState = { mainPosts:[], imagePaths: [], //게시물 저장 경로 hasMorePosts: true, loadPostsLoading: false, //게시글 로드 완료시 true loadPostsDone: false, loadPostsError: null, } export const generateDummyPost = (number) => Array(number).fill().map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName() }, content: faker.lorem.paragraph(), Images: [{ src: 'https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_1280.jpg' //faker.image.imageUrl(640, 480, true), lorempixel.com 고장나서 임시로 }], Comments: [{ User: { id:shortId.generate(), nickname:faker.name.findName(), }, content:faker.lorem.sentence(), }], })); export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST'; export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS'; export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE'; const dummyPost = (data) => ({ id: data.id, content: data.content, User: { id:1, nickname:'해지니', }, Images: [], Comments: [], }); const dummyComment = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: '제로초' }, }); const reducer = (state = initialState, action) => produce(state, (draft) => { switch(action.type){ case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); draft.hasMorePosts = draft.mainPosts.length < 50; break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; default: break; } }); export default reducer; sagas/post.jsimport { all, fork, takeLatest, put, delay, throttle } from 'redux-saga/effects'; import axios from 'axios'; import shortId from 'shortid'; import { LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE, generateDummyPost, } from '../reducers/post'; function loadPostsAPI(data){ return axios.get('/api/post', data); } function* loadPosts(action) { try{ // const result = yield call(loadPostsAPI, action.data); yield delay(1000); yield put({ type: LOAD_POSTS_SUCCESS, data:generateDummyPost(10) }); } catch(err) { yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data }); } } function* watchLoadPosts(){ yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); } export default function* postSaga() { yield all([ fork(watchLoadPosts) ]); }사용중인 OS) macOS (Apple M1 Pro)
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
하위 테이블이 되는 엔티티에서 외래키 컬럼을 별도로 작성하는 이유가 궁금합니다
강의에서 OneToMany, ManyToOne 관계인 엔티티들을 보면/entity/Users.ts// ... @Entity({ schema: 'sleact', name: 'users' }) export class Users { @PrimaryGeneratedColumn({ type: 'int', name: 'id' }) id: number; // ... @OneToMany( () => WorkspaceMembers, (workspacemembers) => workspacemembers.User, ) WorkspaceMembers: WorkspaceMembers[]; // ... }/entity/WorkspaceMembers.ts@Entity('workspacemembers', { schema: 'sleact' }) export class WorkspaceMembers { // ... @Column('int', { primary: true, name: 'UserId' }) UserId: number; // ... @ManyToOne(() => Users, (users) => users.WorkspaceMembers, { onDelete: 'CASCADE', onUpdate: 'CASCADE', }) @JoinColumn([{ name: 'UserId', referencedColumnName: 'id' }]) User: Users; // ... }WorkspaceMembers 엔티티에서 UserId 컬럼을 별도로 작성하신 뒤@JoinColumn 데코레이터에서 Users 엔티티에서 가져온 'id'컬럼을 본 엔티티에서 'UserId' 컬럼으로 사용하겠다고 지정하셨는데요 이외에도 다른 일대다, 다대일 관계인 엔티티 중 다대일 파일들에 모두 '(상위테이블)Id' 이런 식으로 컬럼을 직접 설정하셨더라구요.이 이유가 무엇인지에 대해서 질문드리고 싶어서 글 작성합니다. 개인적으로 연습하면서 TypeORM 공식문서나 깃북을 확인했을때는 관계에 대해서는 지정을 하되,하위 테이블에선 별도로 외래키에 대한 컬럼까지는 작성하지 않았는데요.제가 작업중인 환경에서 테스트할 때도user.entity.ts// ... @Entity({ name: 'Users' }) export class Users { @PrimaryGeneratedColumn({ type: 'int', name: 'id' }) id: number; // .. @OneToMany(() => Posts, (post: Posts) => post.user, { cascade: true, }) post: Posts[]; }posts.entity.ts// ... @Entity({ name: 'Posts' }) export class Posts { @PrimaryGeneratedColumn({ type: 'int', name: 'id' }) id: number; // @Column({ type: 'int' }) // userId: number; // ... @ManyToOne(() => Users, (user: Users) => user.post, { onDelete: 'CASCADE', }) // 외래키 정보 // @JoinColumn([ // { // referencedColumnName: 'id', // 상대방 컬럼 // name: 'userId', // 여기서 쓸 컬럼 // }, // ]) user: Users[]; }이 상태에서 DB와 테이블을 생성했을때 외래키가 되는 'userId'가 생성되는 것 확인하였습니다.단 이 상태에서는 서비스 단에서 리포지터리로 데이터를 입력할 수가 없었습니다. 이 부분은 JoinColumn 데코레이터가 있어도 결과는 같았습니다. 혹시 자동적으로 만들어지는 외래키 컬럼에는 서비스에서 typeorm 사용해도직접적으로 데이터를 집어 넣지 못하기 때문에,외래키 컬럼을 직접 만들어주고 JoinColumn 데코레이터 사용해서 명시적으로 지정을 해줘야만 한다 라고 생각하면 될까요? 제가 제대로 이해한 것이 맞을까요?