이전까지 로그인 상태와 같은 여러 컴포넌트에서 필요한 state를 사용하기 위해, 여러 컴포넌트를 거쳐서 작업을 했었다.전역적으로 사용될 state가 많아 질수록, 컴포넌트의 props 값도 많아져 코드 가독성도 떨어지고 작업량이 늘어났다.이러한 문제를 해결할 수 있는 여러가지 도구 중 [ Recoil, ContextApi, Redux, ... ], Recoil을 우선 사용해보기로 결정했다.여기저기 글에서는 Redux가 러닝커브가 높다고 하여, 다른 것부터 사용해보고 이해력이 생겼을 때 더 고민해보기로 했다.ContextApi는 성능에 악영향을 주는 문제가 있다고 한다.Recoil은 React를 개발한 Facebook이 개발한 전역 상태 관리 도구이기도 하고 사용법도 간단하며, ContextApi의 성능..

라이브러리를 다운로드하려고 하다 보니, 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 ..

시작최근 회사 소속 프리랜서로 일을 시작했다. 처음으로 받은 프로젝트는 웹 페이지를 제작하는 일이었는데, 상황이 쉽지만은 않았다.프로젝트 상황운영하던 코드리스 서비스 페이지에서 새로운 서비스를 추가하는 데 한계를 느끼신 클라이언트님에게 제작을 의뢰 받았다.기존 페이지를 코드로 변환하는 작업이다보니, 아래와 같은 문제점이 발생했다.디자인 리소스의 부재피그마 등으로 작성된 디자인 자료가 전혀 없는 상태웹 페이지를 보면서, 디자인 요소를 하나씩 적용구성 파악의 어려움전체적인 디자인을 볼 수 없으니 React 컴포넌트를 어떻게 구성해야 할지 감이 잡히지 않음문제 해결...이가 없으면 잇몸으로라도 일해야..홈페이지를 스크린샷으로 캡처해 전체적인 구성을 파악했고, 서비스 동작 구조에서 이해가 되지 않는 부분은 노션..