como siempre

동적으로 정규표현식 사용하기

ZoD — Tue, 4 Feb 2025 09:21:52 +0900

input에서 소수점 자리 수를 맞춰주기 위해 정규표현식을 활용했다.

이때, 입력으로 넣은 소수점 자리 수에 따라 정규표현식을 바꾸고 싶어서 동적으로 정규표현식을 사용하는 방법을 찾아봤다.

일반적으로 정규표현식을 생성하는 방법은 두가지이다.

1. 정규 표현식 리터럴

const regexp = /is/i;

2. RegExp 생성자 함수

// new RegExp(pattern[, flag])
const regexp = new RegExp(/is/i);   // ES6

동적으로 변수를 넣어주기 위해서는 "백틱으로 감싸준다" 라는 방법이 생각날 것이다.

그러나 정규 표현식 리터럴에서는 단순히 백틱으로 감싸서 사용하면 문자열로 취급되기 때문에 정규표현식으로 사용이 불가능하다.

// ❌
const regExp = `^[0-9]+\\.?\\d{0,${decimal}}`;

그렇다면 방법은 new RegExp 문을 통해 백틱 내의 문자열을 정규표현식 객체로 만들어주는 것이다.

이때 / 로 양쪽을 감싸주면 '문자 /'를 포함한 정규표현식으로 인식하기 때문에, 양 끝의 /를 제외한 문자열을 사용해야 한다.

// ⭕
const regExp = new RegExp(`^[0-9]+\\.?\\d{0,${decimal}}`);

[ 카카오맵 API ] kakaomap type 정의

ZoD — Sun, 12 Jan 2025 15:59:18 +0900

kakaomap API는 타입 지원을 하지 않기 때문에 타입스크립트 환경에서 해당 라이브러리를 사용하려면 글로벌 타입 선언이 필요하다.

env.d.ts

interface Window {
  kakao: any
}

여기까지 했을 때 new window.kakao.maps로 시작하는 메서드는 문제 없이 사용할 수 있지만, kakao Map 객체에 대한 타입 정의는 불가능하다.

그래서 필요한 타입 선언을 직접 추가해주는 방법을 사용했다.

src/types/kakao.d.ts

declare namespace kakao.maps {
  class Map {
    constructor(container: HTMLElement, options: MapOptions)
    getCenter(): LatLng
    setCenter(latlng: LatLng): void
    // 필요한 메서드 추가
  }

  interface MapOptions {
    center: LatLng
    level: number
  }

  class LatLng {
    constructor(latitude: number, longitude: number)
  }
}

필요한 메서드나 객체 등을 수동으로 추가해줘야 한다는 단점

tsconfig.json

"compilerOptions": {
  "typeRoots": ["node_modules/@types", "src/types"]
}

경로 추가

이렇게 타입을 직접 선언하면 map 객체에 타입 정의를 할 수 있다.

const mapInstance = ref<null | kakao.maps.Map>(null)

mapInstance.value.getCenter()

map 객체에 쓸 수 있는 getCenter()와 같은 메서드도 타입 경고 없이 사용 가능하다. (물론 수동으로 추가해줘야 하지만…)

현재 위치 좌표 요청 | navigator의 geolocation 객체

ZoD — Fri, 10 Jan 2025 15:49:20 +0900

사~실 이건 자바스크립트인데요, 카카오맵 하면서 진행했던 거라서 뭔가 같이 있으면 좋겠다 싶음.....

const center = ref({ lat: 37.5291904, lng: 126.9202944 })

/**
 * 현재 위치 좌표 요청
 */
const setCurrentLocation = () => {
  if ('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition((position) => {
      const { latitude, longitude } = position.coords
      center.value = { lat: latitude, lng: longitude }
    })
  }
}

Navigator: geolocation 속성 - Web API | MDN

Navigator.geolocation 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 Geolocation 객체를 반환합니다. 웹 사이트나 웹 앱은 위치정보를 사용해 결과 화면을 맞춤 설정할 수 있습니다.

developer.mozilla.org

장치의 위치 정보에 접근할 수 있는 Geolocation 객체 반환

Geolocation

getCurrentPosition()
- 장치의 현재 위치 조사 후 GeolocationPosition 객체로 반환
- GeolocationPosition 객체
  - coords : 주어진 시간의 위치 (latitude, longitude 등 반환)
  - timestamp : 위치를 기록한 시간
watchPosition()
- 장치의 위치가 변경될 때마다 호출하는 콜백 등록
clearWatch()
- watchPosition()을 이용해 등록한 콜백을 삭제

이후 변경사항

navigator.geolocation.getCurrentPosition 의 비동기적인 특성에 따라 함수 로직 변경

