천천히 알아가는 세상

안녕하세요. 이번에는 JWT에 대하여 알아보겠습니다. 1. JWT (JSON Web Token) JSON 웹 토큰(JSON Web Token, JWT)은 선택적 서명 및 선택적 암호화를 사용하여 데이터를 만들기 위한 인터넷 표준으로, 페이로드는 몇몇 클레임(claim) 표명(assert)을 처리하는 JSON을 보관하고 있다. 토큰은 비공개 시크릿 키 또는 공개/비공개 키를 사용하여 서명된다. 이를테면 서버는 "관리자로 로그인됨"이라는 클레임이 있는 토큰을 생성하여 이를 클라이언트에 제공할 수 있다. 그러면 클라이언트는 해당 토큰을 사용하여 관리자로 로그인됨을 증명한다. 이 토큰들은 한쪽 당사자의 비공개 키(일반적으로 서버의 비공개 키)에 의해 서명이 가능하며 이로써 해당 당사자는 최종적으로 토큰이 적법한..

안녕하세요. 이번에는 React의 Hook 중 하나인 useEffect 사용법에 대하여 알아보겠습니다. 실습환경 CRA - create-react-app 먼저 React의 Life Cycle에 대하여 알아야합니다. 1. Life Cycle 컴포넌트의 Life Cycle Mount : 컴포넌트가 화면에 첫 렌더링 할 때 Update : state 변화로 리렌더링 될 때 Unmount : 화면에서 사라질 때 2. 클래스형 컴포넌트의 Life Cycle Life Cycle 상황에 맞게 특정 기능을 수행할 수 있도록 다양한 기능을 제공한다. 클래스형 컴포넌트는 상황마다 사용하는 함수가 다릅니다. Mount : 컴포넌트가 화면에 첫 렌더링 할 때 - componentDidMount() Update : state ..

안녕하세요. 이번에는 React의 조건부 렌더링 사용하는 방법에 대하여 알아보겠습니다. React는 상황에 따라서 원하는 내용을 출력할 수 있습니다. 이때 삼항 연산자, useState 등을 많이 사용합니다. 실습환경 CRA - create-react-app 아래와 같이 파일을 작성합니다. /components/Item.jsx import React from 'react' export default function Item() { return ( 보이나요? ) } /components/ConditionalRender.jsx import React from 'react' import { useState } from 'react' import Item from './Item'; export default f..

안녕하세요. 이번에는 useState, useRef, Variable 3개를 비교해보도록 하겠습니다. useState 변경 시 리렌더링되며, 변경 값으로 적용된다. useRef 변경되어도 리렌더링되지 않지만, 값은 유지되며 리렌더링 시 변경 값으로 적용된다. Variable 변경되어도 리렌더링되지 않으며, 리렌더링 시 초기 값으로 돌아간다. /components/Comparing.jsx import React, { useRef } from 'react' import { useState } from 'react' export default function Comparing() { const [countState, setCountState] = useState(0); const countRef = useRe..

안녕하세요. 이번에는 useRef에 대하여 알아보겠습니다. 실습환경 CRA - Create React App useRef 컴포넌트가 리렌더링 되어도 값을 유지하고 싶을 때 사용한다. 주로 Input 태그에 많이 사용한다. 참조하고자 하는 DOM 요소에 ref 속성을 주고 해당 태그의 변화를 감지하거나 DOM 요소를 컨트롤할 수 있다. VanilaJS의 querySelector 또는 getElementById 같은 역할을 손쉽게 구현할 수 있다. useRef 사용방법 useRef를 사용하여 변화를 감지하거나 DOM 요소를 컨트롤하고 싶은 태그에 ref 속성을 부여한다. /components/TestRef.jsx import React, { useRef } from 'react' import { useSta..