![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/WV55s/btsF2DXqGeS/ryvkYXC6HvuobdAycHP9fk/img.png)
React Query란? React application의 데이터를 가져오기(fetching)위한 라이브러리 기능 캐싱(특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것) client 데이터와 server 데이터 간의 분리 백그라운드에서 오래된 데이터 업데이트 데이터가 얼마나 오래되었는지 알 수 있음 데이터 업데이트를 가능한 빠르게 반영 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화 서버 상태의 메모리 및 가비지 수집 관리 구조 공유를 사용하여 쿼리 결과를 메모화 1. 설치 npm i @tanstack/react-query # or pnpm add @tanstack/react-query # or yarn add @tanstack/react-query 개발자도구: Re..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cypDIg/btsEj69vljG/6HJj9keWPdDmMYl9pSkIAk/img.png)
❓ TCP/IP vs OSI 모델 OSI 모델: 표준 프로토콜을 사용하여 다양한 통신 시스템이 통신할 수 있도록 국제표준화기구에서 만든 개념 모델이다. OSI는 상이한 컴퓨터 시스템이 서로 통신할 수 있는 표준을 제공한다. TCP/IP 모델: 인터넷에서 컴퓨터들이 서로 정보를 주고 받는데 쓰이는 프로토콜의 집합. 인터넷 프로토콜 스위트 (Internet Protocol Suite)라고도 부른다. TCP/IP와 OSI의 차이점은 실무와 이론의 차이이다. OSI 7계층은 참조 모델(reference model)로 사실상 이론적인 개념. 현재의 TCP/IP 계층이 더 실무적인 구조에 가깝다. TCP/IP는 실용적인 프로토콜 모음이고 OSI는 프로토콜 독립적인 개념 모델이다. 즉, OSI는 여러 통신 방식에 대..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/4R9MQ/btsDKRxnClq/1StAObSQeC2EXOj8qdlF10/img.png)
◼︎ 빅데이터 : 기존의 데이터 처리 응용에서는 다루기 어려운 크고 복잡한 데이터셋에 대하여 분석하고 정보를 찾아내는 분야 ◼︎ 데이터 분석(Data Analysis) : 데이터의 패턴을 파악해 의미를 도출하고 미래를 예측하여 유리한 의사결정을 하기 위한 일련의 과정 - 데이터(Data): 문자, 숫자, 소리, 영상 등의 형태로 된 의미 단위 - 모델링(modeling): 관찰한 데이터에 있는 패턴이나 관계를 수학적인 표현으로 재해석하여 수식으로 표현하는 작업 ◼︎ 데이터 분석 프로세스 분석 목표 설정 -> 데이터 수집 -> 데이터 가공 -> 데이터 분석(모델링) -> 데이터 시각화 ◼︎ 데이터 유형 형태에 따라 분류 - 정형 데이터: 미리 정해진 형식에 따라 구조화되어 있는 데이터 RDB(관계형데이터베..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/p5w2N/btsEtso0OAV/yA98V6kwWnHh2ALMOipOEK/img.png)
▶︎ API(Application Programming Interface) 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어에서 제공하는 기능을 제어할 수 있게 해주는 인터페이스 애플리케이션 간에 지정된 형식으로 요청과 응답을 할 수 있도록 연결하는 것 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙 응용프로그램에서 소통하기 위한 접점 ▶︎ 인터페이스 상호간에 소통을 위해 만들어진 접점. 사람과 사람, 사람과 사물 또는 기기를 연결하는 것. 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템. 예시) 키보드(사람-컴퓨터), 차키(사람-자동차), 배달 어플(사람-어플) ▷ UI(User Interface) 사용자가 소통하기 위한 접점. 사람(사용자)과 사물 또는 시스템, 기계, 컴퓨..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/RdXub/btsC4qVAysQ/UU7a9E2LllFtHaF7a5yR5k/img.png)
총 6단계 HTML를 파싱 후, DOM트리 구축 CSS를 파싱 후, CSSOM트리 구축 JavaScript 실행 DOM과 CSSOM을 조합하여 렌더트리 구축 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout 단계) 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계) ▶︎ 브라우저의 주요 기능 : 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것 ▶︎ 랜더링 엔진 : 사용자가 선택한 콘텐츠를 표시해주는 소프트웨어 브라우저 렌더링 엔진 크롬 Blink 사파리 Webkit 파이어폭스 Gecko ▶︎ 파싱(Parsing) 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것 문서나 HTML 등 어떤 큰 자료에서 내가 원하는 정보..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dcXUuB/btsBOeVjfGp/jkHfgGpkVx9Psd8iGqHT7K/img.png)
추상 자료형 ADT(Abstract Data Type) - 기능의 구현 부분을 나타내지 않고 순수한 기능이 무엇인지 나열한 것 - 구현 방법을 명시하고 있지 않음. - 예로는 큐, 스택, 연결 리스트(트리) 가 있다. 큐(Queue) 선형(linear) 자료형. FIFO(First In First Out) : 먼저 집어넣은 데이터가 먼저 나온다. 데이터를 집어넣는 enqueue, 데이터를 추출하는 dequeue 등의 작업을 할 수 있다. 큐는 순서대로 처리해야 하는 작업을 임시로 저장해두는 버퍼(buffer)로서 많이 사용 class Queue { constructor() { this._arr = []; } enqueue(item) { this._arr.push(item); } dequeue() { re..
정의 배열의 각 요소에 대해 주어진 콜백 함수를 실행하여 하나의 값을 누적시키는 데 사용된다. 배열을 순회하면서 각 요소를 처리하고, 그 결과를 누적해 나가는데 유용합니다. 문법 array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue) ''' callback: 각 요소에 대해 실행할 함수로, 네 개의 매개변수를 받음 accumulator: 누적된 값으로, 각 요소를 처리하면서 업데이트 currentValue: 현재 처리 중인 배열 요소의 값 currentIndex: 현재 처리 중인 배열 요소의 인덱스 - optional array: reduce()를 호출한 배열 자체 - optional initialValue:..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ZC0xT/btsDh8TICKo/vyRlRsSpZb15uFgzmh3nZK/img.png)
Math.abs() 정의 주어진 숫자의 절대값 반환 예제 function difference(a, b) { return Math.abs(a - b); } console.log(difference(3, 5)); // 출력: 2 console.log(difference(5, 3)); // 출력: 2 Math.ceil() 정의 전달된 숫자를 소수점 아래로 버리고, 다음으로 큰 정수로 올림한 값을 반환 주어진 숫자보다 크거나 같은 가장 작은 정수 반환 예제 console.log(Math.ceil(4.2)); // 출력: 5 console.log(Math.ceil(7.8)); // 출력: 8 console.log(Math.ceil(-3.1)); // 출력: -3 Math.floor() 정의 주어진 숫자의 소수점..
- Total
- Today
- Yesterday
- Firebase
- style-lint
- pagination
- Tanstack Query
- State
- 빅데이터
- 핀터레스트
- zustand
- github
- 네트워크
- sass
- 졸업프로젝트
- Masonry 레이아웃
- 프로토콜
- eslint
- web
- Network
- git
- 상태관리
- prettier
- 캡스톤디자인
- react-query
- Next.js
- React Query
- 무한스크롤
- Micorosoft
- AI Challeng for Biodiversity
- react
- 이브와ICT멘토링
- Tanstack-Query
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |