Express + TypeScript를 사용하는데 타입에 관해서 무슨 타입을 줘야하고 왜 타입이 지정되지 않고 어떻게 해야하는지 찾아보다가 좋은 기사글을 발견하여 한글로 글을 작성해봅니다. Express 함수 타입 표준 Express 함수는 req(uest), re

리덕스란? 리덕스는 자바스크립트 애플리케이션에서 상태 관리를 위한 오픈 소스 라이브러리 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 리액트 컨텍스트 vs 리덕스 리액트 컨텍스트는 잠재적인 단점이 몇 개 존재한다. 앱이 복잡해 질수록 리액트 컨텍스

리덕스 툴킷은 효율적인 리덕스 개발을 위한 리덕스 개발에 필요한 모든 기본 기능을 제공하는 도구 모음이다. 또한 Redux 로직을 작성하는 표준 방법으로 고안되었으며 사용하는 것을 권장한다고 나와있다. 리덕스 툴킷 문서npm install @reduxjs/toolki

기존에 존재하던 route 파일에 경로를 추가하고 서버에 요청을 보냈는데 에러가 발생하였다. 아래 사진에 맨 아래 2개에 get메서드가 새롭게 추가한 경로이다.경로를 추가한 코드평소처럼 구글에 message 부분에 나온 cast to objectid failed for

이번에는 연관된 배열내에 데이터를 삭제가 되지 않았던 문제에 대해서 글을 작성한다.아래 코드는 내가 구성한 Hotel 모델과 Room모델이다. 나는 room을 하나 추가할때마다 이것을 Hotel model 에 room속성에 roomId를 추가하고 나중에 room을 삭

jwt 인증을 구현하다가 발생한 에러와 처리 과정을 적어보려고 한다. 우선 아래는 코드의 일부인데 보는 것처럼 user 프로퍼티가 request에 존재하지 않는다는 그런 에러이다. 당연하다 req에 user를 포함한다는 타입을 따로 지정해 주지도 않았기 때문이다. 그래

Express + typescript 환경에서 로그인 부분을 구현하는 도중에 로그인을 성공했을 시 로그인한 정보중에 hash된 비밀번호와 admin 속성은 보여주지 않기 위해 구조 분해 할당을 하여 코드를 작성하였다.login 코드실제 로그인했을 경우 응답을 받은 결과

라우팅 처리 과정에서 미들웨어 함수를 사용해보려고 한다.middlewares이름의 폴더를 만든후 appLogger.ts 파일 안에 코드 작성특별한 기능이 있는 코드는 아니고 미들웨어로써 사용할 함수이다.req.url과 req.method 속성을 사용하여 요청 URL과

저번 글에는 Express에서 라우팅을 설정하는 방법을 작성했는데 이번에는 실제로 유저가 formData를 요청했을때 데이터를 전달 받는 방법에 대하여 글을 적어보겠다...!저번 코드에서 코드가 변경되는 부분이 크게 없다. 우선 아래 코드처럼 app.use(expres

이번에는 Express에서 경로에 따른 처리를 어떻게 하는지 작성하려 한다.app.use 함수는 지정된 경로에 Express 애플리케이션에 미들웨어를 바인딩하는 함수이다. 미들웨어는 들어오는 요청과 응답을 처리하는 함수 또는 메서드. 즉, 요청이 최종 라우트에 도달하기

유튜브를 돌아다니다가 눈에 보인 인도 선생님을 통해 Nodejs에 대해 간략하게 배웠고 결국에는 Express 사용하여 백엔드를 구성할 것이기 때문에 Express로 서버를 구성하는 절차에 대하여 적어보려고 한다.나는 Node.js에서 초기에 설정을 할때 아래 3가지를

지난번에 초기 설정에 이어서 서버를 실행시키는 과정을 간다하게 작성해보려한다.파일 상단에서 http 모듈과 타입으로 사용할 세가지 타입을 import 한다.임의의 상수에 호스트 이름과 port번호를 할당한다.http.createServer 함수를 사용하여 서버객체를 생

프론트를 React와 Typescipr를 이용하여 구성하였는데 backend부분을 어떻게 typescript로 셋팅하여 시작하는지 몰라서 내용을 간략하게 정리해보려한다.당연하게도 typescript를 이용하기 위해서는 typescript를 설치해야 합니다.명령 프롬프트

memo란? memo를 사용하면 props가 변경되지 않은 경우 컴포넌트가 리렌더링하는 것을 건너뛸(skip) 수 있습니다. 용법(usage) props가 변경되지 않은 경우 리렌더링 스킵 상태를 사용하여 메모된 컴포넌트 업데이트 컨텍스트를 사용하여 메모된 컴포넌트

렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook이라고 정의되어 있습니다.용법(Usage)은 크게 3가지로 나누고 있습니다. ref를 이용한 값 참조ref를 사용하여 DOM 조작참조 컨텐츠 재생성 방지다른 hook과 마찬가지로 컴포넌트에 최상단에

문제 정사각형으로 이루어져 있는 섬과 바다 지도가 주어진다. 섬의 개수를 세는 프로그램을 작성하시오. 한 정사각형과 가로, 세로 또는 대각선으로 연결되어 있는 사각형은 걸어갈 수 있는 사각형이다. 두 정사각형이 같은 섬에 있으려면, 한 정사각형에서 다른 정사각형으로

문제N(1 ≤ N ≤ 100,000)개의 로프가 있다. 이 로프를 이용하여 이런 저런 물체를 들어올릴 수 있다. 각각의 로프는 그 굵기나 길이가 다르기 때문에 들 수 있는 물체의 중량이 서로 다를 수도 있다.하지만 여러 개의 로프를 병렬로 연결하면 각각의 로프에 걸리는

문제다솜이는 0과 1로만 이루어진 문자열 S를 가지고 있다. 다솜이는 이 문자열 S에 있는 모든 숫자를 전부 같게 만들려고 한다. 다솜이가 할 수 있는 행동은 S에서 연속된 하나 이상의 숫자를 잡고 모두 뒤집는 것이다. 뒤집는 것은 1을 0으로, 0을 1로 바꾸는 것을

react 강의를 들으면서 react에서 입력을 받을 때 onChange를 사용하여 입력마다 함수를 호출하여 state 값을 변경하는 것을 배우고 그다음 Ref를 사용하여 참조를 이용하여 버튼을 클릭했을 때만 값을 저장하는 방법을 배웠는데 지금은 input 기본 태그를

React 공식 문서에서 createPortal에 대해 createPortal을 사용하면 일부 하위 항목을 DOM의 다른 부분으로 렌더링 할 수 있다고 설명하고 있습니다. React 애플리케이션을 작업하면서 overlay나 modal 컴포넌트를 만드는 과정을 접하게 될