Blog
//
Blog
About Me
//

[NestJS] 0. NestJS 들어가기

Category
Author
PinOnMain
1 more property
NestJS, TypeORM 이해하기
Table of Content

NestJS를 통한 백엔드 서버 구축

NestJS Tutorials
NestJS R&D
… 계속하여 추가 기능 개발
Search

클라이언트 약식 소셜 로그인(OAuth)을 백엔드 서버 중심 인증방식으로 변경

•
보안 및 관례상 프로덕션 환경에서는 Credential 획득 및 관리를 백엔드에서 처리하는 것이 일반적인 관례이자 더 안전한 방식
•
따라서 이전 클라이언트 사이드로 Credential을 전달하던 약식 구현에서 백엔드 중앙집중식 구현으로 변경하고자 한다.
[OAuth2.0] Google Social Login 구현 - 백엔드 중앙 관리식 로직 구현

소셜 로그인은 모두 비슷한 과정

•
이전 카카오 로그인 구현과 결과적으로 동일한 과정을 거친다.
•
실제 애플리케이션에서 구현하는 과정을 정리
[OAuth2.0] Google Social Login 구현 - 클라이언트 사이드 약식

데이터 바인딩을 위한 @Input 데코레이터

Angular에서 데이터 바인딩을 위한 데코레이터는 주로 @Input()을 사용하여 부모 컴포넌트로부터 값을 받아오는 데 사용됩니다. 이 데코레이터는 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바인딩할 수 있게 해줍니다.
다음은 Angular에서 @Input() 데코레이터를 사용하여 데이터 바인딩을 구현하는 간단한 예시입니다.
1.
자식 컴포넌트 생성 먼저 자식 컴포넌트를 생성하고, @Input()을 사용하여 데이터를 받을 준비를 합니다.
Angular의 @Input 데코레이터 사용 방법

문제 인식

•
문제 상태 분석

해결 방안 탐색

•
특정 유저가 로그인하는 방식의 SSH 세션은 결국 해당 접속을 종료하면 세션이 종료되면서 관련 프로세스가 모두 종료됨
•
따라서, NAS가 계속하여 실행되는 root 유저로 접근하면 해결 할 수 있지만 root계정으로 터미널에 접근하는 것을 개방하는 것은 위험성이 있음
•
NAS 자체에서 제공하는 Docker를 통해 실행하면 root에서 실행하는것이므로 지속적인 프로세스를 유지 할 수 있음
NAS 내 파일업로드 애플리케이션의 특정 SSH에 종속된 세션 만료 문제 + Docker와 Host의 컨텍스트 인식 문제

NAS 파일 스토리지를 활용하기

•
NAS:
•
서비스 백엔드 서버:
•
서비스 프론트엔드 서버:
NAS 파일서버 구축과 웹서버(Nginx)를 통한 파일 서빙

문제 인식

해결 방안 탐색

해결 시도와 결과

Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'.

샘플 모습

1.
프론트엔드의 파일 업로드 요청 시작
2.
백엔드 컨트롤러의 요청 흐름
3.
프론트엔드의 파일 데이터베이스 목록 조회 화면
4.
강의실의 시청 화면 진입 모습
5.
시청 화면 요청 시 NAS의 웹서버로부터 서빙되는 영상의 모습
백엔드서버→NAS API 파일 업로드→NAS 영상 서빙 뷰 페이지 반환까지의 구현 샘플

Standalone?

Angular에서 "Standalone" 컴포넌트는 Angular 14 이상에서 도입된 기능으로, 모듈 없이 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 이는 컴포넌트의 재사용성과 관리성을 높이며, 더 간편하게 애플리케이션을 구성할 수 있게 해줍니다.
Standalone 컴포넌트의 특징
1.
모듈 불필요: 기존의 Angular 컴포넌트는 반드시 모듈에 포함되어야 했지만, Standalone 컴포넌트는 독립적으로 사용할 수 있습니다.
컴포넌트의 standalone의 필요성과 적용 범위 고려
　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio