라이브러리를 다운로드하려고 하다 보니, npm install 라이브러리 / yarn add 라이브러리 등 다양한 방법이 있었다.그냥 명령어를 받아 적으면 문제가 발생할 수도 있을까? 하는 호기심으로 여러 정보를 찾아보았다.여러가지 패키지 매니저를 사용하는 것은 아닌 것을 알 수 있었다. 골라야만 했다. 우선, pnpm은 우선순위에서 제외했다.패키지 설치 속도는 상대적으로 빠르지만, npm이나 yarn에 비해 생태계가 작다는 점이 걱정이었다.(웹 개발 경험이 많지 않아서 문제 발생 시 빠르게 해결 방법을 찾는 것이 중요하다고 판단했기 때문에, 좀 더 널리 사용되고 정보가 많은 도구를 선택하는 것이 좋겠다고 생각했다.)결론은 yarn을 사용 중이다.하지만 알아본 김에 아래에 비교해서 정리해두려고 한다.특징..

대학교 웹 개발 수업에서는 HTML, CSS, JS만으로 뭔가 다 만들었던거 같은데... 왜 React를 쓰게 된 걸까?현재까지(2024.12) 웹 개발 프론트로 가장 많이 쓴다는 React 뭐가 좋아서 쓰는지 알아보도록 하자. 먼저 요약을 하자면코드 생산성 향상가상돔을 활용한 성능 향상이 두가지 장점을 가지고 있기 때문이라고 한다.1. 코드 생산성 향상HTML, CSS, JS으로 개발하면, 코드를 5단계로 구분할 수 있다.HTML 작성요소에 접근 (id, className 등 활용)접근한 요소에 이벤트 리스너 생성데이터 업데이트UI 변경 count: 0 + 하지만, React로 개발한다면, 코드를 2단계로 줄일 수 있게 된다!JSX로 HTML을 생성과 동시에 이벤트 리스너까지 적용 [ 요..

JavaScript를 쓰다 보면, 코드 실행 순서가 예상과 다르게 흘러가는 경우가 자주 있다.특히 setTimeout, Promise, fetch 같은 비동기 작업을 사용할 때 더욱 그렇다. 예를 들어 아래 코드를 보자.console.log('Start');setTimeout(() => { console.log('Task');}, 0);Promise.resolve().then(() => { console.log('Microtask');});requestAnimationFrame(() => { console.log('Animation Frame');});console.log('End');코드를 읽는 순서대로 실행될 것 같지만 실제 출력은 다음과 같다.StartEnd MicrotaskAnimation ..