개발노트

OAuth2 개념 OAuth 2.0(Open Authorization 2.0, OAuth2)는 인증을 위한 개방향 표준 프로토콜이다. 이 프로토콜에서는 Third-Party 프로그램에게 리소스 소유자를 대신해 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임하는 방식으로 작동되며 구글, 페이스북 등 외부 소셜 계정을 기반으로 간편하게 인증하는 기능이다. OAuth2 제공자 구글 페이스북 카카오 네이버 먼저 알아야 할 용어 Authentication(인증) 인증, 접근 자격이 있는지 검증하는 단계 Authorization(인가) 자원에 접근할 권할을 부여하고 리소스 접근 권한이 있는 Acess Token을 제공 Access Token 리소스 서버에게서 정보를 획득할 때 사용되는 토큰으로, 만료 기간이..

프론트에서 fetch로 서버에 로그인 요청을 하면 서버에서 jwt토큰을 만들어 header에 심어 응답을 해주는데, 자꾸 프론트에서 "Authorization"으로 응답을 받지 못해 이것저것 다하다가 많은 시간을 날렸다. 서버에서 토큰을 심는 코드 프론트에서 토큰을 추출하는 코드 위처럼 토큰을 받고, console에 찍어보면 자꾸 undefined가 나왔다. 그러다 아래 글을 보았다. https://bogmong.tistory.com/5 Axios Response header의 값이 없는 경우에 대해 어떤 상황의 어디에 영향을 미치는 문제인가요? - WHO AND WHAT React에서 axios 라이브러리를 사용했다. POST의 Response를 받기 위해 다음과 같은 코드를 사용했다. API 서버에서..

1. HTTP란? [ HTTP(Hyper Text Transfer Protocol)란? ] HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다. HTTP는 1989년 팀 버너스 리(Tim Berners Lee)에 의해 처음 설계되었으며, WWW(World-Wide-Web) 기반에서 세계적인 정보를 공유하는데 큰 역할을 하였다. [ HTTP의 구조 ] HTTP는 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동한..

글쓰기 앞서... - 필자는 지금까지 개발을 해오면서 SSL 에 대한 개념을 추상적으로만 알고있다가 이번에 회사 솔루션에서 https 적용간에 문득 SSL 의 원리와 구체적인 개념이 궁금해져서 개인적으로 앞선 선배님들이 정리해주신 정보들을 서칭하며 개념을 정리한것을 기록하려한다. HTTPS 와 HTTP 의 개념 - HTTP는 Hypertext Transfer Protocol의 약자다. 즉 Hypertext 인 HTML을 전송하기 위한 통신규약을 의미한다. HTTPS에서 마지막의 S는 Over Secure Socket Layer의 약자로 Secure라는 말을 통해서 알 수 있듯이 보안이 강화된 HTTP라는 것을 짐작할 수 있다. HTTP는 암호화되지 않은 방법으로 데이터를 전송하기 때문에 서버와 클라이언트..

VueJS란? - React, Angular 와 같은 JavaScript 프레임워크로 컨트롤러 대신에 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며, 재사용이 가능한 UI들을 묶어서 사용할 수 있습니다. 특징 MVVM 패턴을 사용합니다. Virtual DOM의 사용합니다. Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮습니다. Template과 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리하여 사용합니다. Vue가 무엇이 좋은가? 다른 프레임워크보다 비교적 쉽게 배울수 있으며, 빠르게 적용할 수 있습니다. React와 Angular의 장점을 갖고있어 성능이 우수할 뿐만 아니라 가볍고 빠..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. CRA로 리액트 프로그램을 작성하셨다면 직접 HTML 파일을 작성할 일이 없었을 것입니다. JSX라는 문법을 통해서 HTML과 비슷한 형태로 작성을 하고, 그 파일을 리액트가 HTML로 변환시켜 렌더링을 시킨다는 사실을 알고 있습니다. 하지만 우리는 그 타이밍을 잘 알지 못해요. 만약 리액트로 프로그램을 만든 뒤, 그 사이트를 접속해 보면 처음에는 아무것도 없는 빈 화면이 반겨줍니다. 그 후 자바스크립트가 로딩이 완료되면서 우리가 작성한 JSX파일이 보이기 시작합니다. 이번 시간에는 그 타이밍을 알아보도록 하는 시간을 가져보겠습니다. 왜 내가 그걸 알아야 하는데 ? 이 부분을 학습하지 않고 리액트 개발을 하실 경우 총알 없는 ..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요. 리액트 강좌 다섯 번째 시간입니다. 오늘은 전 시간에 못하고 끝냈던 Props에 대해서 알아보겠습니다. 우선, Props에 대해 설명을 하기 전에 State와 Props에 대해서 정확히 짚고 넘어가겠습니다. State는 현재 컴포넌트 내에서 변경이 가능하다. Props는 현재 컴포넌트 내에서 변경이 불가능하다. (예전 리액트 버전에서는 가능했으나 현재 버전에서는 사용하지 않는 것을 추천) Props와 State 모두 하위 컴포넌트에 상속이 가능하다. 이제 Props에 대해서 알아보도록 하죠. 일단 Props를 만들어 출력해 보도록 하겠습니다. src/index.js 파일을 변경해 주세요. index.js 코드를 보..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요! 리액트 강좌 네 번째 시간입니다. 오늘은 전 시간에 말씀드렸던 데로 Props 와 State에 대해서 알아보도록 하겠습니다. 하지만 Props와 State의 개념은 제가 리액트를 처음 배울 때 헷갈렸던 개념이어서, 오늘은 State에 대해서만 알아보도록 하겠습니다. Props와 State는 어려운 개념은 아니지만 우리가 리액트를 하면서 항상 사용할 것이고, 중요하기 때문에 2강에 걸쳐서 포스트가 진행됩니다. Props와 State는 리액트에서 데이터를 다룰 때 사용하는 개념입니다. 둘 다 정말 중요한 개념이고, 이제 우리는 3강에서 CRA 폴더 구성까지 배웠으니, 이제 데이터를 직접 조작할 때가 되었습니다. 우선 ..