📌배경JWT는 웹 개발에서 인증방식으로 많이 사용하는 방식으로 웹 개발자라면 해당 토큰에 대해 알고 있어야 한다. 중요한 사항인 만큼 포스팅으로 한번 정리하는 시간을 가지려고 한다. 📌구조JWT는 Header, Payload, Signature 로 구성되어 있고 각 영역마다 특정내용이 담겨있다. token은 보통 아래와 같이 생겼으며 각영역은 . (맞침표) 로 구분되어 있다. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c정확히는 jwt는 header, payload, s..

✅Event Bubbling프론트엔드 개발자라면 당연히 알아야 되는 개념 중 하나로 DOM 요소 중 하나에 특정 이벤트가 발생했을 때 해당 이벤트가 부모요소 쪽으로 계속 전파되는 현상을 의미한다. 해당 현상을 기본적으로 일어나는 현상 중 하나이며 버블링을 막기 위해선 별도의 작업이 필요하다 궁금해서 어디까지 전파될까 눈으로 확인해보고 싶어 아래와 같은 코드를 이용해서 확인해봤다. 버튼을 클릭 하고 콘솔창을 확인해보니 해당 클릭이벤트가 쭉쭉 올라가 document를 거쳐 window까지 전파 됨을 확인 할 수 있었다.// index.htmlbutton그렇다면 여기서 전파를 못하게 하려면 어떻게 해야할까? 간단하다 이벤트 전파가 멈추길 바라는 요소에 `e.stopPropagation()` 를 걸면된다. 이..

한동안 개인적으로 하고 있는 일이 있어서 글을 쓰지 못했는데 ... 오랜만에 글을 올리네요 오늘 다룰 내용은 Package manage Yarn 입니다 Yarn berry 라고도 불리는데요 Yarn Berry 는 Yarn의 최신버전을 의미합니다. 정확히 Yarn의 몇 버전부터 Yarn berry라고 부르는지는 기억은 안나네요. 그럼 본론으로 넘어가 Yarn 세팅 방법에 대해 알아볼까요? Yarn 이란?yarn은 페이스북에 만든 package manger로 npm을 개선해서 만들었다. npm 보다 속도, 안정성, 보안성 측면에서 우수하다고 한다. 자세한 사항은 공식 홈페이지와 자료를 찾아보자. Yarn 세팅 방법 1. Node 설치일단 corepack이라는 package가 필요한데 기본적으로 corepac..

react lazy loading 처리 방법오늘 다루고자 하는 내용은 react lazy loading 처리 방법이다.코드를 먼저 보면서 이해 해 보자  ( 하단 코드는 의도를 전달하기 위한 수도 코드임을 참고 부탁드립니다. )// ParentComponent.jsx import { lazy, suspense } from '... source' import {LoadingUI} from '...source'const ChillComponent = lazy(() => import('./ChildComponent'))const ParentComponent=()=>{ return ( )}// ChildComponent.jsxexport const C..

코드를 짜다보면 흔하게 예외처리를 할 때가 항상 오기 마련이다. 예외 처리 하는방법은 많겠지만 try catch 문과 throw Error를 사용하는 것이 일반적이다. 하단 예시를 보자 일반적인 예외 처리 방법  const test =()=>{ try{ console.log('1'); throw new Error('error') console.log('2'); } catch(e){ console.log("error:",e); } }코드에 보면 throw와 Error 객체이 위치해 있는 것을 알 수 있다. 사용법은 알지만 throw와 Error객체를 면밀히 살펴본 적이 없어서 살펴보았다.throw 설명1. Mdn을 보면 throw는 사용자 정..

AJAX ( = Asynchronus javascript and xml ) 자바스크립트를 사용하여 비동기적으로 서버와 통신하여 정보를 교환하는 하는 것을 의미한다. 비동기로 작동하기 때문에 서버와 통신하는 동안 다른 작업에 영향을 끼치지 않고 정상 작동한다. XMLHttpRequest ( js native ) 자바스크립트를 통하여 서버와 통신할 때 사용하는 방법 중 하나이다. 따라서 XMLHttpRequest는 AJAX를 구현하기 위한 방법중 하나라고 생각하면 된다. Fetch ( js native ) XMLHttpRequest보다 개선된 방식으로 AJAX를 구현할 수 있다. axios ( js library ) native가 아니고 별도 module 설치가 필요하며 AJAX를 보다 편리하게 사용하기 위..

Content-type 이란? Content-type은 우리가 fetch나 axios를 이용하여 server에 request를 보낼 때 body 에 담아 보내는 data의 유형을 명시하기 위해 존재하며 헤더에 담긴다. 그러므로 Content-type에 명시된 유형과 data의 유형이 같아야한다.  주요 Content-type 1. "application/json"  - 요즘 대부분 data 형식을 json으로 쓰다보니 application/json이 대부분이며 axios 의 기본 default content-type이 appliaction/json 으로 알고 있다. -   restful api 를 사용하게 되며 request를 날릴 때 대부분 json을 많이 사용하게 됨에 따라 자연스럽게 사용이 많이 늘..

기본적인 Zustand store 구독 방법import { create } from 'zustand'// store 생성const useStore = create((set) => ({ a:"a", b:"b", c:"c", d:"d",}))const Coponent = ()=>{ // a,b,c,d state 구독 const a = useStore((state)=> state.a) const b =useStore((state)=> state.b) const c =useStore((state)=> state.c) const d =useStore((state)=> state.d) return( a:{a} b:{b} ..