🗂 WIL

추상화란..

:) 지난 스터디에서 내가 정리한 아티클을 공유하고, 정X님이 '추상화란 무엇인가?' 에 대한 질문에 명확하게 답변을 말하지 못했었다.. ~이지 않을까요? 정도로 마무리를 했었는데 찾다보니 이 부분도 스포티파이 블로그에 이미 관련한 글이 있어서 이번주는 추상화 관련해서 정리하고자 한다! 😊 Abstraction - 더 복잡한 개념을 간단하게 만든 버전을 의미 - 복잡한 세부사항을 숨기고, 사용자가 더 쉽게 이해하고 사용할 수 있도록 시스템을 단순화하는 과정 - FE 개발에서의 추상화 개념 1. 낮은 수준의 추상화 : 개발자가 HTML, CSS 코드에 직접 접근하고 조작. 예를 들어, 웹 페이지의 특정 버튼에 스타일을 적용하고자 할 때, 개발자는 직접 해당 HTML 요소를 찾고, CSS를 사용하여 스타일(..

디자인 시스템의 여러 계층 추상화

글을 정리하기 앞서:) 새로운 스터디로 일주일에 한개씩 관심있게 읽은 아티클을 블로그에 정리 후 스터디에 공유하는 방향으로 진행하게 되었습니다. 예전에는 읽은 것들은 잘 정리하진 못했지만, 잘 정리하기위해 시간을 투자하면서 블로그에 글을 정리하곤 했었는데요, 어느순간부터 다음에 정리하지~ 가 반복되더니..1년이 흘렀네요. 오랜만에 업뎃하는 블로그 글의 시작을 무엇으로 할지 고민하다가 🤔 저의 관심 키워드 중 하나인 DS 관련해서 재미있게 읽었던 글을 짧게 정리 해보았습니다. 😊 https://engineering.atspotify.com/2023/05/multiple-layers-of-abstraction-in-design-systems/ Multiple Layers of Abstraction in De..

ElementRef

import { useRef } from "react"; const Component = () => { const buttonRef = useRef(null); return Hello; }; 항상 써왔던 방식은 ref 에 호버해서 해당하는 프로퍼티를 확인하는 방식이였다. ElementRef ElementRef 를 사용하면 조금 더 쉽게 사용할 수 있다고 한다. 👍 import { useRef, ElementRef } from "react"; const Component = () => { const buttonRef = useRef(null); return Hello; }; typeof 도 사용가능! 이미 이전 버전을 사용하고 있다면 굳이 ElementRef 로 변경할 필요는 없다! https://www...

Apollo Client - Fetching

✔️ Apollo Client GraphQL로 로컬 데이터와 원격 데이터를 모두 관리할 수 있는 JavaScript용 상태 관리 라이브러리 ✔️ Fetching 1. useQuery 서버에서 데이터를 가져올 때 사용한다. (변경 X) 서버에서 데이터를 가져올 때 자동으로 캐시함. ⚙️ Updating cached query results 1. Polling : 지정한 시간으로 주기적으로 쿼리를 다시 실행해서, 서버 데이터를 다시 가져옴. 2. Refetching : user action을 통해서 다시 가져오는 방법. (ex. button) polling, refetching 을 할 때는 데이터를 fetching 하고 있다는 것을 알 수 없는데, notifyOnNetworkStatusChange : tru..

GraphQL

1. GraphQL 이란? API 를 위해 만든 쿼리 언어 Rest API 는 각각 리소스에 해당하는 엔드포인트를 이용해서 가져온다면, GraphQL 은 엔드포인트가 한개다! 하나의 엔드포인트를 이용해서 쿼리를 통해서 데이터를 서버에 요청하게 된다! const GET_DATA = gql` query getData(dataId: ID!) { data(id: $dataId) { id title author { id name photo } } } `; 2. 순서 1. 클라이언트에서 데이터를 가져오기 위해 GraphQl 서버에 쿼리를 전송한다. (POST or GET) 2. 서버에서 클라이언트로부터 요청을 받으면 GraphQL 쿼리로 문자열을 추출한다. => 만약 요청하는 데이터가 스키마에 정의되어 있지 않거나..

🕸 NVM 사용 방법 (mac)

🕸 NVM ? 팀 프로젝트를 진행할때는 사용해본 적이 없어서 이번에 처음 알게 되었다. nvm은 Node 버전을 관리하는 도구인데, 다양한 프로젝트를 진행해야 할 때는 라이브러리, 개발툴의 버전 호환 문제가 발생하기 때문에 다양한 Node 버전을 설치하기 위해 NVM 을 사용한다고 한다! (⚠️ 터미널 커스텀 변경 중에 오류가 발생하여..터미널이...매우 상태가 좋지않은..상황입니다...) 🚀 설치 및 프로젝트에 적용 해보자! 1. homebrew 를 사용하여 nvm 설치 brew install nvm 2. zshrc 를 사용하고 있기 때문에, 해당 스크립트를 열어서 코드를 추가하자! code ~/.zshrc 3. 변경된 zshrc 스크립트를 실행시킨다! source ~/.zshrc 4. nvm -v 명..

클로저와 useState

1. 클로저란? 클로저는 중첩 함수에서 내부 함수가 외부 함수의 내부 변수를 참조할 수 있는 현상이다! nayeon1을 호출하게 되면 nayeon1 실행 컨텍스트가 생성되어서 콜 스택에 담기고, nayeon1 실행 컨텍스트에서 제거되면, y에 대한 정보는 없는 것이 아닐까? (전역 실행컨텍스트는 제거 X) 그런데, 이런 현상은 왜 일어날까 ? 스코프, 그중에서도 스코프 체인, 렉시컬 스코프, 실행 컨텍스트의 렉시컬 환경을 하나씩 이해하고 나니, 클로저에 대해 조금은 이해하고 있구나..를 느낄 수 있었다. 하나씩 정리해보자. 1-1. 스코프 스코프는 어떤 변수들에 접근할 수 있는 유효 범위다. 간단한 예시 코드를 작성해보았다. 변수 x는 전역 변수이기 때문에 nayeon1 함수와 내부 함수인 nayeon2..

sessionStorage is not defined?

Next.js 에서 PrivateRoute 구현 중에 발생한 문제다. sessionStorage 오타인 줄 알고 다시 입력했지만 똑같은 문제가 발생했다. 😅 문제 발생 이유 다행히 공식 문서에 자세히 설명되어 있다! Next.js 는 client-side Rendering 하기 전에 server-side Rendering을 하기 때문에, server에서는 sessionStorage에 접근할 수 없기 때문이다! 해결 방법 1. window 객체가 존재할 때 => sessionStorage에 접근하면 정상적으로 동작된다! 2. useEffect를 사용하자. => useEffect는 CSR에서 동작하기 때문! if (typeof window !== 'undefined') { const accessToken =..