전체 글

최근 유튜브에서 어떻게 하면 실력있는 개발자로 성장할 수 있는지 조언하는 영상을 봤다. 두 가지가 핵심인데 하나는 `메타인지`와 다른 하나는 `트렌드`이다. 결국 내가 무엇을 잘하며 부족한 부분은 무엇인지 명확히 인지한 상태에서 전략적인 학습을 통해 조금씩 앞으로 나아가야 하며 변화하는 트렌드에 맞춰서 적응하는 노력도 해야한다. 메타 인지에 조금이나마 도움이 되기 위해 개발 일지도 자주 쓰도록 하자 조급해하지 말고 여유롭게 아무래도 욕심이 많은지라 프런트엔드, 백엔드 둘 다를 공부하겠다는 계획을 실행하다보니 속도가 나지를 않는 것 같다. 그래서 팀장님한테 이럴땐 어떻게 해야되냐 여쭤봤다. "많은 것들을 하려고 하다보면 그럴 수 있다. 조급하지 말고 조금씩 천천히 시간을 가지고 공부하는게 좋을 것 같다."..

이번에 Next.js 13.2버전이 나오면서 여러 기능들이 추가됐습니다. 어떤 내용인지 알아봅시다. Built-in SEO Support 기존의 Next.js 12버전에서는 next/head를 사용했고 Next.js 13버전에서는 head.js 파일에서 meta 태그나 open graph를 넣어줬죠. Next.js 13.2에서는 좀 더 쉬운 인터페이스를 사용합니다. 아래 코드와 같이 static, dynamic 메타데이터를 define할 수 있습니다. // app/layout.tsx import type { Metadata } from 'next'; // static한 메타데이터 export const metadata: Metadata = { title: 'Next.js 13.2&#..

Satisfies operator satisfies 라는 operator가 추가됐다. 먼저 코드로 보자. 기존에는 아래와 같이 타입을 지정하면 string과 Record 타입의 공통된 메서드만 사용할 수 있었다. type User = { name: string | Record; } const user: User = { name: 'test' } user.name.split('') // error! 하지만 satisfies를 활용하면 실제 값의 타입에 대한 메서드를 활용할 수 있으면서도 타입을 만족시킨다. type User = { name: string | Record; } const user = { name: 'test' } satisfies User user...

이전 포스팅인디자인 패턴(Singleton, Facade)을 사용한 Analytics 코드설계에서 Analytics 코드에 관한 내용을 공유했었습니다. 2주 동안 이벤트를 수집하는 과정에서 한 가지 이슈가 발생했습니다. analytics를 통해 수집한 데이터와 실제 데이터를 비교했더니 25% 정도의 데이터 손실이 있었습니다. 아무래도 client side에서 이벤트를 수집하다보니 ads blocker에 의해 손실이 발생한 것 이었죠. 이를 해결하기 위해 Next.js api route로 proxy 서버를 구축했던 경험과 그 과정에서 겪었던 어려움을 공유해보겠습니다. 이 포스팅을 읽고 난 뒤에는 아래의 내용들을 이해하게 됩니다. Next.js로 proxy 서버 구축하기 Client-Side Tracking..