본문 바로가기

Frontend40

[React] useNavigate로 데이터 전달 Introduction 아이디 찾기를 구현하던 중, 찾은 아이디를 가지고 로그인 창으로 돌아가는 것을 구현해보고 싶었다. 그래서 이 포스트에서는 useNavigate를 사용할 때, 이동할 페이지로 데이터를 전달할 방법에 대해 알아보려 한다. ① useNavigate, useLocation를 사용하기 위해 react-router-dom을 설치 npm install react-router-dom //react-router-dom 에서 useNavigate 를 import import { useNavigate } from 'react-router-dom'; //useNavigate 사용 const navigate = useNavigate(); ② navigate에 객체 형태로 데이터 전달 // id를 찾은 후.. 2023. 2. 16.
[JavaScript] 제너레이터와 async/await 제너레이터와 async/await[Javascript] 비동기, Promise, async, await 확실하게 이해하기제너레이터란?코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수 함수제너레이터와 일반 함수의 차이제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.제너레이터 함수의 정의function* 키워드로 선언하나 이상의 yield 표현식을 포함// 제너레이터 함수 선언문function* genDecFunc() { yield 1;}//제너레이터 함수 표현식const genExpFunc = function* () { yield 1;.. 2023. 2. 16.
[JavaScript] DOM 이벤트 이벤트DOM 요소의 기본 동작 중단preventDefault 메서드 이용 go preventDefault 메서드 사용 시 이벤트 전파 방지stopPropagation 메서드 Button 1 Button 2 Button 3 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지이벤트 핸들러 어트리뷰트 방식 Click me 일반 함수로서 호출되는 함수 내부의 this 는 전역 객체 window를 가리킴 0 0 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 this 는 이벤트를 바인딩한 DOM 요소를 가리킴(이벤트 핸들러 프로퍼티 방식과 동일) .. 2023. 2. 16.
[JavaScript] Set Set중복되지 않는 유일한 값들의 집합요소에 순서가 없다.인덱스로 요소에 접근할 수 없다.Set 객체 생성const set1 = new Set();console.log(set); // Set(0) {}const set2 = new Set([1, 2, 3, 3]);console.log(set); // Set(3) {1, 2, 3}const set3 = new Set('hello');console.log(set); // Set(4) {"h", "e", "l", "o"}//중복 제거const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i);const uniq = array => [ ... new Set(array)];// 두 코드 실행 .. 2023. 2. 16.
[JavaScript] 이터러블 이터러블스프레드 문법하나로 뭉쳐 있는 여러 값들의 집합을 전개하여 개별적인 값들의 목록으로 만드는 것// ... [1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다.(-> 1, 2, 3)console.log(...[1, 2, 3]); // 1 2 3consolg.log(...'Hello'); // H e l l o배열 디스트럭처링 할당(구조 분해 할당)구조화된 배열과 같은 이터러블 또는 객체를 destructuring 하여 1개 이상의 변수에 개별적으로 할당하는것const arr = [1, 2, 3];//1, 2, 3을 각각 one, two, three에 개별적으로 할당const [one, two, three] = arr;console.log(one, two, three); // 1 2 3이터레.. 2023. 2. 16.
[React] 로그인 JWT 토큰 처리 Introduction JWT 에 대해서 알아보고, JWT 토큰 발급 후 토큰 처리 방법에 대해 알아보려 한다. JWT란? JWT는 JSON Web Token의 약자로, 인증에 필요한 정보들을 암호화시킨 JSON 토큰을 의미한다. 서버에서 JWT 토큰의 유효 기간을 설정하고, 클라이언트에서 서버에 데이터 요청할 시 JWT를 HTTP 헤더에 포함하여 서버가 유효 여부를 확인 할 수 있도록 한다. ① 서버에 데이터를 보낸 후 JWT를 response로 받는다. ② JWT 값인 response.data를 로컬 스토리지와 응답 헤더에 넣는다. async function postInfo(e) { try { e.preventDefault(); const response = await axios .post("http.. 2023. 2. 15.