![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/LiDBF/btsGAXOmrWf/FSvEoIubJxVKw9vwDAQAR0/img.png)
*️⃣ 모듈 번들러 Module(분리된 코드 조각) + Bundler(묶는다) 모듈 번들러는 분리된 코드 조각들을 하나로 병합하는 개발 도구이다. 핵심 작업은 JS 파일, CSS 파일 등 여러 리소스를 하나로 결합하여 단일 파일을 만드는 것이다. 따라서 크롬과 같은 브라우저는 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게 된다. ℹ️ 모듈 번들러를 사용하는 이유 모든 브라우저가 모듈 시스템을 완전하게 지원하지 않는다. 코드의 종속성 관계를 관리하는데 도움이 되며 종속성 순서대로 모듈을 로드한다. 이미지 에셋, css 에셋 등 종속성 순서대로 에셋을 로드하는 데 도움이 된다. *️⃣ 모듈 번들러 역사와 설명 아래 글에 모듈 시스템에 대한 설명이 자세히 되어 있습니다. 참고하세요 https://y..
보호되어 있는 글입니다.
![](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/Jb81y/btsFUrpezOO/OftR9ryNUBYK4KYPlJI4AK/img.png)
1. 로그인, 회원가입 UI 구현 2. Firebase 연동 firebase 가입한 뒤, 프로젝트 생성해주고 기타 설정해준다. 자세한 설명은 docs 참고 //firebase.ts // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app'..
보호되어 있는 글입니다.
- Total
- Today
- Yesterday
- 무한스크롤
- React Query
- react-query
- AI Challeng for Biodiversity
- 이브와ICT멘토링
- react
- Micorosoft
- git
- 졸업프로젝트
- sass
- Next.js
- 핀터레스트
- prettier
- eslint
- Network
- Masonry 레이아웃
- Tanstack Query
- pagination
- Firebase
- 프로토콜
- 캡스톤디자인
- style-lint
- 상태관리
- 빅데이터
- zustand
- web
- 네트워크
- State
- Tanstack-Query
- github
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |