Homile

📌 웹팩은 어렵다고 많이 들었는데 어떤 부분에서 어려움이 있는지 자세히 찾아봐야겠다.

📗 오늘 학습한 내용

번들링

• 사전적 의미: 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
• 개발적 의미: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

번들링을 사용하지 않을 경우 일어나는 상황

• 두 개의 js파일에서 같은 변수를 사용하고 있어서 변수 간 충돌이 일어난 상황
• 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소한 상황
• 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기 어려운 상황
• 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생한 상황

웹팩 (Webpack)

• 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
  • *모듈번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구
• 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러
• 프론트엔드 애플리케이션을 대규모 유저에게 제공하기 위해 가장 많이 사용하는 방법
• 백엔드 개발자도 배포를 위해 많이 사용한다.

Webpack에서의 모듈

• JavaScript의 모듈에만 국한하지 않는다. HTML, CSS, jpg, png 같은 이미지 파일들도 전부 포함한 포괄적인 개념이다.

빌드와 번들링

• 빌드: 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
  • React앱: npm run build를 실행하면 React buid 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공
• 번들링: 묶음의 개념(그룹화), 파일을 묶는 작업 그 자체를 말하며 파일은 의존적 관계에 있는 파일들 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미

Webpack의 필요성

• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다.
• 각 자원들을 일일히 서버에서 요청하지 않아도 되기 때문에 네트워크 코스트가 획기적으로 줄어든다.

웹팩의 핵심 개념

• Target
  • target: ["프로젝트 환경", "ECMAScript 버전"]
• Entry
  • 웹팩이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈
  • 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.
• Output
  • 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할
• Loaders
  • Webpack은 JavaScript와 JSON 파일만 이해하지만 로더를 사용하면 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.
  • test: 변환이 필요한 파일들을 식별하기 위한 속성 (필수)
  • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성 (필수)
  • exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정
• Plugins
  • 번들을 최적화하거나 에셋을 관리하고, 환경변수 주입 등의 광범위한 작업을 수행할 수 있게 된다.
• Optimization(최적화)
  • Webpack 버전 4부터 실행
  • minimize: TerserPlugin, optimization.minimize에 명시된 플러그인으로 번들파일을 최소화(압축)시키는 작업 여부를 결정한다.
  • minimizer: default minimizer을 커스텀돈 TerserPlugin 인스턴스를 제공해서 재정의 할 수 있다.
• Mode
  • webpack에 내장된 최적화 기능을 사용할 수 있다.
  • development: 모듈과 청크에 유용한 이름을 사용할 수 있다.
  • production: 모듈과 청크, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 결정적 망글이름(mangled name)을 사용할 수 있습니다.
  • none: 기본 최적화 옵션에서 제외한다.
• Browser Compatibility

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 회원가입 폼 구현

📝 중요한 내용

• 웹팩이란?
• 웹팩을 사용하는 이유
• 웹팩 사용법
• 번들링
• 웹팩의 개념

🍀 참고자료

• https://webpack.kr/configuration/mode/
• react webpack

📌 어제 한 미디어 쿼리는 재미있었다. 오늘은 웹 페이지에 동적인 효과를 가져올 수 있는 애니메이션 효과에 대해서 학습을 한다. 오늘도 어제와 같이 재미있는 시간이 되었으면 좋겠다.

📗 오늘 학습한 내용

CSS 애니메이션

• @keyframes
  • CSS로 키프레임 블록을 만든다

@keyframes 애니메이션이름{
    0% {	/* from으로 작성가능 */
        CSS속성: 속성값;
        transform: rotate(0deg)
    }
    50% {  
        CSS속성: 속성값;
        transform: rotate(180deg)
    }
    100% {	/* to으로 작성가능 */
        CSS속성: 속성값;
        transform: rotate(360deg)
    }
}

/* 시작 시점에서 0도, 50프로 시점에서 180도, 완료시점에서 360도 회전시킴*/

애니메이션 속성

• animation: 띄어쓰기로 속성 나열 가능
  • animation-name: 애니메이션의 중간 상태를 지정하는 이름.

#logo{
    animation: lotate;
    animation-name: lotate;
    /* 둘 다 사용가능 */
}

• animation-duration: 한 싸이크르이 애니메이션이 재생될 시간 지정

#logo{
    animation: lotate 3s;
    /* =================== */
    animation-name: lotate;
    animation-duration: 3s;
}

• animation-delay: 애니메이션의 시작을 지연시킬 시간 지정

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-delay: 3s;
}

