Frontend

모바일 UI에서 많이 보이는 무한 스크롤! ex) 페이스북, 인스타 등 해당 UI를 구현하기 위해서는 크게 두 가지 방법이 있다. 1. 스크롤 이벤트 이용 2. Intersection Observer 이용 필자는 observer api를 이용하여 구현할 예정이다. 스크롤 이벤트를 이용하여 구현하는 방식은, 매번 window의 스크롤 이벤트를 감지하여 스크롤 위치가 컨텐츠의 끝에 닿았는지 확인하는 절차가 필요하기에 성능 상 좋지 않다고 한다. 그래서 Intersection Observer로 무한스크롤을 구현하기 전에, 먼저 Intersection Observer가 무엇인지 알아보자 1. Intersection Observer https://developer.mozilla.org/en-US/docs/Web/..

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..

01장 - 프로그래밍 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조를 이용하여 흐름을 제어하는 것 02장 - 자바스크립트란? 1. 역사 넷스케이프 커뮤니케이션즈의 모카 👉 라이브스크립트 👉 자바스크립트 2. 표준화 ECMA 인터내셔널(컴퓨터 시스템 표준화 관리)에서 ES1 ~ ES6까지 발전해옴 3. 성장 초창기 자바스크립트는 웹페이지의 보조적 역할 Ajax : 서버와 브라우저가 비동기방식으로 데이터 교환 jQuery : DOM을 더욱 쉽게 제어 V8 자바스크립트 엔진 : 더욱 빠른 성능 Node.js : 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 SPA 프레임워크 : CBD방법론을 기반한 SPA가 대중화 되면서 여러 프레임워크/라이브러리 등장 4. ECMAScript 자바스크립트 표준..

📘 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 (기능) {..