devstudylog

1. OAuthOAuth는 인터넷 표준화 기구인 IETF(Internet Engineering Task Force)에 의해 정의된 표준 프레임워크이다.3rd 파티 앱에서, SNS 서비스 업체인 Resource를 가지고 있는 서버에 제한적으로 접근할 수 있는 방법에 대한 Framework를 정의한 것이다.구글, 카카오, 페이스북, 네이버 등의 서비스 제공자들은 OAuth를 통해 외부 애플리케이션에 사용자의 계정 데이터에 접근할 수 있는 권한을 안전하게 부여한다.이렇게 해서 사용자의 로그인 정보를 직접 제3의 애플리케이션에 제공하지 않고도, 해당 애플리케이션이 사용자의 정보에 접근할 수 있도록 허용해준다. OAuth를 이용하는 방법은 앱마다 다르지만,유저 인증과 보안을 대신하는 수단으로 많이 사용하고 있다...

많은 사람들이 쿠키와 세션을 서로 대립하거나, 세션이 쿠키를 대체하는 기술로 오해하곤 한다.사실 쿠키와 세션은 상호 보완을 하는 기술이라고 보는 것이 더 맞다. 1부에서는 서버가 브라우저에 쿠키를 어떻게 저장하고, 쿠키라는 기술의 한계에 대해서 알아보았다.하지만 이러한 갖가지 단점에도 불구하고 쿠키는 여전히 웹에서 중요한 한 축을 담당하며 다양하게 사용되고 있다. 이번 포스팅에서는웹 개발에서 쿠키를 사용할 수 밖에 없는 결정적인 이유와 세션 기반 사용자 인증에 대해서 알아본다. HTTP 프로토콜의 특징HTTP 프로토콜은 연결이 유지되지 않고 (connectionless), 상태가 없는 (stateless) 특성을 가지고 있다.즉, 서버가 클라이언트의 요청에 응답하는 순간 HTTP 연결은 끊어지며, 클라이..

대부분의 서버 프레임워크에서 쿠키를 직접 다루지 않아도 되도록 추상화가 잘 되어있긴하지만쿠키는 웹에서 빼놓을 수 없는 핵심적인 기술이다.프론트 개발을 하든 백엔드 개발을 하든 웹 개발자로서 쿠키를 제대로 이해해두면 두고두고 유용한 지식이 될 것이다! 쿠키란 무엇이고, 어떤 특징을 가지고 있을까?클라이언트 (웹 브라우저)에 저장되는 작은 데이터 조각을 의미한다.HTTP에서 클라이언트의 상태 정보를 쿠키 형태로 클라이언트 PC에 저장했다가필요 시 정보를 참조하거나 재사용 할 수 있다.key-value 쌍으로 구성되어있는 데이터 파일이며쿠키 이름, 쿠키값, 만료시간, 전송할 도메인명, 전송할 경로, 보안 연결 여부, httpOnly 여부로 구성된다.도메인 당 20개의 쿠키를 가질 수 있다.하나의 쿠키는 4KB..

프론트엔드 개발자와 백엔드 개발자가 만나는 지점인 API !일반적으로 앱이나 웹 상에서 작동하는 어플리케이션을 개발할 때는 주로 HTTP나 HTTPS 프로토콜을 사용하여 API를 만들게 되는데, 이 API의 정의가 얼마나 직관적이고, 명확하냐에 따라 프로젝트의 복잡도가 크게 낮아지게 될 만큼 시스템 설계에 있어서 꽤나 중요한 자리를 차지하고 있다. 그래서 우리는 일종의 약속을 통해 이 API가 어떤 동작을 수행하는 API인지를 명확하게 정의해야 하며,이 API 정의 과정에서 우리가 사용할 수 있는 요소들이 바로 HTTP 메소드와 URI (Uniform Resource Identifiers)이다. GET https://evan.com/users/1HTTP API의 엔드포인트는 위와 같이 HTTP 메소드와 ..

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.useEffect는 component가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다.즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다! => useEffect(effect function, dependency array); 1. mount 됐을 때 useEffect 실행 시점useEffect는 컴포넌트가 mount, update, unmount '될 때' 실행 된다.=> useEffect의 실행은 컴포넌트의 렌더링과 동시에 일어나는 것이 아니라 그 후에 일어난다.  ❓useEffect의 m..

왜 useEffect 일까?useEffect에서 "effect"가 의미하는 바는 무엇일까.effect는 side effect 라는 함수형 프로그래밍 용어를 나타낸다.side effect가 무엇인지 이해하려면 순수 함수의 개념을 이해 해야 한다. 대부분의 React 컴포넌트는 순수 함수로 만들어져 있다.function MyReactComponent(){}순수 함수 (pure function)1. 함수의 return 값이 동일한 인수 (argument)에 대해 동일하다.2. side effect가 없다. (외부의 상태를 변경하지 않는다) 대부분의 React 컴포넌트는 순수 함수이다. 즉, input을 받아 예측 가능한 JSX 리턴 값을 만들어 낸다.JavaScript 함수에 대한 input은 인수 (argu..

state란- state는 간단히 말해 변수이다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링 되어서 화면이 바뀐다.- props와 마찬가지로 렌더링 결과물에 영향을 주는 정보를 가지고 있다.- state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다. - usestate는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 react Hook이다.- 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()를 활용해 state라는 저장 공간에 담아 사용한다. state를 정의할 때 중요한 점- state를 정의할 때는 렌더링이나 데이터 흐름에 사용되는 값만 state에..