Library

🎆 useEffectuseEffect()는 페이지의 마운트, 언마운트, 업데이트 시 작업을 설정한다.용어설명Mount컴포넌트가 페이지에 나타남unMount컴포넌트가 페이지에서 사라짐 업데이트는 useEffect() 특정값에 의존하여 해당 값이 변경, 실행되면 해당 useEffect()를 재실행한다. useEffect()의 구조는 다음과 같다.useEffect(()=> { // 마운트 완료 후 실행할 코드 return () => { // 언마운트 완료 후 실행할 코드 }}, [dependencies]) dependencies의 값이 변경되면 언마운트가 일어나면서 return()을 통해 기존 작업은 해제하고 다시 마운트 시킨다.   💻 Code리액트 프로젝트를 생성하고 다음과 같이 작성한다..

👨🏻‍🍼 useState 특정 값을 useState()로 선언하여서 값의 상태를 관리하고, 해당 값의 상태가 변경되면 화면을 리렌더링하여 클라이언트에게 보여준다. 이때, 리렌더링이 일어나는 컴포넌트에 자식 컴포넌트가 있다면, 자식 컴포넌트 또한 다시 불러와지면서 자식 컴포넌트까지 리렌더링 됩니다. 💻 Code 리액트 프로젝트를 만들고, 다음 파일을 만들어준다. 📄 StateComponent.tsx import React, { useState } from 'react' export function StateComponent(): JSX.Element { const [num, setNum] = useState(0) const onIncrease = () => setNum(num + 1) const onDec..

작성자 개발 환경 ✅ VScode ✅ Mac or Windows 🛠️ 리액트 프로젝트 생성 (CRA) CRA는 Create-React-App의 약자로 리액트 프로젝트를 생성하는 것을 말한다. 리액트 프로젝트를 생성하기 위해 명령 프롬프트(CMD) 혹은 >_ Terminal 을 열어준다. 그 다음 다음 명령어를 실행한다. $ npx create-react-app 에 .을 넣으면 현재 경로에 리액트 프로젝트가 생성되고, 에 문자를 작성하면 해당 문자를 폴더명으로 하는 폴더를 생성하여 그 안에 프로젝트를 생성한다. 는 해당 프로젝트의 옵션을 부가한다. --template typescript를 작성하면 타입스크립트의 프로젝트가 생성된다. 아무것도 작성하지 않을 시 default로 JavaScript 프로젝트를 ..

🌐 리액트 메타에서 개발한 오픈 소스 자바스크립트 라이브러리이다. 페이지 전환 및 사용자 UI 부분에서 상당히 부드럽게 작동하기 때문에 해당 라이브러리를 사용한다. 또는 html을 함수, array, object에 보관하여 재사용이 가능하여 큰 프로젝트일수록 html 관리가 편해진다. https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org ⬇️ Install 리액트 개발을 하기 위해서 nodejs를 설치해야한다. 설치가 되어있는지 확인하기 위해서 명령 프롬프트(CMD)를 열어서 아래와 같이 작성한다. ..

토큰을 발급하고 인증받고, 검증하려는데 구조와 프로세싱을 이해하는데 5일이 걸린 거 같다... 개발될수록 티스토리의 내용 및 코드가 변경될 수 있습니다. 참고사이트 - 구글 검색으로 "jwt", "token" 인증 관련 검색으로 나온 내용 전부 🧠 사전 지식const jwt = require('jsonwebtoken'); // // 토큰 발급 코드 // // Data - 토큰에 담을 내용을 담습니다. // SecretKey - 임의적으로 개발자가 정해줍니다. // options - 토큰의 유효기간 및 서명 옵션을 지정했습니다. const token = jwt.sign(Data, SecretKey, signOptions ) // // 토큰 검증 코드 // // token - 발급 받은 토큰을 담습니다. /..

참고 사이트 • https://puleugo.tistory.com/138 🎫AccessToken과 🪪RefreshToken • AccessToken: 서버 API를 직접 요청할 때 사용한다. • RefreshToken: 액세스 토큰이 만료되었을 때 액세스 토큰을 재발급할 목적으로 사용한다. 🧑🏻‍❤️‍👩🏻분리 목적 클라이언트와 서버 간의 API 통신 중, 토큰이 해커에게 유출될 수 있기 때문이다. 따라서, 직접 API를 호출하는 액세스 토큰의 주기는 짧게 설정하고 (약 1시간) 액세스 토큰을 재발급하는 리프레시 토큰의 주기는 비교적 길게 설정한다. (약 2주) 이렇게 된다면 액세스 토큰이 유출되더라도 만료 주기가 짧아 피해를 조금이나마 줄일 수 있다. 💻 개발 액세스/리프레시 토큰 방식은 중간에 탈취 당..

참고 사이트 • https://velopert.com/2389 🗼 구조 jwt는 ' . ' 을 구분자로 3가지 문자열로 구성되어 있다. 구조는 다음과 같다. 👷🏻‍♂️ Header Header는 두가지의 정보를 지니고 있다. • typ: 토큰의 타입을 지정한다. 즉, jwt • alg: 해싱 알고리즘을 지정한다. 해싱 알고리즘은 보통 HMAC SHA256 혹은 RSA가 사용되며, 이 알고리즘은 토큰을 검증할 때 사용되는 signature부분에서 사용된다. { "typ": "JWT", "alg": "HS256" } 다음을 base64로 인코딩 하면 다음과 같다. const header = { typ: 'JWT', alg: 'HS256', }; const encodedHeader = new Buffer(JS..

참고사이트hxyxneee.log님의 벨로그우리는 본인을 인증할 때, 중요한 정보들을 담아보낸다.아이디, 비밀번호, 개인정보(이름, 주민등록번호, 핸드폰 번호) 등...데이터를 보낼 때 유출이 되더라도 해당 데이터를 비밀스럽게 바꾸어 해커가 해당 데이터를 쉽게 파악하지 못하도록해야 조금이나마 더 안전할 수 있기에 암호화가 필요하다. 🔑 암호화암호화란, 특정 지식을 소유하고 있는 사람들을 제외하고는 누구든지 읽어볼 수 없도록 정보를 전달하는 과정이다.반대로 암호문을 평문으로 바꾸는 것을 복호화라고한다. ⚠️  암호화의 필요성유저의 비밀번호는 그대로 DATABASE에 저장하지 않는다.❓ DB가 해킹 당하면 유저의 비밀번호가 그대로 노출된다.❓ 외부 해킹이 아니더라도 내부 개발자가 DB에 접근해 개인정보를 볼..