all

해당 글 178건

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

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

2023 Retrospective

2023. 12. 3. 23:42

23년은 어떻게 보냈는가 새로운 시도 리스트를 작성하였고 정말 많은 다양한 도전을 했다. 업무 외 내용물은 사내 FE 기술 공유 세션에서 10개 발표, 도서, 블로그, 컨퍼런스, 인프런/패캠 교육과정은 나름 잘 수행했지만 사이드 프로젝트 배포와 Leet Code는 실패했다. 하지만 개발 도서가 아닌 일반 도서를 굉장히 많이 읽었다. 팀과 회사에 기여한 것은 무엇인가? 현재 팀의 연차별 개별 업무 역량 KHS 주니어 19/05 (4년 6개월) Server Programming KJK 시니어 2009/08 (14년 3개월) Front-end Programming MSL 시니어 2012/09 (11년1개월 ) Front-end Programming AHW 미들 14/05 (9년 6개월) Front-end Pr..
life

UX 라이팅

2023. 11. 19. 22:19

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