풀소유

경고isOpen이라는 값을 styled-component에 보내주는데 아래와 같은 경고 문구가 로그에 찍혔다.Warning: React does not recognize the isOpen prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isopen instead. If you accidentally passed it from a parent component, remove it from the DOM element. 발생 이유DOM 요소에 대한 사용자 정의 속성이 React에 의해 대문자로 시작할 수 없기 때문이다. 여기서 isOpen 값은 ..

모듈 시스템JS의 모듈 시스템은 코드를 여러 개의 파일로 나누어 관리하고, 각 파일 간의 의존성을 정의하여 필요한 기능을 불러오는 방식이다. 이를 통해 코드의 재사용성, 유지보수성, 가독성을 높일 수 있다. 자바에서도 패키지를 사용해 관련 클래스와 인터페이스를 그룹화하여 관리하는 것과 유사하게, JavaScript에서는 모듈 시스템을 통해 코드를 나눌 수 있습니다. CommonJSCommonJS는 JavaScript를 사용하는 서버 사이드 플랫폼에서 모듈을 정의하고 사용하기 위한 표준화된 방법 중 하나이다. Node.js에서 가장 널리 사용되는 모듈 시스템이며, 이전에는 브라우저 환경에서도 사용되었으며 ES6 모듈 시스템이 대안으로 사용되기도 한다. 브라우저 환경에서 사용하기에는 동기적인 특성과 캐싱 메..

리액트 16.8부터 훅(Hooks)이 도입되어 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 되었다.화면을 그릴 때마다 호출되는 훅의 숫자와 순서를 동일하게 하기 위하여 루프, 조건 분기, 콜백 함수 안에서는 훅을 호출할 수 없다. 이런 위치에서 훅을 호출하는 코드를 작성하면, 빌드 에러 또는 실행 시 에러가 발생한다. 따라서, 훅은 컴포넌트의 최상위 레벨에서만 호출되어야 한다. 또한, 리액트 훅은 반드시 함수 컴포넌트에서만 사용해야 한다.용도용도훅컴포넌트 데이터 관리useMemouseCallbackuseStateuseReducer컴포넌트 생명 주기 대응useEffectuseLayoutEffect컴포넌트 메서드 호출useRefuseImperativeHandle컴포넌트 간의 정보 공유useCo..

저번 시간에는 Google OAuth를 통해 사용자를 인증하는 방법에 대해 다뤘습니다. 오늘은 이어서 인증된 정보를 가지고 JWT를 발급하고 인증하는 방법에 대해서 다루겠습니다. 패키지 설치 npm i --save @nestjs/jwt passport-jwt bcryptjs npm i --save-dev @types/passport-jwt @types/bcryptjs @nestjs/jwt는 Nest.js 프레임워크에서 JWT(JSON Web Tokens) 인증을 구현할 때 사용되는 패키지입니다. passport-jwt는 Passport와 함께 JWT 인증을 사용할 때 사용되는 패키지입니다. bcryptjs는 refresh token을 해쉬하여 데이터베이스에 저장하기 위해서 설치합니다. JWT 발급 Jwt..

첫번째 시간에는 Google 클라이언트 ID를 발급받는 방법을 다뤄보았습니다. 이번 시간에는 Passport와 NestJS에 가드를 통해 인증을 진행하겠습니다. 패키지 설치 npm i --save @nestjs/passport passport passport-google-oauth20 @nestjs/jwt --save-dev @types/passport @types/passport-google-oauth20 각 패키지들에 대해서는 차차 설명하도록 하겠습니다. Passport Passport는 Node.js에서 사용되는 인증 미들웨어로, 다양한 인증 전략(strategy)을 지원하며, 사용자 정의 전략을 만들어서 사용할 수도 있습니다. @nestjs/passport를 사용하면 NestJS에서 passpor..

