준만몬의 블로그 / 프론트엔드
프론트엔드
웹 프론트엔드 개발 경험과 기술을 기록합니다.
자바스크립트
Javascript는 어떻게 동시에 여러 작업을 하나요?
싱글 스레드인 자바스크립트가 비동기 작업을 처리하는 원리를 호출 스택, 실행 환경, 태스크 큐, 이벤트 루프의 동작 흐름과 함께 쉽게 설명합니다.
junmannn
i18n 대신, 자동 번역 기능을 도입 - Weglot
다국어 지원(i18n)은 글로벌 서비스를 지향한다면 피할 수 없는 숙명과도 같습니다. 하지만 수많은 번역 리소스(JSON, yml 등) 파일 관리와 텍스트 하나 바뀔 때마다 번역팀을 찾는 과정은 개발자에게 적지 않은 피로감을 줍니다. 오늘은 기존의 레거시 i18n 라이브러리를 전면 제거하고, Weglot이라는 자동 번역 솔루션을 도입하며 겪은 트러블슈팅과 그 과정을 공유하려 합니다.왜 i18n을 제거하고 weglot 을 선택했는가?기존처럼 번역 키를 하나하나 매핑하고 JSON 파일을 관리한다.Weglot을 활용해 DOM 기반의 자동 번역을 적용한다.우리는 유지보수 효율성과 기술 부채 제거를 위해 2번을 택했습니다. 특히 추후 진행될 전체 프로젝트 통합 마이그레이션을 고려했을 때, 복잡한 i18n 의존성을..
clerk 사용법
Next.js + Supabase 프로젝트 - (9) : 로그인 회원가입 인증 구현 with Clerk
Next.js + Supabase 를 사용한다면 Supabase 를 사용하니까 편하게 Supabase 의 내제된 기능인 auth 를 사용을 할 수도 있습니다. 하지만 로그인 관련 UI 구현도 귀찮고, 모던 로그인 UX 등을 이해해보고 싶어, Clerk 라는 인증 관리 툴을 사용해 볼까 합니다. Supabase Auth vs Clerk 비교Supabase Auth✅ 장점완전한 통합: 이미 Supabase 사용 중이므로 추가 설정 최소화데이터베이스 직접 연동: RLS(Row Level Security)로 데이터 보안 자동 관리비용 효율성: 별도 인증 서비스 비용 없음간단한 설정: 기존 Supabase 클라이언트 그대로 활용기존 코드와 완벽 호환❌ 단점UI 커스터마이징 제한: 인증 UI를 직접 구현해야 함소..
next supabase
Next.js + Supabase 프로젝트 - (8) : 포스팅 상세 페이지 구현
저번 포스팅에 대한 요약, 이번 포스팅에서 이어질 내용에 대한 안내 후 진행하도록 하겠습니다. 이전 포스팅 요약 Next.js와 Supabase를 활용한 CRUD(생성, 조회, 수정, 삭제) 기능 구현에 대한 튜토리얼입니다. 주요 내용은 다음과 같습니다:Supabase 설정Supabase 프로젝트 생성테이블 구성 (예: posts 테이블)Next.js에서 Supabase 연동Supabase 클라이언트 설정환경변수로 URL과 키 관리CRUD 기능 구현createPost: 게시물 생성getPosts: 게시물 전체 조회getPost: 특정 게시물 조회updatePost: 게시물 수정deletePost: 게시물 삭제API 라우트 작성 (pages/api/ 폴더)각 기능별로 API 핸들러 작성프론트엔드에서 API..
next supabase
Next.js + Supabase 프로젝트 - (7) : Supabase CRUD, UI 코드 구현 (해당 파일들 전체 코드 공개)
이번 포스팅은 아래의 CRUD 구현에 대한 상세 설명으로 이어집니다.이번 포스팅은 내용은 컴팩트 하나, 코드를 첨부함에 따라 스크롤이 길 수는 있겠습니다ㅎㅎ 파일을 추가하는게 나을 수도 있을 텐데, 혹시나 다운로드의 부담도 있을 것 같아 코드로 적어두겠습니다 https://kyurasi.tistory.com/entry/Nextjs-Supabase-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-6-CRUD-%EA%B5%AC%ED%98%84 Next.js + Supabase 프로젝트 - (6) : CRUD 구현이 포스팅은 아래의 포스팅에 이어지는 내용입니다.https://kyurasi.tistory.com/entry/Nextjs-Supabase-프로젝트-4-Github-연결-vercel-..
next ci/cd
Next.js + Supabase 프로젝트 - (6) : 페이지 설계, CRUD 구현
이 포스팅은 아래의 포스팅에 이어지는 내용입니다.https://kyurasi.tistory.com/entry/Nextjs-Supabase-프로젝트-4-Github-연결-vercel-배포-CICD-구현하기 Next.js + Supabase 프로젝트 - (5) : Github 연결, vercel 배포, CI/CD 구현하기저는 프로젝트 개발을 진행하면서 사이트로 배포도 무료로 해보려고 합니다. 일단 무료로 사이트를 띄우는 방법으로 Vercel 을 택하겠습니다. 주요 내용1. 작업중인 프로젝트 Github 에 올리기2. 프kyurasi.tistory.com 기대 결과물 이전 포스팅까지 해서 프로젝트에 Supabase DB 연결, Vercel에 Github 을 연결하여 CI/CD 구현 까지 해보았습니다.이제 연결..