컴퓨터 탐험가 찰리

혼자 공부하면서 Authorization Code Grant 방식의 Google 소셜 로그인에 대해 정리하였다. 이런 방법 말고도 백엔드에서 모두 처리하는 방식 등 다양한 방식을 공부했다. 프론트에서 모두 처리하는 방식, 백에서 모두 처리하는 방식이 있으나, 여기서는 프론트와 협업하는 방식에 대해서 다룬다. 참고로 프론트에서 모두 처리하는 방식은 google에서 사용자 정보가 담긴 토큰을 프론트로 내려줄 때 URL에 담아서 보내주는 방식이라 보안상 좋지 않다고 한다. 1. Authorization Code Grant 방식 Flow 1차로 프론트에서 Google에 요청해서 1회성 Auth Code를 발급받는다. 프론트가 백에 이를 전달하면, 백에서도 Google에 요청해서 사용자 정보가 포함된 토큰을 전송..

1. Vue의 특징 Vue.js는 웹프론트엔드 프레임워크이다. ReactJS의 경우 라이브러리로 소개되는데, 이것은 Vue와 React의 특성 차이를 나타내는 것이라고 할 수 있다. 즉 React는 Javascript를 기반으로 하나 자유도가 높고, 필요한 복잡한 컴포넌트가 있으면 직접 만들어 써야되는 특징이 있다. 그러나 Vue는 정해진 규칙이 짜여있어 초보자들이 접근하기 쉽고 생산성이 높은 장점이 있다. 다만 커뮤니티의 경우 React가 더 활발하여 더 다양한 접근이 가능할 수 있다. React와의 비교 공식문서에서의 React와 비교 내용은 다음과 같다(참조2, React 16이전과 비교한 문서임 / 2020.01.15). 비용이 많이 드는 DOM 조작에서, 둘 다 가상DOM을 이용하지만 필요한 D..

Router의 필요성 각 URL 주소마다 서버와 통신하여 데이터를 내려다주는게 아니라, Single Page Application(SPA) 형태로 작성된 웹페이지를 서버에서 브라우저로 한번에 내려받고, 사용자의 요청에 따라 URL이 브라우저에서만 바뀌게 해서 서버와의 통신 횟수와 양을 줄여준다. React router : Quick Start 따라하기 설치 create-react-app으로 react 폴더를 만들고, 해당 디렉토리에서 npm install react-router-dom 을 입력하여 라우터 라이브러리를 설치한다. (앱을 위한 react-native 에서는 react-router-native를 이용한다.) 파일구조 App.js 파일의 구조이다. react-router-dom에서 Browser..

Hook의 개요 Hook은 Class를 작성할 필요없이 함수형 컴포넌트에서 상태값을 사용할 수 있는 방식이다. React 버전 16.8부터 새로이 적용되었다. 공식문서의 Hook이 만들어진 이유를 읽어보면, 기존에는 Lifecycle을 중심으로하여 State와 메서드가 뒤섞이고 복잡해지면서 컴포넌트가 방대해지는 문제가 있었다. 그리고 Javascript의 Class 코드의 재사용성 저하와 코드 구성 난해함을 해결하기 위해 Hook을 사용하기 시작했다고 되어있다. https://ko.reactjs.org/docs/hooks-intro.html#motivation 자세한 동기 Class 컴포넌트로 작성하다보면 Wrapper hell 이라는 현상이 발생하게 된다. 컴포넌트를 다른 컴포넌트로 감싸주는 구조이기 ..

이전글React / 기초1 / React 설치, JSX, component 1. State앞선 글에서 작성한 바와 같이, 클래스 컴포넌트는 상태를 변경할 수 있는 요소를 갖고 있는데, 그것이 바로 state 이다. 클래스 컴포넌트 안에서 state를 정의하고, 이벤트 등에서 활용하게 된다. state는 직접적인 수정이 불가하고 반드시 setState라는 메서드를 이용해서만 변경해야한다. 가장 많이 사용되는 예제인 Counter 만들기를 해보자. 1-1. State 부분만 집중해서 보기다른 부분들은 다음 섹션에서 하나씩 기술할 것이다. 우선은 6번줄을 보면, this.state로 {count : 0} 이라는 객체가 정의되어 있음을 볼 수 있다. 사용자의 명령에 따라 반응할 정보를 객체 형태로 만들어 놓고,..

이전글 React / 기초3 / LifeCycle 1. React에서 Event 처리 시 유의할 점 React에서의 Event 처리 방식은 DOM에서와 매우 유사하지만, 몇가지 차이점이 존재한다. 1. onclick 속성에 JSX 문법으로 중괄호 {}를 쓰고, 안에 함수명을 적는다. >> 함수 실행문이 아닌 함수명만 적는다. 이것은 React가 JSX를 Javascript로 렌더링할때 함수를 자동으로 실행하기 때문이다. 1 2 3 4 5 6 7 8 9 // HTML 방식 Activate Lasers // React 방식 Activate Lasers cs 2. 기본 동작 방지를 위해 false 반환이 아닌 preventDefault()를 사용해야 한다. HTML에서의 링크를 여는 기본동작은 아래와 같은 코..

이전글 React / 기초2 / State, props와 클래스 컴포넌트 작성 개요 1. LifeCycle 어떤 컴포넌트가 생성, 갱신, 삭제될 때 컴포넌트는 새롭게 렌더링 된다. 즉 DOM 구조를 업데이트하게 되는 것이다. 새롭게 렌더링 함으로써 동적으로 변하는 웹페이지를 만들 수 있게 된다. 렌더링은 경우에 따라 렌더링 시점과 단계가 지정되어 있다. 아래의 표에 그 내용이 정리되어 있다. (공식문서 - projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ ) 아래 부분에서 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 확인할 수 있다. 각 LifeCycle 단계를 이용하기 위한 메서드로,..

1. React 개요 사용자와의 interaction이 많아짐에 따라서, DOM 관리와 상태값 지정이 복잡해졌고, 이에 따라 기능 요소에만 집중하는 Library가 생겨나게 되었다. 그중 하나가 React 이다. React는 컴포넌트(Component) 개념에 집중하는 프론트엔드 라이브러리이다. 컴포넌트란 '하나의 의미를 가진 독립적인 단위 모듈'을 의미한다. React에서는 의미와 기능을 갖는 Tag 자체를 만든다. 이번 글에서는 React 설치 방법과 React를 구성하는 기본개념인 JSX, 엘리먼트 렌더링, Component와 Props에 대해서 알아본다. 2. JSX JSX 사용 이유 어떤 엘리먼트를 만들 때, HTML tag까지 함께 지정한다. JSX : Javascript의 태그 형식 문법. ..