재사용성을 위해 공통 함수로 분리

/**
 * 현재 위치 좌표 요청
 */
export const getCurrentLocation = (): Promise<{ lat: number; lng: number }> => {
  return new Promise((resolve) => {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords
          resolve({ lat: latitude, lng: longitude })
        },
        () => {
          resolve({ lat: 37.492925, lng: 127.02811 })
        },
      )
    } else {
      resolve({ lat: 37.492925, lng: 127.02811 })
    }
  })
}

반환 값은 무조건 { lat: number, lng: number } 타입이지만, Promise 반환 값의 타입을 선언해줘야 변수에 할당해줄 때 타입 에러가 나지 않음

[ 카카오맵 API ] vue3에서 kakaomap 사용하기

ZoD — Thu, 9 Jan 2025 17:54:17 +0900

카카오 개발자 애플리케이션 등록

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

난 지난번에 해 놓은 게 있어서 사이트 도메인 주소만 바꿔줬다.

[ API ] 카카오 오픈 API 사용하기 / Postman 통한 요청 확인

카카오 API 사용하기step 1. 카카오 developers 사이트 이동 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공

zodev.tistory.com

중요한 건 앱 키

이 중에서도 Javascript 키를 사용할 것이다.

또 한 가지 중요한 것은 카카오맵 활성화 설정을 해줘야 한다.

이거 안 해주면 영원히 에러 겪음…

카카오맵 API

https://apis.map.kakao.com/

1. env 파일에 Javascript key 등록

.env 파일에 Javascript key를 등록한다.

내 프로젝트는 vite 환경이기 때문에 key 이름에 접두사로 VITE_를 꼭 붙여줘야 키 값을 인식한다.

(vue cli의 경우 VUE_APP_)

env 파일의 키 값 사용하기

vite 환경에서는 import.meta를 사용한다.

const { VITE_KAKAO_API_KEY } = import.meta.env

2. 지도 그릴 영역 만들기

<div id="map" ref="mapContainer" style="width: 100%; height: 500px"></div>

const mapContainer = ref(null)

3. 실제 지도 그리는 Javascript API를 불러오기

const script = document.createElement('script')
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${VITE_KAKAO_API_KEY}&autoload=false`
document.head.appendChild(script)

script 태그를 직접 삽입하지 않고 자바스크립트로 삽입하는 방법을 택했다.

이때 //이라는 상대 프로토콜을 사용하면, 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라간다.

해당 script 태그는 어떤 위치에 넣어도 상관없지만, 반드시 실행 코드보다 먼저 선언되어야 하기 때문에 head 부분에 넣어줬다.

4. 지도 띄우는 코드 작성

script.onload = () => {
  window.kakao.maps.load(() => {
	  //지도를 생성할 때 필요한 기본 옵션
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    }
		//지도 생성 및 객체 리턴
    const mapInstance = new window.kakao.maps.Map(mapContainer.value, options)
  })
}

만약 타입스크립트를 사용하는 중에 window.kakao에서 타입 에러가 난다면… (아래 글 참고)

[ 카카오맵 API ] Property 'kakao' does not exist on type 'Window & typeof globalThis'.

typescript 환경에서 window.kakao.maps를 사용하려고 하면 Property 'kakao' does not exist on type 'Window & typeof globalThis'. 라는 에러가 뜨는데 이를 어떻게 해결할까 env.d.tsinterface Window { kakao: any}타입을 직접

zodev.tistory.com

Map 객체의 첫 번째 파라미터는 지도를 그릴 영역의 DOM 레퍼런스, 두 번째 파라미터는 options가 들어간다.

options에는 커스텀하려는 내용을 채워넣으면 된다. 그러나 center는 필수 값.

최종 코드

단지 지도만 로드했을 때

<template>
  <div id="map" ref="mapContainer" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const { VITE_KAKAO_API_KEY } = import.meta.env

const mapContainer = ref(null)

const loadMap = () => {
  const script = document.createElement('script')
  script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${VITE_KAKAO_API_KEY}&autoload=false`
  document.head.appendChild(script)

  script.onload = () => {
    window.kakao.maps.load(() => {
      const options = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 3,
      }

      const mapInstance = new window.kakao.maps.Map(mapContainer.value, options)
    })
  }
}

onMounted(() => {
  loadMap()
})
</script>

Hi kakao~

[ 카카오맵 API ] Property 'kakao' does not exist on type 'Window & typeof globalThis'.

ZoD — Wed, 8 Jan 2025 09:28:04 +0900

typescript 환경에서 window.kakao.maps를 사용하려고 하면 Property 'kakao' does not exist on type 'Window & typeof globalThis'. 라는 에러가 뜨는데 이를 어떻게 해결할까

