nestjs (7) 썸네일형 리스트형 아주 쉽게 NestJS 백엔드 서버 만들어보기 자바의 스프링, 파이썬의 장고, 자바스크립트의 익스프레스 이 세가지 프레임워크들은 모두 각 언어의 백엔드 프레임워크입니다. 그리고 NestJS도 익스프레스와 같이 자바스크립트의 백엔드 프레임워크입니다. NestJS에 대해서는 더 소개할 내용들이 많지만, 간단하게 백엔드 서버를 하나 만들어보고 난 뒤에 다시 이야기해보도록 하겠습니다. NestJS를 사용하기 위해서는 우선 NodeJS가 설치되어있어야 합니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크에서 NodeJS LTS 버전을 다운받아주세요. 여기서 왼쪽 것을 다운받으면 됩니다. 최신버.. NestJS에서 MariaDB에 유저 정보 저장하기 들어가기에 앞서, 본 포스팅에서 사용한 MariaDB는 Docker를 활용해서 구동했습니다. NestJS에서는 TypeORM을 통해 DB와 NestJS를 연동합니다. ORM(Object Relational Mapping)은 이름 그대로 객체와 관계를 매핑해줍니다. 이렇게 매핑을 하게 되면 Nest에서 작성한 코드를 바탕으로 SQL을 생성하여 DB에 적용시켜줍니다. 말로만 하면 이해가 잘 안되니까 직접 해봅시다. npm install --save @nestjs/typeorm typeorm mysql2 @nestjs/config 우선 위 명령어를 입력하여 TypeORM을 설치합니다. DB_HOST=localhost DB_PORT=3306 DB_USER=root DB_PASS=1111 DB_DATABASE=t.. react에서 댓글 기능 구현하기(선택된 컴포넌트만 댓글UI 보여주기) 오늘 하루종일 씨름한 댓글 기능 구현하기 후기... 기존에 댓글 기능을 간단하게 구현해두었지만 서버와의 연동을 위해서 조금 손보고자 시작한게 하루를 뚝딱 집어삼켜버렸다. 처음에는 그냥 axios로 대충 그까이꺼 구현하면 되지 싶었는데 몇가지 난관이 있었다. 첫째로, 서버에 delete 요청을 하기 위한 URL에 피드의 ID와 댓글의 ID가 모두 들어갔고 map함수를 중첩해서 피드와 댓글을 구현한 나는 댓글에서 피드의 ID를 불러오는 방법을 찾지 못해 한참을 헤맸다. axios를 이용해 feed 데이터와 comment 데이터를 각각 불러온 뒤 피드 UI를 생성하는 map함수 하위에 댓글 UI를 생성하는 map함수를 넣었다. {feedData.map(function(a,b)=>{ return ( {a.tit.. 리액트에서 MUI로 체크박스 + 선택된 항목들 axios로 DELETE 요청하기 현재 진행중인 프로젝트에서 채팅방 목록을 보여주고, 거기서 삭제하고 싶은 채팅방을 선택, 삭제할 수 있는 기능을 구현중이다. 그런데 내가 사용 중인 MUI에서 ToggleButton 컴포넌트를 사용하니 하나만 체크해도 전체가 체크되는 현상이 발생해서 머리가 아팠다. 체크박스를 누를 때 마다 해당 채팅방의 id를 추출하는 로직은 구현했는데 아무리 머리를 쥐어짜내도 전체가 체크되는 현상을 해결할 수가 없었다. 그러다가 어이없게도 Togglebutton 대신 Checkbox를 사용하니 개별 선택이 가능해졌다. 설마 채팅방 리스트를 보여주는 UI를 구현할 때 채팅방 데이터들이 담긴 리스트를 map함수로 반복해서 생긴 문제인가? 싶어서 각각의 채팅방 id를 뽑아내서 체크박스를 체크할 때마다 조회, 대조해서 해당 .. 리액트에서 게시글 목록 클릭해서 해당 게시글 상세 페이지로 이동하기 제목이 좀 길지만 쉽게 말하면 내가 게시판에 접속했는데 수많은 게시글 중 한 개의 제목을 클릭하면 해당 게시글의 상세 페이지로 넘어갈 수 있는 로직을 소개하고자 한다. 우선 나는 ReactJS와 NestJS를 이용해서 프로젝트를 진행중이다. 마이페이지에 접속하면 아래 사진과 같이 내가 작성한 피드 리스트가 보이고 피드의 제목을 클릭하면 해당 피드의 상세페이지로 접속할 수 있다. 쉽게 생각하면 각 피드의 제목마다 해당 피드의 상세 페이지의 주소를 하드코딩 해서 쉽게 페이징 기능을 구현 할 수도 있지만 이 프로젝트는 서버와의 연동을 통해 실제 게시판 서비스 처럼 생성, 조회, 수정, 삭제가 가능하도록 제작하는 것이 목표이므로 피드 리스트의 각각의 피드 제목을 클릭했을 때 해당 피드의 id를 기반으로 상세 페.. react에서 axios 사용 시 404에러 해결 방법 react에서 axios를 이용해 nest 서버로 요청을 보냈는데 난데없이 404 에러가 발생했다. 404 에러는 클라이언트인 리액트가 요청한 페이지를 찾을 수 없을 때 발생하는 에러이고, 내 경우는 URL을 잘못 기입해서 발생했다. 지금 진행중인 프로젝트를 위해서 테스트용 백엔드 서버인 nest 서버를 개발했고 실제 서버인 스프링 부트 서버를 팀원들이 개발중이다. 그런데 테스트용 서버가 실제 서버보다 먼저 만들어졌기 때문에 부득이 서버에 데이터를 요청하는 URL이 테스트 서버와 실제 서버에서 달랐고, 해당 부분을 조금씩 수정해나가고 있는 상황이다. 지금 nest 서버에서는 /feed 경로로 get 요청을 해야 정상적으로 데이터를 반환해줄 수 있는데 react 앱에서 /sns 경로로 get 요청을 하도록.. 리액트에서 axios로 POST 요청할 때 401 오류 해결 후기(feat : object형 데이터 사용 오류) ReactJS와 NestJS를 이용하여 프로젝트를 제작중인데 로그인 기능 구현 도중 오류를 만났다. axios를 이용해 id정보와 password 정보를 서버로 post 했는데 브라우저에서 401 오류를 반환한 것이다. 오류 해결을 위해서 구글링을 진행했고 이런 저런 해결 방법들을 찾아 시도해보았지만 해결이 불가능했다. 1시간 가량을 삽질하던 중 object형 데이터에서 key와 value가 같다면 value만 적어도 된다는 글을 발견했다. // 이 코드를 let body = { username: id, password: password }; // 이렇게 바꿀 수 있다. let body = { id, password }; 참고로 로그인관련 코드를 구글링하면서 만들고 있었는데 내 원래 코드는 아래와 같았다.. 이전 1 다음
