uni's code uni's code

testcode 관련 eslint 설정에 대해 알아보겠습니다. 일반 규칙 뿐만 아니라, test code에서 권장하는 lint도 고쳐주기 때문에, 협업을 하거나 초기에 배울 때 도움이 될 것 같습니다. 1. install npm install eslint-plugin-testing-library eslint-plugin-jest-dom 2. react 에 적용 // .eslintrc.json { "plugins": ["testing-library", "jest-dom"], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 3. next.js에 적용 // .es..

시작하기 전 잠깐의 tmi를 풀어보자면.. 지금까지 vuetify, bootstrap, tailwind, antdesign 등등 써보면서, 개인적으로 최애는 tailwind가 될 것 같습니다. 미리 좋은 점에 대해 소개드리자면, css custom이 많이 편합니다. ㅠㅠ 단점은 js기능을 많이 지원하지 않는데, 예를 들어 pagination이라던가.. 하지만 css custom이 많이 편한점이 정말 맘에 듭니다!! 왜 이제서야 안거니.. 내 최애 css 프레임워크 등극이다.. 각설하고 tailwind 적용법에 대해 소개하겠습니다. 1. tailwind란? utility-first 컨셉의 css 프레임 워크입니다. 속성이 중시됨으로, 미리 만들어진 속성에 대한 클래스들이 있고 이를 조합하여 컴포넌트를 구성..

테스트코드를 작성해야한다는 점이 중요하다는 것은 진작 알고는 있었지만, 시간이 없다는 이유로 도전하지 못했었다. 이번에 회사에서 대대적으로 프론트 리빌딩을 하는 과정 속, TDD를 쓰자고 건의하였고, TDD에 대해 알아보면서 정리한 내용을 아래에 담았다. 1. TDD란? test driven development 의 약자로 “테스트 주도 개발” 코드를 개발하는 과정에서 테스트코드가 추가됨으로, 코드 개발을 하고 테스트 코드를 작성하는 과정으로 오해할 수 있으나, 이는 경기도 오산!(ㅋㅋ) TDD 과정은 아래와 같다. 테스트를 작성하고 테스트가 정상이 될때가지 코드를 작성한다~ → 테스트 실패시 코드 작성하며 테스트 성공할때까지 작성 -> 리팩토링 1) 테스트 케이스를 작성 2) 코드 개발 -> 테스트 케..