Blog
//
Blog
About Me
//

블로그 이사 테스트

Category
Author
citeFred
citeFred
Tags
PinOnMain
1 more property
Tistory에서부터 5번정도 블로그를 바꿔나가면서 그 중심엔 Notion이 있었다.
Table of Content

블로그 이사 템플릿 테스트..

상단 목차가 생성 템플릿에 기본으로 적용되도록 설정

정신없는 블로그.. 처리하기

노션의 기능을 이것저것 사용하다보면서, 점점 복잡해지는 문제가 발생했다.

Toggle H1

Toggle H1

Toggle H2

Toggle ㅇ

Toggle ㅇㅁ

Search

수정 필요 부분

AuthModule

auth.module.ts

AuthModule 확인 필요

auth.module.ts
TypeError: Cannot read properties of undefined (reading 'challenge')

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

•
이전 카카오 로그인 구현과 결과적으로 동일한 과정을 거친다.
•
실제 애플리케이션에서 구현하는 과정을 정리

1. 구글에서 애플리케이션 생성

•
프로젝트 만들기

1-1. 동의화면 구성

•
콘솔에서 OAuth 동의화면을 먼저 생성해준다.
[OAuth2.0] Google Social Login 구현 - 클라이언트 사이드 약식

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

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

1. 백엔드에서의 Passport를 통한 구글 로그인 전략 구성

•
백엔드의 기존 JWT 활용 인증/인가 구현의 방식처럼 Passport를 통한 Google Auth Strategy를 추가 구성하려고 한다.

1-1. Google Auth 라이브러리 설치

•
아래 명령어를 통해 Google 인증 모듈을 설치할 수 있다. 이는 카카오 로그인 처럼 해당 모듈에 이미 정의된 내장 함수들을 통해 쉽고 빠르게 구현 할 수 있다.

1-2. GoogleStrategy 생성

•
기존 인증전략 파일이 모여있는 곳에 아래 코드를 작성한다.
[OAuth2.0] Google Social Login 구현 - 백엔드 중앙 관리식 로직 구현

문제 인식

해결 방안 탐색

해결 시도와 결과

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

샘플 모습

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

문제 인식

•
문제 상태 분석

해결 방안 탐색

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

문제 해결 과정

•
Docker를 활용하기 위한 순서

추가적인 문제의 발생

•
해당 프로젝트는 이제 Docker 가상환경 내에서 작동하기 때문에 상대경로로는 해당 컴퓨터의 정확한 video라는 폴더에 접근 할 수 없었다.
•
공유폴더로 지정하고있는 video의 절대경로를 입력하여 정확한 공유폴더로 찾아 갈 수 있도록 지정
•
컨테이너 설정에서 컨테이너 볼륨을 공유폴더와 맵핑하는 부분이 있는것으로 보아 이부분에서도 해결 가능 할 것으로 보인다.
NAS 내 파일업로드 애플리케이션의 특정 SSH에 종속된 세션 만료 문제 + Docker와 Host의 컨텍스트 인식 문제

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

•
NAS:
•
서비스 백엔드 서버:
•
서비스 프론트엔드 서버:
•
추가 고려 사항
•
개발 과정 중 문제 해결과 현재 상태
NAS 파일서버 구축과 웹서버(Nginx)를 통한 파일 서빙

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

Angular에서 데이터 바인딩을 위한 데코레이터는 주로 @Input()을 사용하여 부모 컴포넌트로부터 값을 받아오는 데 사용됩니다. 이 데코레이터는 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바인딩할 수 있게 해줍니다.
다음은 Angular에서 @Input() 데코레이터를 사용하여 데이터 바인딩을 구현하는 간단한 예시입니다.
1.
자식 컴포넌트 생성 먼저 자식 컴포넌트를 생성하고, @Input()을 사용하여 데이터를 받을 준비를 합니다.
2.
부모 컴포넌트 생성 부모 컴포넌트에서 자식 컴포넌트를 사용하고, 데이터를 전달합니다.
3.
모듈에 컴포넌트 추가 모듈 파일에 자식 컴포넌트를 추가합니다.
4.
결과 이제 Angular 애플리케이션을 실행하면, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 바인딩되어 표시됩니다. 자식 컴포넌트는 부모의 데이터를 받아서 화면에 출력하게 됩니다.
이렇게 @Input() 데코레이터를 사용하여 Angular에서 데이터 바인딩을 구현할 수 있습니다.
Angular의 @Input 데코레이터 사용 방법

Standalone?

