주록

[WEB] Pagination

Pagination Pagination이란 쉽게 말해서 페이지를 나누는 것이다. 웹 사이트에서 보여줄 데이터는 많지만 한번에 다 보여줄 수 없을 때 페이지를 분할해서 데이터를 보여주는 것이다. 이걸 Paging이라고도 부른다.

[WEB] 이미지 업로드

이미지 업로드 프로세스 가장 기본적인 이미지 업로드 과정은 다음과 같다. 1. 브라우저에서 사용자가 업로드 하고싶은 이미지를 골라 선택한다. 2. 선택한 파일을 변수에 저장한다. 이 때 변수에 담긴 내용을 파일 객체라고 부르며 파일에 대한 정보가 있다. 3. 브라우저가 파일 객체를 백엔드에 업로드 요청을 한다. 물론 이 때 백엔드에는 파일 업로드 하는 API가 있어야 한다. 4. 백엔드 서버가 전달 받은 파일을 DB에 저장한다. 하지만 이렇게 모든 이미지 파일을 DB에 저장하게 되면 비효율적인 방식이다. 그래서 오늘은 클라우드 스토리지에 이미지 파일을 저장하는 방법에 대해서 간단하게 알아보도록 한다. 1. 브라우저에서 이미지 파일을 선택 한 후 요청을 보내면 cloud storage에 파일을 저장한다. ..

[WEB] 소셜 로그인

소셜 로그인 어떤 사이트에 회원가입이나 로그인을 하려고 하면 많이 접할 수 있는게 카카오,네이버,구글 등 으로 로그인 하는 버튼을 본적이 있을 것이다. 이게 바로 소셜로그인이다. 소셜 로그인은 SNS 가입자가 해당 ID로 다른 웹 사이트나 애플리케이션에 접속하는 기능이라고 이해할 수 있다. 그렇다면 이 소셜 로그인을 사용하는 이유는 무엇일까? 보통 사람들은 새로운 사이트에 내 개인정보를 입력해서 회원 가입 하는것을 번거롭고 귀찮게 생각한다. 새로 회원가입한 사이트의 계정을 관리도 해야하고 귀찮기 때문에 소셜로그인을 지원 해주는 서비스면 보통 소셜로그인으로 회원 가입하고 로그인 하는것 같다. 동작방식 1. 사용자가 소셜로그인 을 하게 되면 로그인 하고자 하는 소셜의 로그인 페이지로 이동한다. 2. 소셜 네..

[WEB] 로그인 프로세스

로그인 로그인이란 대부분 모든 사람들이 알고 있는 그 개념이 맞다. 한 웹사이트나 어플을 통해서 어떤 행동을 내가 해야할 때 필요한게 로그인이다. 하지만 그저 로그인을 하라고 하니깐 로그인을 하는것 뿐이지 이게 어떤 과정을 통해서 로그인이 되는지는 모르는 경우가 많다. 오늘은 로그인이 어떻게 진행되는지 포스팅 해보고자 한다. 1. 사용자가 로그인에 필요한 정보를 입력해서 로그인 시도 2. 사용자가 입력한 내용을 서버단에서 데이터베이스에 저장되어 있는 값과 비교 3. 그 값이 일치하면 로그인 토큰을 발급해서 클라이언트에게 전달 대략적인 로그인 프로세스는 위와 같다. 하지만 로그인은 이렇게 단순하게 이루어지지 않고 인가와 인증 과정을 거친다. 인가와 인증에 대해서는 다음 포스팅 때 자세히 작성해보고자 한다.

[WEB] 웹 크롤링 & 웹 스크래핑

Web의 데이터를 추출 할 때 보통 크롤링 또는 스크래핑을 많이 사용한다. 크롤링은 무엇이고 스크래핑은 무엇인지 포스팅 해보고자 한다. Crawling 웹 크롤링은 웹 크롤러가 일정 규칙으로 웹페이지를 브라우징 하는것 으로 정의 할 수 있다. 즉 웹상의 정보들을 탐색하고 수집하는 작업을 한다. 인터넷에 존재 하는 수 많은 정보를 사람이 일일이 파악하는것은 사실상 불가능한 이야기이다. 그래서 특정한 규칙에 따라 웹 페이지를 탐색하는 프로그램인 웹 크롤러가 탄생하였다. 클롤러라는 프로그램을 사용하여 페이지의 정보를 인덱싱 한다. 크롤링은 기본적으로 검색 엔진이 하는 일이고 페이지 전체를 보고 색인을 생성하는 것이다. 크롤러는 웹사이트를 크롤링 할 때 웹사이트의 모든 정보를 찾는다. 웹 크롤링은 일반적으로 일..

[WEB] Husky

Husky 허스키란 git hook 사용을 도와주는 라이브러리이다. 여기서 git hook이란 어떠한 이벤트가 발생 했을 때 자동으로 특정 스크립트를 실행 하게 하는 것이다. 보통 클라이언트 훅과 서버 훅으로 나눠지며 클라이언트 훅은 commit,merge 할 때 실행되고 서버 훅은 push 할 때 서버에서 실행 된다. 쉽게 얘기해서 Husky는 git을 사용할 때 특정 스크립트를 실행 시켜주는 라이브러리 라고 정의할 수 있다. 설치 yarn add -D husky // 허스키 설치 "scripts": { "prepare": "husky install", } 아직 허스키를 설치만 했고 사용해본적은 없기 때문에 오늘은 허스키가 무엇이고 왜 허스키를 사용하는지 정도만 알아보았다. 후에 허스키를 사용해서 gi..