env.d.ts

interface Window {
  kakao: any
}

타입을 직접 정의해준다~

eslint 규칙에서 any를 허용해야 한다면?

⬇

eslint.config.js

{
  rules: {
    '@typescript-eslint/no-explicit-any': 'off', //  any 사용 허용
  },
},

[ Nuxt ] 일부 페이지에는 Layout 적용 하지 않기

ZoD — Thu, 19 Dec 2024 09:17:48 +0900

Nuxt Layout 공식 문서 참고

layouts/ · Nuxt Directory Structure

Nuxt provides a layouts framework to extract common UI patterns into reusable layouts.

nuxt.com

레이아웃을 쓰지 않을 페이지에는 definePageMeta를 사용해서 layout을 false 처리 해주면 해당 페이지에는 레이아웃이 제외된다.

definePageMeta({
  layout: false,
});

근데 만약 이게 적용이 안 된다면 NuxtLayout에 적용되어 있는 레이아웃 파일 이름을 확인해보자.

<NuxtLayout name="container">
  <NuxtPage />
</NuxtLayout>

만약 이처럼 layout에 특정 이름을 적용해줬다면 위의 defindePageMeta 코드가 작동하지 않을 것이다.

그렇기 때문에 definePageMeta로 레이아웃을 끄거나, 바꿔주려면 기본적으로 설정된 Layout의 이름이 default여야만 한다.

layouts/default.vue

<template>
  <main>
    <slot></slot>
  </main>
</template>

App.vue

<NuxtLayout>
  <NuxtPage />
</NuxtLayout>

레이아웃을 사용하지 않을 페이지

definePageMeta({
  layout: false,
});

다른 레이아웃을 사용할 페이지

definePageMeta({
  layout: 'footer',
});

[ API ] 카카오 오픈 API 사용하기 / Postman 통한 요청 확인

ZoD — Wed, 27 Nov 2024 09:06:27 +0900

카카오 API 사용하기

step 1. 카카오 developers 사이트 이동

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

< 대표 API 종류 >

step 2. 내 애플리케이션 추가하기

애플리케이션을 생성하면 앱 키가 발급됨

step 3. 사용할 API 기능 확인

로컬의 키워드로 장소 검색하기 기능 API 활용

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

➡ 요청과 결과에 대한 모든 정보가 나와있음

Postman으로 API 요청 확인

step 4. 새 request 생성

step 5. 요청 메서드 & url 확인

step 6. headers에 발급받은 앱 키 작성

KakaoAK 뒤에 본인의 REST API 키 작성

step 7. 파라미터 입력

검색어의 경우 query 로 입력

step 8. 결과 확인

[ API ] 네이버 검색 API 사용하기 / Postman 이용한 JSON 파일 추출

ZoD — Tue, 26 Nov 2024 09:24:45 +0900

네이버 API 사용하기

step 1. 네이버 developers에서 사용할 API 탐색

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음

developers.naver.com

step 2. 애플리케이션 등록

이미 등록된 앱이 있다면 생략 가능

step 3. 등록된 애플리케이션 확인

step 4. 사용할 API url 및 메서드 확인

Postman을 이용하여 API 요청 확인

step 5. Postman 새로운 Request 생성

step 6. Postman 헤더 작성

애플리케이션의 Client id & secret 정보

step 7. 파라미터가 필요한 경우 넣어줌

step 8. 결과 확인

step 9. Json 파일 추출 (선택)

참고로 원 게시글은 velog (내꺼)

[API] 네이버 검색 API 사용하기 / Postman 이용한 JSON 파일 추출

네이버 API 사용하기 step 1. 네이버 develpers에서 사용할 API 탐색 https://developers.naver.com/main/ step 2. 애플리케이션 등록 이미 등록된 앱이 있다면 생략 가능 app1 step 3. 등록된 애플리케이션 확인

velog.io

[ Tailwind CSS ] tailwind directives(@)

ZoD — Mon, 25 Nov 2024 09:26:03 +0900

@tailwind

tailwind의 base, components, utilities, variants 스타일을 적용하기 위해 사용하는 디렉티브

/**
 * Tailwind의 기본 스타일과 플러그인이 등록한 모든 기본 스타일을 삽입
 */
@tailwind base;

/**
 * Tailwind의 컴포넌트 클래스와 플러그인이 등록한 모든 컴포넌트 클래스를 삽입
 */
@tailwind components;

/**
 * Tailwind의 유틸리티 클래스와 플러그인이 등록한 모든 유틸리티 클래스를 삽입
 */
@tailwind utilities;

/**
 * 각 클래스의 hover, focus, responsive, dark mode 등 다양한 변형 클래스의 삽입 위치를 제어
 *
 * 생략할 경우 Tailwind는 기본적으로 이러한 클래스를 스타일 시트의 맨 끝에 추가한다
 */