Angular에서 "Standalone" 컴포넌트는 Angular 14 이상에서 도입된 기능으로, 모듈 없이 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 이는 컴포넌트의 재사용성과 관리성을 높이며, 더 간편하게 애플리케이션을 구성할 수 있게 해줍니다.
Standalone 컴포넌트의 특징
1.
모듈 불필요: 기존의 Angular 컴포넌트는 반드시 모듈에 포함되어야 했지만, Standalone 컴포넌트는 독립적으로 사용할 수 있습니다.
2.
간편한 사용: 컴포넌트를 다른 컴포넌트에서 직접 사용할 수 있어, 불필요한 모듈 의존성을 줄일 수 있습니다.
3.
Lazy Loading 지원: Standalone 컴포넌트는 Lazy Loading을 지원하여, 필요할 때만 로드할 수 있습니다.
Standalone 컴포넌트 생성 예시 다음은 Standalone 컴포넌트를 생성하는 방법입니다.
Standalone 컴포넌트 사용 이제 다른 컴포넌트에서 Standalone 컴포넌트를 사용할 수 있습니다. 예를 들어, 부모 컴포넌트에서 사용해 보겠습니다.
모듈에 등록하지 않고 사용 Standalone 컴포넌트는 모듈에 등록할 필요가 없으므로, 다음과 같이 사용할 수 있습니다.
컴포넌트의 standalone의 필요성과 적용 범위 고려

도메인 구매 후, DNS 관리페이지 -> A Record 설정 -> 서버 외부 IP 연결

•
두개의 접근 주소 HTTP 일반 배포 상태 확인 (이후 → SSL 발급 후 HTTPS 보안 배포로 연결)

포트포워딩 정리

[서버컴퓨터]
•
프론트엔드 Angular -> Nginx 웹서버 정적 서빙 내부 4200 포트 -> 외부(도메인) 80 포트 → SSL 443 포트
•
백엔드 NestJS -> Express 내장서버 동적 데이터 서빙(WAS) 내부 3100 포트 -> 외부(도메인) 3100 포트
•
데이터베이스 MySQL -> Docker 내부 네트워크 3306 포트 -> 내부 3306 포트 -> 백엔드와 통신
•
Pixel Streaming(UE) -> Turn/Stun Server 포트 -> 외부 85 포트 → SSL 외부 8443 포트
자체 서버(로컬) HTTPS 배포를 위한 WACS를 통한 자체 Let’s Encrypt 인증서 발급과 연결

1. 백엔드 NestJS+내장 Express 컨테이너화 및 실행

1.1 Dockerfile 및 .dockerignore 작성

•
MP_Project/Back-end/Dockerfile 생성
•
MP_Project/Back-end/.dockerignore 생성

1.2 이미지 빌드

•
터미널 MP_Project/Back-end/ 경로(Root)에서
•
Docker-Desktop에서 생성된 NestJS 백엔드 프로젝트가 빌드된 이미지 확인

1.3 컨테이너 실행

•
CLI를 통한 이미지→컨테이너 실행 명령어
[Docker] Docker VM 활용 통합 배포와 CI/CD 파이프라인 구축

1. 플러그인 설치

Marketplace에서 아래 키워드로 검색하여 각각 설치한다.
•
SQLTools
•
@tag:sqltools-driver

2. 설치 후 커넥션 추가

•
좌측 하단 원통형 DB 아이콘이 생성되고 Add New Connection으로 DB와 연결해야 한다.
•
드라이버 플러그인도 설치가 정상적으로 되었다면 아래와 같이 아이콘이 나타난다. MySQL 선택
[Node.js] 12. 데이터베이스 GUI VSCode 플러그인

Ajax → Fetch API

이전 Ajax를 통해서 REST 아키텍처를 갖추었지만 jQuery AJAX는 요청을 보내고, 성공 및 오류에 대한 각각의 콜백 함수를 직접 구현하고 있었다. success 부분의 function, error 부분의 function 이를 통해 비동기 요청을 처리하는 기능은 구현되고 있는 것이다.
하지만 여러 콜백함수를 직접 작성, 사용해야 하므로 코드가 다소 복잡해질 수 있는 문제점이 있었다.
이러한 문제점을 개선 할 수 있었던건 Promise객체로 실패, 성공 상태를 가지는 객체로써 Fetch API 함수는 항상 이 객체를 반환하는 것으로 설계되었다.
따라서, fetch() 메서드를 통해서 메서드 체이닝(. 연결)을 통해 .then()과 .catch() 메서드를 사용 할 수 있어 구조적으로 가독성을 높이는 역할을 하게 되었다.
•
Ajax 요청의 일반적인 형태
•
Fetch API 요청의 일반적인 형태
[Node.js] 10. 모던 자바스크립트 스타일Fetch API 요청 리팩토링

