분류 전체보기(343)
-
React Query
https://youtu.be/n-ddI9Lt7Xs?si=h-HGi7XTRU2qcM8I 기존상태 관리 라이브러리는 비동기 및 서버 상태 관리에 적합하지 않습니다. 서버상태란?클라이언트에서 제어하지않거나 소유하지 않은 위치에서 관리됩니다.feching 및 updating을 위해 비동기 API 가 필요합니다.소유권이 공유되므로 사용자가 모르는 사이에 다른 사용자가 변경할 수 있습니다.주의하지 않으면 애플리케이션에서 "out of date" 상태가 될 수 있습니다. 서버상태에서 생기는 문제캐싱같은 데이터 요청 중복 제거언제 "out of date" 되는지 알아내기out of date된 데이터 백그라운드에서 업데이트최대한 빠르게 업데이트 반영하기pagination,lazy loading 등 성능 최적화서버 ..
2024.05.09 -
React의 가상돔
우선 가상돔(Virtual DOM)을 알아보기 전에 DOM을 알아봅시다.DOM은 Document Object Model입니다.웹페이지의 버튼 글 등등 하나하나의 요소들을 elements라고 부르고이 모든 것을 담고 있는 웹페이지를 Document라고 합니다. DOM은 이 정도 설명이면 적당하고 Virtual DOM에 대해서 알아봅시다.React는 가상돔이라는 것을 사용해서 실제돔을 실제 돔을 조작하는 일을 엄청 빠르게 해줍니다.가상돔은 실제돔의 복제본이라고도 합니다. 가상돔은 실제돔과는 다르게 브라우저에 있는 직접적으로 접근을 할 수 없습니다.그런데 왜 굳이 복사본을 만들어서 가상돔을 사용하는 것일까 실제 돔조작은 브라우저가 현제 페이지를 전부 탐색해서 해당 elements를 찾고 해당 elements와..
2024.05.02 -
컴포넌트
https://www.youtube.com/watch?v=2C1tXVHu9XQ 컴포넌트는 간단하게 말해서 전체의 부분입니다.예를 들어 덩어리가 있다고 할때 덩어리의 단점은 반복할수없고 재사용도 불가능하고규모가 큰 설계를 하지못합니다.이 덩어리를 잘개 나누어 부분으로 나누어 설계한다면 각 부분을 독립적으로 구현함으로써효율적인 설계가 가능합니다. 프론트엔드에서 컴포넌트란프론트엔드에서 컴포넌트라는 개념이 익숙해진지는 그렇게 오래되지 않았습니다.과거의 웹 사이트는 HTML페이지만으로 구성되었습니다.유저의 액션에 대해 매번 새로운 HTML페이지를 서버에서 내려주어야 했습니다.페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 한다는 점에서 굉장히 비효율적이였습니다.과거의 웹 1990년대 네이버 메인 ..
2024.04.29 -
타입스크립트 쓰는 이유 + 간단한 문법
https://www.youtube.com/watch?v=xkpcNolC270 타입스크립트란 자바스크립트 대용품과같은언어라고 볼수있다. 다른 언어는 아니고 자바스크립트문법을 이용가는한데 타입부분을 업그레이드해서 사용할수 있습니다. 큰 프로젝트를 다루고 있는 곳이라면 모두 타입 스크립트를 사용하고 있습니다. 5 - '3' : 원래는 숫자-숫자만 가능하지만 자바스크립트는 Dynamic Typing 가능해서 JS가 알아서 숫자로 바꿔줍니다 또 다른 이유는 타입스크립트는 에러메세지 퀄리티가 좋습니다 타입스크립트는 코드에디터 부가기능 역할로 봐도 좋습니다. Typescript 설치 1. nodejs 설치(최신버전) 2. VScode 에디터 준비 3. 터미널 오픈후 npm install -g typescript 4..
2024.04.22 -
JavaScript Immutability
https://youtu.be/iJcSFzR9s8Y?si=hAIWYC3i5atuNyRm JavaScript에서의 불변성(Immutability) JavaScript의 세계는 변화가 끊임없이 일어나는 곳입니다. 하지만 이 변화 속에서도 변하지 않는 것, 즉 불변함(Immutability)의 가치를 이해하는 것이 중요합니다. 이 글에서는 JavaScript에서 불변성을 유지하는 방법과 그 중요성에 대해 알아보겠습니다. 변화와 불변성의 개념 mutate(변화): 정보의 원본이 변경될 수 있다는 의미입니다. mutable(변화 가능한): 변화가 가능함을 나타내는 형용사입니다. immutability(불변성): 데이터의 원본이 훼손되지 않음을 의미합니다. 즉, 정보의 원본이 변화하지 않도록 하는 것입니다. 정보 ..
2024.04.15 -
인치의 불변성
https://youtu.be/eV4Yzssr9MA?si=Cn55ZEwDshidJUpq 인치의 불변성 불변성은 '변하지 아니하는 성질' 이라는 사전적 의미를 가지고 있습니다. 말그대로 바뀌지 않는다는 뜻이며 이개념은 함수형 프로그래밍 에서 중요하게 여겨지는 개념 중 하나입니다. 이런 함수형 프로그래밍 방식을 지향하는 자바스크립트에서도 불변성은 아주 중요한 개념입니다. 자바스크립트에서 원시타입은 불변하고, 참조타입(객체)은 가변적 입니다. 여기 코드를 볼때 a라는 이름을 가진 변수에 숫자1을 할당했습니다. 이때 a는 원시타입중 하나인 넘버타입임을 확인할수 있습니다. 이번에 기존에 1이라는 값에 할당한 변수a에 2라는 값을 재할당 해줍니다. 그리고 a라는 변수는 정상적으로 2로 바뀐것으로 알수 있..
2024.04.15