joycie416 님의 블로그

[JS] 프로토타입 Prototype

※ 본 내용은 코어 자바스크립트 (정재남)의 내용을 정리한 글입니다. 앞서 정리한 프로토타입 기반 객체 지향 언어인 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는 지원..

병원카드에 좋아요 기능을 추가했다. 실시간으로 하트를 누르면 업데이트 되도록하고 싶어서 일단 useState의 초기값을 likes 목록에 존재하는지 여부로 정한 후, 클릭하면 반대로 바뀌도록 했다. TanStack Query로 낙관적 업데이트할 수 있기 때문에 적용해보기로 했다. 낙관적 업에이트는 실제 데이터 업데이트가 느릴 수 있기 때문에, 그 간극을 줄이기 위해 성공할 것이라고 가정하고 변화를 주는 것이다. 이를 통해 사용자 경험을 향상시킬 수 있다. 1. `useMutation()``useMutation`는 하나의 parameter에 여러 옵션을 넣을 수 있는데, 이를 활용하면 낙관적 업데이트를 적용할 수 있다. 그 중 오늘 사용할 옵션들은 `mutationFn`, `onMutate`, `onErr..

1. Transition위 이미지의 tooltip, 즉 까만창이 파란색 버튼을 누르면 보였다 사라졌다 하게 만들고 싶었다. 이를 Tailwindcss로 구현하려면 어떻게 하면 될까? 이때는 `trasition`과 `duration`으로 위 효과를 나타내는 방법을 정리해보려고 한다. 위 컴포넌트 내용은 아래와 같다. `isVisible`에 따라 투명도를 조절하려고 한다.const InfoTag = ({ isVisible }: { isVisible: boolean }) => { return ( 도로명 주소를 입력해 주세요. ex. 서울특별시 중구 중림로 37 (중림동) );}; 그러면 transition은 내용의 가장 상위 컴포넌트에 적용해 하위 ..

한 페이지에 여러 데이터를 불러오게 되면 `useQuery'를 불러오는 데이터 개수만큼 사용해야 한다. 하지만 여러 데이터를 불러올수록 비슷한 코드가 여러 번 작성되고, 가독성도 떨어지는 단점이 생긴다. 이를 방지하기 위해 tanStack Query를 이용해 custom hook을 만들 수 있다. 사용자와 사용자가 등록한 아이 정보가 있다고 가정하겠다. 1. Custom Hook 만들기Custom hook을 만드는 과정은 굉장히 쉽다. 우리가 컴포넌트 내부에서 쓰던 것처럼 사용하면 된다. 예를 들어 supabase 서버에서 로그인 정보를 가져오는 코드를 살펴보자.// Schedule.tsx"use client";import { useChildrenQuery, useUserQuery } from "@/ap..

프로젝트를 진행할 때 자주 사용하게 되는 색들이 있다. 그것들을 항상 헥사코드를 찾아서 작성하기에는 너무 힘들다. 따라서 tailwind css에서는 기본으로 주어진 색상처럼 사용할 수 있도록 커스터마이징할 수 있는 기능을 지원한다. 먼저 `tailwind.config.ts` 파일에 들어가보자. 그러면 얼추 아래와 같은 세팅이 작성되어 있다. (나는 create-next-app을 통해 Next.js의 App router를 사용하고 tailwind를 사용한다고 설정했으므로 자동으로 content를 작성해주었다.)import type { Config } from "tailwindcss";const config: Config = { darkMode: ["class"], content: [ "./src..