joycie416 님의 블로그

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. 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, ..

Zustand 공식 문서를 확인하면 Next.js와 같이 사용하는 방법에 대해 별도로 안내하고 있다. 이를 확인하면 React의 Context API와 함께 사용하라고 하는데, 그 이유가 무엇일까? 이에 대해 정리한 후, 실제 사용방법에 대해 정리하려고 한다. 1. Next.js의 SSR과 zustand storeNext.js는 서버와 클라이언트 측에서 모두 실행되므로, 전역 변수의 동작이 zustand의 가정과 다르다. 즉 zustand는 하나의 store에서 모든 상태를 관리하지만, Next.js는 서버와 클라이언트 상태가 분리될 수 있다는 것이다. 그래서 Next.js 서버의 상태를 클라이언트와 공유하기 위해서 별도의 과정이 필요하다. 이때 아래 상황들을 고려해야 한다. 1. Per-request ..

따꼼 프로젝트를 진행하며 Next.js 14의 App Router를 사용했다. 검색어를 입력하고 검색 버튼을 누르면 쿼리스트링에 검색어를 저장해 검색결과를 보여주는 컴포넌트에서 쿼리스트링을 통해 검색 결과를 보여주도록 했다. 그런데 사용자 테스트를 받아보니 검색결과를 보여주기까지 로딩이 너무 오래 걸린다는 답변을 많이 받았고, 나도 잘 인지하고 있는 부분이었다. Next.js App Router는 `next/navigation`에서 `useRouter`를 통해 검색 버튼을 눌렀을 때 페이지 이동을 하도록 했다. 그런데 `router.push()`는 페이지 전체를 처음부터 렌더링하는 것이므로 속도가 너무 느렸다. (Pages Router는 shallow routing을 지원하지만 App Router는 지원..