![]()
NVM Node version Manger의 약자로 NVM을 이용하면 원할 때 Node version을 자유롭게 변경 할 수 있다. NVM 설치법 일단 하단 공식 github에 접속하여 install 을 확인해보면 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Man..
![]()
코드를 짜다보면 흔하게 예외처리를 할 때가 항상 오기 마련이다. 예외 처리 하는방법은 많겠지만 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을 많이 사용하게 됨에 따라 자연스럽게 사용이 많이 늘었음. ..
비즈니스 로직 어떻게 분리할까?! 리액트 컴포넌트에서 왜 비즈니스 로직을 분리하는지 그리고 분리를 하면 어떻게 하는지 예시를 통해 알아보려고 한다. 비즈니스 로직은 왜 분리할까!? 비즈니스 로직을 왜 분리할까를 생각해보았다.. 생각하자 마자 떠오른 말은 관심사의 분리였다. 우리는 렌더링되는 ui와 비즈니스 로직(어떤 로직을 통해 ui가 바뀌고 렌더링 되는지)을 분리함으로써 코드의 유지보수 및 가독성이 올라간다! 실제로 여러 글을 참고하니 코드의 유지보수성과 가독성 이야기가 꼭 나와 있었다. 코드를 통해 알아보자 const Example = () => { const [count,setCount] =useState(0) const delayCount =() =>{ setTimeout(() => { setCo..
배경 react@18.2.0 의 memo에 관한 문서를 보다가 useMemo는 props가 이전 props와 shallow equal 하지 않을 때 리렌더링 된다고 하고 그 shallow equal를 판단할 때의 결과가 Object.is(prev값,next값) 의 결과와 같다고 나와 있다. 그래서 Object.is() 라는 메서드에 관심을 같게 되어 MDN을 살펴보았다. Object.is()의 개념 Object.is() 정적 메서드는 두 값이 같은지 결정한다. (참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is ) 여기서 나는 자바스크립트에서 같은값인지 판별하는 방식 2가지 == 와, ==..
React useState 호출 시 무조거 렌더링이 된다? 정답은...! 아니다 입니다. 1. state가 원시타입일 경우 (Number, String, boolean, null, undefined ) -> setState 호출 이전의 state값과 새롭게 갱신된 state 값을 비교( 이전값 === 새로운값) 한 뒤 같지 않으면 렌더링이 이뤄지고 아니면 렌더링이 발생하지 않습니다. 2. state가 원시타입이 아니고 참조 타입(object, Symbol) 일 경우 ->위와 같은 방식으로 값 자체를 비교하지 않고 메모리 주소를 비교하여 렌더링이 발생할지 말지를 결정합니다. 실제론 동일한 형태의 객체여도 렌더링이 발생할 수 있다는 말이죠 export const Component =() =>{ const [..
기본적인 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를 ..
useCallback은 렌더링 리소스를 줄이기 위해 사용한다. 리액트 컴포넌트는 렌더링 될 때마다 컴포넌트 내부에 필요한 값들을 정의하는데 값이 변하지 않아재 렌더링할 시 굳이 다시 정의하지 않아도 되는 함수들이 있을 것이다. 그럴 때 useCallback 은 특정 함수를 다시 만들지 않아도 돼 라고 알려주는 역할을 한다고 생각하면 된다. import { useState } from "react" import { useCallback } from "react" const Component = () =>{ const [state, setState] = useState(0) // 하단 함수 렌더링 될 때마다 함수를 정의 함 const testFunction = () =>{ console.log("testFu..
useMemo는 렌더링 리소스를 줄이기 위해 사용한다 리액트 컴포넌트는 렌더링 될 때마다 컴포넌트 내부에 필요한 값들을 정의하는데 값이 변하지 않아 재 렌더링할 시 굳이 다시 정의하지 않아도 되는 변수들이 있을 것이다. 그럴 때 useMemo가 이 값은 다시 정의하지 않아도 돼 라고 알려주는 역할을 한다고 생각하면 된다. const Component = () =>{ const object = { key:'value'} // 렌더링 될 때 마다 이값은 계속 재 정의 된다. const [state, setState] = useState(0) return ( { setState((prev)=>prev+1) // setState 실행 -> 재 렌더링 }}>state:{state} ) } 위 코드에서 setSta..
