센디 웹 프론트엔드 프로젝트를 eslint & prettier에서 biome로 마이그레이션한 후기를 작성하고자 한다. 추후에 센디 테크 블로그가 생성되는 그 날을 기약하며.. Motivation 센디 웹 프론트엔드에서는 린팅과 코드 포맷팅을 위해 eslint와 prettier를 조합해서 사용한다. 팀원이 3명인 소수팀이기도 하고 서로의 코드 스타일을 존중하는 분위기 덕에 린팅 규칙을 빡빡하게 설정하지는 않았다. 불필요하게 빨간 줄을 띄우는 규칙(no-unused-vars 등)만 warn 또는 off로 두면서 린팅과 포맷팅을 최소한으로 적용하고 있었다. 린팅&포맷팅 시점 다른 테크 블로그를 참고해보니 린팅과 포맷팅을 CI 과정에 통합하는 경우가 많던데, 센디 웹 프론트엔드의 경우 husky, lint-st..
https://github.com/KimCookieYa/use-react배경 React 프론트엔드를 구현할 때 자주 구현해야 하는 기능은 Data Fetch이다. 일반적으로 서버에서 받아온 데이터를 보여주기 위해서는 State로 관리해야 하기 때문에, 데이터를 저장할 useState를 선언하고, 데이터를 페치하는 useEffect도 선언해야 한다. import { useEffect, useState } from 'react';export default function Exampele() { const [data, setData] = useState(null); // useEffect 내에서 REST api 호출 후 state로 저장한다. useEffect(() => { fetch('https:..
함수를 명령으로 바꾸기(Replace Function with Command)함수를 그 함수만을 위한 객체 안으로 캡슐화하는 것 => 이를 명령(Command) 객체라고 한다.일급 함수(first-class function)을 지원하지 않는 프로그래밍 언어에서 "명령 객체"를 사용해서 일급 함수의 기능 대부분을 흉내 낼 수 있다.위의 문장이 바로 이해되지는 않았다. "일급 함수"도 여러번 들었는데 들을 때마다 까먹기도 하고.. 그래서 지피티에게 물어봤다. 일급 함수(First-Class Function)란, 프로그래밍 언어에서 함수가 다른 일반 데이터 타입(예: 숫자, 문자열)처럼 취급될 수 있음을 의미합니다. 즉, 함수가 변수에 할당되거나, 다른 함수의 인자로 전달되거나, 반환값으로 사용할 수 있다는 ..
https://youtu.be/Y7hQqBS2wK4?si=FLi1yz9fKtuagMi6 프론트엔드에도 테스트가 필요하다는 것은 수많은 컨퍼런스 세션과 수많은 개발 도서를 통해 알고 있었지만, 어떻게 적용해야 할지 늘 막막했다. 그러다가 토스의 모닥불 [테스트 자동화, 프론트엔드에서 꼭 해야 할까?] 영상을 보고 나도 할 수 있겠다는 생각이 들었다. 토스에서도 모든 곳에 테스트를 작성하기 보다는 필요하다고 생각되는 곳에만 테스트를 작성한다.특히, 퍼널(사용자에게 복합한 값을 입력받을 때, 여러 화면이나 단계로 쪼개어서 입력받는 흐름) 테스트 혹은 의존성이 다양한 스펙이 있을 때토스 프론트엔드에서는 주로 통합(Integration) 테스트를 작성한다.일반적으로 유닛 테스트가 지배적인 데에 반해, 토스에서는..
우선 컬렉션과 레코드의 개념부터 되게 모호해서 이해하기 힘들었다. 그래도 지피티랑 같이 공부하면서 어떻게든 이해하려고 노력했다. 레코드 캡슐화, 컬렉션 캡슐화를 읽고 드는 생각생각보다 유용한 것 같다.레코드와 컬렉션은 단순히 클래스화하는게 아니라, 추상화된 "데이터를 표현하는 방식"이다.내가 평소에 리액트 상에서도 유저 정보를 상태로 관리하거나 비즈니스 로직을 상태로 관리하는 것 또한, 레코드와 컬렉션이라고 볼 수 있는 것이다.대신 데이터를 객체가 아니라 클래스로 감싸면, 원본 데이터를 변경하는 부분이나 데이터를 가져오는 부분을 검증하거나 예외처리를 하도록 제어하기가 쉬워진다.모든 레코드를 클래스화하는 것은 바람직하지 않겠지만, 정말 중요한 비즈니스 로직의 데이터의 경우에는 일괄적으로 캡슐화해서 관리해보..