• animation-direction: 애니메이션 재생 방향을 지정
  • normal: 기본값 (재생 종료 후 다시 재생)
  • reverse: 역방향 재생
  • alternate: 순반향부터 역방향을 번갈아가며 재생
  • alternate-reverse: 역방향부터 순반향을 번갈아가며 재생

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-direction: arternate;
}

• animation-iteration-count: 애니메이션이 몇 번 반복될지 지정

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-iteration-count: 3;
    /* 애니메이션 3회 반복 */
}

• animation-play-state: 애니메이션의 재생 상태(일시정지, 재시작)

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-play-state: pause;
}

• animation-timing-function: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • linear: 일정한 간격
  • ease: 기본값
  • ease-in
  • ease-out
  • ease-in-out
• animation-fill-mode: 애니메이션의 재생 전 후의 상태 지정
  • none: 기본값
  • forwards: 마지막 키프레임 스타일 유지
  • backwards: 첫 번째 키프레임 스타일 유지
  • both: 재생 전 - 첫 번째 키프레임 스타일, 재생 후 - 마지막 키프레임 스타일 유지

Canvas

• 다양한 그래픽 요소를 만들기 위해서 사용한다.
• 단순한 도형 그리기, 데이터 시각화, 애니메이션, 웹 게임 등에 사용하여 다양한 콘텐츠를 만들어 낼 수 있다.

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용 표시
</canvas>

• 캔버스 크기 지정 (기본크기 300px * 150px)

<canvas id="canvas" width="500" height="500"></canvas>

<canvas id="canvas" width="50vw" height="40vh"></canvas>

캔버스로 사각형 그리기

• 색상
  • ctx.fillStyle = 'blue'
  • ctx.fillRect = (10, 10, 100, 50)
• 선
  • ctx.lineWitdth = 5;
    ctx.strokeStyle = "black";
  • ctx.strokeRect(10, 10, 100, 50)
• 지우기
  • ctx.clearRect(20, 20, 80, 30)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 로그인 폼 구현

📝 중요한 내용

• CSS 애니메이션 사용법
• 캔버스 사용법

📌 내가 제일 노력을 해야하는 부분인 CSS 디자인 부분에 대해서 학습을 하는 시간을 오늘 포함 이틀을 준다고 한다. 이때 더욱 실력을 향상시켜 구현만 가능한 프론트엔드 개발자가 아닌 디자인도 같이 겸비할 수 있는 개발자가 될 수 있도록 노력해야겠다.

📗 오늘 학습한 내용

브라우저

• 프론트엔드 개발자는 브라우저의 동작과정에 대해 아는 것이 중요하다.
• 작성한 코드가 브라우저의 소프트웨어 프로그램 상에서 수행되기 때문이다.

웹(Web) = 월드 와이드 웹(World Wide Web)

• 인터넷 상에서 텍스트나 그림, 소리 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다.

웹 페이지

• HTML 언어를 사용하여 작성된 문서 형태

웹 사이트

• 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합

브라우저의 동작 방식

• 사용자가 선택한 자원을 서버에 요청하고, 서버의 응답을 브라우저에 렌더링 하는 방식으로 동작한다.

사용자가 URL 주소를 입력

→ DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색

→ 해당 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달

→  전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지 생성 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송

→  요청 메시지를 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환

→ 웹 서버에서 응답 메세지 생성

→ TCP 프로토콜을 이용해 인터넷을 겨처 사용자의 컴퓨터로 전송된다.

브라우저의 구조

• 사용자 인터페이스(User Interface)
• 브라우저 엔진(Browser Engine)
  • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
  • HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
• 렌더링 엔진(Rendering Engine)
  • 요청한 콘텐츠를 화면에 출력하는 역할
  • HTML 및 XML 문서와 이미지를 표시할 수 있다.
• 통신(Networking)
  • HTTP 요청과 같은 네트워크 호출에 사용
  • 보통 플랫폼의 독립적인 인터페이스, 각 플랫폼의 하부에서 실행
• 자바스크립트 해석기(JavaScript Interpreter)
  • 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱하는 코드를 해석하고 실행하는 것
  • 여러 목적으로 사용이 되지만 대체적으로 웹 브라우저에서 이용이 되며, 브라우저마다 전용 엔진 탑제
• 힙 메모리(Heap Memory)
  • 힙: 동적 메모리 할당에 사용되는 자료구조
  • V8: 객체 또는 동적 데이터를 저장
  • 엔진 내부에서 가장 큰 메모리 공간을 차지하고 있다.
  • 가비지 컬렉션이 발생하는 곳
• 콜 스택(Call Stack)
  • 한 번에 한 작업만 사용할 수 있다.
  • 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
  • 함수를 실행한다면 해당 함수는 콜 스택의 가장 상단에 위치한다.