@tailwind variants;

@layer

어떤 “bucket”에 커스텀 스타일을 작성할지

“bucket” → base, components, utilities

layer 내부에 작성된 custom CSS는 최종적으로 필드 파일에 포함된다. (사용되었다면)

hover: focus: md: lg: 와 같은 modifiers들도 사용 가능하다.

@layer base {
  :root {
    --tw-primary-50: #eff7ff;
  }
  h1 {
     @apply text-2xl;
  }
}

@apply

존재하는 클래스를 custom CSS에 사용하기 위해 사용

즉, @apply와 함께 tailwind Class 명으로 custom CSS 작성이 가능하다.

너무 많은 apply를 남용하는 것은 좋지 않음

공통 스타일 정리 : 반복되는 스타일을 @apply로 정리하여 둔다.

@layer components {
  /*
  * Button 스타일
  */
  .btn {
    @apply flex h-35 w-140 cursor-pointer items-center justify-center rounded-[4px] px-20 py-4 disabled:cursor-default;
  }
}

[ Vue ] Vue 스타일 가이드를 활용한 코딩 컨벤션

ZoD — Sun, 24 Nov 2024 13:32:33 +0900

Vue 스타일 가이드

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

프로젝트 버전업을 하면서 Vue의 스타일 가이드를 참고하여 코딩 컨벤션을 정했다.

가장 중점적으로 생각한 것은 코딩 문법과 파일 이름 설정이다. (변수명은 엔진과도 맞춰야 했기 때문에 비교적 유동적으로 고려했다.)

1. prettier 설정 통해 코드 컨벤션 강화

{
  "semi": true,                    // 문장 끝에 세미콜론 사용 
  "tabWidth": 2,                   // 탭 너비는 2칸
  "bracketSpacing": true,          // 중괄호 안에 양쪽 공백 생성
  "trailingComma": "all",          // 후행 쉼표 자동 생성
  "arrowParens": "always",         // 화살표 함수 사용 시 괄호 항상 생성
  "singleQuote": true              // 문자열은 작은 따옴표 사용
}

그 외 printWidth 등은 기본 설정을 따름

2. setup 설정

script 태그 안에 setup 키워드를 작성하기

3. 공통 컴포넌트 이름은 Common으로 시작

분명한 의미 전달 + template 에서 사용 시 다른 태그들과 구분

ex) CommonInputBox, CommonExpansion 등

4. 하위 컴포넌트 이름은 페이지명(기능명)으로 시작

뷰 스타일 가이드 강력 추천 수준 - 긴밀하게 결합된 컴포넌트 이름

장점 : 컴포넌트 이름만으로도 어느 페이지(기능)의 어떠한 기능인지 알 수 있음. 정렬에 유리함.
단점 : 컴포넌트 이름이 길어짐
ex) (상위) SamplePage → (하위) SampleCondition, SampleContent

5. 디렉티브 약어는 전부 사용 O

v-bind → :
v-on → @
생략할 수 없는 디렉티브는 사용(v-if, v-for 등)

6. style 파일 작성 시 요소선택자(button, input 등)은 피하기

스타일 오버라이딩 위험
성능 문제 (요소선택자는 클래스 선택자에 비해 느림)

예외적으로 테이블 관련 요소선택자(td, th, tr) 등은 사용 가능 → 반드시 특정 클래스 하위에 테이블 요소 CSS 작성하기

.class-name {
	td {
		...
	}
	tr {
		...
	}
}

7. 컴포넌트 범위 스타일 적용

vue 스타일 가이드 필수 수준

전역적으로 사용해야 하는 CSS 속성의 경우 css 폴더 내부에 따로 정의

8. 함수는 화살표 함수로 작성

9. 인터페이스는 파스칼 케이스로 의미 분명하게 작성

헝가리안 네이밍(I) 채택 X

10. 인터페이스 선언 방식

공통 인터페이스의 경우에는 declare로 선언
기능별 인터페이스의 경우에는 모듈화해서 사용(export/import)

11. emit 네이밍 규칙

"동작:데이터" 형식으로 작성

ex) update: type, request:date 등

12. 셀프 클로징 컴포넌트

vue 스타일 가이드 강력 추천 수준

태그 내부에 콘텐츠가 없다면 닫는 태그 없이 자체적으로 닫음

ex) <CommonInput />

13. 템플릿 내 컴포넌트 이름은 파스칼케이스 사용

vue 스타일 가이드 강력 추천 수준

케밥 케이스도 사용가능하지만 코드 가독성과 통일성을 위해 파스칼 케이스로 선정