chaesunbak 님의 블로그
github: @https://github.com/chaesunbak
문제상황전월세 실거래가 공공데이터를 활용한 지도 서비스(대방)은 SPA(Single Page Application)로 설계되었습니다. SPA란 하나의 HTML 페이지로 실행되는 웹 애플리케이션으로, 최초 페이지 로딩 후 JavaScript를 통해 동적으로 페이지 내용을 갱신합니다. 따라서, 동적이고 사용자와 상호작용이 많은 앱을 구현하는데 적절하지만, 처음 접속시 모든 JavaScript를 파일을 다운로드 해야함으로 첫 페이지 로딩이 오래걸린다는 단점이 있습니다. 특히 지도 서비스인 대방은 외부 지도API를 불러오는데 추가적인 시간이 소요되므로, 초기 로딩을 단축하여 웹 성능(Web Performance)를 향상시키는 것이 중요했습니다.번들링 (Bundling)우리가 코드를 import 문법이나 requ..
배경CORS 관련 이슈나, 성능, 보안 등의 이유로 로컬 개발 서버에서도 HTTPS가 필요할 수 있습니다. 다음과 같이 Next.js에서 HTTPS로 로컬 개발 서버를 열 수 있습니다. 준비물Next.js 최신버전 npm i next@latest 명령어를 통해 Next.js 최신 버전을 준비해주세요. 아직 프로젝트를 시작하지 않았았다면 npx create-next-app@latest 명령어를 통해 시작할 수 있습니다.실행하기npx next dev --experimental-https동작 원리프로젝트에 certificates 폴더가 생기고 자체 서명된 SSL 인증서가 추가됩니다. 해당 인증서는 mkcert 프로그램을 이용하여 발급됩니다. 이는 보안상 타인과 공유 되면 안되므로 .gitignore 파일에 ..
빠르고 간단하게 데이터를 관리할 때 구글 시트는 정말 유용한 도구입니다. 간단하게 공유할 수 있고 여러 부가기능으로 활용도도 높습니다. 유튜브에 나온 맛집들을 한눈에 볼 수 있는 간단한 토이프로젝트 먹튜브를 개발하면서 구글 시트를 데이터베이스로 활용하는 과정에서 CORS 에러를 해결한 경험을 공유하고자 합니다.참고자료 1 : 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕배경구글 시트에서 확장 프로그램 - App Script를 선택하여 새로운 .gs 파일을 만들고, 다음과 같이 코드를 작성했습니다. doGet 함수를 작성하면 GET 메서드 요청을 처리하는 핸들러 역할을 하게됩니다. 작성 후 배포 버튼을 눌러 웹 앱으로 배포했습니다. 조회 권한을 모든 사용자에게 부여하기 위해, 실행 컨텍스트는 "웹 앱..
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.cs..
배경전국 수영인들을 위한 수영장 정보 사이트 어푸! 개발을 시작하면서, 이번 프로젝트로를 진행하면서 얻을 수 있는 것이 무엇인지 고민했습니다. 저는 다음과 같은 목표를 설정할 수 있었습니다.(1) 빠르게 프로덕트를 만들어 검증하고 보완하며 애자일 방법론을 적용한다.(2) 첫 Next.js 프로젝트이므로 Next.js에서 사용되는 개념과 문법 학습에 집중한다.(3) 앱 설계와 태스크 관리에 집중해 팀의 협업을 돕는다.이러한 목표에 따라서, 개별 컴포넌트 구현 작업에 시간을 투입하기보다는 컴포넌트 라이브러리를 사용해 빠른 개발을 하는 것을 고려하게 되었습니다. 또한, 멘토님께서 컴포넌트 라이브러리를 사용해보면서, 재사용 가능한 컴포넌트를 어떻게 설계할 수 있는지를 배울수 있다며 조언해주셨습니다. 이러한 점을..
배경음악 인기도 맞추기 게임 스포티게서를 개발하면서, DB에서 랜덤한 요소를 가져올 필요가 있었습니다. 게임의 진행방식이 두가지 랜덤한 요소 중 인기도가 높은 요소를 맞추는 게임이었기 때문입니다. 단순해 보이는 "랜덤"이라는 개념 뒤에 숨겨진 기술적 고민과 해결 과정을 공유하고자 합니다. 스포티게서는 NoSQL DB인 파이어베이스의 파이어스토어를 사용했기에 컬렉션과 문서라는 용어를 사용하지만, 관계형 DB의 테이블과 행으로 이해하셔도 무방합니다.가장 쉬운 방법, 하지만…컬렉션의 총 문서갯수 가져오기 (예 : 350개)총 문서갯수 내에서 랜덤한 숫자 생성하기 (예 : 1~350중에 아무 숫자 → 53)해당 번호의 문서 가져오기 (예 : 53번째 문서 불러오기)가장 직관적으로 떠올릴 수 있는 방법이지만, 심..
