보호되어 있는 글입니다.
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cYGOmd/btsF2OLui11/Wj74bk0u8Dktk1fGwgZJV1/img.png)
*️⃣ Routing App router 방식은 파일시스템 베이스 방식으로 라우팅이 작동된다. 즉, 폴더와 파일로 라우팅을 구성하는 것이다. 기본적인 Next.js의 Routing Conventions(관례)이 있다. 모든 라우팅은 app 폴더 안에 있어야 한다. 라우팅이 매치되는 파일이름은 page.js(pages.tsx) 등 "page"라는 이름이어야 한다. 폴더 이름이 브라우저에서 보이는 URL의 path가 된다. *️⃣ 주소의 최상단 페이지 가장 처음 접하는 주소는 바로 '/'이다. Next.js에서는 app 폴더 바로 밑에 있는 page.tsx 파일이 '/' 주소에 해당한다. 'src/app/page.js' 여기서 app 폴더 바로 밑에 있는 page.js는 바로 브라우저의 최상위 주소인 '/'..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bgLVHK/btsF2MzUYDi/KmiCje85WOeifXB0Josv2k/img.png)
✪ 상태 - 어떠한 의미를 지닌 값 - 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 - 웹 애플리케이션을 구성하는 변경될 수 있는 데이터 ✪ 웹에서의 상태 ✧ UI: 상호 작용이 가능한 모든 요소의 현재 값은 상태이다. 예) 다크/라이트 모드, 각종 input, 알림창의 노출 여부 등 ✧ URL: 브라우저에서 관리되고 있는 상태값. 상태는 사용자의 라우팅에 따라 변경됨. 예) https://www.airbnb.co.kr/rooms/2024?adults=2 ➔ 상태: roomId=2024, adults=2 ✧ 폼(form): 로딩 중인지(loading), 현재 제출됐는지(submit), 접근이 불가능한지(disabled), 값이 유효한지(validation) 등 모두가 상태로 관리된다. ✧..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/wgyrz/btsF2GGC7fT/77ceGPvhrftGal9T7sKa71/img.gif)
*️⃣ Static Test 정적 테스트란 코드를 실행시키지 않고 테스트를 하는 것을 의미한다. ✧ Typescript TypeScript는 정적 타입 검사를 제공하여 코드의 안전성을 높이고 개발자가 코드를 더욱 안정적으로 유지할 수 있다. ✧ ESLint ESLint는 코드 스타일 및 일반적인 프로그래밍 오류를 검사하여 코드의 일관성과 품질을 향상시킨다. *️⃣ Unit Test 단위 테스트는 프로그래밍을 할 때 소스코드의 특정 모듈(메서드)이 의도된 대로 정확히 작동하는지 검증하는 절차이다. 툴: Jest, Jasmine, Karma, Mocha ✧ Jest Jest는 코드가 제대로 동작하는 지 확인하는 test case 를 만드는 테스팅 프레임워크 - 기능 - 사용법 jest docs:http..
![](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/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
- 상태관리
- Tanstack Query
- eslint
- web
- 무한스크롤
- Micorosoft
- Firebase
- react
- 캡스톤디자인
- prettier
- github
- Masonry 레이아웃
- 빅데이터
- 이브와ICT멘토링
- 졸업프로젝트
- React Query
- State
- 네트워크
- Next.js
- Network
- Tanstack-Query
- pagination
- zustand
- 프로토콜
- sass
- style-lint
- git
- AI Challeng for Biodiversity
- react-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 |