AJAX ( = Asynchronus javascript and xml ) 자바스크립트를 사용하여 비동기적으로 서버와 통신하여 정보를 교환하는 하는 것을 의미한다. 비동기로 작동하기 때문에 서버와 통신하는 동안 다른 작업에 영향을 끼치지 않고 정상 작동한다. XMLHttpRequest ( js native ) 자바스크립트를 통하여 서버와 통신할 때 사용하는 방법 중 하나이다. 따라서 XMLHttpRequest는 AJAX를 구현하기 위한 방법중 하나라고 생각하면 된다. Fetch ( js native ) XMLHttpRequest보다 개선된 방식으로 AJAX를 구현할 수 있다. axios ( js library ) native가 아니고 별도 module 설치가 필요하며 AJAX를 보다 편리하게 사용하기 위..
Dev
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..
React에서 부모 컴포넌트가 재렌더링 되면 자식 요소도 다시 렌더링 된다 백문이 불여일견이라는 말이 있지 않나 한번 확인해보자 부모 컴포넌트가 를 자식 컴포넌트로 갖는다 import { Child1, Child2} from "./Child" import { useState } from "react" const Parent = () =>{ const [count, setCount] = useState(0) const upCount =()=>{ setCount((prev)=>prev+1) } const downCount=()=>{ setCount((prev)=>prev-1) } return ( count:{count} +1 -1 ) } export default Parent Child1, Child2 두 ..
Vite+React+Ts+Lint+Pretteir 를 통해 Fe 세팅을 해보았다. 요즘 웹팩대신 빠른 vite많이 사용한다고 하여 vite를 이용하여 세팅을 해보았다. Npm create vite@latest를 통해 프로젝트 생성 ( 현재 react 18.2.0 version ) 후 ( vite 공식 홈페이지 참조: https://ko.vitejs.dev/guide/ ) 설정한 프론트 환경설정 file Tsconfig.json - { "target": "ES6", // compile 시 어떤 버전의 자바스크립트 버전으로 compile 할지 "lib": ["ES6", "ES2020", "DOM", "DOM.Iterable"], // ts->js로 컴파일 할때 필요한 라이브러리 "skipLibCheck": ..
