web
NestJS 프로젝트 시작하기 with docker(3)
NestJS에서 swagger 사용하기 NestJS에서 swagger api 문서 생성은 아주 간편하다. NodeJS에서 swagger를 사용하려면, yaml 파일을 사용하거나 코드에 주석으로 추가해 줘야 했다. NestJS에서는 데코레이터만 사용해서 swagger api 문서를 ...
web
25개의 글
web
인공지능 웹 서비스 프로젝트 1주차 회고
인공지능 웹 서비스 프로젝트 1주차 회고 Seoul Mate 서비스 이름은 Seoul Mate이다. 서울의 주요 관광지의 정보를 제공하고, 기록하는 서비스이다. 사용자가 사진을 찍어 서비스에 업로드 하게되면 인공지능 모델이 사진이 어떤 건물인지 예측해서 정보를 제공한다. 사용자는 ...
web
NestJS 프로젝트 시작하기 with docker(2)
이번 포스트에서는 controller와 service를 생성하고 NestJS와 mysql을 연결하는 방법을 알아본다. nest js cli ┌───────────────┬─────────────┬──────────────────────────────────────────────┐ ...
web
NestJS 프로젝트 시작하기 with docker(1)
NestJS란?? NestJS는 express를 활용한 서버 사이드 프레임워크다. 기본적으로 typescrip를 제공하여 컴파일을 통해 코드의 타입을 검사해 코드 안정성을 높여 준다. NestJS는 아키텍처의 정의도 제공하기 때문에 각 개발자들의 아키텍처가 통일되고 코드 구조를 쉽...
web
Node js 프로젝트에서 Swagger API 문서 자동화
swgger를 사용해보자 이전 프로젝트에서는 postman을 이용해 백엔드 api 문서를 생성했다. postman도 편하고 잘 동작하지만, swagger api를 사용해보려고 한다. yml파일을 생성해 하나의 파일에 정의하는 방식과 라우터 파일들에 직접 정의 할 수 있는 차이가 있...
web
REST API, path parameter와 query string의 이해
REST REST는 자원을 이름으로 구분해서 자원의 상태를 주고 받는 것을 의미한다. REST의 구성 요소는 Resource(자원), Verb(행위), Representation of Resource(표현)이 있다. Resource 모든 자원에는 고유한 id가 존재하고, 자원은 서...
web
Refresh Token이란??
Access Token 로그인이 필요한 모든 웹 페이지에서는 사용자가 인증되었는지 확인해야 한다. 일반적으로 access token은 JWT(jsonwebtoken)을 많이 사용하고, 헤더의 authorization에 저장해서 페이지마다 token을 검증하게 된다. Token 탈취...
web
Typescript class
OOP(Object Oriented Programming) Typescript는 객체 지향 프로그래밍(OOP)의 특징을 가지고 있다. OOP는 객체의 모임으로 컴퓨터 프로그램을 파악하려는 프로그래밍 방식이다. Typescript는 인터페이스, 상속, 정적 메서드 구현 등의 패턴을 ...
web
Typescript 시작하기
타입이 필요한 이유 Javascript에서는 타입이 없기 때문에 타입에 의한 에러가 발생해도 코드를 실행시켜 보기 전까지 오류를 알기 힘들다. typescript는 타입에 대한 오류가 발생했을 때 미리 에러가 발생하는 부분을 알려준다. 타입을 정의하여 개발 단계에서 실수를 줄이고,...
web
Spring boot 시작하기(view와 프로젝트 build)
view settings // controller/Hellocontroller.java @Controller public class Hellocontroller { @GetMapping("hello") public String hello(Model model) { model.add...
web
Cross-Origin Resource Sharing(CORS)
MDN web docs를 정리하였습니다. CORS(Cross-Origin Resouce Sharing) 다른 도메인에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도...
web
백엔드 3계층 구조로 구현한 프로젝트 템플릿
3계층 구조 설계 3계층 구조 설계는 백엔드 코드를 3개의 구조로 나눠 구현하는 것을 말한다. Controller, Service, Data Access계층으로 나눠져 있다. Data access계층은 Model 계층으로도 쓰인다. Controller layer 사용자의 reque...
web
리액트 Hook에 대해 알아보자
React hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. -react 공식 문서- Hook을 사용하면 계층의 변화 없이 상태 관련 로직을 재사용 가능하게 ...
web
async와 await
비동기(asynchronous) Javascript는 single thread 이므로 서버 요청을 기다려야 하는 경우 사용자는 멈춰있는 브라우저를 보게 된다. 그러므로 동기 처리가 아닌 비동기 처리가 필요하다. 비동기는 코드의 순서와 다르게 실행되는 것을 말한다. 비동기 처리 코드...
web
Middleware에 대해 알아보자
Middleware Express.js 동작의 핵심인 미들웨어는 Http 요청과 응답 사이에서 단계별 동작을 수행해주는 함수이다. middleware의 동작 원리 Express.js의 미들웨어는 HTTP 요청이 들어온 순간부터 시작된다. 미들웨어는 HTTP 요청과 응답 객체를 처리...
web
Node js 프로젝트 시작하기 (npm과 모듈 사용하기)
NPM npm은 node package manager로 프로젝트의 의존성을 관리할 수 있다. package.json 생성하기 npm init 프로젝트 디렉토리 안에서 위 명령어를 사용하면 package.json파일을 생성되고 Node js프로젝트가 된다. 파일에서는 프로젝트의 정보...
web
javascript 내장 함수 (문자열 다루기, map, filter, reduce)
이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다. 문자열 조작하기 문장에서 각 알파벳이 몇개 존재하는지 출력하는 알고리즘을 구현해 보았다. Javascript의 문자열을 조작할 수 있는 내장함수를 사용했다. const stringControll = "hi my n...
web
javascript(DOM, Event, Class)
이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다. javascript의 기초적인 문법은 바닐라 JS로 크롬 앱 만들기 포스트에 있다. DOM DOM은 Document Object Model로 문서(document)를 객체(object)로 표현(model)하는 것이...
web
HTML and CSS
이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다. HTML과 CSS는 웹 페이지의 화면을 구성하는 가장 기본적인 구성 요소이다. HTML은 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 마크업 언어이다. 이 포스트에서는 HTML의 태그와 CSS...
web
React 시작하기, Routing
React js React js는 component 기반 자바스크립트 라이브러리다. 캡슐화된 component로 재사용성을 높인 라이브러리다. 현재 프로젝트에서는 Node js와 React js를 이용해 Backend와 Frontend를 구성한다. Real Dom and Virtu...
web
로그인 기능, 로그아웃 기능(Node js)
Compare password method userSchema.methods.comparePassword = function (plainPassword, cb) { bcrypt.compare(plainPassword, this.password, function (err, isMat...
web
Node js 프로젝트 시작하기
Node js 시작하기 npm init npm init명령어로 node js 애플리케이션을 시작할 수 있다. 기본 정보를 입력하고 나면 package.json파일이 생성된다. package 설치하기 npm install <package name> npm install을 ...
web
Next js 강의 정리
Create project npx create-next-app@latest npx명령어로 next js 프로젝트를 생성해 준다. 위 명령어를 실행시키고 나면 프로젝트의 이름을 입력하게 되고, 필요한 패키지들을 설치해 준다. 라이브러리, 프레임워크 사용자가 필요한 기능들을 호출해 사...
web
바닐라 JS로 크롬 앱 만들기 (javascript 기초 강의 정리)
nomad coder의 바닐라 JS로 크롬 앱 만들기강의를 들으며 정리한 내용입니다. javascript의 기초 내용을 정리했습니다. 바닐라 JS로 크롬 앱 만들기 Data type "hello"; // string 32; // integer 3.2; // float 숫자와 문자에...
web
Django model 다루기 (점프 투 장고)
점프 투 장고(여기)를 정리한 포스트입니다. SQLite를 데이터베이스로 사용한다 python manage.py migrate migrate명령어를 사용하여 admin, auth, contenttypes, sessions 앱들이 사용하는 테이블들이 생성된다 모델 작성하기 model...