software engineering

해당 글 152건

UX 패턴 분석 - 로딩(번역)

2023. 11. 12. 22:59

로딩은 UX에서 필수 요소로 자리 잡았습니다. 로딩이 발생하면 사용자 대기 시간을 줄이고 시스템의 가치를 높일 수 있기 때문입니다. 하지만 페이지에 로딩 스피너를 둔 것 만으로 사용자가 머물기를 기대해야 할까요?. 이 문서는 디자이너, 개발자, QA 및 제품 담당자가 적절한 로딩 패턴을 구축하기 전에 사용자와 시스템의 컨텍스트를 모두 고려하는 데 도움을 주기 위한 내용입니다. 로딩 시간 로딩 시간은 현재 작업의 가치와 동일해야 합니다. 가끔씩 수행되는 고위험 작업의 경우 작업을 실제보다 더 길게, 더 중요한 것처럼 보이게 만드는 것을 고려할 수 있습니다. 정기적으로 수행되는 빠른 작업의 경우 실제로 목표는 대기 시간을 최소화하는게 도움이 됩니다. UI로 기대치 설정하기 로딩 상태는 제품에 대한 사용자..

software engineering/frontend

using, satisfies in typescript

2023. 10. 30. 21:25

1. satisfies 잠깐! 4.9에 나온 satisfies는 사용하고 계신가요? 객체 타입을 검사할 때 생각보다 typescript가 똑똑하게 검사하지 않아서 4.9에 새로 등장했습니다. Typescript에서 설명하기 위한 예시로 palette라는 객체를 예로 들었습니다. // RGB tuple이나 string을 허용하고 있습니다. const palette = { red: [255, 0, 0], green: "#00ff00", bleu: [0, 0, 255] // blue에 오타가 있습니다. }; // 배열의 첫 번째 값을 가져오고 싶지만 string일수도 있어서 허용되지 않습니다. const redComponent = palette.red.at(0); // 배열일 수 있어서 이 또한 허용되지 않습..

software engineering/javascript

lerna publish

2023. 10. 29. 23:32

이번에 lerna를 이용하는 패키지를 nexus에 배포하며 테스트 할 일이 생겼습니다. 변경된 부분만 빠르게 beta-1,-2로 업데이트하여 모든 패키지를 업데이트 하지 않고 일부분만 변경하고 싶어 lerna publish 를 공부하게 됐습니다. Versioning lerna version command는 패키지의 버전 번호를 높이고, 변경 사항을 커밋하고 그에 따라 태그를 지정할 수 있는 명령이 함께 제공됩니다. lerna version --no-private // private package는 제외됩니다. lerna notice cli v5.1.2 lerna info current version 1.0.0 lerna info Assuming all packages changed ? Select a n..

software engineering/devops

pnpm link

2023. 10. 29. 21:51

