메로그

신임 팀장으로 임명된 지 횟수로 1년이 되었다. 처음 팀장 역할을 맡았을 때는 팀원으로 일하던 시절과는 전혀 다른 관점이 필요하다는 걸 실감하며, 팀장을 위한 방향성과 리더십을 어떻게 유지해야 할지 고민이 많았다. 지금 돌아보면 지난 1년 동안 새로운 역할에 적응하고, 성장하기 위해 지켜오기 위해 노력했던 부분들과 스스로 학습했던 내용을 간단히 정리해 보고자 한다. 프론트엔드 개발자로 여러 성과를 냄과 동시에 여러 이유로 인해 신임 팀장으로 임명받았는데, 기존과는 전혀 다른 관점, 그리고 마음가짐이 필요하다는 것을 느끼게 되었습니다. 기존 직무인 프론트엔드뿐만 아니라 백엔드, 서버, 그리고 사업팀과의 소통을 위한 더 넓은 시야와 기술적 이해가 필요하다고 느꼈으며, 내가 가진 기술을 계속 디벨롭해야할 뿐 ..

서비스 상위 기획이 가장 중요하기 때문에성공적인 서비스 기획의 핵심은 고객의 문제를 명확하게 이해하고, 그에 대한 적절한 해결책(PMF, Product-Market Fit)을 찾는 것! 대다수 서비스가 실패하는 이유는 기획자와 디자이너가 UL/UX를 잘못 설계해서도 아니고, 개발자가 개발을 잘못해 오류나 장애가 자주 발생해서도 아님. 왜냐면 현재 대표적인 서비스들은 초창기에 토이 프로젝트만도 못한 수준이었음. 서비스가 실패하는 가장 큰 이유는 시장조사를 제대로 하지 않았거나 왜곡된 데이터를 기반으로 결과를 도출하여 PMP를 찾지 못했기 때문..!! → 이러한 부분 때문에 많은 기업에서 실패를 거듭하고 있음. 많은 기업이 인력과 시간, 자금 등이 부족하다며 적은 리소스를 핑계 삼아 시장조사를 제대로 수행하..

Nextjs14 에서 타사 라이브러리 사용하기해당 라이브러리를 활용하여 타사 라이브러리를 쉽고 빠르게 사용할 수 있는 라이브러리 입니다.이를 이용해서 GTM, GA 를 Nextjs 에서 적용해봅시다.@next/third-parties 라이브러리 설치해당 라이브러리는 인기있는 타사 라이브러리를 로딩할 때 성능과 개발자 경험을 개선하기 위한 라이브러리로 현재 v14.2.15 에서도 아직 활발하게 개발 중인 실험적 라이브러리입니다.npm install @next/third-parties@latest next@latestpnpm, yarn 을 쓰시는 분들은 맞는 문법으로 다운받으시면 됩니다. 필자는 pnpm 썻음.GTM, GA 연동해보기구글 태그 매니저(GTM)과 구글 애널리틱스(GA) 를 연동하기 위해서는 @..

Nuxt2를 사용해 프로젝트를 진행하면서 이미지를 AWS CDN에서 불러와 클라이언트에서 fetch로 요청하던 중, CORS(Cross-Origin Resource Sharing) 문제를 겪게 되었습니다. 이 글에서는 발생한 문제와 해결 과정을 단계별로 정리하고, 각각의 선택과 이유를 설명하겠습니다.1. 문제 상황: AWS CDN에서 이미지 로딩 시 CORS 발생이미지 파일은 AWS S3를 기반으로 한 CDN(Content Delivery Network)에서 제공되었습니다. 클라이언트 측에서 해당 이미지를 fetch로 가져오려 하자, CORS 에러가 발생했습니다.CORS 문제란?CORS는 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 브라우저에서 제약을 거는 정책입니다. 서버가 CORS 헤더를 통해..

개요Nextjs 에 자체 내장된 서버사이드를 이용해서 api 를 만들었는데 해당 api 를 사용시에 cors 가 발생하는 문제가 있습니다.해결방법으로 next.config.js 와 middleware 를 이용한 방법이 있는데, 필자는 config 에 선언한게 좀 더 직관적이여서 config 에 사용했음.하지만, 두가지 다 알려드리도록 하겠습니다.next.config.js 를 이용한 방법cors 를 config.js 에서 하면 객체 형식으로 관리하기 떄문에 좀 더 관리하는데 직관적인 장점이 있습니다.// next.config.jsconst nextConfig = { async headers() { return [ { source: "/api/:path*", head..

서버서버에서 현재 URL 정보를 가져오는 방법import { headers } from 'next/headers'export default async function Page() { const headersList = headers() const domain = headersList.get('host') const fullUrl = headersList.get('referer') return ( Domain: {domain} Full URL: {fullUrl} )}클라이언트클라이언트에서 가져오는 방법'use client'import { usePathname, useSearchParams } from 'next/navigation'export default func..