citeFred’s Blog

Post Gallery

https://folk.universitetetioslo.no/trygver/themes/mvc/mvc-index.html

1. MVC 디자인 패턴

2. MVC의 요소

[Node.js] 13. MVC 디자인 패턴과 리팩토링

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 플러그인

1. 프로그래밍 배경에서의 모듈

2. TypeScript에서의 모듈

Documentation - Modules

How JavaScript handles communicating across file boundaries.

https://www.typescriptlang.org/docs/handbook/2/modules.html

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

[TypeScript] 9. TypeScript의 Modules

1. Generics

Documentation - Generics

Types which take parameters

https://www.typescriptlang.org/docs/handbook/2/generics.html

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

　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio

[TypeScript] 8. TypeScript의 Generics

1. 네트워크

2. Client와 Server

3. Web Server와 Web Application Server

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

1. Object

•

클래스(Class)를 다루기 위해서 객체(Object)에서부터 연관성을 이어나가도록 설명하고자 함

Documentation - Classes

How classes work in TypeScript

https://www.typescriptlang.org/docs/handbook/2/classes.html

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

여러 객체가 있는 상황에서 수정이 필요한 상황

2. Class

[TypeScript] 7. TypeScript의 Object/Class

1. Union

Documentation - Everyday Types

The language primitives.

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types

유니온 타입 (metaverse/greeter/src/types)

2. Type Alias & Interface

[TypeScript] 6. TypeScript의 타입 - 2편

1. 원시 타입

Documentation - Everyday Types

The language primitives.

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

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

2. 배열

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

[TypeScript] 5. TypeScript의 타입 - 1편

1. TypeScript의 기본 사항

Documentation - The Basics

Step one in learning TypeScript: The basic types.

https://www.typescriptlang.org/docs/handbook/2/basic-types.html

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

2. TypeScript 다양한 서포트

3. 타입 지정 방식

[TypeScript] 4. TypeScript 의 기본 기능

1. TypeScript 시작하기

Documentation - TypeScript Tooling in 5 minutes

A tutorial to understand how to create a small website with TypeScript

https://www.typescriptlang.org/ko/docs/handbook/typescript-tooling-in-5-minutes.html

새로운 프로젝트 (metaverse/greeter)

2. TypeScript 파일 빌드

[TypeScript] 3. TypeScript 살펴보기

1. TypeScript란?

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

https://www.typescriptlang.org/

TypeScript?

2. 코드를 통한 확인

2.1 Javascript의 코드

2.2 TypeScript의 코드

[TypeScript] 2. TypeScript 소개

0. IDE

1. Git

Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

https://git-scm.com/

[TypeScript] 1. 개발 환경 구축과 VCS

TypeScript 기초

TypeScript Tutorials

　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio

[TypeScript] 0. TypeScript 들어가기

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

2. 관계대수 vs 관계해석

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

1. AWS란?

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

Amazon Web Services는 안정성이고 확장 가능하며 저렴한 클라우드 컴퓨팅 서비스를 제공합니다. 무료로 가입하여 사용량에 따라 요금을 지불하세요.

https://aws.amazon.com/ko/

2. AWS 사용 준비

2.1 회원 등록(최초 1회)

[NestJS] 21. AWS 클라우드 서비스와 배포

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

1.1 System Architecture란?

1.2 문서화(Documentation)

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

Migrating from ion-slides to Swiper.js | Ionic Documentation

Set Up Swiper.js for Angular Slides [Example] | Ionic

https://ionicframework.com/docs/angular/slides

Swiper - The Most Modern Mobile Touch Slider

The Most Modern Mobile Touch Slider

https://swiperjs.com/

Swiper API

The Most Modern Mobile Touch Slider

https://swiperjs.com/swiper-api#css-styles

1. 프론트엔드 Slide 기능 구현

1. Swiper.js 설치

2. Swiper 설정

[NestJS] 19. Slide(Swiper) 기능 구현

1. 인증(Authentication)과 인가(Authorization)의 이해 복습

1.1 인증과 인가의 용어 정리

인증(Authentication)

인가(Authorization)

1.2 Angular에서의 Guard 사용

Angular

The web development framework for building modern apps.

https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access

[NestJS] 18. 프론트엔드의 접근 권한 설정(Guard)과 데이터 로드(Resolver)

1. MVP 기능 구현 추가 계획

2. 게시글 CRUD 구성

2.1 현재 상태 점검

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

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. 다음 우편번호 API 서비스 활용하기

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

https://postcode.map.daum.net/guide

[NestJS] 12. Kakao 다음 우편번호 API 주소 입력 추가