사이드 프로젝트에서 로그인은 네이버, 카카오, 구글을 통한 소셜 로그인만 제공하기로 하였습니다. OAuth 프로세스 브라우저에서 서버로 OAuth 로그인 페이지를 요청합니다. 서버는 브라우저를 OAuth 서비스 제공자의 로그인 페이지로 리다이렉트시킵니다. 로그인 성공시 서비스 제공자는 브라우저를 서버와 사전에 협의된 URL로 Access Token과 함께 리다이렉트시킵니다. 서버는 서비스 제공자에게 인증코드를 보내고 서비스 제공자는 사용자 정보를 서버로 보냅니다 Google OAuth 클라이언트 등록 1. https://console.cloud.google.com/ 에 로그인합니다. 2. "프로젝트 만들기"를 선택하여 자신의 프로젝트를생성합니다. 3. "API 및 서비스" > "사용자 인증 정보" > “..

에러사이드 프로젝트 진행중에 Refresh Token 을 쿠키에 담아 사용하고 있는데 이런 에러를 만났다./app/dist/main.js:14 app.use((0, cookie_parser_1.default)()); ^ TypeError: (0 , cookie_parser_1.default) is not a function at bootstrap (/app/dist/main.js:14:41) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)main.tsasync function bootstrap() { const app = await NestFactory.create(AppModule); const port = 30..

Health check API 서버나 애플리케이션의 상태를 모니터링하기 위한 API입니다. 일반적으로 HTTP GET 요청을 통해 접근할 수 있으며, 서버나 애플리케이션의 상태를 나타내는 정보를 반환합니다. 클라우드 서비스나 마이크로서비스 아키텍처를 사용하는 애플리케이션에서 널리 사용됩니다. AWS CodeDeploy의 배포는 Health Check API를 호출하여 지정된 상태값이 돌아오는지 확인 후에 배포를 마무리하기도 합니다. 또한 프라이빗 서브넷에 존재하는 데이터베이스의 상태를 쉽게 확인할 수 있는 방법이기도 합니다. 이 글은 NestJS의 공식 문서를 기반으로 작성되었습니다. @nestjs/terminus 설치하기 NestJS 프레임워크에서 사용할 수 있는 Health check 모듈입니다. 이..

웹 애플리케이션을 개발할 때, 로컬 환경에서 개발하다가, 서버에 배포할 때, 서버 환경에서 운영하게 됩니다. 이때, 로컬 환경과 서버 환경이 달라서 발생하는 문제를 해결하기 위해서는 환경 변수를 설정할 필요가 있습니다. 저는 사이드 프로젝트를 준비하면서 로컬에서 사용할 환경 변수를 지정하기 위해 @nestjs/config 라이브러리를 사용하였습니다. @nestjs/config NodeJS에는 대표적으로 환경 변수를 설정하는 라이브러리 dotenv가 존재하며 NestJS에서는 dotenv를 내부적으로 사용하는 @nestjs/config 라이브러리가 존재합니다. npm i --save @nestjs/config . env 파일 먼저 Root 디렉터리에 .dev.env 파일을 생성합니다. Root 디렉토리란 ..

NestJS의 Provider 란? 프로바이더는 Nest의 기본 개념입니다. 대부분의 기본 Nest 클래스는 서비스, 리포지토리, 팩토리, 헬퍼 등 Provider로 취급될 수 있습니다. 프로바이더의 주요 아이디어는 종속성으로 주입할 수 있다는 것입니다. 즉, 객체는 서로 다양한 관계를 만들 수 있으며 객체의 인스턴스를 연결하는 기능은 대부분 Nest 런타임 시스템에 위임될 수 있습니다. 위에 글은 NestJS 에서 설명하는 Provider를 번역한 글입니다. 저는 이글을 보고 Provider를 스프링의 Bean이라고 이해했습니다. 애플리케이션에서 사용되는 객체를 정의하고, 의존성 주입 시스템에 등록하며 인스턴스를 필요한 곳에 제공한다는 점이 Bean과의 공통점이지만 Bean은 기본적으로 Singleto..