FE 이모저모 공부

비즈니스와 기술적, 두 관점으로 나뉜다. 비즈니스적 관점1. 온라인 상의 상점이나 건물을 만드는 작업이다.이는 회사의 서비스를 소개, 고객에게 어필하여 고객이 유입 가능한 통로를 만드는 것. 2. 또한 퍼널 단계에서 사용자가 각 구매 단계별 적절한 UI를 단계별로 보여주고, 각 퍼널의 전환 비율과 이를 개선시키기 위한 고민을하는 것. 3. 최적화된 프로세스로 UI/UX 반영에서 Backend Service 까지 전달하는 것.  기술 관점크게 4가지가 있다.1. 퍼블리싱: 전반적인 웹 페이지의 화면을 만듬 => HTML 마크업, CSS 스타일링2. 재사용 가능한 UI 컴포넌트 제작(React), 디자인 시스템 구축(Storybook)3. 클라이언트와 서버 상태 관리: 각 상황에 맞는 데이터를 서버에서 가져..

요즘 다시 열심히 취업을 준비하면서 여러 회사의 공고문을 접하게되었다. 그런데 보는 공고문마다 자주 등장하는 문구가 있었는데.... 바로 오늘 다뤄볼 애자일(Agile) 개발론이다. 애자일 개발론이란 소프트웨어 개발 프로세스의 접근 방법 중 하나로, 변화에 유연하게 대응하고 효과적으로 작업을 수행하기 위해 강조되는 방법론이다. 간단히 풀어서 설명해보겠다. 장점 하나의 팀이 하나의 목표를 갖고 개발 중 소프트웨어의 상태를 자주 체크하고, 소비자(클라이언트)에게 얻은 비드백, 요구사항 등 변화사항을 실시간으로 적용해 나가며 개발하는 방식이라 생각된다. 이때 중요한 것은 한번에 프로덕트를 만드는 것이 아니라 여러개의 Interation을 통해 반복적이고 점진적인 개발을 주도해 나가는 것이다. 반복되는 Inte..

jest를 이용해 api를 테스트하기 위해 코드를 작성하고 테스트를 돌려보다가 제목과 같은 에러를 만났다... 위의 에러는 jest 환경에서 ES6 문법을 이용해 import할 때 발생한다고 한다. 특히 axios의 버전이 업그레이드 되어 컴파일 과정에서 ES Commonjs로 컴파일 되지 않으며 발생하는 문제이다. 이러한 문제를 해결하기 위해 StackOverflow의 글을 참고해 해결했다. 우선 @babel/core, @babel/preset-env, @babel/preset-react, babel-jest 를 설치해주자 npm install @babel/core @babel/preset-env @babel/preset-react babel-jest --save-dev 그리고 babel.config...

새로운 프로젝트를 진행하며 한 컴포넌트에서 많은 이미지를 사용해야하는 기능 구현을 하게되었다. 각 1번, 2번, 3번, 4번 선택지마다 적게는 5개의 이미지 파일, 많게는 7개의 이미지 파일을 사용자에게 보여주어야 한다. 이미지는 이미지 서버에서 GET 요청으로 가져오는 방식으로 구현하려 한다. 이번 프로젝트에서는 MSW를 이용해 테스트 환경을 구축해서 개발한다. http.get("/champions/duelist", async () => { return HttpResponse.json( { "champions": [ { "id": 1, "imageUrl": "https://대충 이미지 서버 주소/valorant/duelist/ZETT.webp" }, { "id": 2, "imageUrl": "https..

1. React-Query 란? React-Query란 서버의 데이터를 가져오거나, 캐싱, 값 동기화 및 업데이트, 에러 처리 등 비동기 과정을 쉽게 할 수 있도록 도와주는 라이브러리이다. 1.1 사용 이유 기존 상태 관리 라이브러리(redux 등)는 클라이언트 상태 관리에는 용이하지만, 서버 상태를 관리하기는 어렵다. 클라이언트에서 사용하는 상태가 변할 수 있는 서버의 상태와 다를 수 있기 때문이다. 즉, API 요청과 비동기 데이터 관리를 좀더 쉽게 하기위해 등장한 것이다. React-Query는 서버의 상태를 불러오고, 불러온 상태를 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와준다. 또한 기존 상태 관리 라이브러리를 이용하면 서버의 데이터와 클라이언트 데이터를 store에 공존하게 될..

React를 이용해 웹을 개발하며 컴포넌트를 만들때 예상치 못한 에러로인해 추가적인 커밋과 PR을 경험한 적있다. 이번에 새롭게 참여한 프로젝트에서는 UI 테스팅 도구인 Storybook과 다른 테스팅 도구인 Testing-library/react를 사용하게되었다. 만드는 컴포넌트를 테스트하는 과정을 통해 발생 가능성이 있는 에러를 사전에 방지할 수 있기에 이번 프로젝트에서는 테스트 과정을 본격적으로 다룰 예정이다. 왜 React Testing-Library 인가? React Testing Library는 React 컴포넌트를 테스트하기 위해 설계된 라이브러리 이며, 실사용 환경과 비슷한 환경을 인스턴스가 아닌 실제 DOM 노드를 사용해 테스트하므로 더욱 신뢰할 수 있는 환경을 제공한다. 또한 props..