반응형 IT151 [Vue.js 시작하기] 03. 컴포넌트 캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다. 3. 컴포넌트 현재 대부분의 프레임워크는 컴포넌트 기반으로 개발을 하고 있다. 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 기본적으로 컴포넌트를 등록할 경우 root 컴포넌트로 할당된다. // Vue.component('컴포넌트 이름', 컴포넌트 내용); 전역등록 // 플러그나 라이브러리 등 전역으로 사용해야 하는 것 등록. 어떤 인스턴스든 사용가능하다. Vue.component('app-header', { template: 'Header' }); // instance는 root 컴포넌트가 된다. 아래와 같은 방식이.. 2022. 4. 24. [Vue.js 시작하기] 02. 인스턴스 캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다. 2. 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드 Vue의 인스턴스를 확인하면, Vue에서 제공하는 API와 속성을 알 수 있다. new Vue를 통해 만들어지 인스턴스에 element를 할당해 주어야만 Vue가 제공하는 나머지 속성들을 이용할 수 있다. 기본적으로 new Vue를 통해 사용할 수 있는 options new Vue({ el: , template: , data: , methods: , created: , watch: , }); new Vue를 통해 인스턴스 객체를 만들 수 있다. el(element) 속성을 통해 와 연결한다. Vue의 data 속성을 통해 message 라는 변수에 'hi'라는 문자열.. 2022. 4. 24. [Vue.js 시작하기] 01. Vue.js 특징 캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다. Vue는 무엇인가? MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 Vue의 2가지 특징 DOM Listeners View 라고 하는 것은 browser에서 사용자에게 비추어 지는 화면을 의미한다. 화면에 나타나는 요소들을 html이라고 하며, 그 html은 DOM이라는 것들을 이용해서 JS로 조작할 수 있게끔 구성이 된다.Vue에서는 그런 이벤트를 잡아서 JS에 있는 Data를 바꾸어 주거나, JS의 지정된 특정 로직에서 실행을 하게 되는데, 이것을 DOM Listener라고 한다. View에서 특정 사용자가 키보드 또는 마우스 등을 조작을 통해 이벤트를 중간의 DOM Listeners로 v.. 2022. 4. 24. 즉시 실행 함수(IIFE) 즉시 실행 함수 자바스크립트에는 특이한 함수 형태들이 존재하는 데, 그중 하나가 즉시 실행 함수라는 것이다. 자바스크립트의 다양한 함수 형태 중 즉시 실행 함수라는 것이 존재한다. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 의미 그대로 정의와 함께 즉시 실행되는 자바스크립트 함수를 의미한다. 📌 즉시 실행 함수의 특징 즉시 실행 함수는 단 한 번만 호출되어 다시 호출할 수 없다. // 익명 즉시 실행 함수 (function () { statements }()); 즉시 실행 함수는 보통 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다. 함수 이름이 있는 기명 즉시 실행 함수 또한 존재하지만, 그룹 연산자 (...) 내의 기명 함수는 함수 .. 2022. 4. 24. SCSS(SASS) vs CSS SCSS 📌 CSS의 한계 선택자(Selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정 변경해야 한다. 📌 SCSS(SASS)의 장, 단점 선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용을 현저하게 줄일 수 있다. 변수(Variable)를 사용해서 CSS 속성과 값을 일원화된 관리가 가능하다. 프로그래밍 언어에서 사용하는 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능하다. SCSS(SASS)는 CSS로 컴파일(Complie) 거쳐야 하는 번거로움이 있다. 하지만 거의 유일한 단점인 컴파일을 거쳐야 하는 문제점을 extension으로 쉽게 해결할 수 있다. 클래스.. 2022. 4. 23. Tailwind CSS Tailwind CSS 다양한 CSS 명명법이 있다는 것을 알지 못하고 있다 최근에, BEM 명명에 대해 알고 난 뒤 다른 CSS 스타일은 어떤 것들이 있는지 궁금해졌다. HTML, CSS, Vanilla JavaScript를 통해 다양한 시도를 해보던 중, 확실히 명확한 클래스명을 짓는다는 것이 조금 부담스럽기도 하였다. 그렇기 때문에 다른 CSS 라이브러리나, 스타일들에 관심이 생겼고 조금 더 용이하게 CSS 작업을 할 수 있는 것이 무엇인지 찾아보던 중, 예전에 이름만 들어보고, 요즘은 매우 핫한 Tailwind CSS를 사용해보고자 하였다. 사용함에 있어 Tailwind CSS에 대해 어떻게 사용하는지, 어떤 장점과 단점이 있는지 궁금해서 인터넷을 통해 관련된 내용들을 찾아보았다. 📌 Tailwi.. 2022. 4. 18. [Error] Parsing error: No Babel config file detected for _ Vue 학습을 위해 폴더 내에서 Vue 폴더를 생성 후, main.js에 들어가보니 Parsing error: No Babel config file detected for /Users/nyol/Desktop/_/Study/learn-vue-js-master/vue-cli/src/main.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. 와 같은 Parsing error가 발생하였다. 이것은 평소 사용하고 있던 VS code에서 프로젝트의 ESLint 설정 파일을 인식하는 부분에서 에러가 발생한 것으로 setting 파일에 "e.. 2022. 4. 13. [HTTP 웹 기본지식] 02. URI [HTTP 웹 기본 지식] 시리즈는 김영한 님의 [HTTP 웹 기본 지식] 강의 내용을 바탕으로 작성하였습니다. 실무 개발에 꼭 필요한 HTTP 핵심 내용을 학습하고, HTTP의 전체 흐름을 이해할 수 있습니다. 본 강의를 참고하시면 HTTP 이해에 더욱 도움이 되실 겁니다. 🙂 URI (Uniform Resource Identifier) 📌 URI란? 리소스를 식별하는 통합된 방법 URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다. Uniform: 리소스를 식별하는 통일된 방식 Resource: 자원, URI로 식별할 수 있는 모든 것(제한 없음) Identifier: 다른 항목과 구분하는데 필요한 정보 URL: Uniform Resource Locator 리소스가.. 2022. 4. 10. [HTTP 웹 기본 지식] 01. 인터넷 네트워크 [HTTP 웹 기본 지식] 시리즈는 김영한 님의 [HTTP 웹 기본 지식] 강의 내용을 바탕으로 작성하였습니다. 실무 개발에 꼭 필요한 HTTP 핵심 내용을 학습하고, HTTP의 전체 흐름을 이해할 수 있습니다. 본 강의를 참고하시면 HTTP 이해에 더욱 도움이 되실 겁니다. 🙂 인터넷 통신 📌 네트워크 인터페이스 계층 IP(Internet Protocol) 란? 인터넷 환경에서 통신 규약을 의미한다. 인터넷 프로토콜을 의미하며, 호스트 간의 통싱만을 담당한다. 지정된 IP 주소에 패킷(Packet)이라는 통신 단위로 데이터를 전달한다. 패킷이란? Package와 Bucket의 합성어로, 컴퓨터 간의 데이터를 주고받을 때 네트워크를 통해 흘러가는 작은 데이터 조각으로 IP 헤더를 추가하며 만들어진 것을 .. 2022. 4. 10. 이전 1 2 3 4 5 ··· 17 다음 728x90 반응형
