kth990303의 코딩 블로그

스프링에서 @Valid, @Validated을 이용한 검증 처리가 있다면, NestJS에서는 pipe를 이용하여 검증 처리를 할 수 있다. 공식 문서에는 아래와 같은 그림이 있다. NestJS에서도 Filter가 존재한다. 하지만 스프링의 @Valid, @Validated와 더 유사하다고 생각한 데에는 이유가 있다. filter는 요청에 대한 광범위한 오류를 잡아주는 역할을 해주고 pipe는 요청 데이터를 검증하여 유효하지 않으면 에러를 반환하는 역할이라는 차이점이 존재하기 때문이다. https://stackoverflow.com/questions/63205074/nestjs-pipe-vs-filter NestJs Pipe vs filter I was going through the NestJs Docs..

이번 포스팅은 CRUD 경험이 한 번이라도 있다면 조금 지루할 수 있다. (nestjs든 spring이든 뭐든...) 최근 스프링과의 장단점 및 차이점을 비교해보기 위해 nodejs 진영의 백엔드 프레임워크인 NestJS를 공부중이다. NestJS에 대한 소개, 설치 및 구축방법, 학습 동기는 아래 글을 참고하자. https://kth990303.tistory.com/410 [NestJS] NestJS 설치 및 애플리케이션 구축해보기 NestJS는 nodejs (javascript) 진영에서 매우 유명한 백엔드 프레임워크이다. 공식 문서에서 nestjs는 typescript를 완전히 지원하며 OOP(Object Oriented Programming), FP(Functional Programming), F..

NestJS는 nodejs (javascript) 진영에서 매우 유명한 백엔드 프레임워크이다. 공식 문서에서 nestjs는 typescript를 완전히 지원하며 OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming)를 결합했다고 소개하고 있다. 또, NestJS를 통해 nodejs 진영에서 애플리케이션 아키텍처를 제공해줄 수 있게 해주기 위한 철학을 가지고 있다고 하며, Angular에서 영감을 많이 받았다고 한다. 실제로 module과 같은 개념이 있는 것을 보면 Angular에서 영감을 받았다는 점이 팍팍 느껴진다. 즉, JVM 생태계 언어에서 Spring 프레임워크가 있다면 no..

fetch 함수를 이용하면 새로고침 없이 api를 호출하여 http 요청을 보내고 응답을 받아올 수 있다. 이번 포스팅은 스프링으로 개발된 백엔드 코드의 api를 호출하여 json 객체를 fetch 함수를 이용하여 응답을 받아보는 걸 배운 과정을 기록할 것이다. 과정 속에서 내가 발생시킨 어이없는 실수, 멍청한 실수들을 기록해두어, 다음엔 실수하지 않도록 하기 위함이다. 꼭 백엔드 환경이 스프링+자바가 아니더라도 상관없다. 참고로 fetch 공식 문서는 아래 링크에서 확인가능하다. https://ko.javascript.info/fetch fetch ko.javascript.info fetch 함수 - GET 아래와 같은 응답을 보내주는 api가 있다. @GetMapping("/rooms") public..

이번엔 에러는 아니지만, 원하는대로 프로그램이 돌아가지 않는 현상이다. 일기장 프로그램을 만들기 위해 아래와 같은 임시데이터를 만들었다고 하자. const dummyList = [ { id: 1, author: 'author1', content: 'content1', emotion: '5', created_date: new Date().getTime(), }, { id: 2, author: 'author2', content: 'content2', emotion: '4', created_date: new Date().getTime(), }, { id: 3, author: 'author3', content: 'content3', emotion: '3', created_date: new Date().getTi..

객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도록 하자. 도대체 왜 length만 이런 것일까? 그 이유는 여기서 알 수 있었다. 요약하자면 js에선 배열과 문자열에서만 length 속성이 있고, Object에선 length 속성이 없어서 그런 것이었다! https://www.delftstack.com/ko/howto/javascript/javascript-length-of-object/ JavaScript에서 객체 길이 가져 오기 JavaScript에서 객체의 길이를 얻는 다양한 방법을 보여줍니다. www...

typescript로 리액트 코드를 작성하여 props를 넘겨주는 과정에서 아래 에러가 발생했다. js에선 타입을 지정해주지 않아 간단히 해결되지만, ts는 타입을 명시해주어야 했기 때문에 이러한 에러가 발생하는 것이다. 넘겨주려는 dummyList는 아래와 같다. const dummyList = [ { id: 1, author: 'author1', content: 'content1', emotion: '5', created_date: new Date().getTime(), }, { id: 2, author: 'author2', content: 'content2', emotion: '4', created_date: new Date().getTime(), }, { id: 3, author: 'author3..

js로 작성한 코드들을 ts로 변화시키는 작업을 하고 있다. useRef는 js나 ts나 큰 변화는 없다. 우리는 이번 포스팅을 통해 보다 똑똑하게 useRef를 사용해보도록 하자. useRef란? 간단하게 useRef가 무엇인지부터 짚고 넘어가보자. useRef는 꽤 많은 상황에서 쓰인다. 컴포넌트에서의 어떠한 DOM을 선택해야 할 때 쓰이기도 하고, 컴포넌트 내부에서 다룰 수 있는 변수를 만들어야 할 때에도 쓰인다. 전자의 경우는 예를 들어 특정 input, textarea 등의 태그에 focus를 줘야하는 경우에 쓰이고, 후자의 경우는 setState로 다루지 않는 변수들 (예를 들면 비동기 처리를 할 때 쓰이는 setTimeOut, setInterval에서 id를 담아 중복클릭을 방지할 때 쓰이는..

javascript로 프론트를 다루는 분들이라면 초보시절에 왜 에러가 뜨는지 몰랐다가 undefined가 전달되는 경우라든지, 타입이 잘못 전달됐다든지 하는 경우를 굉장히 많이 겪었을 것이다. 나도 요즘 이러한 경우가 많아 굉장히 많은 고통을 겪었으며, 내가 만약 js를 잘하게 돼서 에러가 하나도 없다고 하더라도, 팀원들과의 협업 과정을 위해서, 또는 배포 후 프로그램이 오작동하는 경우를 막기 위해서라도 ts를 익혀야할 필요성을 느껴서 typescript를 익히는 중이다. 음... 난 백엔드니까 이건 안해도 되지 않을까? 하는 마음도 있긴 했는데, 학교 수업 프로젝트에서 프론트 쪽도 좀 건드려보고 싶기도 하고, 내가 나만의 프로젝트를 나 혼자 만들 수 있으려면 프론트도 잘할 줄 알면 좋고, 뭐 아무튼 단..

useState를 사용하면 프로젝트 규모가 커지기 시작할 때, state가 너무 많아지거나 부모와 자식 컴포넌트 간 관계가 굉장히 복잡한 경우가 존재한다. 이런 경우에 부모-자식 관계를 관리해주는 리덕스를 이용하거나 useReducer, contextAPI, dispatch를 사용한다고 한다. 이번 포스팅에서 틱택토를 만드는 과정의 일부를 통해 reducer, action, 그리고 dispatch에 대해 알아보도록 하겠다. 참고로 이번 포스팅은 조현영님의 React 웹게임 기본강좌 https://youtu.be/ccKoutCkbao 를 수강하면서 복습 용으로 작성하는 것이다. 틱택토에 필요한 states를 useState가 아닌 useReducer로 useState를 사용할 땐 관리하는 state들을 모..