Will find a way

들어가기 전서버 로직을 구현하면 비동기 처리와 그로 발생한 에러를 다룰 일들이 반드시 있다. Express는 미들웨어를 이용하여 에러를 한 곳에서 관리 하기에 용이하다. 이번 시간에는 그 때 사용할 수 있는 async-handler 에 대해서 알아 보자. 목차1. Express에서 async-handler란?2. 예제 코드 및 적용3. 적용 전/후 코드 1. Express에서 async-handler란?asyncHandler는 Express 라우트에서 발생한 비동기 함수의 에러를 자동으로 next()에 전달해 주는 래퍼(wrapper)다. Express에서는 Async request handler 형태의 패턴을 자주 사용한다. asyncHandler는 Express의 비동기 요청 핸들러에서 발생한 Pro..

들어가기 전"Express 는 자체 기능이 최소화된 라우팅 및 미들웨어 웹 프레임워크다. Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출로 구성된다." - [출처] Express 공식문서위의 말을 보면 미들웨어를 이해하는 것이 Express를 사용하는데에 있어서 중요하다는 것을 알 수 있다. 오늘은 Express가 무엇이며 어떻게 사용하는지에 대해 알아보자 목차1. 미들웨어(Middleware)란?2. 미들웨어의 종류3. 미들웨어 사용법 1. 미들웨어(Middleware)란?미들웨어를 검색했을 때 일반적으로 '운영체제와 응용 프로그램, 또는 서로 다른 시스템 사이에서 중간 매개체 역할을 하는 소프트웨어' 라고 정의를 한다. 여기서 우리가 주목해야할 키워드 '중간 매개체 역할'이다. Ex..

들어가기 전로그인을 구현하기 위해 Zustand를 이용하였다. 로그인을 하고나서 Zustand store에는 access token이 저장되어 있다. access token을 가지고 있다는 것은 로그인이 되어있는 상태를 의미한다. 여기서 새로고침을 해보자. 메모리에 저장된 access token이 사라지고 로그인이 풀리는 상황이 일어난다. 오늘은 이 상황을 해결하려면 어떻게 해야하는지 코드를 작성해보고 알아보는 시간을 가져보려 한다. (해결하기 위해 알아야할 개념과 원리는 아래를 링크를 참고하면 도움이 될 것이다.)https://jakapark.tistory.com/entry/JWT-Access-Token-%EA%B3%BC-Refresh-Token JWT : Access Token 과 Refresh To..

들어가기 전최근에 프로필 이미지 업로드를 구현을 했다. 프로필 이미지를 업로드 할 때 이런 내용의 문구를 한번 쯤 봤을 것이다.이미지 조건용량은 몇 mb 이하이며, 확장자는 JPEG, PNG, WebP 가능 용량이야 당연히 적으면 저장하는 컴퓨터(서버) 입장에서 부담이 적어서 좋다는 것을 유추할 수 있지만, 확장자는 유추하기가 어려웠다. 프로필 이미지를 구현하기 이 전에 구직 사이트를 이용하여 프로필 사진을 업로드 할 때는 생각없이 당연하게 여겨졌다. 그래서 구현할 때도 당연히 위에서 언급한 세가지를 자연스럽게 고려했고 자연스러운 의문이 생겼다. 왜 저기 있는 확장자만 사용하는지가 궁금해졌다. 오늘은 이미지 확장자의 특징에 대해서 알아보고자 한다.1. 핵심 웹 이미지 확장자확장자사용 이유 (장점)주요 용..

