joycie416 님의 블로그

Nuxt를 사용하다보면 데이터를 불러올 때 어떤 API를 사용해야 적절한지 고민이 많이 된다. '왜 세 가지나 만들어서... 두개만 있어도 될텐데!' 라는 생각이 들었지만, 프로젝트에 사용하기 위해 정리해보려고 한다. 쉽게 이야기 하면 아래와 같이 요약할 수 있다. 1. `$fetch` : 버튼 클릭, form submit, 삭제, 수정 등 클라이언트 요청에 반응해야 할 때2. `useFetch`, `useAsyncData` : SEO에 데이터가 담기도록, 페이지가 처음 보일 때 데이터가 필요한 경우3. `useAsyncData` : 복잡한 비동기 로직, Supabase와 같은 외부 API나 여러 요청을 조합해야 할 때 1. `$fetch`가장 단순한 네트워크 요청 함수이다. Next.js의 `fetch..

Vue와 React 사용성 비교를 위해 포트폴리오를 Vue + Nuxt로 만들어보기로 했다. 이 포스팅은 초기 설정 코드를 정리하기 위해 작성했다. 1. Nuxt 프로젝트 생성하기npm create nuxt@latest 2. import 경로 alias 지정하기프로젝트를 처음 생성하면 `tsconfig.json`이 있는데, 해당파일에 compilerOptions를 추가해준다.{ // https://nuxt.com/docs/guide/concepts/typescript "files": [], "references": [ ... ], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./app/*"] } }}..

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. Prop drilling을 피하기 위해서는 전역 상태로 관리하는 것이 편하다. 오늘 비교해볼 새 클라이언트 상태 관리 도구인 Recoil, Jotai, Zustand는 기본적으로 React와 사용할 것을 전제로해 호환이 잘 된다. Redux는 유명하고, 이미 redux-toolkit을 정리한 적이 있기 때문에 생략하려고 한다. Zustand 또한 이전에 Next.js와 사용하는 방법을 정리했으므로 생략한다.  각 상태 관리 라이브러리를 사용해 count를 관리하는 샘플 애플리케이션을 만들어 보았으니 하나하나 따라하면서 하기 번거롭다면 clone해서 사용해도 좋다. GitHub - joycie416/recoil_jotai_zustand: Pra..

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. Prop drilling을 피하기 위해서는 전역 상태로 관리하는 것이 편하다. 오늘 비교해볼 새 클라이언트 상태 관리 도구인 Recoil, Jotai, Zustand는 기본적으로 React와 사용할 것을 전제로해 호환이 잘 된다. Redux는 유명하고, 이미 redux-toolkit을 정리한 적이 있기 때문에 생략하려고 한다. Zustand 또한 이전에 Next.js와 사용하는 방법을 정리했으므로 생략한다. 각 상태 관리 라이브러리를 사용해 count를 관리하는 샘플 애플리케이션을 만들어 보았으니 하나하나 따라하면서 하기 번거롭다면 clone해서 사용해도 좋다. GitHub - joycie416/recoil_jotai_zustand: Prac..

병원 상세페이지에 주소를 좌표로 바꾸어 표시하기 위해 카카오맵을 사용하기로 했다.이전 글에 이어서 이번 게시글에서는 카카오맵을 Next.js 14 App Router 환경에서 방법을 정리해보려고 한다. 1. 패키지 설치하기React와 카카오맵을 같이 사용할 때 많이들 카카오가 아닌 개인이 만든 sdk를 추가 설치해 사용한다.npm install react-kakao-maps-sdkyarn add react-kakao-maps-sdk 또한 TS를 같이 사용하는 경우 같은 분이 정리한 'kakao.maps.d.ts'를 추가 설치하면 좋다. 그러면 전역에 `kakao` 객체를 알아서 추가해준다.npm install kakao.maps.d.ts --save-devyarn add kakao.maps.d.ts --..

병원 상세페이지에 주소를 좌표로 바꾸어 표시하기 위해 카카오맵을 사용하기로 했다.글이 길어질 것 같아서 두개로 나누어 작성했고, 이번 게시글에서는 카카오맵 api 키 받고 활성화하는 방법을 정리해보려고 한다.카카오맵 api 시작하기기본적으로 카카오맵 api 가이드에 잘 나와있긴 하다.1. 개발자 등록 및 앱 생성먼저 Kakao Developers에 회원가입해서 개발자 등록을 한다. 그 후 상단에 '내 애플리케이션'에 들어가 '애플리케이션 추가하기'를 클릭한다.클릭 후 적당한 정보를 입력하고 저장한다.등록한 애플리케이션에 들어가면 왼쪽 사이드바에서 '앱 키'를 누르면 발급된 키를 확인할 수 있다.'앱 키' 아래에 '플랫폼'에 들어가면 사이트 도메인을 추가할 수 있다.개발 환경에서 사용할 경우 'http:/..

※ 본 내용은 코어 자바스크립트 (정재남)의 내용을 정리한 글입니다. 앞서 정리한 프로토타입 기반 객체 지향 언어인 JS에 대해 이어서 이야기해보자. 01 프로토타입 개념프로토타입(prototype)은 단어 그 자체처럼 원형, 원조로 생각하면 된다. 상속된다는 느낌보다 대를 잇는 느낌으로 보면 된다. 01-1 Constructor, Instance, Prototype프로토타입을 이해할 때 중요한 개념은 생성자(constructor) 함수, 프로토타입(prototype), 인스턴스(instance)와 `__proto__`이다. '코어 자바스크립트'에서는 아래 삼각형으로 그 관계를 설명하고 있다.  JS의 함수는 본래 prototype 속성을 가지고 있고, new 키워드를 통해 생성된 인스턴스는 `__pro..

