분류 전체보기

[NETWORK] HTTP 의 State Code 설명

HTTP 의 상태 코드 ( State Code ) HTTP 의 상태 코드는 특정 HTTP 요청의 완료 여부를 나타낸다 응답은 5개 클래스로 그룹화 된다. 1. 1XX ( 정보 ) : 요청을 받았음, 프로세스 진행중 2. 2XX ( 성공 ) : 요청이 성공했음, 3. 1XX ( 리다이렉션 ) : 요청 완료를 위해 추가 작업 요망 4. 4XX ( 클라이언트 오류 ) : 잘못된 요청 구문, 라우팅 등 5. 5XX ( 서버 오류 ) : 서버가 요청을 처리할 준비가 되지 않음 자세한 내용은 하단 참조 Reference https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses HTTP response status codes - H..

[NETWORK] HTTP 의 GET, POST 비교

GET GET 요청은 데이터를 읽거나 검색할때 사용되는 Method GET 요청을 전송할때 쿼리 스트링 방식을 이용해서 전송한다. ( URL 주소 끝에 파라미터 ) 불필요한 반복 요청을 제한하기 위해 요청이 캐시되는 경우도 있음 GET 요청은 idempotent 한 요청임 POST 리소스를 생성, 업데이트 하기 위해 서버에 보내는데 사용 POST 요청은 캐시되지 않음 데이터를 Body 에 담아서 전송, Content-Type 에 요청 데이터 타입 표시에 따라 결정됨 POST 요청은 idempotent 하지 않음 GET, POST 차이점 idempotent , 멱등성이라고 하는 것인데 연산을 여러번 적용하더라도 결과가 변하지 않는 성질을 의미한다. GET 은 idempotent , POST 는 Non-id..

[NETWORK] HTTP 와 HTTPS

HTTP vs HTTPS HTTP 와 HTTPS 의 가장 큰 차이점은 S 부분 즉 SSL ( Secure Socket Layer ) 인증서 를 사용하는 Hyper Text Transefer Protocol 이다. HTTPS HTTPS 가 작동하는지 간단하게 확인하는 방법은 도메인 이름 옆에 자물쇠가 있으면 간단하게 HTTPS 를 확인할 수 있다. HTTPS 는 SSL 프로토콜을 통한 SSL 인증서를 사용하는 HTTP 이다. SSL 인증 방식을 사용하였으며 대칭키 암호화 비대칭키 암호화 방식을 모두 사용하고 있다. 대칭키 암호화는 암호화와 복호화의 키를 같은 키를 이용한다. 비대칭키 암호화는 1개의 쌍으로 구성된 공개키와 개인키를 각각 암호화와 복호화에 사용한다. HTTPS 의 동작 방식은 A라는 서버를 ..

[NETWORK] 쿠키와 세션, 그리고 브라우저 스토리지 ( Web Storage )

Cookie, Session 쿠키와 세션을 사용하는 이유는 HTTP 의 특징이자 약점을 보완하기 위해 사용한다. 1. 비연결성지향(connectionless) - 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특성 2. 무상태(Stateless) - 통신이 끝나면 상태를 유지하지 않는 특성 하지만 우리가 쇼핑몰을 사용할때 만약에 페이지가 바뀔 때마다 다시 로그인을 한다거나, 장바구니에 담긴 데이터가 사라진다거나 하면 두 번 다시는 그 사이트를 이용하지 않을 것이다. 쿠키 ( Cookie ) 쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간 안에는 브라우저가 종료되어도 인증이 유지된다는 특징이 있다. 하나의 쿠키에 최..

[Network] 사용자의 패스워드를 전송하고 보관하기.

제7조(개인정보의 암호화) ① 개인정보처리자는 고유식별정보, 비밀번호, 바이오정보를 정보통신망을 통하여 송신하거나 보조저장매체 등을 통하여 전달하는 경우에는 이를 암호화하여야 한다. 유저의 개인정보를 전송하는 방법 유저의 패스워드나 민감정보등을 보낼때, 평문으로 보내면 굉장히 위험할 것이다. 가로채기 공격의 위험 등, 그래서 개발자는 유저들의 정보를 전송할때 암호화를 통해서 보내야한다. 유저들의 개인 정보를 전송하는 방법은 몇가지 방법이 있다. Hash ( 해시 ) 첫번째는 Hash 를 통한 단방향 암호화이다. 단방향 암호화는 암호화를 시키면 복호화는 불가능한 방식으로 Hash 알고리즘을 통해 데이터를 매핑 시켜 완전 다른 데이터로 변환 시키는 것을 의미한다. 이런 과정을 다이제스트라고 한다. 암호화를 ..

