본문 바로가기

분류 전체보기358

Next.js - vercel 배포하기 피그마 플러그인을 만드는 도중 Oauth 인증 과정에서 서버도메인이 필요하게 되었다.이전에 프론트 사이트로 몇번 배포했었는데, 기억이 가물가물..아카이브용으로 Next.js 로 만든 프로젝트를 vercel 배포과정을 정리해보았다(참고로 vercel 은 정적 페이지를 쉽게 빌드/배포 할 수 있는 호스팅 서비스를 제공하는 클라우드 플랫폼이다) Next.js - vercel 배포하기1. vercel 에 로그인을 하면 대시보드가 뜨고, add new 버튼 > project 를 선택해주자 2. 나는 이미 등록한 계정으로 깃 레포만 추가하는 거라 깃헙 앱 퍼미션을 클릭해주었다. 3. 모달 창이 뜨고, 로그인을 하고 나면 아래와 같은 세팅 페이지로 들어가게 된다. 스크롤 바를 굴려 아래로 내려가보자 4. 여기.. 2025. 5. 3.
JavaScript - 끄적거리는 자바스크립트 모듈 시스템의 역사 (CommonJS, AMD, UMD, ES6, TypeScript) 자바스크립트 모듈시스템의 역사를 보다보면 바퀴의 변천사와 같아보였다.(원시인들이 통나무를 굴려서 무거운 돌을 옮기다가 => 손수레가 나왔고 => 손수레를 밀다가 마차가 나오고 => 자전거 타다가 => 자동차까지) 특히 이 분야는 불편함을 한두개씩 보완하면서 진화하는 포켓몬과 같다고 할까나그래서 이번 포스팅은 그냥 두서없이 주절거려보았다혹시 읽으시다가 잘못된 점이 있으면 알려주시기를...⭐ 끄적거리는 자바스크립트 모듈 시스템의 역사 (CommonJS, AMD, UMD, ES6) js 원래 시작자체가 브라우저 내에서 쓰려고 만든 스크립트 언어이다보니 마구잡이로 실행이 된다.저렇게 한꺼번에 로드되다보니 순서도 보장안되고 스코프도 꼬임... // "먼저 다운받은 사람이 먼저 실행하긔 후후..." 그러다 보니 .. 2025. 5. 1.
Git - husky와 lint-staged로 커밋전 eslint 검사하기(feat.pnpm) eslint 설치까지 완료되었다eslint 검사을 하려면 3가지 방법 정도가 있다. (검사하는 타이밍에 따라 다른 방법을 사용한다고 본다)1. 직접 명령어로 검사하기2. 커밋전/푸시전 자동으로 검사하기3. 빌드 단계에서 검사하기 나는 2번째 방법인 커밋 전 자동으로 린트 검사를 실행 하도록 만들어주고 싶었다.깃훅(git hook) 이라는 친구가 있다. 깃의 특정 이벤트에 트리거링되어 실행되는 스크립트 모음집 이랄까이를 활용해서 커밋 전의 검사 동작을 추가할 수 있다. 이를 pre-commit 이라고 한다 준비물은 husky와 lint-staged 라는 라이브러리들 이다.이 둘을 믹스해서 세팅을 해보려고 한다.- husky 는 pre-commit 을 타이밍을 잡아낼 수 있고- lint-staged 는 스테.. 2025. 4. 27.
Next.js - GA4 pageview 추가하기 (Nextjs 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고 싶으면 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은  GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다. 지난 시간에는 GA 페이지 설정을 해보았고, 이번에는 Nextjs 프로젝트 내 설정을 해보려고 한다. GA 페이지 설정이 궁금하시다면 클릭👇👇👇 Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편)사이드로 만들어 보았던 랜딩 페이지의 방.. 2025. 4. 1.
Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고자 하였더니 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은  GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다.   Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 1. 구글 계정으로 텅~ 비어있는 GA 페이지로 진입해보자. 메뉴 패널 > 어드민 메뉴로 들어가보자  2. create 버튼을 눌러 property 를 클릭!  3. property.. 2025. 3. 30.
디자인패턴 - Flyweigh 디자인 패턴을 항상 공부하고 싶었다.하지만 그 시절의 나에겐 뭔가 어려웠고, 개념 자체가 이해가 잘 되지 않아 여러번 포기 했었던 것 같다.올해 초부터 이제 공부할 타이밍이구나를 느끼고, 강의를 찾아보게 되었다. 그동안 업무하면서 겪었던 경험들이 하나둘씩 떠오르면서,머리 속에 각각 떠돌아다니던 지식들이 패턴화되어 깔끔하게 정리가 되는 느낌이었다. 타입스크립트로 보는 GoF의 디자인 패턴 강좌 라는 유튜브 강의를 듣게 되었는데타입스크립트를 사용하여 이해도 되고 전반적으로 깨닫는 것이 많아서 학습 내용을 정리해보려고 한다. 디자인패턴 - FlyweighFlyweight동일한 객체를 중복하여 생성하지 않고, 미리 생성된 객체를 공유해서 사용한다는 개념의 패턴이다.공유할 속성과 아닌 속성을 구분해서 생각해 주어.. 2025. 3. 9.
React - eslint 세팅하기 eslint 를 세팅을 하였다. 하면서 정확한 개념을 이해하게 되었다.prettier 가 한 사람이 짠 것 같은 코드 규칙을 적용하는 거라면,eslint 는 여러 명이 협업할 때 잘못된 코드(중복, typo) 등을 고칠수 있도록 도와준다.이친구가 없다면 배포할때에서야 잘못된 점들을 알아챌 수 있기 때문에 모든 프로젝트의 동반자같은 녀석이다. 먼저, 최신버전을 다운받았다.하지만 리액트 플러그인과 호환성이 안맞는 부분이 있어 9버전에서 8버전으로 다운그레이드 하였다.(무조건 최신보다는 안정성이 확인되고 업그레이드 하는 것을 추천) eslint.config.js import eslint from "@eslint/js";import tseslint from "@typescript-eslint/eslint-plu.. 2025. 2. 18.
Figma - 피그마에 폰트 추가하기 (Feat. 맥) 피그마 데스크탑 앱에 원하는 한글 폰트가 없어 추가를 하려고 한다 😁  1. 일단 폰트를 다운받아주자 (TTF 혹은 OTF 확장자의 폰트 파일만 가능)나는 귀여운 삼립호빵체를 받아주었다 (호호)  2. 맥북에 폰트 파일 설치하기spot light 를 키고 font book 을 검색해보자** font book 은 맥북의 폰트 모음 폴더라고 생각하면 된다   3. font book 안에 폰트 넣어주기맥북에 폰트 설치가 되었다  4. 피그마 데스크탑 앱에서 사용하기잘 나온다! 2025. 2. 9.
React - 구글 스프레드 시트 API 연동하기(2) - 프로젝트 설정 구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까? 일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)지난 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 이번 포스팅에서는 프로젝트 설정을 해보려고 한다.자, 머리에 그려졌으면 따라와보시길 ! 1. 구글 콘솔에서 할일 1) 서비스 계정 만들고 키 발급 받기 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기 React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정구글 스프레드 시트에 저장한 데이터를.. 2025. 1. 30.
반응형

티스토리툴바