일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- api test
- csr
- 선택자
- caching
- typeScript
- QUIC
- CSS
- https
- aws
- vue3
- ViTE
- msw
- SSR
- svelte
- TLS
- CloudFlare
- ts error
- JavaScript
- vue-cli
- web vital
- Testing
- http3
- e2e
- vue
- rendering
- import.meta.env
- custom command
- 비동기
- Cypress
- devtools
- Today
- Total
목록분류 전체보기 (82)
Develop Note by J.S.
Cloudflare를 개인 사이트와 연결하는 방법입니다. 1. 가비아 도메인 구매 먼저 사용하기를 원하는 도메인을 입력하여 구매합니다. 2. Cloudflare 웹 사이트 등록 구매한 도메인을 Cloudflare의 웹 사이트 검색 란에 검색하여 추가합니다. 서브 도메인 형태(ex. http://2차주소.도메인주소)의 도메인은 등록할 수 없기에 무료 도메인 제공 사이트를 찾아보았으나 모두 서브 도메인 형태로만 무료 제공을 하여 가비아에서 결제 후 진행 하였습니다. 3. Cloudflare 개인 블로그 정보를 DNS 레코드 추가 웹 사이트 등록 후 해당 사이트 대시보드에서 DNS -> 레코드에 진입하면 레코드를 추가할 수 있습니다. 등록할 사이트의 서브 도메인, www 등의 이름과 IP를 등록합니다. 4. ..
CDN(Content Delivery Network)이란 지리적으로 서버가 분산이되어 웹 콘텐츠의 전송 속도를 높여 페이지 로딩속도를 향상시키는데 주목적을 두고 있습니다. 데이터 용량이 큰 Image, VOD 등 기타 파일들이 Caching되어 실제 물리적으로 가까운 서버에서 빠르게 가져올 수 있습니다. 예시로 온라인 영상 스트리밍 서비스 넷플릭스의 경우 자체 CDN을 구축하여 서비스를 제공하고 있습니다. 대표적인 CDN 클라우드 서비스는 AWS CloudFront와 Cloudflare가 있습니다. Cloudflare 전 세계 150대의 데이터 센터를 보유 Reverse Proxy 아키텍쳐로 데이터 관리 * 요청을 받는 서버(내부망) 앞단에 있는 Proxy 서버로 외부망에서 해당 서버로 접속 시 거치는 ..
HTTP는 HyperText Transfer Protocol 의 약자로 Web브라우저에서 사용하는 네트워크 통신 프로토콜입니다. HTTP는 현재 HTTP3 버전까지 나온 상태이며 각 버전별 특징을 간략하게 정리하였습니다. 우선 HTTP 버전설명 전에 TCP와 UDP의 차이점을 알아야 할 것 같습니다. TCP : OSI 4계층의 연결형 프로토콜로 신뢰성있는 데이터 통신이 가능하며, 에러 복구, 흐름제어 기능을 담당합니다. UDP : 같은 4계층의 비연결형 프로토콜로 순서가 보장되지 않고 흐름제어를 할 수 없지만, 속도가 빠르고 checkSum을 통해 최소한의 오류를 잡습니다. HTTP 1.1 (TCP) Connection 한개당 하나의 요청만 처리가 가능하여 요청/응답이 1:1 Sequence로 동작. H..
SPA(Single Page Application)로 개발을 하다보면 여러 조건들과 권한에 따라 로직을 구분해야하는 상황이 발생합니다. 성격이 다른 페이지들을 단일 Vue Instance에서 구현하다보면 물리적으로 분리를 시키는 것이 더 효율적일 때가 있습니다. 이때 다중 Instance를 생성하여 해결 할 수 있습니다. File 분리 Vue Instance를 생성할 파일의 경로를 분리하여 각각의 Instance를 생성합니다. // vueInstance1/main.ts import { router } from './router' import { createApp } from 'vue' import App from './App1.vue' const app = createApp(App); app.use(ro..
1. Prototype이란? Prototype은 Class가 없는 Javascript에서 객체 기반 프로그래밍을 구현할 수 있도록 객체의 원형을 뜻하는 prototype 객체를 뜻합니다. 기존의 객체를 복사하여 새로운 객체를 생성할 수 있으며 복사된 객체는 기존 객체의 원형인 proptotype 객체를 참조합니다. 참조된 prototype 객체는 __proto__ 프로퍼티에서 확인 할 수 있습니다. 2. 함수의 prototype 예를들어 test라는 이름의 함수를 정의하면 test의 prototype 속성은 javascript의 function기능이 제공하는 객체 원형인 prototype 객체를 참조합니다. 또한 함수를 정의하면 함수 객체로 표현할 수 있으며, 해당 함수 객체의 prototype 프로퍼티..
Props로 데이터를 하위컴포넌트에 전달할 때, 하위 Component -> 하위 Component .... 등 전달해야하는 end 컴포넌트까지의 루트가 복잡해지면 props전달이 반복되는 비효율적인 데이터 전달을 prop 드릴링이라고 합니다. vuex, pinia 등의 상태관리 라이브러리를 사용하여 해결 할 수도 있지만, 특정 범위내에서만 유효한 데이터 전송 루트가 필요할 경우 Provide(데이터 제공)/ Inject(데이터 주입)을 이용할 수 있습니다. // 제공 컴포넌트 // 주입 컴포넌트 {{ location }} 또한 컴포넌트의 트리가 깊고 넓을 때, 다수의 개발자가 참여한 대규모 앱 개발 시에는 일반적인 provide 키워드 사용으로 인한 충돌 가능성이 있습니다. 이때 Symbol()을 사용..
v-model은 컴포넌트 또는 Form 입력에서 데이터의 양방향 바인딩을 구현하기 위해 사용하는 디렉티브입니다. Form입력 1. input text // v-bind, event listener 사용 시 메세지: {{ text }} // v-model 사용으로 코드의 단순화 메세지: {{ text }} 2. checkbox // checkbox 단일 체크 {{ checked }} // boolean 값을 사용 // checkbox 다중 체크 체크된 이름: {{ checkedNames }} // Array 값을 사용 젝 존 3. radio button // radio Button 선택한 것: {{ picked }} 하나 둘 4. select // 단일 셀렉트 선택됨: {{ selected }} // 단일..
This란? Javascript의 this 키워드는 함수를 호출한 방법에 따라 this가 가리키는 객체가 변경됩니다. 일반적으로 this는 브라우저에서는 window 전역객체를 가리키고, Node에서는 global 전역객체를 가리킵니다. // 브라우저 this === window; // true // Node.js this === global; // true this 값 할당 전역 범위내에서의 this는 전역객체를 가리키는데 Custom한 객체 내의 프로퍼티 Value로 정의한 함수내에서의 this는 자신이 속한 Custom 객체를 가리킵니다. var Obj = { whatsThis : function () { return this; } } Obj.whatsThis() === Obj // true 또한 ..