전체 글70 [Nextjs] 1. 그대들은 Nextjs 세팅, 어떻게 할 것인가? 안녕하세요? 개발자 옵티머스입니다. 오늘은 Nextjs를 사용함에 앞서서 기본적인 세팅에 대해 같이 알아볼까 합니다. 제가 여러 블로그나 영상 등을 봤을 때는 주로 node.js 기반에 npm이나 yarn을 통해서 패키지들을 관리한다는 것을 알 수 있었습니다. 저도 처음 리액트를 배우면서 개발에 입문했을 때도 node와 yarn을 통해서 리액트를 사용했습니다. 하지만 개발의 세계는 공부하면 할수록 더 다양한 방법들과 접근법들이 존재하더라고요. 그래서 저도 조금(?) 새로운 접근법으로 Nextjs를 사용해보려고 합니다. 그것은 바로... Bun.js bun.js 캐릭터는 보면 볼수록 귀여운 것 같습니다. ㅎㅎ 하지만 bun은 귀여운 모습 뒤에 어마어마한 능력을 감추고 있습니다. bun.js에 대해 간략히 .. 2023. 11. 22. [Nextjs] 0. 내가 Nextjs를 도입한 이유 안녕하세요? 개발자 옵티머스입니다. 오랜만에 인사드리네요 ㅎㅎ 최근에 제가 개발하고 있는 서비스가 한 가지 난관에 봉착했습니다. 바로 SEO와 관련된 문제입니다. SEO는 검색엔진최적화의 약자로 구글이나 네이버와 같은 검색 엔진이 제가 만든 서비스에서 생성되는 콘텐츠를 얼마나 잘 노출하는 지를 결정할 수 있는 매우 중요한 부분입니다. 제가 아무리 서비스를 잘 만들어도 사람들이 검색해도 나오지 않으면 아무 소용이 없겠죠? 이처럼 SEO는 서비스 운영에 있어서 굉장히 중요한 역할을 차지합니다. 하지만 제가 만든 서비스는 SEO가 잘 적용이 되지 않는다는 문제를 갖고 있었습니다. (아래는 제가 가 개발하고 있는 서비스입니다. 이렇게라도 노출해야지 ㅎ) SEO가 안 되는 이유 제가 만든 서비스에 SEO가 잘 적.. 2023. 11. 13. [Nestjs]7-1. Guard 기본적인 구현 방법 안녕하세요~!! 오늘은 저번 시간에 알아본 가드에 대해서 직접 구현해보는 시간을 갖도록 하겠습니다. 🥊Authorization guard 사용자 인증은 가드의 예시 중 가장 대표적인 예시입니다. 우리가 구현할 AuthGuard는 사용자의 헤더에 특정 토큰이 제대로 들어있는 지 확인하는 것입니다. import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common'; import { Observable } from 'rxjs'; @Injectable() export class AuthGuard implements CanActivate { canActivate( context: ExecutionContext ): boolean | Promise.. 2022. 6. 25. [Nestjs] 7. Guard 🥊🥊 안녕하세요~! 오늘은 가드의 개념에 대해서 간단히 알아보도록 하겠습니다. 권투에서 가드는 우리의 몸을 보호하는 아주 중요한 동작입니다. 서버에서도 가드는 보호 및 보안을 담당하는 중요한 요소입니다. Guard는 허용된 유저가 아니면 접근을 막아버립니다. 만약 모든 유저가 모든 요청을 할 수 있게되면, 보안적인 부분에서 문제가 발생할 수 있기에 접근이 허용된 사람에 대하여 요청을 받고 응답을 전달하는 것입니다. 🥊Guard 개념 가드는 @Injectable() 데코레이터로 주석이 달린 클래스이며 CanActivate 인터페이스를 구현해야합니다. 특정한 조건에 따라 요청을 처리할 지 거부할 지를 결정합니다. express.js에서는 이를 미들웨서에서 처리했었습니다. 미들웨어는 함수를 호출한 후에 다음 핸들러.. 2022. 6. 25. [Nestjs] 6-2. 미들웨어의 여러 기능들 ✨안녕하세요!? 오늘은 지난 시간에 이어서 미들웨어 다른 기능들에 대해 알아보는 시간을 갖도록 하겠습니다. 코드는 저번 시간에 사용했던 내용과 크게 다르지 않습니다. 변형되는 부분들만 수정해주시면 됩니다~!! 위의 코드를 기준으로 하나씩 변형하면 새롭게 접하는 기능들에 대해 알아보도록 하겠습니다. 🎉Roue Wildcards export class AppModule implements NestModule { configure(consumer: MiddlewareConsumer) { consumer.apply(LoggerMiddleware).forRoutes('c*ts'); } } 위 코드는 "cts", "cats", "c_ts" 와 같은 경로로 요청을 받을 수 있습니다. *외에도 ?, +, () 문자들도.. 2022. 6. 5. [Nestjs] 6-1. Nestjs의 미들웨어(middleware) 안녕하세요~!!. 오늘은 지난 시간에 이어서 Nestjs의 미들웨어(middleware)에 대해 알아보는 시간을 갖도록 하겠습니다. 미들웨어는 클라이언트로부터 들어온 요청을 핸들러가 처리하기 이전에 코드를 실행할 수 있는 기능을 뜻합니다. (지난 시간에 비해 훨씬 구체적인 정의죠? ㅎ...) 또한 미들웨어 함수는 애플리케이션의 요청, 응답 주기에서 요청 및 응답 객체에 접근할 수 있으며 next()라는 미들웨어 함수를 사용할 수도 있습니다. Nest 미들웨어는 지난 시간에 언급했던 express의 미들웨어와 거의 동의합니다. 한 가지 차이점이 있다면 Nest에서는 @Injectable() 데코레이터가 있는 클래스로도 구현할 수 있다는 것입니다. 그리고 이러한 클래스로 구현하려면 NestMiddleware.. 2022. 5. 15. [Nestjs] 6. 미들웨어 (middleware) 안녕하세요? 오늘은 ✨미들웨어(middleware)에 대해서 배워보는 시간을 가져보도록 하겠습니다. 서버 개발을 한번이라도 해본 사람이라면 한번쯤은 들어보셨을 것 같습니다. (아! 물론 처음 들어봤어도 상관없어요) 📢미들웨어란? 미들웨어는 운영 체제에서 제공하지 않는 일반적인 서비스와 기능을 애플리케이션에 제공하는 소프트웨어입니다. 데이터 관리, 애플리케이션 서비스, 메시징, 인증 및 API 관리는 주로 미들웨어를 통해 처리됩니다. 쉽게 말해서 번거로운 일련의 과정을 중간에서 손쉽게 처리해주는 절차라고 생각하시면 됩니다. 사실 미들웨어(middleware)라는 말이 굉장히 추상적인 말이라서 어떻게 쓰냐에 따라서 설명이 달라질 수 있지만 제가 Nestjs에서 설명하려는 미들웨어(middleware)는 서버.. 2022. 5. 13. [Nestjs] 5-1. 공유 모듈 (shared modules) Nest 프레임워크에서 모듈은 기본적으로 싱글톤입니다. 여기서 싱글톤이란 어플리케이션이 시작될 때 어떤 클래스가 최초에 한번만 메모리를 할당하고 그 메모리에 인스턴스를 만들어 사용하는 디자인 패턴입니다. 이런 특성 덕분에 Nest는 인스턴스를 매번 만들지 않고, 모듈에서 DI(의존성 주입)를 통해 가져옵니다. 모든 모듈은 자동으로 공유 모듈이며 생성되면 재사용할 수 있습니다. 모듈에서 프로바이더를 export하면 다른 곳에서 해당 모듈을 import하면 export한 프로바이더에 접근할 수 있습니다. 사용 예시는 아래와 같습니다. import { Module } from '@nestjs/common'; import { CatsController } from './cats.controller'; impor.. 2022. 4. 27. [Nestjs] 5. 모듈(Module)에 대하여... 모듈은 클래스나 함수처럼 한가지 일만 수행하는 컴포넌트는 아닙니다. ✨여러 컴포넌트를 합쳐서 더 큰 작업을 수행하는 단위를 일컫는 말입니다. @Module() 데코레이터를 사용하며 이에 대한 인자로 메타데이터를 받습니다. 아래의 그림을 예시로 모듈을 설명하도록 하겠습니다. Application Module은 루트 모듈이며 기본적으로 Nestjs 프레임워크에 자동으로 생성되는 모듈입니다. 루트 모듈은 다른 모듈들을 사용하기 위한 일종의 시작점입니다. 그리고 각각의 모듈들은 맡은 고유의 기능들이 있습니다. 물론 이 기능들은 개발자가 정의하며 유지/보수하는 과정에서 더 세밀하게 재정의되거나 변경될 수 있습니다. User Module은 사용자와 관련된 기능들( 회원가입, 정보 수정 등)을 내포하고 있으며 Ord.. 2022. 4. 24. 이전 1 2 3 4 ··· 8 다음
