all

해당 글 176건

인프런 퇴근길 밋업 - 테스트 코드와 스토리북

2024. 8. 29. 23:21

발표자 정보발표자: 김태희님 (셀파스 X, 탐정토끼로 활동 중)행사 성격: 퇴근길 가벼운 토크 세션 주요 내용1. 테스트 코드 작성 팁테스트 코드를 의무감으로 작성하지 말고, PR이나 Jira에 원하는 동작을 설명하는 습관 들이기최소한의 모킹으로 실제 환경과 유사하게 테스트 구성다양한 시나리오 및 상태 검증웹 표준과 접근성 기반으로 신뢰할 수 있는 테스트 작성 (XPath, CSS Selector, data-testid 지양)Kent C. Dodds(@testing-library 제작자)는 테스트를 너무 많지 않게 적당히통합 테스트를 작성을 주장2. 테스트 유형 비교E2E 테스트: 실제 브라우저 환경, 크로스 브라우저 테스트 가능, 직관적이지만 시간 소요 큼 (CI Workflow에 불편)단위 테스트..

software engineering/frontend

2024 FE conf

2024. 8. 26. 10:18

오랜만에 돌아왔지만 잘 지내고 있습니다. 결혼 준비로 인해 3개월만에 포스팅을 하게 됐는데, 요즘 회사 프로젝트를 FSD 구조로 리팩토링 하고 별도로 사우들이 사용할 수 있는 라이브러리를 만들고 있습니다. 사내 프로젝트에 필요로 인해 grafana에서 사용되는 chart, log, date-picker들을 활용하는 npm 라이브러리를 우선적으로 만들고 있습니다(안타깝게도 보안상 이유로 github-enterprise와 사내 npm 레지스트리에만 등록됩니다).2024년에도 FE conf를 다녀왔는데, 다녀온 세션에 대해 공유하려합니다. 바퀴 대신 로켓 만들기(토스페이먼츠 양의현)서비스를 개발할 때 크게 세 가지의 의존성을 갖게 되는데 디자이너, 서버, 제품 요구사항이고 의존성을 어떻게 관리할까에 관한 내..

software engineering/frontend

프로젝트 회고

2024. 5. 25. 14:08

OpenAPI 개발의 Break Point가 생겼습니다.해당 프로젝트가 어떻게 흘러왔는지 앞으로는 어떻게 하는게 좋을까 회고해보려 합니다.1. 프로젝트 시작처음엔 모든 팀원이 참여하는 프로젝트로 어떤 기술 스택을 적용할지 다 같이 조사하고 결정하였지만 실제 개발은 조사에 참여하지 않았던 10년차 개발자(UI/UX 위주의 경험, 중간정도 참여)와 신입 공채분 그리고 제가 프론트엔드 개발을 담당하게 됐습니다. 이 프로젝트에 참여하게 된 계기는 이전 디자인 시스템 개발 경험을 토대로 이 프로젝트에 디자인 시스템 이슈와 개선사항을 전달하고 사용 경험을 얻고자 신뢰하는 팀장님께서 좋은 자리를 만들어 주셨습니다.해당 시점에 FE Ops가 가능한 리소스가 없었기에, 이전 조금이라도 경험 있던 제가 담당하게 됐고 Tu..

company/culture

Vercel 도메인이 갑자기 안들어가지는 이슈

2024. 5. 11. 15:42

커스텀 도메인 없이 Vercel에서 배포해서 사용하던 앱 도메인에 접근이 안됐다. Vercel Community에 접속해보니, 이미 올라와 있다. 어제부터 접속이 안됐던걸로 추측하고 (금요일 밤인데 😅), Vercel측 문제인줄 알았지만 한국 ISP가 무슨 이유인지 vercel.app을 차단한거 같다는 추측이다.우선 도메인이 있는 사람들은 커스텀 도메인을 사용하면 되겠지만, 급한대로 Firebase 호스팅으로 앱 하나만 이동 😅

software engineering/issue

React 19 Beta!

2024. 4. 29. 22:36

React 19 BetaReact 19 베타버전이 4월 25일, React Team으로부터 공개됐습니다. npm에서도 다운로드 받을 수 있습니다. 뭐가 새롭게 등장했을까?ActionsReact에서 흔하게 데이터 mutation과 응답 결과를 state에 업데이트하는 과정이 있었습니다. 예를 들어, 유저가 폼을 제출해서 API Request를 보내고 응답 결과를 받을 때 과거에는 states, error, optimistic updates 그리고 sequential requests를 직접 해야했습니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useStat..

