software engineering

해당 글 152건

GraphQL Apollo Error: Dynamic server usage: Page couldn't be rendered statically because it used headers

2024. 1. 10. 21:30

현 상황 Next.js 13(13.4) App Router를 통한 구성으로 React Server Component에서 Apollo Client를 쉽게 사용할 수 있는 @apollo/experimental-nextjs-app-support 를 채택했습니다. Apollo Client의 캐시 덕분에 Client Component는 Mutation의 결과로 애플리케이션의 Entity의 모든 사용을 자동으로 업데이트 할 수 있지만 Server Component는 데이터가 변경되면 수동으로 업데이트 해줘야 합니다. React Client Component "use client"; import { ApolloClient, ApolloLink, HttpLink, } from "@apollo/client"; impo..
software engineering/issue

JavaScript 개발자를 위한 객체 속성 삭제 전략: undefined vs delete

2024. 1. 1. 16:04

자바스크립트에서 객체의 속성을 삭제하는 방법으로는 delete 연산자를 사용하거나 속성 값을 null 또는 undefined로 설정하는 방법이 있습니다. 그러나 이 두 가지 방법 간에는 성능 차이가 있습니다. TL;DR 보편적인 시나리오에서는 속성을 null 또는 undefined로 설정하는 것이 간편하며 성능 차이가 미미합니다. delete는 특정한 속성 제거나 열거 동작과 관련이 있을 때 선택합니다. 성능 고려 사항: 메모리 할당 해제: 객체 속성을 null 또는 undefined로 설정하면 해당 속성이 즉시 사용 중이 아닌 것으로 표시되지만, 메모리는 즉시 해제되지 않습니다. 일반적으로 JavaScript 엔진은 사용하지 않는 메모리를 식별하고 회수하기 위해 가비지 컬렉션을 사용합니다. 가비지 컬렉..
software engineering/javascript

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

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