software engineering/frontend

해당 글 59건

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

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

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

JSX Conditional rendering && 와 삼항연산자

2023. 12. 31. 21:30

아래 코드 중 어떻게 조건부 렌더링을 사용하고 있었나요? {props.title ? ( {props.title} ) : null} {props.title ? ( {props.title} ) : undefined} {props.title && ( {props.title} )} 간만에 서비스 개발을 하면서 제각각인 코드가 눈에 보였다. @wise님께서는 아래와 같은 리뷰도 남겨주셨는데, @wise: 삼항연산자를 사용하는 과정에 return null 인 경우 &&로 변경하는게 가독성이 좋을 것 같습니다. 같은 코드라면 가독성이 좋은 &&를 사용하는게 맞아 보였다. 과연 같을까? TL;DR JSX 조건부 렌더에 &&구분자를 사용하면 알 수 없는 값(NaN 또는 0)이 렌더될 수 있습니다, 또는 렌더링이 중단될 ..

software engineering/frontend

React TypeScript Cheatsheet

2023. 12. 19. 22:25

React TypeScript Cheatsheet를 알고 계셨나요? React와 Typescript로 개발하면서 알고 있던 타입과 이렇게 쓸 수 있구나를 함께 알아가기 위해 준비해봤습니다. 10명중에 10명이 알 만한 타입들은 제외했습니다. Component Props Basic Prop Types Examples type AppProps = { /** any non-primitive value - 어떤 properties에도 접근 불가 (일반적이지 않지만 placeholder로서 사용됨) */ obj2: object; /** 필수 속성이 없는 인터페이스 - (`React.Component`와 같은 경우를 제외하곤 일반적이진 않음) */ obj3: {}; /** 동일한 유형의 속성을 여러개 갖고 있는 객..

software engineering/frontend

UX 라이팅

2023. 11. 19. 22:19

어플리케이션을 만드는 도중에 이런 사람이 우리팀에도 있었으면 좋겠다 싶었던게 직업으로도 있었습니다. 최근 UX 라이팅 교과서라는 책을 접하게 됐는데 제가 기록하고 싶은 내용들만 남겨보겠습니다. UX 라이팅(UX Writing) 뭘까? 사용성이나 브랜드 경험을 향상시키고 최적화하기 위해서 인터넷 인터페이스 안에서 사용하는 언어와 언어의 포맷을 다루는 업무를 하는 일이라고 합니다. 그럼 카피라이팅과는 뭐가 다를까요? UX라이팅은 카피라이팅과 다음과 같은 같은 차이가 있습니다. UX 라이팅 카피라이팅 정의 제품 안에서 사용하는 글 제품에 들어오도록 하는 글 성격 사용자를 돕는다 사용자를 유혹한다 대상 제품에 들어온 사용자 제품을 경험하지 못한 사용자 목표 - 서비스를 쉽게 이해하고 - 서비스를 자연스럽게 사용..

software engineering/frontend