1. 네트워크

2. Client와 Server

3. Web Server와 Web Application Server

[CS] 서버 개발을 위한 기초 CS 지식 정리

1. Generics

새로운 폴더(metaverse/greeter/src/generics)
　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio
[TypeScript] 8. TypeScript의 Generics
[TypeScript] 6. TypeScript의 타입 - 2편

1. 원시 타입

새로운 폴더 (metaverse/greeter/src/types)

2. 배열

3. 변수와 함수에 대한 타입 표기

[TypeScript] 5. TypeScript의 타입 - 1편
[TypeScript] 4. TypeScript 의 기본 기능

1. 릴레이션(테이블)과 관련된 것들

2. 관계대수 vs 관계해석

[정처기] 데이터베이스구축-논리 데이터베이스 설계

1. MVP 기능 구현 추가 계획

2. 게시글 CRUD 구성

2.1 현재 상태 점검

[NestJS] 17. 게시글 및 회원 관리 기능 보완(CRUD) 리팩토링

1. 시스템 아키텍쳐(System Architecture)

1.1 System Architecture란?

1.2 문서화(Documentation)

[NestJS] 20. Architecture Diagram 그리기와 README.md 프로젝트 소개 꾸미기

1. File Input/Output이란?

2. Multipart/form-data란?

3. Multer 라이브러리

[NestJS] 16. 파일 입출력(I/O) 기능 구현

1. Client Side Rendering이란?

2. IONIC, Angular 환경 구축해보기

[NestJS] 15. CSR과 프론트엔드의 API 요청(Fetch API / HttpClient API)

1. OAuth란?

2. 카카오 개발자(Kakao Developers) 앱 생성

3. API 사용을 위한 여러 환경 구축

[NestJS] 14. Kakao API 소셜 로그인 기능 구현(OAuth)

1. 페이징 기능 추가

2. 프론트엔드 무한스크롤 참고 자료

[NestJS] 13. 게시글 페이징(Pagenation)과 무한스크롤(Infinity Scroll)

1. 파일 업로딩과 스트리밍

1.1 뷰 템플릿 엔진

•
목표: NestJS에서 뷰 템플릿 엔진을 사용하여 서버 사이드 렌더링(SSR) 구현
•
서버 측에서 HTML 템플릿을 렌더링하여 클라이언트에 동적인 콘텐츠를 제공

1.2 파일 업로드

•
목표: 파일을 서버로 업로드하고 관리하는 기능 구현
•
사용자 파일 업로드, 프로필 사진 등 다양한 파일을 서버에 저장

1.3 파일 스트리밍

•
목표: 서버에서 클라이언트로 대용량 파일을 스트리밍하는 기능 구현
[NestJS] 11. 심화 목표 키워드

서버 실행에서 오류 발생

MySQL 서버 실행 시 다음과 같은 오류가 나타날 때가 있다.
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'
또는 아래와 같은 내용이다.
/usr/local/Cellar/mysql@8.0/8.0.39_1/bin/mysqld_safe: line 199: /usr/local/var/mysql/Freds-MacBookPro.local.err: Permission denied /usr/local/Cellar/mysql@8.0/8.0.39_1/bin/mysqld_safe: line 144: /usr/local/var/mysql/Freds-MacBookPro.local.err: Permission denied ERROR! The server quit without updating PID file (/usr/local/var/mysql/Freds-MacBookPro.local.pid).
이 에러는 mysqld(mysql daemon) 프로세스가 서버를 실행한 후 pid 파일을 설치 경로에 생성하려는데 권한이 없는 경우 발생하는 오류이다.
검색을 통해서는 재설치, 또는 homebrew를 업데이트하면 해결된다는 스택오버플로우 의견도 있었다. 하지만 이것을 먼저 해보고 재설치하는 것을 추천한다. 재설치 시 기존 데이터베이스가 제거되기 때문이다.
아래 명령어를 통해서 mysql이 경로에 소유자 권한을 주어 읽기/쓰기 모두 가능하도록 설정한다.
이후 서버를 재실행하면 정상적으로 실행 된다.
[MySQL] MySQL 서버 실행 실패 오류 - ERROR! The server quit without updating PID file

1. 현재까지 진행된 상태에서 짚어 볼 수 있는 문제점

1.1 컨벤션(Convention) 이란?

1.2 명명 규칙 오류 발견하기

[NestJS] 10. 프로젝트 문제 인식과 컨벤션 리팩토링, 트러블 슈팅

논리적 문제 해결 프로세스

1. User와 Board 엔터티의 현재 상황(문제의 인식)

1.1 엔터티 관계 설계 시 기본 과정(문제해결방안 탐색1)