• 스택 오버플로(Stack Overflow)
  • 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 발생
• 스택 추적(Stack trace)
  • 브라우저의 콘솔 로그를 살펴보며 에러의 발생 이유를 추적해낼 수 있다.

자료 저장소

• 자료를 저장하는 계층
• 웹 스토리지(Web Storage) 특징
  • 쿠키의 보안상 취약과 저장소의 절대적인 허용 용량이 적어서 찾은 대안 방안
  • origin마다 단 하나씩만 존재
  • origin
    • domain과 protocol 한 싼으로 이루어진 식별자
    • 하나의 origin에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있다.

웹 스토리지 종류

• 로컬스토리지(localStorage)
  • 보관 기한이 없는 데이터를 저장(객체)
  • 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않는다.
• 세션스토리지(sessionStorage)
  • 하나의 세션만을 위한 데이터를 저장(객체)
  • 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텐긋트 내에서만 유지
  • 브라우저 탭이 닫히거나 창을 닫으면 세션 저장소에 저장된 데이터가 사라진다.

웹 스토리지를 활용한 대표적인 기능

• 복구 및 백업에 관련된 기능에 주로 사용
• 블로그 글을 작성 중 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능
• 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
• 현재 읽은 글의 히스토리 저장

브라우저 렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹 사이트에 필요한 리소스 다운
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱해 DOM 트리를 만든다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만든다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정한다.
7. 레이아웃 과정이 끝나면 UI 백엔드 Render 트리를 화면에 그리기 시작한다.

파싱(Parsing)

• 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계

DOM Tree

• HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것

CSSOM Tree

• html 파일을 DOM 트리로 파싱하던 브라우저는 link, style 태그를 만나 파싱을 멈추고 해당 리소스 파일을 서버로 요청한다. 이렇게 요청한 파일을 html 파일처럼 파싱을 하는데, 파일을 파싱해 만든 트리를 말한다.

렌더 트리(Render Tree)

• 렌더링을 목적으로 만들어지는 트리
• 사용자에게 브라우저가 보여주고자 하는 화면을 그리는 과정

레이아웃

• 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정

페인팅

• 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정

반응형 웹

• 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.
• 하나의 소스크드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이며 디바이스 종류에 따라 웹 페이지의 크기가자동적으로 조정 된다.

반응형 웹의 특징

• 장점
  • 효율적인 유지보수
    • 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 콘텐츠가 최적화되기 때문이다.
  • 검색엔진(SEO) 최적화 유리
    • 검색 결과에서 상위권에 나타나게 할 수 있다.
• 단점
  • 사이트의 속도 저하
    • 모바일 환경에서 적응하게 만들어진 반응형 웹은 모바일 전용으로 하는 사이트에 비해 무겁다.
    • 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문이다.
  • 웹 브라우저 호환성 문제
    • 존재하는 웹 브라우저는 스펙 및 사양이 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 코드가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있기 때문이다.

미디어 쿼리

• 반응형 웹 디자인의 핵심 부분이다.
• 브러우저 창의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.

미디어 쿼리 적용법

• head태그 안에 link를 위치 시키는 방법
  • 미디어 속성을 사용하여 조건을 지정하여 미디어 속성 내 해당 조건을 만족할 때에만 해당 CSS 파일을 불러오게 한다.

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

• CSS 파일, 태그 안에서 직접 미디어 쿼리 작성하는 방법

미디어 쿼리 작성 구문

• 미디어 타입: 코드가 어떤 미디어를 위한 것인지 작성한다.
  • all: 모든 미디어 타입
  • print: 프린터
  • screen: 컴퓨터 화면
  • speech: 스크린 리더
  • and를 사용해 미디어 기능을 합칠 수 있다.
  • ,(콤마)를 사용해 or 연산이되며 조건 중 하나라도 만족할 때 스타일이 적용되도록 한다.
  • not 연산자를 사용해 미디어 쿼리의 조건을 반대로 할 수 있다.
• 조건: 지정한 창의 너비나 높이를 기준이 만족되면 스타일이 적용되도록 한다.
  • 방향성: 세로 모드와 가로 모드를 검사하는 방법으로 조건에 prientation: landscape를 작성한다.
• CSS 입력: 조건문을 통과한 후 작성된 CSS 스타일이 적용되는 부분이다.

@media 미디어 타입 (조건(너비 및 높이)){
    (CSS 입력하는 부분)
}

@media screen (max-width: 400px){
    body{
            color: red;
        }
}

@media (orientation: landscape){
    body{
            color: red;
        }
}