[Network] CORS 란 무엇이고, 어떻게 해결하는가

CORS ( Cross-Origin Resource Sharing ) : 교차 출처 리소스 공유 CORS 브라우저는 보안상의 이유로, HTTP-Header 를 통해서 허락을 구하는 과정이 있는데 이를 CORS 라고 한다. 그래서 CORS 가 뭔데? Cors 는 Cross-Origin Resource Sharing 의 약자로, 교차 출처 리소스 공유라고 한다. 사실 처음 이렇게 들었을땐 무슨 말인지 감이 안잡혔다. 일단 가장 익숙한 www.google.com 을 예시로 들어보자. Cross-Origin , 교차 출처 즉 서로 다른 출처를 뜻한다. Origin 이라고 하는 것은 Protocol ( Https:// ) + Domain ( www.google.com ) + Port ( : 80 ) 를 합친 UR..

[React] Props Drilling 은 무엇이고 어떻게 해결하는가

Props Drilling Props Drilling 이란 props 를 하위 컴포넌트로 전달하는 과정에서 몇개의 컴포넌트를 뚫고 들어가는 형태를 의미한다. 이러한 Props Drilling 은 적으면 아무런 문제가 되지 않지만, 만약에 10개가 넘는 Props Drilling 이 일어난다면 그 props 를 추적하는데 어려움을 겪을것이다. 해결법 전역 상태관리 라이브러리 사용 Redux, Jotai, Recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러올 수 있다. Children 을 적극적으로 사용 export default function App() { const content = "Who needs me?"; return ( ); } function First({ children }..

[React] React X-파일

" A JavaScript library for building user interfaces" 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 - 리액트 공식 사이트 React 란? React 란 Facebook (META) 에서 만든 자바스크립트 라이브러리이다. SPA 나 모바일 애플리케이션 개발의 토대로 사용될 수 있다. 현재 가장 많은 유저가 사용하는 라이브러리중 하나이다. React 의 특징 Component 기반 구조 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. React 는 UI 를 컴포넌트로 쪼개서 만드는데 한 페이지 내에서도 여러개의 독립적인 컴포넌트로 이루어져있다. 컴포넌트 단위로 쪼개져있기때문에, 전체적인..

[JavaScript] 자바스크립트를 멀티 스레드처럼 사용하는 방법

자바스크립트는 싱글 스레드를 가지고 있는 언어이다. 옛날에 CPU 밈에서 나온 짤인데 포켓몬의 수 = 코어의 수, 팔의 수 = 쓰레드의 수이다. 스레드는 한번에 작업할 수 있는 수를 의미하는데, 자바 스크립트는 팔이 한개인 싱글 스레드이다. 싱글 스레드인 자바 스크립트는 한번에 하나의 작업밖에 하지 못하는데 이는 곧 속도 측면에서 느리다는 것을 의미한다. 자바스크립트는 비동기 방식을 통해 여러개의 작업을 동시에 하는 것 처럼 보이는 멀티 태스킹을 사용한다. Web API, Callback Queue, Event Loop 등을 통해 멀티스레드 처럼 보이게 하는 방식을 사용한다. 마치 게임 큐를 돌려놓고 다른 짓을 해도 큐는 계속 돌아가는것과 비슷한 원리라고 할 수 있다.

[JavaScript] 실행 컨텍스트 그리고 클로저

실행 컨텍스트클로저 ( execution context ) 실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경으로, 모든 코드는 실행 컨텍스트 내부에서 작동된다. 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 콜스택에 쌓인다 그리고 스택이기에 LIFO 방식으로 실행하면서 전체 코드의 환경과 순서가 정해진다. 클로저 ( Closure ) 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다. 보통 스칼라, 하스켈 등 함수형 프로그래밍 언어 에서 사용되는 특성으로, 자바스크립트 고유의 개념이 아니다.