Makes the current local package accessible system-wide, or in another location. 로컬 패키지를 다른 장소에서 사용할 수 있도록 도와주는 방법이다. 이번 프로젝트(B)는 디자인 시스템을 사용하는 레포지토리 A 그리고 이것을 이용해서 구성하게 됐다. 하지만 디자인 시스템 또한 같이 버그테스트와 함께 진행하고 있어 사내 nexus(npm registry)가 아닌 로컬 레포지토리를 바라봐야하는 환경이라 사용하게 됐다. ├── design-system | ├── packages/react/main/package.json ├── repo-B ├── apps/ │ ├── web/ [pnpm link](https://pnpm.io/cli/link) ```b..

software engineering/devops

처음 써보는 tailwindcss

2023. 10. 29. 18:53

https://doohyeong.tistory.com/211 Style, CSS 뭐 써볼까? • RSC 관련 (styled-components to tailwindcss) TL;DR 현재로서는 서버 컴포넌트에서 CSS-in-JS가 작동하지 않는 것으로 밝혀졌습니다. 이 점이 아쉬웠습니다. styled-components에서 Tailwind CSS로 전환하는 것이 RSC doohyeong.tistory.com css 뭐써볼까에서 시작됐고 tailwindcss를 사용하기로 해봤다. 이미 side project에서 사용해봤지만 우선 편하게 사용하기 급급해서 공식문서를 지금까지도 읽어보진 않았다. 필요한게 생기면 추가하고, 현재는 개선할 때 더 추가하거나 리팩토링 해야한다. RSC의 장점을 살리고 빠르게 poc..

software engineering/frontend

예측하지 못한 useCallback, react.memo 상황

2023. 10. 29. 18:31

import React, { useState } from "react"; import "./styles.css"; export default function App() { const [count, setCount] = useState(1); return ( Value of count is {count} ); } function Child() { console.log("Child is getting rendered"); return I am a child; } 우리가 예상할 수 있는 아주 기본적인 예시로 Child Component는 1번 렌더 된다. 만약 위의 경우에 count+1 할 수 있는 버튼을 만들어 클릭한다면 어떨까? import React, { useState } from "react"; im..

software engineering/frontend

FE Conf 2023

2023. 10. 21. 23:30

처음 FE Conf에 참여하게 됐습니다. 많은 프론트엔드 엔지니어 그리고 풀스택 엔지니어들이 참여했음을 느꼈고 2초만에 티켓팅이 끝났다 할정도로 미친 열기속에 참여하신분들 그리고 스피커분들과 NC FE 후원 스태프 @이성준 님에게 감사드립니다. 후원사 뿐만 아니라 많은 회사에서 멋진 FE 개발자를 채용하기 위해 굿즈도 나눠주고 인재풀에도 등록하려고 노력하는 모습에 좋은 사람과 함께하기 위해 관심을 주심에도 깊이 감사합니다. 처음 참여한 세션 메인 세션들은 유튜브에(Track A, Track B) 올라간다는 이야기를 듣고 '토스커뮤니티 프론트엔드 성장' 이라는 Sponsor 세션에 참여하였습니다. 재밌었던 내용으로는: 풀스택 역량, CI/CD와 같이 내가 신경 써서 해온 이력들보다 스피커분은 프론트엔드만 ..

software engineering

forEach is BAD!

2023. 10. 3. 16:56

async/await를 사용할 경우 forEach 사용을 피하는게 좋습니다 두가지 이상 함수에 await이 걸려있다면 루프를 실제로 2번 돕니다 대안으로 for, for-of, Promise.allSettled(arr.map()), reduce(()⇒, Promise.resolve())가 있습니다. arr.forEach(async (value) => { const added = await add(value) console.log('added', added) const subtracted = await subtract(value) console.log('subtracted', subtracted) } // result: added x nth -> subtracted x nth // added -> adde..

software engineering/javascript

Type validation 뭐 써볼까?

2023. 9. 21. 22:51

소개 JavaScript에서 데이터 유효성 검사를 처리할 때 개발자는 종종 올바른 라이브러리를 선택해야 하는 어려움에 직면합니다. 검증에 널리 사용되는 세 가지 옵션은 Yup, Zod 및 Joi입니다. 이 기사에서는 각 라이브러리의 기능, 코드 조각을 자세히 알아보고 장점과 단점을 비교하여 프로젝트에 대한 정보에 근거한 결정을 내리는 데 도움을 드립니다. 타입스크립트의 역할 타입스크립트 코드에서의 타입에러는 "컴파일" 과정에서만 발생 실제로 런타임에는 타입스크립트는 아무것도 역할을 하지 못한다 네: 우아하고 간편해요 그렇습니다. 데이터 스키마 유효성 검사를 위한 간단하고 우아한 라이브러리입니다. 선언적 API를 제공하므로 유효성 검사 규칙을 쉽게 읽고 이해할 수 있습니다. 가벼운 특성으로 인해 성능이 중..

software engineering/frontend

Monorepo 뭐 써볼까?

2023. 9. 21. 22:50

What tools are in Monorepo? Bazel (by Google), Gradle Build Tool (by Gradle, Inc), Lage (by Microsoft), Lerna, moon (by moonrepo), Nx (by Nrwl), Pants (by the Pants Build community), Rush (by Microsoft), and Turborepo (by Vercel). 모노레포가 무엇을 제공해줄까요? 새 프로젝트를 만드는 데 드는 오버헤드가 없습니다. 기존 CI 설정을 사용하고, 모든 소비자가 동일한 저장소에 있는 경우 버전이 지정된 패키지를 게시할 필요가 없습니다. 프로젝트 전반에 걸친 원자적 커밋 커밋할 때마다 모든 것이 함께 작동합니다. 동일한 커밋에서 모든..

software engineering/frontend