Frontend/프로그래머스 FE 데브코스

1. slot : 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용 1) 기본 형식 - 부모 컴포넌트 Hello Vue - 자식 컴포넌트 2) slot 이름 지정 v-slot 디렉티브를 이용하여 slot 요소가 여러 개일때 이름을 붙여 지정해 줄 수 있다. (축약 #) ABC ABC 3) slot의 props - v-slot:default를 이용하여 하위 컴포넌트의 데이터를 가져와 출력할 수 있다. - #['이름'] 형태로 동적으로 이름을 지정해 줄 수 있다. {{ slotProps.hello }} // slotProps.hello {{ hello }} ... data(){ return { slotName: 'xyz' } } 2. 동적 컴포넌트 : 화면에 보여질 컴포넌트를 동적으로 제어할 수 있..

1. Node.js 와 npm 1) Node.js : JavaScript 엔진으로 빌드 된 JavaScript 런타임 2) npm : Node Packaged Manager, 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램 + nvm : Node.js의 버전을 관리해주는 프로그램 + npm n : 맥 버전 node.js 버전 관리 nvm use 14 // node js 버전을 14버전으로 바꿈 2. npm 프로젝트 빌드 npm init npm init -y // 질문 생략 1) package.json 파일 구성 { "name": "프로젝트 이름", "version": "1.0.0", "description": "설명", "scripts": { // 사용자 빌드 키워드 }, "author": "", "l..

1. 조건부 렌더링 1) v-if, v-else-if, v-else : 해당 블록을 조건부로 렌더링하는 데 사용 Vue is awesome! Oh no 😢 - v-else는 v-else-if나 v-if 다음 블록에 와야 인식이 된다. ✅ template - template는 요소들을 래핑해주는 역할로 template 자체는 dom에 보이지 않는다. Title Paragraph 1 Paragraph 2 - v-if가 ok면 내부 요소만 렌더링 된다. 2) v-show - 요소를 조건부로 표시하는 다른 옵션 Hello! 📌 v-show와 v-if 비교 v-show는 요소가 항상 렌더링 되고, dom에 남아있다. 👉 초기렌더링 비용 ↑, 화면 전환 비용 ↓ v-if 문은 조건이 만족하지 않을 경우 요소가 렌더..

1. Computed : 계산된 데이터 - Vue 내부에서 캐싱 기능을 제공하기 때문에 반복된 계산은 한번만 일어난다. - 계산된 데이터는 의존성을 가지고 있다. 1) 사용 방법 {{count}} {{double}} {{double}} // 한번만 계산된다. 2) getter, setter 사용하기 data() { return { firstName: "Leon", lastName: "Miller", }; }, computed: { fullName: { get() { return `${this.firstName} ${this.lastName}`; }, set(newValue) { const names = newValue.split(" "); this.firstName = names[0]; this.last..

📘 Vue 란? : 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 중 하나 선언적 렌더링(Declarative Rendering): Vue는 표준 HTML에서 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적으로 작성 가능 반응성(Reactivity): 상태가 변경되면 DOM(화면)을 가상 DOM을 이용하여 효율적으로 업데이트함 1. 시작하기 - 본 강의에서는 CDN을 사용하였다. 1) 기본 문법 {{ message }} ✅ createApp() - data는 Vue의 인스턴스가 사용할 정보를 담고있는 속성으로 객체/함수 형태이다. - 위 예제에서는 message라는 변수를 선언했다. ✅ mount() - 앱 인스턴스를 렌더링한다. - mount()가 실행..

SCSS - 재활용 1. @mixin 과 @include : CSS 스타일 시트에서 재사용할 CSS스타일 그룹 선언을 정의하는 기능 1) 기본 형태 - @mixin 으로 스타일 정의하고, @include를 이용하여 불러옴 * sass에서는 @mixin이 =, @include는 + 형태이다. @mixin { ... } @mixin 이름() { ... } @include () ex) 매개변수 없는 형태 ex) 매개변수 있는 형태 - 매개변수가 있는 형태면 include로 불러올 때 매개변수 있어야 한다. - mixin 선언 시 매개변수에 기본 값 지정 가능하다. 2) 응용 형태 ① 가변 인수를 사용하는 형태 - 가변 인수 : ... (전개)연산자 이용 @mixin bg($w, $h, $b...) { widt..

CSS 변수 1. CSS 변수 선언 방법 : 2개의 -를 앞에 붙인 속성의 이름과 함께 선언 element { --main-bg-color: brown; } - 선택자는 사용자 속성을 사용할 수있는 범위를 뜻한다. * root(html) : 최상위 요소를 선택하는 가상 선택자 * 명시도 : 해당 요소에 가장 연관된 속성을 찾는 수단 (스타일 우선순위) 👉 !important >> inline style >> id >> class >> tag(요소) - 유효범위 안에서만 속성을 오버라이딩 할 수 있다. CSS @supports 1. @supports : css 기능을 브라우저가 지원하는지 따라 다른 스타일 선언을 할 수 있는 방법 (기능 쿼리) @supports (기능) and (기능) and (기능) {..

history API 1. history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 브라우저에서 페이지 로딩 시, 세션 히스토리를 가짐 세션 히스토리는 페이지 이동할 때마다 쌓인다. pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음 👉 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다. hashbang url 형식에서 벗어날 수있다. ( / => HomePage, /detail => DetailPage) 일반 url형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수 있다. * hashbang이란 ? : 말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용..

Module 1. import - export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 import name from "module-name"; // module-name 내 export default로 내보내진 것을 가져옴 import * as allname form "module-name"; // allname 이름으로 지정하여 export 된 것을 가져옴 export const NAME = 'EUNA' export const AGE = '24' // 함수 export export default function 함수이름 () { } import { loadItem } from "module-name" // 모듈내 export된 것 중 특정 값만 가져옴 import loadItem ..