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..

프론트엔드 개발을 하다보면 컴포넌트를 만들 때 컴포넌트를 만들다보면 유사한 디자인에서 조금 조금씩 다른 부분이 존재한다. 이런 경우 각각의 컴포넌트를 다 만들기에는 동일한 기능이 많고 반복되는 코드로 인해 추후 유지 보수를 하는 경우 하나의 기능을 수정해야 하는 경우 관련된 모든 곳을 수정하는 불편함이 존재한다. const OuterFrameOne = () => { return ( ); }; const OuterFrameTwo = () => { return ( ); }; 코드로 구현하면 다음과 같은 방식으로 나올 것이다. outerFrame과 frame 부분은 동일한데 아래 텍스트 부분이 달라서 새롭게 만드는 경우도 있다. 이렇게 된 경우 앞서 말한 것처럼 outerFrame이 변경되는 경우 OuterF..

Effect는 React 패러다임에서 벗어날 수 있는 탈출구이다. Effect를 사용하면 React의 외부로 나가서 컴포넌트를 React가 아닌 위젯, 네트워크 또는 브라우저 DOM과 같은 외부 시스템과 동기화할 수 있다. 즉, 외부 시스템이 관여하지 않는 경우에는 Effect가 필요하지 않다. 불필요한 Effect를 제거하면 코드의 가독성이 좋아지며, 실행 속도가 빨라진다. 또한 오류 발생률도 줄어든다. 불필요한 Effect를 제거하는 방법 Effect가 필요하지 않는 경우는 일반적으로 2가지가 있다. ▶ 렌더링을 위해 데이터를 변환하는 경우. 예를들어, 목록을 표시하기 전에 필터링을 하고 싶은 경우를 가정해보자. 목록이 변경될 때 상태 변수를 업데이트하는 Effect를 작성하고 싶을 수 있다. 하지만..