FE 이모저모 공부

요즘 다시 열심히 취업을 준비하면서 여러 회사의 공고문을 접하게되었다. 그런데 보는 공고문마다 자주 등장하는 문구가 있었는데.... 바로 오늘 다뤄볼 애자일(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..

이모션은 CSS-in-JS 라이브러리이다. React와도 함께 사용할 수 있다. 1. 설치 // 기본적으로 React환경에서 사용하는 Emotion npm i @emotion/react // Styled-Component 처럼 사용할 수 있는 Emotion // @emotion/react가 설치되어 있어야 한다. npm i @emotion/styled 해당 글에서는 styled 형식으로 컴포넌트를 생성하는 방법에 대해 작성할 예정이다. 2. Emotion Styled Component 컴포넌트와 구성요소 스타일링 기존에 사용했던 Styled-Component의 사용법과 비슷하게 컴포넌트나 요소를 생성할 수 있다. import styled from '@emotion/styled' const Button =..