@media screen and (max-width: 400px) and (orientation: landscape){
    body{
            color: red;
        }
}

@media screen and (max-width: 400px), (orientation: landscape){
    body{
            color: red;
        }
}

@media not all and (orientation: landscape){
    body{
            color: red;
        }
}

반응형 웹 구현 (미디어쿼리)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

• 웹 스토리지의 종류
  • localstorage
  • sessionstorage
• 반응형웹
• 미디어 쿼리 사용방법

📌 공식적으로 이루어지는 첫 솔로프로젝트인데 무엇을 해야할지 아이디어가 항상 고민이 되는 것 같다. 무엇을 할까??? 고민하던 중 API를 사용해보라는 말에 바로 미세먼지 수치를 나타내 주는 프로젝트를 한번 만들어 보자고 생각하여 도전하게 되었습니다.

📗 오늘 학습한 내용

공공 데이터 포털

• 미세먼지 실시간 정보 API 활용신청 및 활용

axios

• axios를 활용하여 미세먼지 실시간 정보 API 데이터를 지역별로 가져올 수 있는 작업

StoryBook

• Styled-components를 활용하여 Story book component 생성
• 생성 된 UI components를 netlify 사이트를 사용하여 배포

구현화면

• 부족한점
  • 지역을 입력하는 중 렌더링된 내용 사라짐
    • 검색 후 엔터를 누를 경우에만 반영하도록 해볼것
  • 더보기 드롭다운 메뉴 미구현
    • 드롭다운 메뉴 구현 후 지역 버튼 클릭 시 데이터 변경되도록 할 것
  • 농도 미구현
    • 미세먼지 수치를 계산하여 좋음(파랑), 보통(초록), 나쁨(노랑), 매우 나쁨(빨강)으로 변하는 원을 구현해볼 것

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

• 공공 데이터 포털 API 사용
• axios 활용
• 컴포넌트 나누기

📌 오늘은 웹 페이지를 생성할 때 사용자들의 로그인을 쉽게 해주는 SNS 로그인 기능에 대해서 학습을 하는 날이다.

📗 오늘 학습한 내용

소셜 로그인 로직 플로우

1. 사용자가 로그인 요청을 보낸다.
2. SNS Auth서버에서 권한 허락 문구를 화면에 출력한다.
3. Authorization code를 클라이언트에 전달한다.
   • Authorization code: 액세스 토큰을 발급받기 위한 Code
4. 클라이언트에서 웹 서버로 Authorization code를 전달한다.
5. 웹 서버에서 SNS Auth서버로 Access token을 요청한다.
   •  Access token: 보호된 리소스에 액세스하는데 사용되는 인증 토큰
6. SNS Auth서버에서 웹 서버로 Access token을 전달한다.
7. 웹 서버에서 Access token을 클라이언트로 전달하여 로그인 처리를 한다.
8. 로그인이 완료되면 Access token을 웹 서버로 전달하여 SNS Resource 서버에서 유저정보를 요청한다.
   • Resource server: 액세스 토큰을 발급받는 인증서버
9. 받아온 유저정보를 클라이언트에 전달하여 로그인한 유저의 정보를 화면에 출력한다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

각종 SNS 로그인 로직 학습하기

📝 중요한 내용

• OAuth의 작동방식
• Authentication과 Authorization의 차이
• Authorizaion Code와 Access Token의 차이
• Authorizaion 서버와 Resource 서버의 차이
• 카카오 로그인 로직 
  • https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#before-you-begin

📌 요즘 날씨가 더워졌다 추워졌다 하는 것을 보니 환절기인듯하다 이럴때 몸관리에 유의해야겠다... 하나더 요즘 몸이 너무 쉽게 피로해진다.. 확실히 체력이 떨어지는 것을 몸으로 직접 체감하고 있다. 체력을늘리자!! 초심을 찾아 더 열심히 공부해보자!!

📗 오늘 학습한 내용

OWASP(The Open Web Application Security Project)

• 전 세계의 보안 전문가들이 웹의 보안에 대한 표준을 정의하고 이에 대해 기업과 개발자들에게 효율적인 정보를 제공하는 오픈 소스 커뮤니티이다.

SQL Injection

• 간단하지만 강력한 공격기법
• DB에서 임의의 SQL문을 실행할 수 있도록 명령어를 삽입하는 공격유형
• 대응 방안
  • 입력(요청)값 검증
  • Prepared Statement 구문 사용
  • Error Message 노출 금지
• SQL(Structured Query Language)
  • 관계형 데이터베이스 시스템에서 데이터를 관리 및 처리하기 위해 설계된 선언형 프로그래밍 언어

