SG의 개발 공부로그

useStats useStats는 기능적 구성 요소에 상태를 추가할 수 있는 React의 훅입니다. 상태는 구성 요소 내에서 변경될 수 있는 데이터를 저장하는 방법이며, React에서 동적 및 반응형 사용자 인터페이스를 구축하는데 중요한 측면입니다. hook 이전에는 상태관리가 클래스 구성요소로 제한되었습니다. hook의 도입으로 기능적 구성 요소에 대한 상태 관리도 가능해지면서 더욱 다양하고 강력해졌습니다. 다음은 useState 훅을 사용하는 방법의 예를 보겠습니다. import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} ti..

그냥 vite를 쓰는 이유 를 먼저 요약을 하자면 1. 번들링을 생략하기 때문에 서버를 빠르게 구동시킨다. 2. HTTP 상태 코드를 활용하여 리로딩이 더 빠르다. 3. Vite가 설정한 최소한의 config로도 사용이 가능하다. 4. 닥치고 속도차이가 확연히 느껴진다. CRA를 사용해서 React 프로젝트를 많이 생성해 봤을 거다. React 공식에서도 추천해 주는 보일러 플레이트이기도 하고 많은 유용한 기능들을 제공해 주기 때문이다. 하지만, CRA를 쓰다가 Vite를 사용해 보면 속도에 있어서 엄청난 차이를 느껴 볼 수 있다. Vite가 빠른 이유 왜 그럴까? 전의 웹개발방법은 HTML , CSS , JS 이렇게 각각 만들어서 코드를 짜고 서버에 올리면 끝이었다. 그런데 사람들이 자바스크립트 라이브..

Vim 플러그인 설치 일단 사용하는 에디터에서 Vim을 사용할 수 있도록 설정한다. 나는 VSC 를 사용하기 때문에 extention에서 Vim 플러그인을 설치해 주었다. Vim 모드 왜 사용해? 코딩을 하다 보면 커서를 다른 곳으로 옮긴다거나, 특적부분을 선택하거나 복붙 하거나 등등 자꾸 중간중간 손이 마우스로 가게 되는 상황들이 생기는데, 흐름도 끊기고 귀찮아서 좋은 방법이 없을까 고민하다가 찾아보게 되었고, Vim 모드란 것을 알게 되었다. 그냥 마우스 쓰면 되지 굳이 Vim모드를 설치해서 쓰는 이유는 게임을 할 때도 생각해 보면, 스킬을 쓰거나 장비착용도 마우스로 쓰는 것보다 단축키만 익히면 좀 더 수월하고 빠른 플레이가 가능하듯이 시간이 좀 걸리더라도 손에 익으면 작업속도가 매우 향상되기 때문이..

React를 중점으로 둘 거지만 React 대안으로는 무엇이 있는지 알아볼 거다 React는 React는 간결하고 집중된, 컴포넌트 기반 UI라이브러리이다. 컴포넌트에 중점을 두고 있기 때문에 그 외에 내장된 기능은 많지가 않다. Routing이라는 기능을 쓰고 싶으면 외부패키지를 가져와야 한다. 리엑트자체는 화면에 어떤 요소를 보여주고 업데이트하는데 중점을 두고 있다. 사용자 지정 HTML elemnet를 만들 수 있게 해 준다. 이런 컴포넌트들 중점이 리엑트의 관심사이다. Angular는 더 다양한 내장 기능을 가진 리엑트의 대체로 Angular (앵귤러)가 있다. Angular 역시 인기 있는 프런트엔드 프레임워크이다. 리엑트처럼 컴포넌트 중점 기반 UI 프레임워크이다. 하지만 리엑트보다 더 내장된..