software engineering/frontend

해당 글 70건

UX 라이팅

2023. 11. 19. 22:19

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

software engineering/frontend

Event Types in React and TypeScript

2023. 11. 19. 19:50

얼마전 React Typescript Cheatsheet 관련된 글을 포스트 했습니다. 해당 글에서, 아래와 같은 onChange에 관한 타입 정의도 있었습니다. Total Typescript에서 React Typescript의 Event 타입에 대해서만 다루는 글이 있어 소개해보려 합니다. onChange?: React.FormEventHandler; // form events! the generic parameter is the type of event.target 문제 const onChange = (e) => {}; Parameter 'e' implicitly has an 'any' type. ; onChange 뿐만 아닙니다. onClick, onSubmit 과 같은 DOM으로부터 받은 이벤트 ..

software engineering/frontend

Vite 5.0

2023. 11. 17. 16:40

Node.js Support Vite no longer supports Node.js 14 / 16 / 17 / 19, which reached its EOL. Node.js 18 / 20+ is now required. 너무 좋은 소식이다. 빨리 많은 팀과 프로젝트에서 latest 노드 버전을 사용했으면 좋겠다. Performance Rollup 4의 빌드 개선으로 인한 퍼포먼스 향상이 있습니다. server.warmup 을 아래와 같이 정의하여 startup 할 때 필요한 내용들을 미리 변환시켜 startup 시간을 개선시킬 수 있습니다. export default defineConfig({ server: { warmup: { clientFiles: [ './src/components/BigCompo..

software engineering/frontend

JSX is deprecated

2023. 11. 17. 15:41

@typescript-eslint/explicit-function-return-type 규칙이 적용되어 있었고, return type이 필수로 명시돼야 했다. 게다가 초기에 제공된 환경에서도 JSX.Element로 return type을 명시해줬는데, namspace JSX가 deprecated 됐다.@deprecated — Use React.JSX instead of the global JSX namespace. 이번 기회에 오랜만에 cheatsheet을 보고오자.Useful React Prop Type Examplesexport declare interface AppProps { children?: React.ReactNode; // best, accepts everything React can re..

software engineering/frontend

useCallback 지금이 적절한 상황일까?

2023. 11. 17. 14:55

프로젝트를 사용하다 useCallback을 사용해서 리렌더링을 방지하게 만들지, 그냥 함수로 정의하는게 더 메모리에 효율적일지 어렵다. kentcdodds의 featured article에 useMemo 그리고 useCallback에 관한 좋은 글을 참조하여 정리해보려 합니다. useCallback 왜 별로일까? const dispense = candy => { setCandies(allCandies => allCandies.filter(c => c !== candy)) } const dispenseCallback = React.useCallback(dispense, []) 일반적으로 useCallback이 한 번에 감싼 코드를 많이 봤겠지만, 우리에게 아주 익숙한 useCallback 함수입니다. 우..

software engineering/frontend

next.js 13.4 / 13.5.6 / 14.0.2 로컬 구동 시간 비교

2023. 11. 14. 22:49

팀원분 중에 13.5.6 으로 업데이트를 진행 하신분이 계셔서 관심이 생겨 어느정도 차이가 나는가 진행하고 있는 프로젝트에서 비교해보는 시간을 갖게 됐습니다. 기존 프로젝트는 비교적 최신 버전인 13.4.19 버전을 사용하고 있었습니다 (App Router). 13.5.6 등장 우선 가장 관심이 갔던건 Optimized Package Imports 였지만 대부분 내용들이 DX 퍼포먼스 향상에 관한 이야기입니다. Next.js 13.5 improves local dev performance and reliability with: 22% faster local server startup: Iterate faster with the App & Pages Router 29% faster HMR (Fast Ref..

software engineering/frontend

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

2023. 11. 12. 22:59

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

software engineering/frontend

처음 써보는 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

Type validation 뭐 써볼까?

2023. 9. 21. 22:51

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

software engineering/frontend