`프론트엔드 개발자` 개형이의 벽돌집

디자이너가 직접 만들어준 아이콘을 Material UI SvgIcon에 넣어 사용하고 싶었다. 차근차근 진행했던 방법을 기록해보고자 한다. 1. Material UI SvgIcon 디자이너는 나에게 svg 아이콘을 파일로 제공했다. 그래서 이 파일을 컴포넌트로 만들어 Material UI SvgIcon에 넣고 싶었다. 관련한 예제는 Material UI SvgIcon Component Prop 에서 확인할 수 있는데, import ArrowIcon from './Arrow.svg'; 위처럼 바로 적용해서 되면 참 좋겠지만, 그렇지 않았다. Svg 파일을 리액트 컴포넌트처럼 사용하기 위해서는 svgr 라이브러리가 필요했다. 끙 2. Svgr 다행히 공식문서 를 보면 쉽게 적용이 가능하다. Next.js 메..

지난 포스팅에 이어 테스트코드 작성 방법에 대해 기록해보려고 한다. 테스트 코드 Arrange, Act, Assert 🤔 테스트 코드의 작성은 Arrange, Act, Assert 세가지의 세팅을 해준다고 보면 된다. test('loads and displays greeting', async () => { // Arrange // Act // Assert }) 먼저 테스트할 컴포넌트 예시 코드를 하나 작성해봤다. // Hello.jsx const Hello = () => { return ( Hello World ) } export default Hello 위 컴포넌트에서 Hello World가 제대로 렌더링되는지 테스트하고 싶다. 우선 테스트 코드를 만들어주는데 {name}.test.js 와 같은 네이밍..

이전 회사에서 자동화 테스트를 도입하기 전, 엑셀 시트에 작성된 테스트 케이스를 보며 일일이 매뉴얼 테스트를 했던 경험이 있다. 이 경험은 썩 좋지 않았다. 서비스가 변경될 때마다 테스트 케이스를 변경해 줘야 했고 업데이트될 때마다 테스트를 일일이 수행하는 건 상당한 번거로움이 있었다 🤕 그리고 매뉴얼 테스트만 진행할 경우 파생되는 다른 에러를 잡기에는 분명 어려움이 있을 것이다... 그렇기에 자동화된 테스팅을 도입하면 언급된 문제점들을 어느정도 보완해줄 수 있고 자동 테스트와 매뉴얼 테스트를 함께 진행하면 품질이 더 우수해질 것이다. 단위 테스트란? 🤔 흔히 테스트의 종류는 세 가지로 분류되는 듯하다. 1) 단위 테스트: 모듈 테스트라고도 한다. 하나의 기능을 테스트한다고 보면 되며 단위는 함수, 컴포..