CS겸 취준까지

ZUSTAND에 관심을 갖게 된 이유npm trends에 따르면 redux 다음으로 가장 핫한 상태관리 라이브러리,꾸준하게 상승중이고 상승폭도 가장 커 다음 프로젝트에는 Zustand를 사용해보려고 한다. 왜 ZUSTAND가 핫할까?https://zustand-demo.pmnd.rs/  Zustand zustand-demo.pmnd.rs 1. 직관적이고 간편한 사용법ZUSTAND 메인페이지와 Documentation에서 사용법을 살펴보면npm install zustand import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 ..

[ jQuery ]jQuery는 JS를 작성하는것은 재밌어야 한다는 모토를 가진 JS 라이브러리적게 쓰고 많은 일을 하게(write less, do more) 도와주는 JS 라이브러리라고 생각하면 됨일반적으로 반복적인 작업을 수행하고 불필요한 마크업을 제거, 짧고 이해하기 쉬운 코드를 작성할 수 있게 해줌 예를 들어 jQuery가 등장하기 이전에는 XMLHttpRequest를 사용하여 비동기 통신을 처리해야 했음let xhr = new XMLHttpRequest();xhr.open('POST', '/test');xhr.send();xhr.onload = function () { if (xhr.status != 200) { console.error(`${xhr.status}: ${xhr.status..

Jotai는 Daishi Kato에 의해 만들어졌으며, React 상태 관리의 단순성과 효율성을 개선하려는 목적에서 만들어졌다. Recoil과 MobX와 같은 기존 상태 관리 솔루션들이 제공하는 강력한 기능을 유지하면서도, 단순하고 직관적인 API를 제공하여, 개발자들이 쉽게 상태 관리를 할 수 있도록 설계되었다. Jotai는 일본어로 '상태'를 의미하며, Jotai는 그 사용성과 유연성으로 인해 빠르게 인기를 얻었고, 다양한 규모와 유형의 프로젝트에서 사용되고 있다. npm trend에서 recoil과 비교하면 recoil을 역전한 것을 볼 수 있는 꽤 핫한 라이브러리이다. 1. jotai의 기본 개념과 atom 생성 방법 Jotai는 atom개념을 사용하며, atom은 작은 데이터를 담고 있다. us..

개요 React DOM Client React DOM server Automatic batching Concurrent Feature 기타 변경 사항 ✅ React DOM Client 📦 createRoot 사용 React 18버전의 새로운 기능과 API를 사용하기 위해서는 기존에 render만을 사용해서 root를 생성하는 것이 아닌 createRoot를 사용해야 한다. before & after 더보기 before import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( , document.getElementById('root') ); after import React from "react"; import ReactDO..

[ React DOM Client ] react-dom/client에 새로운 API가 추가되었음 ▶ createRoot(domNode, options?) createRoot는 브라우저 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성할 수 있음 'ReactDOM.render' 대신 사용하며, 리액트 18의 새로운 기능은 이것없이 동작하지 않음 import { createRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); const root = createRoot(domNode); root.render(); 리액트는 domNode를 위해서 root를 만들것이고, 그 안에 있는 DOM을 관리 root를 만..

[ React ] ▶useId const id = useId() usdId는 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅 이는 주로 고유한 'id'가 필요한 접근성 API와 사용되는 컴포넌트에 유용할 것으로 기대됨 고유 ID를 생성하려면 구성 요소의 최상위 수준에서 호출해야함 굳이 전역 변수를 증가시키는 것보다 useId를 권장하는 이유는 클라이언트 구성 요소가 hydration(수화)되는 순서가 서버 HTML이 생성된 순서와 일치하지 않을 수 있으므로 증가하는 카운터로 이를 보장하는 것은 매우 어려움 useId를 호출하면 하이드레이션이 작동하고 출력이 서버와 클라이언트 간에 일치하는지 확인할 수 있음 import { useId } fro..

📋 개요 useId startTransition, useTransition useDefferedValue useSyncExternalStore useInesrtoinEffect ✅ useId 최상위 수준에서 호출되어 고유 ID를 생성하는 React Hook으로, 접근성 속성에 전달될 수 있다. key 는 데이터 식별을 위해 사용되므로 데이터에서 생성되는 것이 더 바람직하며, 너무 많은 호출이 일어나기 때문이다. 📦 사용하는 이유) 하드코딩의 횟수를 줄이자 컴포넌트를 여러번 사용하더라도 id 속성이 겹치지 않는다. hydration mismatch를 해결할 수 있다. 더보기 예시) 사용자의 이름 정보를 받기 위해 input을 컴포넌트로 받아서 id값을 name이라고 하였다. 이때 이 컴포넌트를 반복해서 사..

프레임워크 개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 시간을 줄이고 재사용성을 증가시키기위한 일련의 클래스 묶음이나 뼈대, 기반구조라 불리며 제어의 역전 개념이 적용된 대표적 기술이다. 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합이다. 특징 개발할 수 있는 범위가 정해져 있고 개발자는 이러한 따라야하는 가이드를 제공 받는다. 프레임워크는 다양한 도구 및 플러그인을 제공한다. 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있어 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의한다. 컴포넌트의 재사용이 가능하며 높은 수준에서 패턴들을 조작화할 수 있다. 예시 Django, Ruby, React Native, Flutter, A..

jQuery 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리 “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 개발됨 jQuery의 특징 HTML/DOM 조작 HTML 이벤트 메서드를 쉽게 사용 크로스 브라우징 네트워크, 애니메이션 등 다양한 기능을 제공 메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원 플러그인을 직접 구현하거나 확장 jQuery의 추락 jQuery는 다루기 까다로운 DOM API를 직관적으로 손쉽게 다룰 수 있는 모델을 제시했으나, 성능 최적화의 아쉬움과 개발 생산성의 문제가 있었다. 웹 표준 API의 확장 : 제이쿼리가 없어도 쉽게 사용 가능해진 웹 api 웹브라..