전체 글
HTML안에 JS파일 불러오는 위치: async, defer
브라우저가 HTML을 해석하는 과정 Loading: 불러오기 Parsing: HTML을 분석하고 DOM 트리를 만들어서 데이터를 자료 구조화한다. → 렌더링 트리 만들기 CSS 스타일 결정 Layout: 렌더링 트리가 생성될 때, 각 (Render)객체가 위치와 크기를 갖게 된다. Painting: 렌더링 트리를 탐색하면서 메모리 공간에 RGB 값을 채워간다. HTML안에 JS파일 불러오는 위치 어디서 불러오냐에 따라 스크립트 실행 순서와 브라우저 렌더링에 영향을 미칠 수 있다. 1. Parsing → 어 자바스크립트네? parsing을 멈춤 → 필요한 자바스크립트 다운/실행 → 마저 Parsing 🚨 문제점: 자바스크립트 파일이 클 경우 사용자가 오랫동안 완성되지 못한 화면을 볼 수있다. 2. 앞에서 ..
API (애플리케이션 프로그래밍 인터페이스)란?
API API는 애플리케이션 소프트웨어를 구축하고 통합하기 위한 정의 및 프로토콜 세트로 애플리케이션 프로그래밍 인터페이스(Application Programming Interace)를 나타낸다. API를 사용하면 구현 방식을 알지 못해도 제품 또는 서비스가 서로 커뮤니케이션할 수 있으며 애플리케이션 개발을 간소화하여 시간과 비용을 절약할 수 있다. 레스토랑에 비유하자면, 손님에게 메뉴를 알려주고 주문받은 요리를 주방에 요청하고, 주방에서 완성된 요리를 다시 손님에게 전달하는 것이 API의 역할이다. API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)을 전달한다. 쉽게 말해 프로그램들이 서로 상호..
Font awesome
font-awesome.min.css font awesome의 링크를 문서의 내부에 명시해주고 원하는 아이콘을 가져와 쓸 수 있다. v4 v5 https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css *동일한 버전의 icon만 불러올 수 있는 것 같다. 🔗 출처/참고 font awsome
Bootstrap 시작하기
출처: Bootstrap 공식문서 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr CSS 불러오기 맨 위에 스타일 시트를 붙여준다. (v5.1) Bootstrap.css를 불러오고 해당 파일에 정의된 버튼, 레이아웃 등을 가져와서 사용할 수 있다. JS 불러오기 컴포넌트들을 작동시키려면 Javascript 플러그인과 Popper가 필요하다. 개별 분리된 스크립트를 사용할 경우 Popper가 먼저 선언되고 다음에 Javascript 플러그인을 넣어주어야 한다. (의존성) 레이아웃 화면 사이즈 표현 768px 보다 작을 때 col-xs- 768px 보다 클 때 col-sm..
컴포넌트 등록과 props 속성
컴포넌트 등록 Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이다. 기본적으로 컴포넌트의 보이는 부분을 표시할 때에는 template을 이용해서 작성해주면 된다. // todo-item 이름을 가진 컴포넌트를 정의 Vue.component('todo-item', { template: '할일 항목 하나입니다.' }) var app = new Vue(...) 하지만 이러한 컴포넌트 등록은 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링할 뿐, 부모 영역의 데이터를 자식 컴포넌트에게 전달할 수 있어야 한다. Props 전달 v-bind 를 사용하여 각각의 반복되는 컴포넌트를 전달할 수 있다. v-bind:프롭스 속성이름="상위 컴포넌트의 데이터" 👉 "이 요소의 title 속성을 Vue 인스턴스..
Vue.js 시작하기
Vue.js 란? 작은 화면단 라이브러리 역할부터 큰 규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프론트엔드 프레임워크이다. 명시적 렌더링(코어 라이브러리) → 컴포넌트 기반 → 클라이언트 사이드 라우팅(프레임워크 기능) → 상태관리 시작하기 문서에 vue 스크립트를 가져올 때 개발버전으로 가져와서 수정을 하며 배포할 때에는 상용버전으로 사용한다. 개발버전에서는 크롬 확장팩을 통해 데이터 수정이 가능하지만, 상용버전은 수정이 불가능하다. Vue.js 공식 문서 선언적 렌더링 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다. {{ str }} React와 다른점은 데이터와 DOM이 연결되어 업데이트 변경된 값에 따라 업데이트가 되는 것을 볼 수..