[NestJS] 8. 엔터티의 연관 관계(Relationships) feat. 문제 인식과 해결

1. Service 계층 리팩토링

임시DB에서 MySQL, TypeORM을 적용했으므로 Service 계층 코드를 전체적으로 수정한다.

2. Controller 계층 리팩토링

위 Service 계층 수정사항에 따라 일부 반환 타입등에 Promise가 추가되었으므로 아래처럼 Controller도 수정한다.
•
임시 주석을 해제하고 일부 변경 사항을 확인하여 수정한다.
•
단일 객체 반환은 Promise<Board> 리스트 배열 반환은 Promise<Board[]> 와 같다.
•
boards.controller.ts
[NestJS] 6. DB+TypeORM → CRUD Operation 연동 리팩토링 | 🎯 중요

1. 데이터베이스 환경 구축

1.1 데이터베이스란?

데이터베이스(Database)는 데이터를 체계적으로 저장하고 관리하는 시스템, 데이터의 집합을 이야기 한다.
DBMS란? DBMS(Database Management System)
RDBMS란?
NoSQL? Not Only SQL

1.2 MySQL 설치

[NestJS] 5. DB와 TypeORM 연동

1. 게시글 엔터티 설계

엔터티란?
게시글이 가지게되는 속성은 어떤것들이 있을까?
board.entity.ts
board-status.enum.ts

2. READ 1 - 모든 게시글을 조회하는 기능

boards.service.ts
[NestJS] 3. NestJS CRUD Operation 개발

1. 프로젝트 기본구조

1.1 프로젝트 생성

프로젝트 생성 하기

1.2 프로젝트 기본 요소

src 폴더
그 외 중요 요소
[NestJS] 2. NestJS 기본 요소

2. 요구사항 확인

요구분석 기법

•
요구공학이란? : 소프트웨어의 요구사항을 식별, 분석, 문서화, 관리하는 과정(체계화)
요구공학의 필요성
요구사항 개발 프로세스(순서) 1. 도출 : 사용자, 이해관계자로부터 요구사항 수집(인터뷰, 워크숍, 설문, 브레인스토밍 등) 2. 분석 : 실제 구현가능성 검토, 우선순위, 중복 또는 충돌되는 사항 수정
요구사항 분석 기법 - 인터뷰 : 인터뷰 - 브레인스토밍 : 아이디어 도출, 제시, 적합 선택 - 원인-효과 다이어그램 : 요구사항이나 문제,결과 등 시각화하는 다이어그램으로 분석, 복잡한것에 적합 - 프로토타이핑 : 실제 모습 프로토타입으로 피드백 유도 - 사용사례(Use Case) : 사용자의 시스템 사용 과정을 스토리보드 형태로 묘사, 가정 - 요구사항 검토 : 수집된 요구사항을 검토하여 중복, 충돌, 모호, 불안전 요소 찾기

UML(Unified Modeling Language)

•
소프트웨어 시스템을 시각화 및 문서화하고 구조와 동작을 명세하는 표준화된 모델링 언어
UML의 특징 1. 가시화 언어 : 다이어그램으로 시각적으로 이해를 도움 2. 명세화 언어 : 표준화된 언어로 명세하는데 사용 3. 구축 언어 : 설계-구현(개발)에 도움이되며 특히 객체지향 개발에서 중요함 4. 문서화 언어 : 표준 형태로 문서화되어 개발, 유지보수의 커뮤니케이션 됨
UML의 구성요소 1. 사물(Things) : 모델의 기본 요소 2. 관계(Relationship) : 사물간의 연관성 - 일반화 관계(Generalization : 한 클래스가 다른 클래스의 상위 개념 ‘부모’일때 = 상속) - 연관관계(Association : 2개 이상 사물이 관련된 관계, 다른 클래스의 기능을 사용할 때 등 표시) - 의존관계(Dependency : 다른 클래스 제공기능을 사용할때 표시, 연관과 차이점은 매우 짧은시간) - 실체화관계(Realization : 추상 메서드를 오버라이딩하는것 의미, ‘인터페이스’ 와 구현체로 이해. - 집합관계-집약관계(Aggregation : 불고기 = 간,다,미 처럼 has 관계 포함관계, 불 사라져도 다른재료 남음) - 집합관계-합성관계(Composition : 책상 = 다리,몸,나사, 책상이 사라지면 같이 사라짐) 3. 다이어그램 : 사물과 관계를 도형으로 표현 4. 스테레오타입 : 추가적인 의미 부여

구조 다이어그램(정적)

•
클래스 다이어그램
•
객체 다이어그램
소프트웨어설계 - 요구사항 확인
Load more
　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio