inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

M:N 등록/조회 API 작성에서 Typescript 문제 질문드립니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

안녕하세요. 제가 찾고 기다리던 내용의 강의라 매우 만족하며 수강하고 있는 수강생입니다! ㅎ products.service.ts 파일에서 create와 update 메서드 작성할 때 typescript 에러에 대해 질문드립니다. products.service.ts 파일 create 메서드에서 productTags를 등록하는 과정에 const result2 = [] 부분을 const result2: string[]로 작성하면 await productRepository.save (...) 에서 No overload matches this call이 뜨고 update 메서드에서 updateProductInput에 UpdateProductInput로 타입을 지정하면 위와 마찬가지로 await productRepository.save (newProduct)에서 No overload matches this call이 뜹니다. 두 경우 모두 Type 'string' is not assignable to type 'ProductTag' 문제로 product.entity.ts에서는 productTag를 아래와 같이 등록하고 @Field(() => [ProductTag]) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) productTags: ProductTag[]; createProduct.input.ts에서는 CreateProductInput에서 productTag를 아래와 같이 등록해서 발생하는 문제라고 추측했습니다. @Field(() => [String]) productTags: string[]; 두 경우 모두 타입을 지정하지 않고 any로 두면 문제는 사라지긴 합니다. any로 두고 사용할 수밖에 없는 것인지 아니면 타입 지정을 해서 사용하는 방법이 있는지 궁금합니다.

  • nodejs
  • node.js
  • rest-api
  • docker
  • javascript
  • tdd
  • express
  • nestjs
  • NestJS
endymion cheon 댓글 1 좋아요 0 조회수 491

mysql 데이터베이스 연결 안되는 문제 Unable to connect to the database

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

yarn start:dev 실행 하고 나면 아래와 같이 나오면서 에러가 뜨고 있어요 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... 아래 코드도 정상적으로 기입 했는데, 계속 접속 오류로 연결이 되지가 않습니다. import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo' import { Module } from '@nestjs/common' import { GraphQLModule } from '@nestjs/graphql' import { TypeOrmModule } from '@nestjs/typeorm' import { BoardsModule } from './apis/boards/boards.module' import { Board } from './apis/boards/entities/board.entity' @Module({ imports: [ BoardsModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: 'root', password: 'test1234', database: 'myproject03', entities: [Board], synchronize: true, logging: true, }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {} 현재 brew 확인시 Mysql 서버도 정상적으로 켜져 있는것을 확인 할 수 있어요 디비버에서도myproject03 이라고 정확하게 만들었습니다. 선생님의 강의하고 다른부분을 못 찾았는데, 데이터 베이스가 연결이 안될 때는 어느부분을 더 점검 해 봐야 할지요?

  • node.js
  • tdd
  • javascript
  • express
  • rest-api
  • nodejs
  • nestjs
  • docker
  • NestJS
김형 댓글 1 좋아요 3 조회수 3733

length 오류

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

콘솔 결과와 error가 같이 출력됩니다!

  • html/css
  • react-native
  • react
  • express
  • node.js
  • nodejs
  • javascript
  • 머신러닝
  • 머신러닝 배워볼래요?
  • tensorflow
  • HTML/CSS
유영 댓글 1 좋아요 0 조회수 740

react-router-dom link클릭시 이동이 안되는 오류

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요 강사님 해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다) 다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다 https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785# 여기는 Link태그 해당 수업코드 파일입니다!

  • html/css
  • HTML/CSS
  • 머신러닝 배워볼래요?
  • node.js
  • react
  • react-native
  • nodejs
  • 머신러닝
  • tensorflow
  • express
  • javascript
한조 댓글 2 좋아요 0 조회수 1588

DB 연결 성공 후 테이블 까지 만들었습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..

  • redux
  • nodejs
  • react
  • express
  • Next.js
hyuri 댓글 2 좋아요 1 조회수 558

사가 모든 설정 후 로그인시 오류

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

강사님 모든 코드를 수정한 후 로그인하려고 하는데 아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다. 콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요. 몇개파일의 코드 같이 올려드립니다. 아래는 로그인 안되는 화면캡처본입니다. LoginForm.js import React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.js export const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;

  • nodejs
  • redux
  • react
  • express
  • Next.js
뽀개즈아 댓글 3 좋아요 0 조회수 694

건의사항

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

제가 잘못 본건지는 모르겠지만, Node.js API구현 중 퍼사드 패턴 47:31초에서 function getToken() { const myconunt =6 if(mycount === undefined){ console.log("에러발생!!! 갯수를 제대로 입력해주세요!!!") return ~~~ } 좌측 인강화면을 보시면 01-04-token-count-api-facade 폴더에 들어있는 index.js파일에서 function getToken() 함수에서 매개변수를 지우고, const mycount = 6 으로 대체하였습니다. 하지만, 우측 노션에 학습자료 퍼사드 패턴에서는 function getToken(count) { ~~} 라고 해서 count매개 변수가 존재합니다. count를 여전히 매개변수로 사용하고 있습니다. 즉 "노션에 있는 자료가 수정되어야 한다고 생각합니다." 노션 자료 중 호출하는 부분에서 createTokenOfPhone('01012345678', 6); 매개변수 6도 삭제되어야 합니다. "REST-API 실습 강의"에서 postman으로 학습시 "휴대폰 번호 전송"이 안되서 순간적으로 당황했습니다. 확인하시고, 답글 달아주시면 감사하겠습니다. 해당강의는 Node.js API구현 중 퍼사드 패턴 47:31초입니다. 노션은 학습 자료 / 퍼사드 패턴 입니다.

  • tdd
  • nodejs
  • rest-api
  • javascript
  • docker
  • express
  • NestJS
똑같이썼는데안돼 댓글 3 좋아요 1 조회수 664

수업중 나온 깃허브 저장소가 없는 이유

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

수업중 나온 깃허브 저장소가 없는 이유가 궁금합니다. 현재 스크린샷처럼 되어 있는 주소가 없어요

  • NestJS
  • rest-api
  • javascript
  • express
  • docker
  • tdd
  • nodejs
김형 댓글 1 좋아요 0 조회수 475

16분경 onChangeText에 useInput을 사용해도 되지 않나요?

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

[text, setText]와 onChangeText를 만들어놓은 훅 useInput을 사용해서 코딩해도 되지 않나요? 그렇게 하지 않은 이유가 긍금합니다!

  • nodejs
  • redux
  • express
  • react
  • Next.js
뽀개즈아 댓글 1 좋아요 0 조회수 365

mongodb 설치에 문제가 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

현재 Ubuntu 운영체제를 듀얼부팅으로 22.04.01 버전으로 사용하고 있고, 강의를 듣기 위해 mongodb 설치를 진행하려고 합니다. 그러나 현재 강의의 notion에서 올려주신 설치 과정을 그대로 진행했는데 6번 명령어를 실행 후 이와 같은 오류가 발생했습니다. 설치과정 sudo apt-get install gnupg wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add - lsb_release -dc echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list (jammy버전이라 fosal에서 jammy로 변경했습니다.) +추가(jammy가 아닌 forsal로도 진행을 해 봤고, 6.0버전으로도 진행해봤는데 같은 에러가 떴습니다...) sudo apt-get update sudo apt-get install -y mongodb-org 오류 메시지 몇몇 패키지를 설치할 수 없습니다. 요청한 상황이 불가능할 수도 있고, 불안정 배포판을 사용해서 일부 필요한 패키지를 아직 만들지 않았거나, 아직 Incoming에서 나오지 않은 경우일 수도 있습니다. 이 상황을 해결하는데 다음 정보가 도움이 될 수도 있습니다: 다음 패키지의 의존성이 맞지 않습니다: mongodb-org-mongos : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 mongodb-org-server : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 mongodb-org-shell : 의존: libssl1.1 (>= 1.1.1) 하지만 설치할 수 없습니다 E: 문제를 바로잡을 수 없습니다. 망가진 고정 패키지가 있습니다. 구글링 해본 결과 libssl1.1이 깔려있지 않아서 그렇다는 걸 확인했는데 우분투 22.04 버전은 libssl3이 이미 깔려있어 중복 설치는 좋은 해결 방법이 아니라는 것을 확인했습니다. 그래서 또 다르게 설치할 수 있는 방법이 있을지 질문드립니다.

  • NestJS
  • rest-api
  • docker
  • tdd
  • nodejs
  • javascript
  • express
김정욱 댓글 2 좋아요 3 조회수 2429

post 로 id, password 전송시 => 크롬 개발자 도구, 네트워크, Request 에 보면 id, password 가 그대로 노출되는데 숨길순 없나요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

post 로 id, password 전송시 => 크롬 개발자 도구, 네트워크, Request 에 보면 id, password 가 그대로 노출되는데 숨길순 없나요? 브라우저를 사용하는 유저가 보낸 거기 때문에 보안을 안해도 상관없을까요?

  • Next.js
  • react
  • express
  • nodejs
  • redux
mkp0131 댓글 1 좋아요 0 조회수 1396

MongoParseError: options usernewurlparser, userunifiedtopology are not supported

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

2023.01.05 기준 몽고디비 설정할때, 기본으로 다 지원하기 때문에 추가 설정을 할 필요가 없다고 하네요! https://hyeon-gomi.tistory.com/6 아래와 같이 그대로 놓는 것만으로 충분하다고 합니다 MongooseModule.forRoot(process.env.MONGODB_URL),

  • 몽고디비
  • nodejs
  • mongodb
  • express
  • NestJS
  • ssr
황주은 댓글 1 좋아요 22 조회수 910

타입을 지정해 줄 때

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

3번째 줄에서 app 위에 커서를 올려보면 const app:Express 이런식으로 타입스크립트가 올바르게 추론해준 것을 알 수 있습니다. 이런 경우에도 강의에서처럼 const app: express.Express 이런식으로 작성하는 것이 더 나은 방법일까요?

  • NestJS
  • ssr
  • mongodb
  • express
  • nodejs
labra 댓글 1 좋아요 0 조회수 469

useSelector 두번(중복)실행해도 괜찮은가요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

const id = useSelector((state) => state.user.user?.id); const { addCommentDone } = useSelector( (state) => state.post ); 위에 코드처럼 state 단계에서 갈리게되면 2번 실행하게되는데 성능엔 문제 없나요?

  • Next.js
  • react
  • nodejs
  • redux
  • express
mkp0131 댓글 2 좋아요 2 조회수 603

프론드엔드 파일 관련 질문드립니다! ( 오류 )

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

안녕하세요 고양이 CRUD 프로젝트 듣고있는 학생입니다. 프론트 엔드 파일을 받아서 npm i 후 서버를 키려 하는데 npm run build : 에러 미 발생 ( .next 파일에 아무것도 없어요 ㅠ) npm run start : npm run dev: 이렇게 에러 메시지가 노출됩니다 npm run dev의 에러메시지에 react 버전 업데이트 필요해 보여서 npm install react 하면은 package.json의 정해진 버전보다 상위로 올라가서 그런가 설치가 안되더라구요 ㅠㅠ 어떻게 하면 해결이 될까요 ㅠㅠ

  • mongodb
  • express
  • nodejs
  • ssr
  • NestJS
마젠토브힘내부왕 댓글 2 좋아요 1 조회수 558

useInput 했을때, 배열의 첫번째 요소가 func으로 나와요

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

id와 nickname에 마우스를 올리면 useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요?? 그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ .. 어떻게 해결해야 할까요?? ```signup.js import React, { useCallback, useState } from 'react'; import AppLayout from '../components/AppLayout'; import Head from 'next/head'; import styled from 'styled-components'; import { Button, Checkbox, Form, Input } from 'antd'; import useInput from '../components/hooks/useInput'; const ErrorMessage = styled.div` color: red; `; const Signup = () => { const [id, onChangeId] = useInput(''); const [nickname, onChangeNickname] = useInput(''); const [password, onChangePassword] = useInput(''); const [passwordCheck, setPasswordCheck] = useState(''); const [passwordError, setPasswordError] = useState(false); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setPasswordError(e.target.value !== password); }, [password] ); console.log(id); const [term, setTerm] = useState(false); const [termError, setTermError] = useState(false); const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); setTermError(false); }, []); const onSubmit = useCallback(() => { if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log(id, nickname, password); }, [password, passwordCheck, term]); return ( <> <AppLayout> <Head> <title>회원가입 | NodeBird</title> </Head> <Form onFinish={onSubmit}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} required onChange={onChangeId} /> </div> <div> <label htmlFor="user-nick">닉네임</label> <br /> <Input name="user-nick" value={nickname} required onChange={onChangeNickname} /> </div> <div> <label htmlFor="user-password">패스워드</label> <br /> <Input name="user-password" value={password} required onChange={onChangePassword} /> </div> <div> <label htmlFor="user-password-check">비밀번호체크</label> <br /> <Input name="user-password-check" value={passwordCheck} required onChange={onChangePasswordCheck} /> {passwordError && ( <ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage> )} </div> <div> <Checkbox name="user-term" checked={term} onChange={onChangeTerm}> 약관에 동의합니다. </Checkbox> {termError && <ErrorMessage>약관에 동의하지 않습니다</ErrorMessage>} </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit"> 가입하기 </Button> </div> </Form> </AppLayout> </> ); }; export default Signup; import { useState, useCallback } from 'react'; export default (initialValue = null) => { const [value, setValue] = useState(initialValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler]; };

  • useinput
  • nodejs
  • 커스텀훅
  • react
  • redux
  • express
  • Next.js
ohjaehokor 댓글 1 좋아요 0 조회수 485

PostForm에서 Input이 초기화가 되지않습니다.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다. useEffect가 addPostDone 이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다. PostAction export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); export { addPostRequestAction, }; post.js (reducer) import shortId from 'shortid'; const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: 'admin', }, Images: [], Comments: [], }); const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log('ADD_POST_REDUCER'); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; case ADD_POST_FAILURE: return { ...state, addPostLoading: false, addPostError: action.error, }; default: return state; } }; ==Redux-Saga=== index.js(rootSaga) import { all, fork } from 'redux-saga/effects'; import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { yield all([ fork(postSaga), fork(userSaga), ]); } postSaga import { all, fork, takeLatest, put, delay } from 'redux-saga/effects'; import axios from 'axios'; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/Actions/post'; function* addPostRequest(action) { try { // const result = yield call(addPostAPI,action.data) delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPostRequest); } export default function* postSaga() { yield all([ fork(watchAddPost), ]); } ==Component== PostForm.js import { useCallback, useRef, useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequestAction } from '../reducers/Actions/post'; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const [text, setText] = useState(''); const dispatch = useDispatch(); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); const onChangeText = useCallback((e) => setText(e.target.value), []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img src={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm;

  • react
  • redux
  • express
  • nodejs
  • Next.js
댓글 1 좋아요 0 조회수 473

database 생성

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

MongoDB가 업데이트가 되어서 DB생성시에 권한이 있어야지만 생성이 됩니다. 전 강좌에서 Mongodb Atlas 에서 사용자를 만들때 Database Access 에서 본인에게 권한을 주어야 Database 를 만들고 CollectionName 을 넣을 수 있습니다.

  • ssr
  • NestJS
  • nodejs
  • express
  • mongodb
Cliche 댓글 1 좋아요 4 조회수 462

app.use(express.json()); 적용 후, SyntaxError

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

app.use(express.json()); jsonParser기능을 하는 미들웨어 추가 이후, postman에서 request를 보냈는데, 정상적으로 터미널에 출력이 되지 않습니다. 무엇이 문제일까요? 하단에 app.ts 코드를 첨부합니다. import * as express from "express"; import { Cat, CatType } from "./app.model"; const app: express.Express = express(); app.use((req, res, next) => { console.log(req.rawHeaders[1]); console.log("this is logging middlewre"); next(); }); //* json middleware app.use(express.json()); //* READ 고양이 전체 데이터 다 조회 app.get("/cats", (req, res) => { try { const cats = Cat; // throw new Error("db connect error"); res.status(200).send({ success: true, data: { cats, }, }); } catch (error) { res.status(400).send({ success: false, error: error.message, }); } }); //* READ 특정 고양이 데이터 조회 app.get("/cats/:id", (req, res) => { try { const params = req.params; const cat = Cat.find((cat) => { return cat.id === params.id; }); // throw new Error("db connect error"); res.status(200).send({ success: true, data: { cat, }, }); } catch (error) { res.status(400).send({ success: false, error: error.message, }); } }); //* CREATE 새로운 고양이 추가 api app.post("/cats", (req, res) => { try { const data = req.body; console.log(data); res.status(200).send({ success: true, data: {}, }); } catch (error) { res.status(400).send({ success: false, error: error.message, }); } }); //* 404 middleware app.use((req, res, next) => { console.log("this is error middleware"); res.send({ error: "404 not found error" }); }); app.listen(8000, () => { console.log("server is on..."); });

  • express
  • mongodb
  • express.json
  • express
  • syntaxerror
  • nodejs
  • NestJS
  • ssr
skkuscat 댓글 1 좋아요 0 조회수 587

채팅앱 만들기 - 이벤트 설계와 기본 서비스로직 완성 에서 질문 있습니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

function helloUser() { const username = prompt('What is your name?'); socket.emit('new_user', username, (data) => { drawHelloStranger(data); }); } 사용자가 처음 화면에 진입했을 때에 사용자가 이름을 입력하고 나면 ‘new_user’에 해당하는 게이트웨이 로직이 실행되는 것으로 알고 있습니다. 이 로직 안에서 ‘user_connected’에 대해 브로드 캐스팅을 해주고 있는데요 socket.broadcast.emit('user_connected', username); 프론트엔드에서 아래와 같이 connected!라는 채팅글도 화면에 나타나야 할 것 같은데 socket.on('user_connected', (username) => { drawNewChat(`${username} connected!`); }); 화면 진입자 입장에서는 connected!부분이 나타나지 않습니다. 왜 그런지 설명해주실 수 있을까요? 화면 진입자 또한 위 코드를 수행하고 있는데 화면 진입자를 제외한 나머지 사용자에게는 connected!가 나타나지만 화면 진입자는 나타나지 않는 이유가 궁금합니다.

  • express
  • nodejs
  • mongodb
  • ssr
  • NestJS
신재우 댓글 1 좋아요 0 조회수 547

인기 태그

인프런 TOP Writers

주간 인기글