[Day 36-2] 컴포넌트 등록, props, 커스텀 이벤트
2022. 12. 9. 13:08
데브코스
컴포넌트 등록 컴포넌트는 전역 등록, 지역 등록이 가능하다. 컴포넌트로 등록을 하기 위해서는 컴포넌트의 이름을 지정해야 하는데 파스칼 케이스 혹은 케밥 케이스(= 대쉬 케이스)로 작성이 가능하다. 전역 등록 전역으로 컴포넌트를 등록하면 컴포넌트 어디에서든지 import를 하지 않고 등록한 컴포넌트를 사용 가능하다. main.js에서 생성한 app에 component 메소드를 통해 등록한다. // main.js import {createApp} from 'vue' import App from '~/App' import Btn from '~/components/Btn' const app = createApp(App) app.component('Btn', Btn) // 전역 등록 app.mount('#app'..
[Day 36-1] Node.js, npm, Parcel, Webpack
2022. 12. 7. 21:49
데브코스
Node.js와 NPM Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다. 상황에 따라 Node.js의 버전을 변경할 수 있는 환경을 구축해야 한다. 이럴 때 사용할 수 있는 패키지가 nvm으로 Node Version Manager의 약자이다. npm은 Node.js를 설치하면 같이 설치되는데 Node.js Package Manager의 약자이다. npm init npm init은 Node.js 환경에서 npm이라는 Node.js Package Manager을 통해 init, 즉 초기화 하는 것은 현재 프로젝트를 npm으로 관리하겠다라는 것이다. 터미널에 명령어를 입력하면 패키지 이름을 입력하라고 하는데 이는 중복되지 않게 짓는 것이 좋다. 프로젝트라는 것은 어디까지나 하나의..
[Day 35] 렌더링, 이벤트 핸들링, 폼 바인딩, 컴포넌트
2022. 12. 6. 15:09
데브코스
조건부 렌더링 v-if, v-else-if, v-else 디렉티브를 이용해서 조건부 렌더링이 가능하다. v-if Hello Vue! Application.. 1234 987 Good Morning const App = { data() { return { isShow: null, }; }, }; const vm = Vue.createApp(App).mount("#app"); 특정한 요소에 wrapping 되어서 출력되는 것을 원하지 않을 경우 div 대신 template 태그를 사용할 수 있다. template 태그를 사용하면 본인은 출력되지 않고 그 안에 있는 요소들만 출력된다. v-show v-show는 요소의 스타일 속성에 display: none을 추가하여 엘리먼트를 조건부로 표시합니다. Hello..
[Day 34] computed, watch, 데이터 바인딩
2022. 12. 5. 23:00
데브코스
Computed computed는 계산된 데이터를 의미한다. computed 속성은 data의 변화를 감지하여 동적으로 계산된 값을 이용할 때 사용된다. const App = { data() { return { count: 3, }; }, computed: { double() { return this.count * 2; }, }, }; const vm = Vue.createApp(App).mount("#app"); computed 옵션 안에 작성되어 있는 double 함수는 더 이상 함수가 아니라 계산된 데이터로 취급된다. 캐싱 위 예제와 동일한 결과를 내고 싶다면 computed 말고도 다른 방법이 더 존재한다. 표현식 {{ this.count * 2 }} methods 옵션에 double 함수 생성하..
[Day 33] 반응성, 디렉티브, 라이프 사이클, data & methods
2022. 12. 2. 21:43
데브코스
VueJS Vue.js는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크다. 소개 | Vue.js v3-docs.vuejs-korea.org CDN을 사용하여 HTML의 상단에 script를 불러와서 간단하게 사용할 수 있다. Vue 시작하기 반응성 {{ counter }} 예제의 결과를 브라우저에서 확인하면 1초마다 1이 증가하는 것을 확인할 수 있다. 현재 couter라는 데이터와 DOM이 연결된 상태이고 이렇게 데이터가 변경이 되면 연결되어 있는 화면도 같이 변경되는 것을 반응성이라고 한다. 디렉티브 {{ counter }} Click Me! v-로 시작하는 속성들을 디렉티브라고 부른다. 디렉티브는 VueJS의 문법으로 렌더링 된 DOM에 반응형 동작을 하도록 도와준다. v-bind 디렉티브..
[Day 32] SCSS (2)
2022. 11. 30. 16:04
데브코스
@mixin @mixin은 여러번 재활용 할 스타일들을 정의해서 필요한 곳에서 사용하는 개념이다. 만들어 둘 스타일을 @mixin 규칙으로 정의하고 필요한 곳에서 @include 규칙을 통해 사용할 수 있다. @mixin은 특정한 값을 인수로 보내고 매개변수로 받아서 사용할 수 있다. 이 매개변수에는 기본값을 지정해줄 수 있다. 조건문을 통해서 조건을 줄 수 있다. 조건문은 삼항 연산자를 사용해서 작성할 수도 있다. if(condtion, true, false) 참고로 if 뒤에 괄호를 쓸 때 띄어쓰기를 하면 expected "(" 라는 에러가 난다. @mixin은 단순히 css의 속성과 값만 적는 것이 아니라 Sass에서 정의할 수 있는 다양한 내용을 @mixin 내부에서 활용할 수 있다. @mixin..
[Day 31] 변수, @supports, @media, SCSS (1)
2022. 11. 28. 18:28
데브코스
변수 :root { --color-primary: royalblue; --color-danger: red; --color-success: yellowgreen; } .box { width: 200px; height: 70px; border: 4px solid; } .primary { background-color: var(--color-primary); } .danger { background-color: var(--color-danger); } .success { background-color: var(--color-success); } 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자..
[Day 30] grid, transform, columns, filter
2022. 11. 25. 21:54
데브코스
Grid Items 1 .container { width: 300px; height: 300px; border: 4px solid; display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } .container .item { border: 2px solid; background-color: orange; font-size: 20px; } 아이템의 위치를 변경하고 싶을 떄 사용할 수 있는 것이 위 그림의 그리드 컨테이너 주변에 있는 저 번호들, 즉 라인이다. 라인은 1부터 시작하는 양수 단위의 숫자와 -1부터 시작하는 음수 단위의 숫자를 동시에 가진다. gird-row / grid-column grid..
[Day 29] float, position, flex, grid
2022. 11. 24. 21:18
데브코스
Float 색상을 따로 입력하지 않으면 그 요소가 가지고 있는 글자 색상을 참고하게 된다. 기본적으로 글자 색상은 검정색이기 때문에 color를 지정하지 않으면 border도 검정이 된다. 기본적으로 HTML의 요소들은 위에서부터 아래로 수직으로 쌓이게 되는데 float을 이용해서 수평 정렬을 시켜줄 수 있다. float을 사용하면서 가장 중요한 것은 float 속성이 더이상 사용되지 않는다는 것을 알려주기 위해 해제(clear)를 해줘야 한다는 것이다. 가상 요소란 가상의 요소를 만든 뒤 거기에 css 요소를 추가할 수 있는 선택자를 의미한다. 가상 요소는 필수적으로 content라는 속성이 있어야지만 동작한다. .clearfix::after { content: ""; display: block; cl..
[Day 28] TodoList Drag&Drop
2022. 11. 23. 17:27
데브코스
TodoList Drag&Drop 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const API_END_POINT = "..."; export const request = async (url, options) => { try { const res = await fetch(`${API_END_POINT}${url}`, options); if (!res.ok) { throw new Error("API 호출 오류"); } return await res.json(); } catch (e) { alert(e.message); } }; 더보기 import { req..