XSS(Cross-site Scripting)

• 웹 사이트 관리자가 아닌 굥격자가 웹 사이트에 악의적인 스크립트를 심어두는 행위
• 공격유형
  • Stored XSS(지속성)
    • 스크립트가 서버에 저장되어 사용자에게 피해를 줄 수 있는 유형
  • Refleted XSS(비 지속성)
    • URL 파라미터를 이용해 스크립트를 만드는 유형
• 대응방안
  • 스크립트 태그의 입력을 막는다.
  • 쿠키 설정 확인한다(httpOnly)
  • 쿠키에 민감한 정보를 담지 않는다.

토큰

• 클라이언트에 인증정보를 보관한다.
• 위험하다고 생각할 수 있으나 토큰은 유저정보를 암호화하기 때문에 클라이언트에 담을 수 있다.

토큰 기반 인증(JWT, Token-based Authentication)

• 매 요청마다 데이터베이스를 살펴보는 것이 불편하고 이에 따른 부담을 덜어내고 싶을 때 사용한다.

JWT 종류

• 액세스토큰
  • 보호된 정보들에 접근할 수 있는 권한을 부여한다.
  • 짧은 유효기간을 주어 토큰을 탈취당하더라도 장기간 사용하는 것을 막을 수 있다.
• 리프레시 토큰
  • 액세스 토큰의 유효기간이 만료된다면 새로운 액세스 토큰을 부여받게 해준다.
  • 유저의 편의보다 정보를 중요시 하는 곳에서는 사용하지 않는다.

JWT 구조

• Header
  • 어떤 종류의 토큰인지 어떤 알고리즘을 Signature를 암호화 하는지에 대한 내용
• Payload
  • 서버에서 활용할 수 있는 유저의 정보가 담긴 내용
• Signature
  • 서버의 비밀키와 헤더에서 지정한 알고리즘을 사용하여 암호화 한다.

OAuth

• 인증을 위한 표준 프로토콜
• 소셜 로그인 인증 방식의 바탕이 되는 기술 
• 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜
• 이미 사용장 정보를 가지고 있는 웹 서비스에서 사용자의 인증을 대신해주고, 접근 권한에 대한 토큰을 발급한 후, 이를 이용해 내 서버에서 인증을 가능하게 한다.
• OAuth는 인증을 다른 서비스에 맡기는 기능이고, 접근 권한 관리는 내 서버의 몫이다.

OAuth를 사용하는 이유

• 다양한 웹 서비스의 ID와 Password를 기억하는 것이 매우 귀찮은 일이기 때문이다.
• 자주 사용하는 서비스들 (github, google, kakao, facebook 등)의 ID와 Password만 기억해두면 해당 서비스을 통해 외부 서비스로 소셜 로그인을 할 수 있게된다.
• 검증되지 않은 App에서 OAuth를 사용하여 로그인한다면 직접 유저의 민감한 정보가 App에 노출될 일이 없고 인증 권한에 대한 허가를 미리 유저에게 구해야 하기 때문에 보안적인 측면에서도 좋다.

OAuth에서 반드시 알아야 할 용어

• Resource Owner
  • 액세스 중인 리소스의 유저
• Client
  • 리소스 오너를 대신하여 보호된 리소스에 액세스하는 애플리케이션
• Resource Server
  • 클라이언트의 요청을 수락하고 응답할 수 있는 서버
• Authorization Server
  • Resource Server가 액세스 토큰을 발급받는 인증서버
  • 리소스 오너를 성공적으로 인증한 후 클라이언트에게 액세스 토큰을 발급하는 서버
• Authorization Grant
  • 클라이언트가 액세스 토큰을 얻는 방법
    • Authorization Code Grant Type
    • Refresh Token Grant Type
    • Client Credentials Grant Type
    • Implicit Grant Type
    • Resource Owner Credentials Grant Type
• Authorization Code
  • Authorization Grant의 한 타입으로 액세스 토큰을 발급받기 위한 Code
  • Client ID로 이 Code를 받아온 후, Client Secret과 Code를 이용해 액세스 토큰을 받아올 수 있다.
• Access Token
  • 보호된 리소스에 액세스하는 데 사용되는 인증 토큰
  • Authorization Code와 Client Secret을 이용해 받아온 이 Access Token으로 리소스 서버에 접근 할 수 있음
• Scope
  • 토큰의 권한을 정의
  • 주어진 액세스 토큰을 사용하여 애겟스 할 수 있는 리소스의 범위

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

axios 사용방법

Python 알고리즘 문제 풀이

📝 중요한 내용

• 토큰