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...
Safari Date 포맷 관련
2022-02-27
Chrome 에서는 정상이지만 Safari 에서는 아래와 같은 Date 객체 생성 시 Invalid Date로 생성된다 Chrome Devtools Console Safari Devtools Console 원인은 Safari 에서는 Date를 파싱할 때 yyyy-mm-dd 형태의 format을 지원하지 않아서 발생하는 문제이다. 해결책 근...
React 18 변경점
2022-02-01
현재 날짜(2022년 2월 1일) 기준으로 React 18 버전이 RC 단계이다. React 18에서의 변경사항들을 정리하자면 다음과 같다. React 18 버전부터 react-dom 의 render 함수는 deprecated 되고, 아래에 나열된 React 18의 기능들을 적용하려면 새로 생긴 createRoot 함수를 이용해야 한다. 기존 ...