TIL/Front (8) 썸네일형 리스트형 Vue - Component / Router / Mix-in / Life-cycle [ Component ] - 조합하여 화면을 구성할 수 있는 블록을 의미하며 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능 - 컴포넌트는 Vue의 가장 강력한 기능 중 하나이다 - 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 된다 - 컴포넌트는 Vue의 인스턴스이기도 해서, 모든 옵션 객체를 사용할 수 있다 - 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다 - 싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다 - ,, 와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으므로, 사용자가 지정한 컴포넌.. Vue.js 초급 공부 Part V - Vue CLI CLI ? vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다. 여기서 CLI 란 ? 명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과) [ Terminal ] - node -v : 노드 버전 확인하기 - npm -v : npm.. Vue.js 초급 공부 Part IV - Template [ 뷰의 템플릿 문법 ] - 뷰로 화면을 조작하는 방법을 의미한다 - 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다 - 데이터 바인딩 : 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다 -> {{ }} - 디렉티브 : 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있다 -> show : false & v-if="show" * keyup : 키보드의 모든 키 - keyup 뒤에 . (modifier)를 붙히고 특정 키보드만 설정 가능 [ watch vs computed ] - compu.. Vue.js 초급 공부 Part III - Http / axios Axios ? - Promise 기반의 Http 통신 라이브러리 - 설치 방법 : CDN 방식 || NPM 방식 - 임포트 : Promise ? 자바스크립트의 비동기 처리 패턴 - 데이터를 가져온 후에 다음 로직을 실행시키기 위해 필요하다 1. callback 2. promise 3. promise + generator 4. async & await Promise의 3가지 상태 Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 https://joshua1988.github.io/web-development/javascript/j.. Vue.js 초급 공부 Part II - Component & Router [ 같은 컴포넌트 레벨 간의 통신 방법 구현 ] - 같은 레벨일지라도 바로 데이터를 보낼수 없고 상위 컴포넌트를 들려서 전송한다 1. app-content에서 버튼을 누르면(이벤트) 10이라는 숫자를 보냄 2. 상위 컴포넌트인 Root에서 기존에 0인 data를 받은 숫자 10으로 변경 3. Root에서 props를 이용하여 app-header로 data(10)를 보냄 [ 뷰 라우터 ] - 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 - 설치 방법 : CDN 방식 || NPM 방식 - 임포트 : mode: 'histroy' 를 넣으면 url의 #이 사라진다 네비게이션 가드 참조 https://joshua1988.github.io/web-developmen.. Vue.js 초급 공부 Part I - Plugin install & Component https://github.com/joshua1988/learn-vue-js 강의 코드 깃허브 GitHub - joshua1988/learn-vue-js: 인프런 Vue.js 시작하기 강의 리포지토리 인프런 Vue.js 시작하기 강의 리포지토리. Contribute to joshua1988/learn-vue-js development by creating an account on GitHub. github.com VsCode Plugin install list - Vetur - Night Owl => 설정 색 테마 변경 - Material Icon Theme => 설정 아이콘 테마 변경 - Live Server - ESLint - Prettier - Auto Close Tag - Atom Keymap V.. CSS (Cascading Style Sheet) # 선택자(selector) { 속성(property) : 속성 값(property value); } 선택자 : 스타일을 변경할 요소를 선택 속성 : 어떤 속성을 변경할지 선택 값 : 어떤 값을 적용할지 입력 현재 페이지의 HTML요소가 사용자에게 어떻게 보여야 할지 설정하는 곳 스타일시트를 작성할 때 CSS라는 언어를 사용한다 웹 브라우저는 스타일시트를 해석하여 요소들의 디자인을 결정한다 id : 어떤 한 요소를 유일하게 식별하기 위한 속성 class : 요소들을 특정 그룹으로 묶기 위한 속성 div : 블록 요소를 생성 span : 인라인 요소를 생성 # CSS 선택자(selector) 선택자를 이용해 언제든 원하는 html요소를 선택할 수 있어야 한다 tagname : 태그 이름으로 선택한다 #id.. HTML HTML은 여러 개의 공백도 하나로 인식하고, Enter도 하나의 공백으로 인식한다 HyperText Markup Language 웹 페이지의 생김새를 묘사하는 마크업 언어 HTML로 작성한 코드를 웹 브라우저가 해석하여 사용자에게 보여준다 마크업 언어 : 여는 태그와 닫는 태그로 영역을 표시하는 언어 (XML, HTML) 웹 브라우저 : Chrome, IE, Safari 등 http 프로토콜을 이용하여 서버에 접속하고 웹 서버에서 받아 온 HTML 코드를 해석해주는 프로그램 # 블록요소(Block Elements) - 문단 태그는 블록요소이다 - 을 쓰지 않아도 줄이 자동으로 바뀐다 - 새로운 영역을 지정하고 싶을 때 주로 새로운 블록 요소를 추가한다 # 인라인 요소(Inline Elements) - .. 이전 1 다음
