Aairon 개발 블로그

어플리케이션에서 로그인을 구현하는 방법은 인증을 서버의 세션에서 할지 토큰을 통해서 할지에 따라서 달라지게 됩니다. 이번 글에서는 JWT를 사용하여 로그인을 구현하는 방법에 대해서 작성합니다. 세션 방식과 토큰 방식의 차이점은 아래 글에서 확인 할 수 있습니다. 쿠키, 세션(cookie, session)과 토큰 (token, JWT)의 차이점 웹 어플리케이션에서 로그인을 구현하는 방법은 크게 쿠키, 세션을 이용하는 방법과 토큰을 이용하는 방법 2가지가 있습니다. 간단히 말하면 쿠키, 세션 방식은 서버에서 세션아이디를 기록하 jcon.tistory.com Access token & Refresh token JWT 토큰을 사용하여 로그인을 구현할 때에는 보통 access token과 refresh token..

목차Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 - 현재 글Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 Next js 튜토리얼 8편 : 배포Using Shared Components앞에서 Next.js에서 페이지를 만드는 방법에 대해 알게 되었습니다. 우리는 react 컴포넌트를 pages 폴더에 넣어서 페이지를 만들 수 있었습니다. pages폴더의 파일 이름은 url로 접근 할 수 있습니다. pages는 자바스크립트 모듈임으로 다른 자바스크립트 컴포넌트를 넣을 수도 있습니..

자사 홈페이지를 nextjs로 제작을 했다. 프로토 타입이 나온 후에 테스트를 하던 중 ie에서 작동이 안되는 이슈가 있었다. (개발자의 적 ie..) ie의 개발자 도구를 열어서 확인을 해본 결과 ie에서 지원하지 않는 자바스크립트 함수 때문인걸로 추론됐다. 그에 대한 해결책을 찾던 중 polyfill이라는 것을 알게 되었다. Polyfill 이란위키피디아에서는 아래와 같이 설명하고 있다. 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다. 기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다. - 위키..

react는 직접적으로 dom을 조작하는 것을 지양한다. 태생 자체가 virtual dom을 사용하여 효율적인 렌더링을 하기 위해 만들어 졌기 때문이다. 하지만 dom을 조작해야하는 상황이 있다. 브라우저의 width나 height를 가져오기 위해서는 dom을 조작할 수 밖에 없다. 개인적으로 hooks가 더 편하기 때문에 hooks 코드를 사용했다. const size = useWindowSize(); function useWindowSize() { const isClient = typeof window === 'object'; function getSize() { return { width: isClient ? window.innerWidth : undefined, height: isClient ? ..

웹팩에 대해 이해하기 위해 CRA를 사용하지 않고 설정을 해보았습니다 https://www.valentinog.com/blog/babel 을 의역한 글입니다. 오류가 있으면 알려주세요 React, webpack 및 Babel 설정 방법 : 목차 다음 내용을 다룹니다webpack 설치 및 구성 방법Babel 설치 및 구성 방법React 설치 방법두 개의 React 구성 요소를 만드는 법 ( Container / Presentational )번들을 HTML 페이지에 포함시키는 방법webpack dev 서버를 설치하고 구성하는 방법React, webpack 및 babel 설정 방법 : webpack 설정npm 설정 초기화 1npm init -ycs webpack / webpack-cli 설치 1234npm i..

1. componentWillMount - 랜더링이 되기 전에 실행 - 컴포넌트가 DOM이 만들어지기 전에 실행 - v16.3 이후부터는 deprecated되었으며 UNSAFE_componentWillMount로 사용가능 2.componentDidMount - 랜더링이 된 후에 실행 - 이 안에서 다른 자바스크립트 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용 - D3, masonry처럼 DOM을 사용해야 하는 외부 라이브러리 연동 - 해당 컴포넌트에서 필요로하는 데이터를 요청 하기 위해 axios, fetch 등을 통하여 ajax요청이나 DOM의 속성을 읽거나 직접 변경하는 작업 3.componentWillReceiveProps(nextProps) - this.prop..