찔끔찔끔씩😎

구현할 기능 특정 검색어에 해당하는 영화 검색 (search) title 에서 검색 (option) director 에서 검색 (option) title, director 에서 검색 (option) 페이지네이션 두 개씩 페이지를 나눈다 이때 클라이언트에게 마지막 페이지를 알려주기 위해 페이지 수도 함께 리턴해주자. 📍필요한 interfaces 들 추가해주기 interfaces/movie/MoviesResponseDto.ts 기존 MovieResponseDto에는 페이지 수를 넘겨줄 변수가 존재하지 않는다. 따라서 새로운 ResponseDto가 필요하다. import { MovieInfo } from './MovieInfo'; export interface MoviesResponseDto{ movies: ..

IMAGE UPLOAD 🔎 Content type HTTP Body 에 들어가는 Message의 Type 을 명시해주어야 한다. json 형식을 사용하여 HTTP Body를 전송하는 경우의 Content Type으로 지금까지 applicaion/json 을 사용하였다. 그렇다면 파일은 어떤 형식으로 전송해야 할까? 바로 multipart/form-data 를 사용하면 된다. Content-Type 필드에 MIME Type 을 명시하기 위한 Content-type file 전송을 위해 사용한다. 🔎 Upload Flow Client-Server 사이의 업로드 과정에 대해 알아보자. 1. 클라이언트는 Form 을 통하여 파일을 서버로 전송한다. 2. 이때 Content-Type은 multipart/form-..

Middleware 🔎 Middleware란? 요청과 응답의 중간(middle, 미들)을 말한다. 따라서 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청은 걸러내는 기능을 한다. Authentication 요청을 보내는 주체가 누군줄 알고 API 요청을 막 허용해도 되는걸까? (당연 아님) 🔎 Stateless Protocol란? 무상태 프로토콜 - 모든 요청이 상호 독립적이며 서버가 request, response 간에 어떠한 데이터도 보존하지 않는다. - 중간에 요청이 다른 서버로 들어가도 전혀 문제가 없다. - 즉 로그인을 했더라도 그 다음 요청과 독립적이라는 것! 🔎 Authentication란? Authentication 인증 은 사용자가 자신이 주장하는 바로 사용자가 맞는..

API 실습 🔎 필요한 Collection? 이러한 뷰 형태를 위한 Collection은? - 영화 정보를 저장할 Movie Collection - 리뷰 정보를 저장할 Review Collection 그럼 이 뷰에서 만들 수 있는 API는? - 영화 정보 저장 API - 영화 정보 조회 API - 리뷰 작성 API - 리뷰 조회 API 등등 리뷰 생성 🔎 1. Model 만들기 Movie 모델 (src/models/Movie.ts) import mongoose from "mongoose"; import { MovieInfo } from "../interfaces/movie/MovieInfo"; const MovieSchema = new mongoose.Schema({ title: { type: Strin..

AWS EC2 🔎 AWS EC2란? Amazon Elastic Compute Cloud : 클라우드에서 확장 가능 컴퓨팅 용량을 제공한다. 즉, 가상 컴퓨터를 임대 받아 그 위에 자신 만의 컴퓨터 어플리케이션을 실행할 수 있게 한다. 🔎 EC2 기본세팅 (NVM, Node ..) - Node 설치 $ sudo apt-get install curl $ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - $ sudo apt-get install -y nodejs $ sudo apt-get install build-essential - NVM 설치 $ curl -o- https://raw.githubusercontent.com/creationix/..

세팅 🔎 프로젝트 구조 Create / User Collection 생성 이름, 핸드폰 번호, 이메일, 학교(학교이름, 전공) 🔎 1. Model 만들기 src/models/User.ts // User Collection 위치 import mongoose from 'mongoose'; import { UserInfo } from '../interfaces/user/UserInfo'; const UserSchema = new mongoose.Schema({ /* type: field type 지정 required: 필수 field 인가? unique: 고유한 값인가? */ name: { type: String, required: true, }, phone: { type: String, required: t..

MongoDB 🔎 MongoDB란? Document 지향 NoSQL 데이터베이스 시스템으로, JSON 형태의 동적 스키마형 document를 사용한다. Document 기반으로 구성되어있으며 Database - Collection - Document - Field 계층으로 구성되어있다. 🔎 Document란? - MongoDB에서 데이터를 저장하는 최소 단위 - 필드와 값의 쌍으로 구성된다. - 데이터 입출력 시에는 JSON 형식을 사용하고, 저장 시에는 BSON(Binary JSON)을 반환한다. - 관계를 갖는 데이터는 중첩 document, 배열 등을 사용하여 1개의 document로 나타낸다. 🔎 Reference 방식 1:1 1:N , 1이 N을 참조 1:N, N이 1을 참조 N:M Mongoo..

Typescript 🔎 Typescript란? JS 에서 타입 문법 등을 추가한 상위 집합으로 JS와 100% 호환된다. Typescript의 장점 높은 수준의 코드 탐색과 디버깅 JS와 100% 호환 강력한 생태계 🔎 Type 기본적인 데이터 타입 const 변수명: 타입 = 초기값; let 변수명: 타입 = 초기값; let isDone: boolean = true; const name: string = '송'; console.log(name) let grade: number = 4; const sum = (x:number, y:number): number =>{ return x*y; } 배열 데이터 타입 const 변수명: 타입[] = 초기값; let 변수명: Array = 초기값; const age..

[웹개발의 봄, Spring] 4주차 (1) - 네이버 쇼핑 API 이용하기 [웹개발의 봄, Spring] 4주차 (2) - 서버 클라이언트 🔎 상품 검색기능 execSearch, addHTML 함수 만들기 : 검색어를 검색한 뒤(execSearch) 관련 정보들을 화면에 띄워주기(addHTML) 구현 순서 1. 검색창 입력값 받아오기 (입력값 없을 경우 alert, focus) 2. GET /api/search?query=%=${query} 요청 3. for문으로 itemDto들 꺼내서 HTML 만들어 띄워주기 4. addHTML 완성하기 execSearch() function execSearch() { /** * 검색어 input id: query * 검색결과 목록: #search-result-box..

[웹개발의 봄, Spring] 4주차 (1) - 네이버 쇼핑 API 이용하기 프로젝트 만들기 🔎 프로젝트 시작시 확인할 점 1. Auto Import Inser imports on paste: Always' 2. Annotation Processing Compiler-Annotation Processors 🔎 API 키워드로 상품 검색하고 그 결과를 목록으로 보여주기 GET /api/search?query=검색어 List 관심 상품 등록하기 POST /api/products Product 관심 상품 조회하기 GET /api/products List 관심 상품에 관심 가격 등록하고, 그 가격보다 낮은 경우 표시하기 PUT /api/products/{id} id 🔎 3계층 Controller ProductR..