uni's code uni's code

들어가며 안녕하세요 :) 프론트엔드는 백엔드에 비해 쉽게 UI 변경이 잦고, 기능이 여러 추가됩니다. 이때, 변경할 때마다 쉽게 대응이 가능한 유연한 코드를 짠다면 업무의 양이 줄어들 것입니다..! 마침 변경에 용이한 컴포넌트 짜는 방법에 대해 소개한 글을 발견하여 공유하면 좋을 것 같아 번역글을 작성합니다. 원글: Building future facing frontend architecures Building future facing frontend architectures A deep dive into how component based frontend architectures can implode with complexity at scale, and how to avoid it. frontendma..

오늘은 react의 hoc 패턴에 대해 알아보겠습니다. 1) hoc란? hoc는 high order component의 약자로써, 고차컴포넌트라고 합니다. 쉽게 말하면, 다른 컴포넌트(=자식)를 감싸는 wrapper 컴포넌트(=부모)라는 뜻입니다. 리액트 공식 문서에 따르면 hoc를 사용하는 이유는 횡단관심사의 분리 입니다. 횡단관심사는 Cross-Cutting concern이라고 합니다. 하나의 컴포넌트만 가지고 있는 관심사를 넘어서 여러 컴포넌트에서 가지고 있는 공통의 관심사라는 의미입니다. 예를 들어, 각 페이지 별 유저에 대한 권한을 검사해 검증을 하는 기능이 공통적으로 가지고 있다고 합시다. 이러한 권한 검사가 공통의 관심사가 됩니다. 이러한 페이지 컴포넌트를 자식 컴포넌트로, 검증하는 컴포넌트..

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

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