들어가기 전Ai를 활용해 Express로 서버를 구현하는 과정에서, 에러 처리(Error Handling)에 대해 고민하게 되었다.서버를 개발하다 보면 예상하지 못한 상황에서 에러가 발생할 수 있다. 이러한 에러를 적절하게 처리하지 않으면 서버가 중단되거나, 클라이언트에게 올바른 응답을 전달하지 못하는 경우가 발생할 수 있다.아직 이런 상황을 직접 경험해보지는 않았지만, 안정적인 서버를 구현하기 위해서는 에러 처리 방식에 대한 이해가 필요하다고 생각했다. 그럼 에러를 어떻게 발생시키고 전달할 것인가? 이럴 때 사용하는 것이 throw다. 목차1. Error 객체란?2. throw란?3. 코드 흐름 및 작동 방식 1. Error 객체란JavaScript에서 Error는 에러 정보를 담는 표준 객체다.(t..

들어가기 전JWT로 로그인 및 인증과 관련된 기능을 구현하다 보면 Access Token과 Refresh Token을 마주하게 된다. 이번 글은 Access Token과 Refresh Token이 뭔지에 대해서 알아보고 이 것들이 어떤 원리로 기능을 하는지에 대해서 알아보자. JWT가 뭔지 모른다면?https://jakapark.tistory.com/entry/JWT-JSON-Web-Token-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C JWT: JSON Web Token 에 대해서들어가기 전로그인을 구현하기 위해 Bcrypt와 같은 암호화와 더불어 배우는 것이 JWT라고 불리는 것을 많이 사용한다. JWT가 무엇인지 어떤 원리인지에 대해서 알아보려고 한다. 목차1. Token(토..

들어가기 전로그인을 구현하기 위해 Bcrypt와 같은 암호화와 더불어 배우는 것이 JWT라고 불리는 것을 많이 사용한다. JWT가 무엇인지 어떤 원리인지에 대해서 알아보려고 한다. 목차1. Token(토큰)이란?2. JWT 2-1 JWT 란? 2-2 JWT의 구조 2-3 JWT 의 장단점 1. Token(토큰)이란?오늘 이야기 할 JWT 에서 T가 'Token'을 의미한다. 그래서 Token이 뭔지에 대해서 간단히 짚고 넘어가보자.토큰은 서버가 발급하는 일종의 “신분증”으로, 클라이언트가 이후 요청에서 자신의 인증 상태를 증명하기 위해 사용한다.쉽게 말해서 서버가 발급하는 인증용 문자열 인증과 권한, 우리가 흔히 유저가 로그인하고 해당 유저의 고유 기능이라고 생각하면 될것 같다...

들어가기 전JWT + Express + MongoDB 를 이용하여 회원가입 로그인을 구현해보려고 한다. JWT가 무엇인지는 나중에 제대로 다루어보려고 한다. 일단은 오늘은 회원가입과 로그인을 MVC 패턴(완벽한 MVC는 아닐 수 있다.)으로 구현하는 코드를 예제를 보며 npm 또는 pnpm 미리 설치해야 할 것들npm init -y -> 로 package.json 생성 및 초기화npm i express bcrypt cors dotenv jsonwebtoken mongoose디렉토리(폴더) 구조my-app/├─ src/│ ├─ routes/ # API 엔드포인트 정의│ │ └─ auth.routes.js│ ├─ controllers/ # 요청 처리 및 비즈니스 로직│ ..

들어가기 전무한스크롤을 구현하고 테스트하면서 useInfiniteQuery와 useEffect를 사용하는 경우가 있다. useEffect는 함수형 React에서 사용하는 Hook으로 최초의 한번 실행하는 함수로 쓰거나 원하는 특정값이 변할 때 사용한다. 무한스크롤을 구현할 때 useInfiniteQuery에 있는 hasNextPage, isFetchingNextPage, fetchNextPage 이 세개의 값을 useEffect의 배열에 넣는다. 그냥 공식처럼 외워도 쓰는데 문제는 없지만 왜 꼭 3개가 필요한지가 궁금했다. 이 3가지가 왜 필요한지 알아보는 글이다. useInfiniteQuery 란?Tanstack Query의 데이터 캐싱을 관리하는 Hook은 2가지가 있는데 useQuery와 useIn..

들어가기 전Zustand를 사용하고 포스팅을 하고 잘못된 부분을 수정한 적이 있다. 지금도 Zustand 포스팅 글을 검색하다보면 의도치 않게 잘못 사용하고 있는 것들을 많이 볼 수 있다. 키워드를 간단하게 정리해보자면 '전체 구독, 셀렉터, 리렌더링' 이 된다. 이번 포스팅은 Zustand를 어떻게 써야 올바르게 쓸 수 있는지 그리고 앞서 언급했던 키워드와 어떤 연관이 있는지 알아보자. 일단 Store에서 값을 사용하는 방법이 두 가지가 방법이 있다. 전체 구독과 선택자 구독이다.이 두 개의 차이점에 대해서 알아보자. 전체 구독 / 선택자 구독전체 구독 : Store에 있는 state가 바뀌면 전체가 리렌더 발생 선택자 구독 : Store에 있는 state 중에 필요한(선택한) 값이 변경되면 리렌더 발..