본문 바로가기

What would life be If we had no courage to attemp anything?

전체 글271

Vue.js - Pass Props & Emit Events 🔔Pass Props & Emit Events |컴포넌트 작성 Vue app은 자연스럽게 중첩된 컴포넌트 트리로 구성 컴포넌트간 부모-자식 관계가 구성되며 이들 사이에 필연적으로 의사 소통이 필요함 부모는 자식에게 데이터를 전달**(Pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(Emit event)** 부모와 자식이 명확하게 정의된 인터페이스를 통해 격리된 상태를 유지할 수 있음 “props는 아래로, events는 위로” 부모는 props를 통해 자식에게 ‘데이터’를 전달하고, 자식은 events를 통해 부모에게 ‘메시지’를 보냄 |컴포넌트 구조 템플릿 (HTML) 스크립트 (JavaScript) 스타일 (CSS) |템플릿(HTML) HTML의 body 부분 각 컴포넌트를 작성 .. 2022. 5. 9.

Vue.js - Babel & Webpack 🔔Babel & Webpack |Babel — 버전 다운그레이드 도구 “JavaScript compiler” ES6 이후 버전을 ES5 버전 이하로 다운그레이드! 자바스크립트의 ECMAScript 2015+ 코드를 이전 버전으로 번역/변환해 주는 도구 과거 자바스크립트의 파편화와 표준화의 영향으로 코드의 스펙트럼이 매우 다양 이 때문에 최신 문법을 사용해도 이전 브라우저 혹은 환경에서 동작하지 않는 상황이 발생 원시 코드(최신 버전)를 목적 코드(구 버전)로 옮기는 번역기가 등장하면서 개발자는 더 이상 내 코드가 특정 브라우저에서 동작하지 않는 상황에 대해 크게 고민하지 않을 수 있게 됨 |Webpack — “파일 번들링 도구”, 번들링 === 합친다! “static module bundler” 모듈 간.. 2022. 5. 9.

Vue.js - Vue CLI 🔔Vue CLI |Vue CLI Vue.js 개발을 위한 표준 도구 프로젝트의 구성을 도와주는 역할을 하며 Vue 개발 생태계에서 표준 tool 기준을 목표로 함 확장 플러그인, GUI, Babel등 다양한 tool 제공 |Node.js —Django와 비슷, JavaScript JS =⇒실행기, 프론트엔드/백엔드 둘 다 가능 자바스크립트를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 자바스크립트 런타임 환경 브라우저 밖을 벗어 날 수 없던 자바스크립트 언어의 태생적 한계를 해결 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공 즉, 단순히 브라우저만 조작할 수 있던 자바스크립트를 SSR 아키텍처에서도 사용할 수 있도록 함 |NPM(Node Package Manage.. 2022. 5. 9.

Vue.js - SFC(Single File Component) 🔔SFC (Single File Component) |Component (컴포넌트) 생성자 함수 → 객체를 만들기 위함. 인스턴스 → 생성자 함수로 만들어진 객체 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 즉, 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공 Vue 컴포넌트 === Vue 인스턴스 |SFC (Single File Component) Vue의 컴포넌트 기반 개발의 핵심 특징 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코.. 2022. 5. 9.

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧 2022.05.09.월 workshop - Vue CLI 오늘은 Node.js를 설치하고 Vue CLI를 이용해 Vue Router앱을 설치하고 이를 통해 로또번호 추첨기(?)와 점심메뉴를 고르는 페이지를 구성하는 과제를 했다. javascript만을 이용해 이 페이지를 구현할 때는 사실 좀 힘들었는데, lodash를 import해서 쓰니 숫자를 가져오는것도 훨씬 저번보다 편했다!또한 점심메뉴 고르는 것도 lodash를 사용하니 코드가 한결 간략해진거 같다. 또한, Vue CLI를 통해 화면을 구현하니 전보다 훨씬 깔끔하고 비동기화 시키는 것도 알아서 되니까 좋은거 같다. 지난주와 그전 주에는 javascript에 적응하느라 힘들었지만 프레임워크를 사용해 구현하는건 아직 어려워도 재밌는거 같다. App.vue Lunch | L.. 2022. 5. 9.

Vue.js - Lifecycle Hooks 🔔Lifecycle Hooks 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거침 예를 들어 데이터 관찰 설정이 필요한 경우, 인스턴스를 DOM에 마운트하는 경우, 데이터가 변경되어 DOM를 업데이트하는 경우 등 그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hooks도 호출됨 공식문서를 통해 각 라이프사이클 훅의 상세 동작을 참고 |Lifecycle Hooks의 예시 GetDog created hook은 vue 인스턴스가 생성된 후에 호출 됨 created를 사용해 애플리케이션의 초기 데이터를 API 요청을 통해 불러올 수 있음 2022. 5. 7.

Vue.js - Template Syntax 🔔Template Syntax |Template Syntax 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용 Interpolation Directive |Interpolation(보간법) 1.Text 메시지: {{message}} 2. Raw HTML 3.Attributes 4.JS표현식 {{number+1}} {{message.split('').reverse().join('')}} |Directive(디렉티브) v- 접두사가 있는 특수 속성 속성 값은 단일 JS 표현식이 됨 (v-for는 예외) 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할을 함 전달인자(Arguments) : (콜론)을 통해 전달인자를 받을 수도 있음 .... 2022. 5. 7.

Vue.js - Vue Instance 🔔Basic syntax of Vue.js |Vue instance 모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것부터 시작 Vue 인스턴스를 생성할 때는 Options 객체를 전달해야 함 여러 Options들을 사용하여 원하는 동작을 구현 Vue Instance === Vue Component const app = new Vue({ }) |Options/DOM - ‘el’ Vue 인스턴스에 연결(마운트) 할 기존 DOM 요소가 필요 CSS 선택자 문자열 혹은 HTML Element로 작성 new를 이용한 인스턴스 생성 때만 사용 const app = new Vue({ el: '#app' }) |Options/DOM - ‘data’ Vue 인스턴스의 데이터 객체 Vue 인스턴스의 상태 데이터를 .. 2022. 5. 7.

Vue.js - SPA, CSR,SSR,SEO,Vue.js의 개념과 역할, MVVM 🔔INTRO |SPA (Single Page Application) Single Page Application (단일 페이지 애플리케이션) 현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 서버로부터 최초에만 페이지를 다운로드하고, 이후에는 동적으로 DOM을 구성 처음 페이지를 받은 이후부터는 서버로부터 새로운 전체 페이지를 불러오는 것이 아닌, 현재 페이지 중 필요한 부분만 동적으로 다시 작성함 연속되는 페이지 간의 사용자 경험(UX)을 향상 모바일 사용량이 증가하고 있는 현재 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요하기 때문 동작 원리의 일부가 CSR(Client Side Rendering)의 구조를 따름 |SPA 등장 배경 과거 웹 사이.. 2022. 5. 7.

CSS CSS - 스타일을 지정하기 위한 언어 cascading style sheets CSS 구문은 선택자를 통해 스타일을 지정할 HTML요소를 선택 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행 각 쌍의 선택한 요소의 속성, 속성에 부여할 값을 의미 속성(property) : 어떤 스타일 기능을 변경할지 결정 값(value) : 어떻게 스타일 기능을 변경할지 결정 CSS 정의 방법 인라인 : 해당 태그에 직접 style속성을 활용 내부 참조(embedding)- : head태그 안에 지정 외부 참조(link file) - 분리된 CSS 파일 - head link를 통해 불러오기 선택자(selector) 선택자(Selector) 유형 기본 선택자 전체 선택자, 요소 선택자 클래스 선택자, 아.. 2022. 5. 6.

이전 1 ··· 15 16 17 18 19 20 21 ··· 28 다음

티스토리툴바