chaesunbak 님의 블로그
close
프로필 사진

chaesunbak 님의 블로그

github: @chaesunbak

  • 분류 전체보기 (33)
    • 회고 (11)
    • 트러블슈팅 (4)
    • 위키 (12)
    • 후기 (3)
    • 분석 (3)
  • 홈
  • 태그
  • GitHub
Windowing 도입해서 DOM 요소 줄이기

Windowing 도입해서 DOM 요소 줄이기

배경유튜브에 나온 인플루언서들의 맛집을 조회할수 있는 맛집지도 웹앱 먹튜브를 개발하면서, MVP 개발이 가장 큰 목표였다. 갑자기 떠올린 사이드 프로젝트 아이디어인 만큼 짧은 시간안에 중요한 기능만 개발하고 싶었다. 이를 위해서, 구글 시트를 DB로 사용하기도 했습니다. 또한, 일단 비효율적이라도 구현하고, 최적화는 필요한 경우에만 나중에 하기로 했다.관련 포스팅 : 구글 시트 CORS 에러 삽질기문제상황앱 접속시 디비의 모든 데이터를 패칭해 이를 리스트와 마커로 띄워주는 로직이였다. 추후에는 데이터가 더 많아질수 있는 상황에서, 초기에는 데이터가 약 100개 정도 있는 상황이었다. 그런데 리스트에서 렌더링이 제대로 되지 않는 현상이 발생했다. 문제를 정확히 파악하기 위해 개발자도구에서 네트워크 탭과 요..

  • format_list_bulleted 회고
  • · 2025. 3. 13.
Next.js에서 MSW 도입하기... 그런데 dynamic import를 곁들인

Next.js에서 MSW 도입하기... 그런데 dynamic import를 곁들인

Next.js의 이중환경Next.js에서 작성된 코드는 서버(Node.js)와 브라우저라는 두 가지 다른 환경에서 실행된다. SSR(또는 SSG)단계에서는 Node.js 환경에서 코드가 실행되고, CSR단계에서는 브라우저 환경에서 코드가 실행된다. 따라서, alert()나 localStorage같은 브라우저 전용 API는 브라우저 환경에서만, fs같은 Node.js 전용 API는 서버환경에서만 호출 가능하다.MSWMock Service Worker는 자바스크립트 API 모킹 라이브러리이다. 모킹 API를 이용하면 API가 준비되지 않은 상태에서도 프론트 엔드 개발이 가능하기 때문에 실제 개발에서 유용하다. 다른 모킹 라이브러리리들은 주로 코드 레벨에서 요청을 가로채는 반면 MSW는 브라우저 전용 API인..

  • format_list_bulleted 트러블슈팅
  • · 2025. 3. 10.
코드분할로 초기로딩속도 개선하기

코드분할로 초기로딩속도 개선하기

문제상황전월세 실거래가 공공데이터를 활용한 지도 서비스(대방)은 SPA(Single Page Application)로 설계되었다. SPA란 하나의 HTML 페이지로 실행되는 웹 애플리케이션으로, 최초 페이지 로딩 후 JavaScript를 통해 동적으로 페이지 내용을 갱신한다. 따라서, 동적이고 사용자와 상호작용이 많은 앱을 구현하는데 적절하지만, 처음 접속시 모든 JavaScript를 파일을 다운로드 해야함으로 첫 페이지 로딩이 오래걸린다는 단점이 있다. 특히 지도 서비스인 대방은 외부 지도API를 불러오는데 추가적인 시간이 소요되므로, 초기 로딩을 단축하여 웹 성능(Web Performance)를 향상시키는 것이 중요했습니다.번들링 (Bundling)개발자가 코드를 import 문법이나 require ..

  • format_list_bulleted 회고
  • · 2025. 3. 9.
Next.js에서 HTTPS로 로컬 개발 서버 열기

Next.js에서 HTTPS로 로컬 개발 서버 열기

배경CORS 관련 이슈나, 성능, 보안 등의 이유로 로컬 개발 서버에서도 HTTPS가 필요할 수 있다.준비물Next.js 최신버전npm i next@latest 명령어를 통해 Next.js 최신 버전을 준비해주세요. 아직 프로젝트를 시작하지 않았았다면 npx create-next-app@latest 명령어를 통해 시작할 수 있습니다.실행하기npx next dev --experimental-https동작 원리프로젝트에 certificates 폴더가 생기고 자체 서명된 SSL 인증서가 추가된다. 해당 인증서는 mkcert 프로그램을 이용하여 발급된다. 이는 보안상 타인과 공유 되면 안되므로 .gitignore 파일에 certificates 폴더를 무시하도록 한다. 이어서 자동으로 Next.js 서버가 해당 ..

  • format_list_bulleted 위키
  • · 2025. 3. 7.
구글 시트 CORS 에러 해결 삽질기

구글 시트 CORS 에러 해결 삽질기

배경빠르고 간단하게 데이터를 관리할 때 구글 시트는 매우 유용한 도구이다. 간단하게 공유할 수 있을뿐만 아니라 여러 부가기능으로 활용도도 높다. 유튜브에 나온 맛집들을 한눈에 볼 수 있는 간단한 토이프로젝트 먹튜브를 개발하면서 구글 시트를 데이터베이스로 활용하는 과정에서 CORS 에러를 해결한 경험을 공유하고자 한다.참고자료 1 : 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕구글 시트에서 확장 프로그램 - App Script를 선택하여 새로운 .gs 파일을 만들고, 다음과 같이 코드를 작성했다. doGet 함수를 작성하면 GET 메서드 요청을 처리하는 핸들러 역할을 하게된다. 작성 후 배포 버튼을 눌러 웹 앱으로 배포하고, 조회 권한을 모든 사용자에게 부여하기 위해, 실행 컨텍스트는 "웹 앱을 엑..

  • format_list_bulleted 트러블슈팅
  • · 2025. 3. 6.
Vite에서 Tailwind CSS 설정하기

Vite에서 Tailwind CSS 설정하기

1. Tailwind CSS 설치하기Tailwind CSS 패키지와 Vite 플러그인 패키지를 설치한다.npm install tailwindcss @tailwindcss/vite2. Vite 설정에 테일윈드 플러그인 추가하기//vite.config.tsimport { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})3. 테일윈드 CSS 불러오기전역 스타일 시트에 테일윈드 스타일 스타일을 불러오고, 이를 애플리케이션에 적용한다. 스타일시트의 파일명은 달라도 상관없다. (global.css 등)//index.css@im..

  • format_list_bulleted 위키
  • · 2025. 3. 3.
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • navigate_next
Copyright © chaesunbak 모든 권리 보유.

티스토리툴바