Homile

📌 내가 제일 노력을 해야하는 부분인 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

Portals

Fragment를 사용하면 깔끔한 코드를 작성할 수 있습니다.

React Portals은Fragment와 비슷한 일을 하여 간결한 코드를 작성하는데 사용됩니다.

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법입니다.

ReactDOM.createPortal(child, container)

첫 번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식 요소입니다.

두 번째 인자 container는 DOM 엘리먼트입니다.

사용법

일반적인 컴포넌트 렌더링 메서드에서 요소를 반환할 때, 해당요소는 부모 노드에서 가장 가까운 자식으로 연결됩니다.

portal의 전형적인 동작 방법은 부모 컴포넌트에 overflow: hidden이나 z-index가 있는 경우 이지만, 시각적으로 자식을 보여줘야 하는 경우가 있습니다. (다이얼로그, 호버카드, 툴팁, 모달 등)

// 일반적인 렌더링 방법
render(){
	return (
    	<div>
        	{this.props.children}
        </div>
    );
}

// Portal을 이용한 렌더링 방법
render(){
	return ReactDOM.createPortal(
    	this.props.children,
        domNode
    );
}

참고자료

https://ko.reactjs.org/docs/portals.html

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

📗 오늘 학습한 내용

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 알고리즘 문제 풀이

📝 중요한 내용

• 토큰

📌 오늘부터 3일간 로그인관련 내용을 학습을 하게된다. 쿠키... 토큰... 소셜 로그인 관련이다... 이부분은 프로젝트에 사용할 수 있는 부분이기 때문에 열심히해보자!!!

📗 오늘 학습한 내용

HTTPS 프로토콜

• HTTP + Secure
• 요청의 내용을 한번 암호화하기 때문에 유출이 되어도 어떤 내용인지 알 수 없다.
• 인증서, CA, 비대칭 키 암호화방식을 이용한다.
• 인증서
  • 데이터를 제공하는 서버가 진짜인지 인증확인하는 용도이다.
  • 인증서의 내용에 서버에 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다.
  • 요청을 받은 서버는 인증서와 함께 응답을 전송하고, 응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교하여 같다면 데이터를 제공해주는 서버가 진짜라는 것을 알 수 있습니다.
• CA (Certificate Authority)
  • 인증서를 발급하는 공인된 기관이다.
  • 각 브라우저는 신뢰하는 CA의 정보를 가지고 있어 인증서의 차이가 있다.
• 비대칭 키 암호화
  • 암호화 및 복호화 가능
  • A키로 특정 데이터를 암호화하면 해당 키를 복호화하는데 A키의 쌍인 B키로만 가능하다.

암호화

• 제 3자가 서버와 클라이언트가 주고받는 정보를 탈취할 수 없도록 하는 것이다.
• 서버와 클라이언트는서로가 합의한 방법으로 데이터를안호화하여 주고 받는다.
• 중간에 제 3자에게 데이터가 탈취되더라도 그 내용을 알아볼 수 없다.
• 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여 해당 방식에 대한 정보를 소유한 사람을 제외하고 이해할 수 없도록 '알고리즘'을 이용해 정보를 관리하는 과정이다.

mkcert

• 로컬 환경에서 신뢰할 수 있는 인증서를 만든다.
• 로컬을 인증된 기관으로 추가한 뒤 로컬 환경 인증서를 생성한다.

// 설치
brew install mk cert

// 로컬을 인증된 발급기관으로 추가
mkcert -install

// 로컬 환경 인증서 생성
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

Hashing

• 어떤 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것
  1. 모든 값에 대해 해시 값을 계산하는데 오래걸리지 않아야 한다.
  2. 최대한 해시 값을 피해야 하며, 모든 값은 고유한 해시 값을 가진다.
  3. 아주 작은 단위의 변경이라도 완전히 다른 해시 값을 가져야 한다.

Salt

• 암호화해야 하는 값에 어떤 '별도의 값'을 추가하여 결과를 변형하는 것
  1. 암호화만 해놓는다면 해시된 결과가 늘 동일하다.
     해시된 값과 원래 값을 테이블(레인보우 테이블)로 만들어서 decoding 해버리는 경우도 생긴다.
  2. 원본값에 임의로 약속된 별도의 문자열을 추가하여 해시를 진행한다면 기존 해시값과 전혀 다른 해시값이 반환되어 알고리즘이 노출되더라도 원본값을 보호할 수 있도록 하는 안정 장치이다.
  3. 기존: 암호화 하려는 값 -> hash 값
     Salt: 암호화 하려는 값 + Salt 용 값 => hash 값

Cookie

• 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다.
• 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.
• 특징
  • 서버가 클라이언트에 특정한 데이터를 저장할 수 있다.
  • 데이터를 저장한 이후 아무 때나 데이터를 가져올 수 는 없고, 데이터를 저장한 후 특정 조건들이 만족돼야 다시 가져올 수 있다.

1. Domain

• www.google.com과 같은 서버에 접속할 수 있는 이름

2. Path

• 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미한다.
• 설정된 경로를 포함하는 하위 경로로 요청을 해도 쿠키를 서버에 전송할 수 있다.

3. MaxAge or Expires

• 쿠키가 유효한 기간을 정하는 옵션
• MaxAge: 시간을 초 단위로 설정
• Expires: 날짜 설정
• 세션 쿠키: MaxAge, Expires 옵션이 없는 쿠키(임시 쿠키)
• 영속성 쿠키: MaxAge, Expires에 지정된 유효시간만큼 사용가능한 쿠키

4. Secure

• 사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션이다.
• Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.

5. HttpOnly

• JS에서 브라우저의 쿠키에 접근 여부를 결정한다.
• 옵션이 true인 경우 js로 쿠키에 접근이 불가하다.

6. SameSite

• Cross-Orgin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 된다.

쿠키를 이용한 상태 유지

• 기본적으로 쿠키는 오랜 시간 유지할 수 있고, HttpOnly 옵션을 사용하지 않았다면 JS를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

Session

• 서버가 Client에 유일하고 암호화된 ID를 부여
• 중요 데이터는 서버에서 관리

📘 추가로 공부할 내용

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

axios 사용방법

📝 중요한 내용

• 쿠키: 서버가 클라이언트에 데이터를 저장하는 방법
• 세션: 사용자가 인증에 성공한 상태
• axios로 서버와 통신가능 (fetch와 같은 기능, 실무에서 많이 사용)

추가 비교 표: https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/