한동안 개인적으로 하고 있는 일이 있어서 글을 쓰지 못했는데 ... 오랜만에 글을 올리네요 오늘 다룰 내용은 Package manage Yarn 입니다 Yarn berry 라고도 불리는데요 Yarn Berry 는 Yarn의 최신버전을 의미합니다. 정확히 Yarn의 몇 버전부터 Yarn berry라고 부르는지는 기억은 안나네요. 그럼 본론으로 넘어가 Yarn 세팅 방법에 대해 알아볼까요? Yarn 이란? yarn은 페이스북에 만든 package manger로 npm을 개선해서 만들었다. npm 보다 속도, 안정성, 보안성 측면에서 우수하다고 한다. 자세한 사항은 공식 홈페이지와 자료를 찾아보자. Yarn 세팅 방법 1. Node 설치 일단 corepack이라는 package가 필요한데 기본적으로 corep..
FE
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.jsx export const ChildComponent =()=>{ const ..
코드를 짜다보면 흔하게 예외처리를 할 때가 항상 오기 마련이다. 예외 처리 하는방법은 많겠지만 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} c:{c} d:{d} ) } Zustand를 사용할 때 store의 여러 state를 ..