인공지능에 대한 관심이 커지면서 파이썬 사용이 늘어났다. 그러면서 많이 들었던 말 중 하나로 '파이썬은 객체 지향 언어'가 있다. 파이썬 외에도 Java, C++ 등도 객체 지향 언어이고, 웹 개발에 많이 쓰이는 JavaScript도 객체 지향 언어이다. 그런데 파이썬, Java, C++과 JS은 완전히 같은 객체 지향 언어는 아니다. 먼저 JS는 프로토타입 기반이고 파이썬, Java, C++은 클래스 기반 객체 지향 언어(Object-Oriented Programming, OOP)이다. 01 객체 지향 프로그래밍 (OOP) vs. 절차 지향 프로그래밍 (Procedural Programming)객체 지향 프로그래밍은 프로그램이 해결해야할 문제를 작은 부분들로 나누고, 각 부분을 데이터(속성)와 그 데이..

※ 본 내용은 코어 자바스크립트 (정재남)의 내용을 정리한 글입니다. 01 클로저 Closure 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이라고 한다. 그 때문인지 여러 책에서 클로저를 다양하게 정의/설명하고 있다. 참고하고 있는 '코어 자바스크립트' 교재에서 다른 클로저의 정의/설명을 소개해주었는데, 한 번 클로저 내용을 다 읽은 후 다시 살펴보니 모두 이해가 되는 글들이었다. 교재에서는 MDN에서 내린 클로저의 정의를 소개했다. A closure is the combination of a function and the lexical environment within which that function was declared. 직접 MDN closures 문서를 확인해보니, 수정되..

※ 본 내용은 코어 자바스크립트 (정재남)의 내용을 정리한 글입니다. JS를 공부하다보면 많이들 혼란스러워하는 개념 중 하나로 `this`가 있다. this는 상황에 따라 가리키는 대상이 달라져 매우 혼란스럽기 때문이다. 이에 대해서 정리해보려고 한다. 01 상황에 따라 달라지는 this실행 컨텍스트가 생성될 때 VariableEnvironment와 LexicalEnvironment가 생성되며 하나의 일을 더 한다. 그것이 바로 thisBinding이다. this가 가리키는 대상을 결정해준다. this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하냐에 따라 값이 달라진다. 01-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 즉 브라우저에서 실행하면 window, ..