지난번엔 Funnel 컴포넌트에 대해서 알아봤다. 토스에서 이미 잘 만들어둔 useFunnel 컴포넌트가 있지만 해당 기능을 참고해서 유사한 기능을 하는 Funnel 컴포넌트를 만들어 보려고 한다.  핵심 기능은 다음과 같다 : Funnel에 steps를 넘겨줘서 현재 Step에 해당하는 컴포넌트만 렌더링next() 함수를 통해서 다음 Step으로 이동 Funnel이란게 어려운 기능이 아니다. 현재 Step에 맞는 컴포넌트를 렌더링 해주는 것이 끝이다.  추가로 다음과 같은 기능을 구현할 생각이다 :next 외 prev, update 함수를 통해 컨트롤할 수 있는 기능을 구현할 계획이다.useFunnel이 토스의 Funnel 컴포넌트의 시작 지점인데, 나는 useFunnel을 전역 상태를 관리하는 용도로..

※ 본 글은 React의 제어 및 비제어 양식 입력이 복잡할 필요는 없습니다 내용을 정리한 것입니다. 해석 및 개인적인 의견을 추가한 글입니다. 다소 오역이 있을 수 있습니다.... FBI WARNING..... React에서의 Controlled와 UnControlled Input 많은 아티클에서 "너는 useState를 사용해서는 안 된다"라고 말합니다. 또한 문서에서 "Ref는 나쁘다"라고 하고 있습니다. ※ 작성자 작성자는 Ref를 사용하는 것이 나쁘다는 이야기를 특별히 들어본 적이 없습니다. 그래서 찾아보니 Don’t Overuse Refs Your first inclination may be to use refs to “make things happen” in your app. If this ..

TDD, 클린 코드 with React 3기에서 매주 과제를 진행한다. 이번주는 온보딩 미션으로 계산기를 만드는 과제를 진행하였다. 계산기?! 라고 생각하고 내가 듣기로는 TDD, 클린 코드 강의는 난이도가 어렵다고 생각했는데 김이 팍 식었다... 알고보니 말 그대로 온보딩 미션이고 본격적인 미션들은 난이도가 있어보였다. 어쨋든 돌아가서 계산기 과제를 하는데 조건이 React와 Vite 환경에서 구현을 해야했다. Vite,,,, 참 많이 들었지만 CRA가 너무 편해서 굳이 사용할 생각이 없었는데 이번에 사용해보니 많이 신기했다. npm run dev를 하면 순식간에 프로젝트가 실행되고 웹사이트에서 확인할 수 있다. 그리고 Jest를 테스팅을 위해서 사용했는데 CRA에서는 바로 사용할 수 있던게 추가적인 ..

이번 과제를 진행할 때 Funnel 컴포넌트를 사용해서 만들어야 했다. 근데 중요한 사실... 넥스트스텝 선생님들,,,, 저는 Funnel 컴포넌트가 몬지 몰라요 ...ㅠㅠㅠ 지금까지의 문제 설문 조사를 위해서 페이지별로 사용자에게 정보를 전달받아 마지막에 API로 전송하는 기능을 만든다고 생각해보자 이런 종류의 페이지는 사진으로 보는 것처럼 각 페이지에서 상태를 관리하고 싶지 않다면 Context API, Redux 같은 전역 상태 관리를 하고 각각의 페이지가 구현된 파일을 돌아다니면서 관리해야 한다. 결국 한 가지 목적을 위해서 상태가 흩어져 있다는 것이다. 기능이 추가되거나 오류가 발생했을 때 전체 페이지를 넘나들면서 오류를 수정해야 한다. Funnel 컴포넌트 사용자가 최종 목표까지 가는동안 조금..

PWA가 뭘까? 프로그레시브 웹 앱 ( Progressive Web Apps )은 웹 앱과 네이티브 앱의 장점을 모두 제공하는 개발 철학이다. 설명에서 나온 것처럼 진보된 형태의 웹 애플리케이션 개발이라고 할 수 있다. 여기서 말하는 웹 앱의 장점과 네이티브 앱의 장점은 뭘까? 웹 앱 앱을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 빠르고 쉽다 또한 브라우저가 설치된 어떠한 장치에서도 접근이 가능하며, 새로운 콘텐츠를 빠르게 배포할 수 있고, 링크로 쉽게 공유할 수 있다. 특별하게 많이 사용하는게 아니라면 웹사이트의 애플리케이션은 설치하지 않는 것이 일반적일 수 있다. 그래서 쇼핑몰 등에서 어플로 구매 시 더 많은 할인을 해주는 것 같다. 네이티브 앱 운영체제와 잘 통합되므로 부드러운 사용자 경험을 ..

CRA를 사용해서 React를 구성하는 경우가 많았는데, 최근 TDD, 클린 코드 with React 3기를 통해서 Vite를 사용하는 환경을 구성하게 되었다.  당장 구현 자체는 간단한 라이브러리를 통해서 할 수 있지만 Vite가 뭔지, 어떤 장점이 있는지 알아보고 실제 환경을 구성하는 방법을 알아보자  Vite바이트? 비트? 다양하게 읽는 사람이 있는데 홈페이지에서는 다음과 같이 안내하고 있다.  프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.  명칭을 봤을때도 알 수 있게 빠른 자바스크립트 번들링 툴이다. Webpack 같은 번들링 툴이 있는데 Vite가 나온 이유를 알아보자면 다음과 같다.  너무 긴 서버 구동 콜드 스타트 방식을 통해 개발 서버를 구..

프론트엔드 개발을 할 때 개인적으로 가장 중요하다고 생각하는 것이 컴포넌트의 재사용이다. 비슷한 기능을 하는 컴포넌트를 여러개를 만들게되면 공통되는 사항을 수정해야 하는 경우 각각 수정해야한다. 그렇다고 하나의 컴포넌트에 props를 사용해서 덕지덕지 컴포넌트의 옵션을 주게되면 그것 역시 유지 보수 측면에서 어려움이 존재했다. 항상 적절한 props와 재사용성의 사이에서 고민하다가 최대한 동일한 UI를 하나의 컴포넌트에서 관리하기 위해서 Atomic Design Pattern을 채택했다. Atomic Design Pattern Atomic Design Pattern을 공부하다보면 볼 수 있는 이미지 입니다. 각각 단계에서의 역할이 있는데, Atoms : 최소한의 디자인 단위, 더이상 쪼갤 수 없다. Mo..

모달창 등에서 position을 fixed를 주고 화면을 꽉 채우기 위해서 vh를 100을 주는 경우가 있다. 안드로이드 또는 PC 화면에서는 문제가 없는데 아이폰에서 100vh를 사용하는 경우 사파리에서 아래에 웹사이트 바가 생겨서 깨지는 경우가 발생한다. 이때의 해결 방법으로 window.innerHeight * 0.01 이라는 값을 세팅해서 선언해준다고 한다. 그리고 document에 스타일 속성을 줘서 넣어준 다음 해결하는 방법이 일반적인 방법이다. let vh = 0; useEffect(() => { vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }, []); // 사용 h..