JavaScript의 Spread 연산자(spread operator)와 성능
2024-06-22
최근 자바스크립트 성능 최적화에 관련된 아티클을 읽다가 spread 연산자가 매번 새로운 객체를 메모리에 생성하기 때문에 성능상 불리할 수 있다는 내용을 접했습니다. 최근 들어서는 불변성이 중요한 원칙으로 자리 잡았기 때문에 객체나 배열을 복사하는 spread 연산자를 많이 사용하게 되는데요, 그래서 실제로 성능 차이가 얼마나 나는지 궁금해져 알아보...
JavaScript 라이브러리에서 exports 필드로 여러 환경 대응하기
2024-06-16
기존에 브라우저와 Node.js 각각의 환경에 맞게 다른 코드 베이스를 빌드하고, package.json의 module, main, browser 필드를 활용해서 제공한 패키지가 있었습니다. Next.js 환경에서도 이를 사용할 수 있도록 지원했으나, Next.js v14.0.2 이후 App Router 환경에서 패키지를 제대로 불러오지 못하는 ...
Next.js App Router 사용 시 robots meta 태그 noindex 관련 이슈 해결
2024-01-08
⚠️ 해당 이슈는 작성하는 현재 최신 릴리즈 버전(v14.0.4) 기준의 이슈로, Next.js 버전이 업데이트 되면서 내용이 변경될 수도 있습니다. 블로그 환경을 Next.js의 새로운 기능인 App Router로 전환한 뒤 얼마 지나지 않아서 구글 서치 콘솔에서 다음과 같은 이메일을 받게 되었습니다. 페이지의 robots meta 태그에 noi...
Next.js 13 App Router 적용기
2023-10-02
Next.js 13 버전이 릴리즈 되고 가장 큰 변화인 App Router 기능이 출시가 되었는데요. 현재 보고 계신 블로그에 적용을 해보며 Server Components 등의 변경점 등을 정리해 보았습니다. 파일 명 및 코드 베이스는 TypeScript 기반으로 작성하였으며, tsx 파일은 전부 js, jsx, ts 파일로도 대체 가능합니다. S...
Yarn berry + Yarn workspaces 패키지 Github Packages에 배포해보기 - 2
2022-09-12
지난 포스트에 이어서 이번에는 Github Packages에 npm 패키지를 배포해 보도록 하겠습니다. 배포를 위한 준비 우선 지난 포스트 내용처럼 설정을 진행했다면 배포를 위한 준비는 마친 상태입니다. 한 번 더 해당 설정을 살펴보겠습니다. packages/util/sample-util/package.json Github Packges 배...
Yarn berry + Yarn workspaces 패키지 Github Packages에 배포해보기 - 1
2022-09-11
Node.js 기반의 프로젝트 개발을 진행하다 보면 많은 패키지를 npm을 이용해서 설치하고 사용하게 되는데요. npm을 통해 설치하여 사용하는 모듈은 기본적으로 npm public registry에 배포되기 때문에 누구나 설치 가능한 패키지가 됩니다. 하지만 패키지를 만들어서 사내, 조직에서만 private하게 사용하고 싶으면 private n...
오픈소스 저작권과 컨트리뷰션
2022-06-14
오픈소스란 오픈소스 소프트웨어(Open Source Software, OSS)를 뜻하는 용어이다. 요즘 우리가 일반적으로 소프트웨어 개발에 사용하는 프레임워크, 라이브러리 등은 대부분 오픈소스로 이루어진 경우가 많다. 오픈소스와 저작권 오픈소스는 공개되어 있기 때문에 쉽게 사용할 수 있지만 그만큼 놓치기 쉬운 부분이 저작권 침해와 관련된 오픈소스 ...
React Typescript 기반 Electron 개발 환경 구축
2022-05-02
우선 CRA 라이브러리를 통해 typescript 기본 프로젝트를 생성 Electron 모듈 설치 package.json 수정 public/elctron.ts 작성 Run 자동으로 elctron.ts 파일을 elctron.js로 컴파일 하여 실행됨 Build package.json에 build 관련 내용 추가 빌드 파일만 생성...
React CRA & Typescript & craco & Cypress & Jest 테스트 환경 세팅
2022-04-16
cypress란 프론트엔드를 위한 E2E(End-to-End) 테스팅 프레임워크 입니다. 사내에서 진행 중인 프로젝트에 cypress를 도입하였는데, CRA(Create React App)의 기본 테스트 프레임워크인 Jest 로 유닛 테스트를 작성하고 있던 상태에서 두 테스트 프레임워크를 병행해서 사용하기 위한 설정 방법을 공유하고자 합니다. ...
Safari CSS transition 관련 문제
2022-03-09
Safari에서(이 놈의 사파리...) css transition 사용 시 발생하는 문제 사내에서 진행하고 있는 프로젝트에 MUI를 사용하는데, MUI의 Input 컴포넌트에서 사용하는 CSS 애니메이션에서 해당 문제를 발견하였다. 해당 애니메이션을 재현한 CSS 위의 CSS처럼 box 클래스에 가상 선택자로 border가 그려지게끔 하고 t...