software engineering/frontend

reduce, reduceRight 그리고 functional programming

2024. 4. 27. 15:21

reducereduce는 사용자가 제공한 콜백 함수를 순서대로 실행하여 이전 요소에 대한 계산의 반환 값을 전달하여, 최종 결과로 단일 값을 제공합니다.const numbers = [1, 2, 3, 4, 5];// Summing up all the numbers from left to rightconst sumLeft = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue;}, '');console.log(sumLeft); // Output: '12345'또한 functional programming으로 코드를 작성한다면 reduce를 이용해서 pipe를 아주 쉽게 만들 수 있습니다.const pipe = (..

software engineering/frontend

Preact 그리고 Signals

2024. 2. 14. 21:46

개요 React에서 제공하는 Hook은 너무 많다. useState, useRef, useMemo 그리고 이 상태들을 useEffect로 관리하는 경우까지 너무 복잡하다. React를 잘 이해하는 사람일지라도 나 혼자만 일하는게 아니기에, 그리고 매 번 퍼포먼스 테스트를 진행하는게 아니기에 나만의 룰대로 만들고 있거나 최적의 상황을 만들어내지 않고 있거나 만들기 위해 시간과 노력을 사용하고 있는 경우가 많다고 생각된다. 깊이 공감되는 이러한 이유로 Preact에서 Signals를 만들었고 가장 효율적인 방법으로 알아서 컴포넌트와 UI를 업데이트한다. Preact 이후 견해에 Preact에 관해 작성할 부분이 있어 Signals을 다루기 전에 좀 살펴보겠습니다. Preact로 번들 사이즈 줄이기, 퍼포먼스..

software engineering/frontend

Zustand Persist (부제: localstorage 쉽게 저장하기)

2024. 2. 12. 20:51

개요 Zustand, Recoil, RTK, Jotai와 같은 external store를 사용하고 있는데 state를 localstorage에 저장해야 하나요? 이번 프로젝트를 진행하면서 Zustand를 사용하게 됐는데 persist라는 옵션이 있었습니다. 많은 프로젝트에서 수요가 있었다는 뜻인것처럼 다른 라이브러리 또한 같은 옵션을 제공했습니다. 단순한 Zustand 예시 import { create } from 'zustand' import { combine } from 'zustand/middleware' const useBearStore = create( combine({ bears: 0 }, (set) => ({ increase: (by: number) => set((state) => ({ ..

software engineering/frontend

Next13 import-meta-env 도입기 그리고 주의점

2024. 2. 12. 18:40

개요현재 Next.js 13 이상 버전을 사용하고 있다면, 일반적으로 배포에 제약이 없다면 Vercel을 통해 배포를 한다면 큰 문제가 없을 수 있습니다. 하지만 사내 배포 환경을 이용하기 위해 K8S 환경 내 CloudNative Buildpack을 통해 배포하거나 별도 배포 환경을 위해 Dockerfile을 작성하여 이미지를 만드는 경우는 고려해야할 점이 있었습니다. 현재 개발 배포 환경은 Next.js 13 App Router, PNPM, turborepo, Hashcorp Vault, Dockerfile, Tekton CI/CD를 이용하고 있습니다. 브랜치 전략을 통한 개발, QA, 라이브 환경 등 다양한 환경이 CI/CD에 적용되어 있고 때로는 개발환경에서 사용한 이미지를 그대로 QA에 그리고 ..

software engineering/frontend

[Knip] Find unused files, dependencies and exports in JavaScript and TypeScript projects

2024. 2. 3. 15:58

커리어리에 Knip을 소개 해주신 분이 있어서 한 번 사용해봤는데 꽤 유용하다. 제목 그대로 자바스크립트와 타입스크립트에서 사용하지 않는 파일, Dependencies, exports를 찾아준다. 공식 홈페이지를 가보면 아주 단순하고 사용법도 너무 간단해서 Typescript 대표 오픈소스인 Vscode를 clone해서 사용해봤습니다. 1. 설치 yarn add -D knip 2. 스크립트 제공 { "scripts": { ..., "knip": "knip" } } 3. 실행 결과 Unused files Unused files (3953) .eslintplugin/code-amd-node-module.ts .eslintplugin/code-declare-service-brand.ts .eslintplugi..

software engineering/javascript