데브코스

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

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

처음으로 써보는 회고글 ! ! 지금까지 공부한거 요약정리만 해보다가... 처음으로 기회가 생겨 회고글을 작성😎 나는 예전글에서 작성하다시피 개발자로 취업을 하기엔 너무너무나도 부족한 상태여서😥 4학년 1학기를 마치고 휴학을 결정했다 휴학 전에 교수님과의 상담으로 부트캠프/국비교육을 하며 공부를 하라 조언을 듣게되었고.. 어떻게 운이 좋게도 제일 수강하고 싶었던 프로그래머스 데브코스에 합격하게 됐다 ! (데브코스가 궁금하신 분들은 아래 링크를 참고해 주세용) [3기] K-Digital Training: 빅데이터 플랫폼 프론트엔드 엔지니어링 | 프로그래머스 스쿨 (programmers.co.kr) [3기] K-Digital Training: 빅데이터 플랫폼 프론트엔드 엔지니어링 🚀프론트엔드 데브코스 모집 마..

자료구조&알고리즘 - 큐 1. 큐 - First In First Out 개념을 가진 선형 자료구조 - Linear Queue와 Circular Queue가 존재함 - EnQueue, Rear, Front, DeQueue 1) Linear Queue 선형 큐 ⓐ Array로 구현 class Queue { constructor() { this.queue = []; this.front = 0; this.rear = 0; } enqueue(value) { this.queue[this.rear++] = value; } dequeue(){ const value = this.queue[this.front]; delete this.queue[this.front]; this.front++; return value; } ..

4학년 1학기를 마치고 나는 내 자신에 대한 부족함을 많이 느껴서 휴학을 결정했다. 진로는 웹 프론트엔드로 정해둔 상태였는데 머 어느하나 코딩테스트 통과해보지도 못하고 그렇다고 개발을 잘하는 것도 아니고 cs가 출중한것도 아니고 이번 방학에 쫌 회사를 지원할 수 있을만한 실력을 갖추고 싶어서 휴학을 하게 됐다. 원래의 휴학 계획은 혼자 공부할 생각이여서 알고리즘은 책/인강을 들으면서 보충할 생각이였고 웹 개발관련해선 개발동아리 하는게 있어서 프로젝트겸 공부 같이하려고 했다. 근데 우리학교는 휴학하려면 교수님이랑 상담을 해야됐는데 교수님이 국비로 교육받는걸 적극 추천하셨다. 혼자하는 것보단 나을거라고 그래서 교수님 말씀에 혹해 여러 국비들을 지원했었는디 그 당시 8월 말이었나.. 그때 한참 하반기 국비 교..