[WEB] REST API ,GraphQL

Server API REST API 와 GraphQL의 개념을 이해하려면 먼저 Server API가 무엇인지 먼저 이해할 필요가 있다. Server API는 Server-side wev API 의 줄임말로 어떠한 요청을 하였을 때 그에 맞게 응답을 주는것을 말한다. 그 종류로는 크게 REST 와 GraphQL 이 있다. REST API REST는 REpresentational State Transfer 의 줄임말로 어떤 자원의 상태를 전달하는것 으로 정의할 수 있다. 쉽게 말하면 HTTP 메소드를 통해 CRUD(Create ,Read,Update,Delete)를 실행하는 API를 의미한다. 예시) 만약 글 관련 API를 설계한다고 했을 때 엔드포인트는 글 관련: API /posts 글 작성 : API/P..

[WEB] DTO(Data Transfer Object)

DTO란? Data Transfer Object의 약자로 계층간 데이터 교환 역할을 한다. 데이터들이 있고 그 데이터들을 모아서 어느 한곳으로 값을 전달할 필요가 있을 때 DTO 를 사용한다. DTO는 보통 OOP 환경에서 사용되며 OOP 환경에서는 내가 노출하고 싶지 않는 데이터들도 노출 될 경우도 있다. 이 때 DTO를 사용 캡슐화 과정을 거쳐서 노출하고 싶지 않는 데이터들을 보호 할 수 있게 도와주는 역할을 한다. 마지막으로 DTO는 비즈니스 로직이 아닌 단순한 데이터들만 저장되어있어야 한다.

[WEB] MVC 패턴

MVC 패턴 이란? MVC패턴은 Model-View-Controller의 약자로 개발할 때 사용되는 디자인 패턴중 하나이다. Model-View-Controller로 구성되며 Client와 Server의 로직을 분리하여 Server에서의 수정이 Client의 화면에 영향이 없도록 설계하는 것이 목적이다. Model Model은 데이터 관리 및 비즈니스 로직을 처리하는 부분이다. Controller가 호출 할 때 요청에 맞는 역할을 수행한다. View, Controler의 정보가 없다 단순히 요청에 의한 로직만 처리하고 이 결과를 어디서 어떻게 사용하는지 전혀 상관하지 않는다. View View는 비즈니스 로직 처리 결과값을 사용자에게 화면으로 출력한다. 사용자에게 보여지는 방식을 정의하며 데이터를 모델로..

[WEB] HTTP

HTTP란 HyperText Transfer Protocol 의 약자 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 통신 규약 서버간 네트워크 통신시 어떠한 형식으로 통신할지에 대해 정해둔 규약 HTTP 메세지 기본 구조 http 메세지는 기본적으로 시작라인 - 헤더 - 공백라인 - 메세지 바디로 이루어져있다. 시작라인 요청 HTTP Method ( GET,POST, PUT,PATCH,DELETE ) Request Target 요청 대상의 URL을 명시 HTTP Version HTTP 버전으로 현재까지는 대부분이 HTTP/1.1이고 HTTP/2,HTTP/3 까지 있다. 응답 Status Code 응답 코드 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) : 요청을 성공..

[WEB] WEB Sever, WAS

Web Server HTTP 프로토콜을 기반으로 클라이언트가 서버에 요청을 하면 정적 컨텐츠를 제공하는 서버 클라이언트에서 요청이 올 때 가장 앞에서 요청에 대한 처리를 한다. 정적 컨텐츠를 요청 받으면 요청에 데한 데이터를 만들어서 응답한다. 동적 컨텐츠를 요청 받으면 WAS에게 해당 요청을 넘겨주고 WAS 에서 처리한 결과를 클라이언트에게 전달해준다. Ex) Apache,Nginx 등이 있다. WAS WAS는 웹 서버와 웹 컨테이너가 합쳐진 형태로서 웹 서버 단독으로는 처리할 수 없는 데이터베이스의 조회나 다양한 로직 처리가 필요한 동적 컨텐츠를 제공 DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공한다. JSP,Servlet 구동 환경 제공 웹 컨테이너 혹은 서블릿 컨테이너라고 부른다...

[WEB] ORM

ORM Object Relational Mapping (객체-관계-매핑)의 약자 객체와 관계형 데이터를 매핑하기 위한 기술 프로그래밍 언어와 관계형 데이터베이스 사이의 데이터 표현 방식이 달라서 생기는 문제를 해결하고자 사용한다. 장점 현재 사용하는 언어만 사용해도 된다. DBMS에 대한 종속성이 줄어든다. 재사용 및 유지보수가 편리하다. 객체 지형적인 코드로 인해 더 직관적이고 비즈니스 로직에 더 집중 할 수 있다. 단점 데이터베이스에 직접 쿼리문을 보내는 것이 아니기 때문에 성능 저하가 발생 할 수 있다. 프로젝트가 복잡해지면 구현하는 난이도가 상승한다. 모든것을 ORM으로만 구현하기 어려울 수 있다. 종류 Flask : SQLAlcahemy Node.js: Sequalize Java: Hyberna..