AI Platform / Web

쉽고 빠르게 로그인을 필요한 부분만 빠르게 만들어 보려고 한다. 어려워 보이지만 크게 어렵지 않다. 우선은 postman으로 rest api로 테스트를 진행한다. 테스트 성공을 하면, 테스트 한 방식데로 code에 적용한다. 바로 코드를 확인하려면 카카오 코드 만들기로 가면된다. 기본적은 원리는 아래와 같다. 핵심은 세 가지이다. 로그인해서 인증 코드를 받는다. 받은 인증 코드로 token을 받는다. token으로 로그인을 유지를 한다. 우선적으로는 postman으로 우선 로직을 실행해 보자. https://developers.kakao.com/console/app 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 위의 사이트에 들어가서 아래의 애플리케이션을 추가한다. ..

핵심만 압축했습니다. 디테일한 부분은 공식문서를 확인해 주세요! 0. 들어가면서 Hook의 종류는 굉장히 많다. 만약 간단한 프로젝트만 한다면, useState, useEffect 정도만 알아도 충분하고, 복잡한 내용은 useRef 정도를 추가하면 된다. 시중의 블러그나 책은 대부분 같은 내용만 다루는 것 같다. 더하기와 빼기... 물론 좋은 예제이지만 나는 핵심만 압축해서 이야기 해보고자 한다. 기초적 실습을 보여주고, 추가로 프로젝트 시 사용했던 수많은 기술들을 담아보려 한다. 사실 useState와 useEffect 정도만 알아도 이 글을 보고 있는 분들의 초급 수준에서 문제 없다. useEffect는 추가로 다음 블로그에서 이야기 해보려 한다. 1. useState 핵심 html은 변하지 않는다...

들어가기전에 react는 뷰js나 앵귤러가 프레임워크인 점과 다르게 react는 라이브러리다. 따라서 자유도가 높다는 점을 진지하고 진행하자. JSX를 사용이유는 여기를 눌러서 확인하고 오자. JSX란, 문자도 HTML도 아닌 JavaScript의 확장 문법이다. 변수선언방법은 아래와 같다. const element = Hello, world! 위의 생겨먹은것을 보면 전반적으로 const로 변수를 선언하니 javascropt같은 냄새가 난다. 그러나 뒤의 h1 태그들을 보면, HTML인것 같다. 즉, 위의 태그 문법은 문자열도 아니고 HTML도 아니다. 바로 JSX이다. JSX는 JavaScript의 모든 기능이 포함되어있다고 볼 수 있다. 이전 글에서 sandbox에서 react에대한 기초를 알아 봤다..

컴포넌트를 사용해서 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴보자. 함수 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 객체 인자(props)를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이 컴포넌트는 JavaScript 함수이므로 '함수 컴포넌트'라 한다. 클래스 컴포넌트(ES6 class) class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } React의..