보호되어 있는 글입니다.
![](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'..
보호되어 있는 글입니다.
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dy8MYZ/btsFA7eTmfb/eXrgIgaskoBuznq9E9dH2K/img.png)
1. Tim Berners-Lee HTTP를 개발한 영국의 컴퓨터 엔지니어로 하이퍼텍스트를 개발했으며, URL, HTTP, HTML을 설계했다. HTTP와 HTML, 하이퍼텍스트의 영향이 워낙에 강력하고 광범위해서 인터넷의 아버지라고 부른다. 2. HTTP HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다. 애플리케이션 레벨의 프로토콜로 TCP/IP위에서 작동한다. HTTP는 어떤 종류의 데이터든지 전송할 수 있도록 설계되어 있다. 이미지, 동영상, 오디오, 텍스트 문서 등 종류를 가리지 않고 전송할 수 있다.Transfer라는 해석 그대로 데이터를 전송하겠다라는 의미로 앞에 Hypertext 가 붙은 이유는 하..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nHhdx/btsFCxxefHq/Np6uMjo10sVttjCcc3u3MK/img.png)
1.1. 네트워크 표준화 ▷ 배경 정보통신기술은 자사의 모델을 중심으로한 통신 위주로 발전 -> 타사 제품 컴퓨터 간의 통신문제 대두 네트워크 사용의 효율성을 높이고 컴퓨터 네트워크 구조를 통일시키는 것이 필요했다. ▷ 1983년 ISO에서 OSI 모형을 제시 ISO (International Standardization Organization): 국제표준화기구 OSI (Open Systems Interconnection) 개방형 시스템간 상호접속: 서로 다른 통신 시스템간에 원활한 통신을 이루기 위해 ISO가 제안한 통신 H/W, S/W에 대한 표준안 1.2. 프로토콜 ▷ 통신에 참여하는 장치들(송신기, 수신기, 중간 노드들)이 효과적인 통신을 위해 지켜야 할 규칙 ▷ 통신 프로토콜 - 통신 원하는 두..
- Total
- Today
- Yesterday
- github
- Next.js
- git
- 빅데이터
- prettier
- 네트워크
- Tanstack Query
- 이브와ICT멘토링
- 핀터레스트
- sass
- Firebase
- 무한스크롤
- 상태관리
- zustand
- State
- React Query
- Micorosoft
- 졸업프로젝트
- react-query
- 캡스톤디자인
- AI Challeng for Biodiversity
- eslint
- react
- 프로토콜
- web
- style-lint
- pagination
- Network
- Masonry 레이아웃
- 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 |