차마시는 개발자

Parcel SFC 와 드디어 bundler에 대해서 배우기 시작했습니다. bundle란 묶는다는 의미로 vue 작업 요소를 js로 사용 가능하게 변화시키고 묶어주는 것 입니다. 참!! 이것은 SFC 구성을 목적으로 하는 것이라는 것을 알고 시작을 해보도록 하겠습니다. 🐻‍❄️ 1. Vue 프로젝트 설치 및 기본 구성 > npm init -y > npm i vue@next > npm i sass -D npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 npm i sass -D: devDepedencies에 scss를 설치 추가 개념) nod..

😸 Vue TIL 😽 Done it 😼 조건부 렌더링 😼 태그 해당 태그 부분은 렌더링 안되고 내부에 구조만 렌더링 됩니다. 😼 v-show VS v-if v-if 요소 구조 자체를 추가, 삭제 초기 렌더링 낮다, 전환비용 높다 v-show 구조를 만들고 style="display:none"을 추가, 삭제 초기 렌더링 높다, 전환비용 낮다. 구조를 먼저 생성하기 때문에 {{}}내부 데이터가 미리 나올수 있다. 그래서 => v-cloak과 같이 사용 v-cloak : 디렉티브 요소를 넣어서 동작하고 data에 준비 끝나면 vue 내부동작에 의해 v-cloak 요소 제거 [v-cloak]: { ... } 😼 리스트 렌더링 😼 :key a in as같이 객체를 반복할 때 순서대로 나오지 않을 수 있어서 각 노..

😸 Vue TIL 😽 Done it 😼 Proxy data 불변성을 위해 주로 일반 함수로 작성을 합니다. Proxy : 기본적인 동작의 새로운 행동 정의 : 특정 data가 언제 조회되고 할당되는지 감시하여 중간에 logic 추가 const app = { data: function() { a = 0; } } // new Proxy(target, handler) const proxyA = new Proxy(app.data, { get(target, key) { //값 조회 } set(target, key,value) { //값 지정 및 할당 } }) 😼 computed, watch computed : 공통된 함수를 사용할 때 캐싱하여 1번만 실행하고 가져다 쓰는 곳(낭비 x) but methods에서는 ..

😸 Vue TIL 😽 Done it 😼 Vue 시작 vue는 data가 바뀌면 화면이 바뀌는 반응성 프레임 워크입니다. (반응성을 가진 data를 반응형 data라고 합니다.) vue를 살펴 보기 전에 this에 대해 조금 더 공부하면 좋을 것 같습니다. {{counter}} v-model , 요소 같은 양식을 지정하는 html 요소에 연결하는 디렉티브(양방향) v-if 조건문, v-for 반복문 😼 Vue Application & instance createApp : Application instance를 반환하며 이 instance는 application 컨테스트를 제공합니다. mount : Application 루트 컴포넌트의 템프릿을 렌더링하여, 제시된 DOM element의 innerHTML을 ..

Airbnb 후기(SCSS) 해당 과제는 scss를 이용하여 원하는 home page를 0부터 만들어 보는 것입니다. (많은 JS는 들어가지 않았습니다.) 우선.... css를 자유롭게 다루지 못하고 이론만 엄청 공부한 상태 였습니다. 그래서 미리미리 잠을 줄여가며 진행을 하였고 뭔가 빠른 시간 내에 빠르게 제작을 해봐라 라는 의미가 있는 과제인 것 같아 심플하고 명확하게 작성하도록 노력했습니다. 재미있게 봐주세요!!! 아하 저는 🛫Airbnb 사이트를 만들었습니다.🛬 * 맨 마지막에 영상도 있으니 마지막까지 ㅋㅋㅋㅋ * 이 사이트를 선택한 이유는 여행에 관심이 많고 사이트가 엄청 이뻤습니다. 그리고 초반 공유 경제가 뜰 때 관심이 많아서 사업도 할려고 했었다는 무서운 이야기 👹 🤡 1. 어디까지 js❓..

😸 CSS TIL 😽 Done it 😼 @extend 이미 작성해 놓은 선택자 가져오기 but!! @mixin을 주로 사용합시다. 추가로 @media에서는 @extend를 내부에서 선언해야만 사용가능합니다. 또한 선택자 폭발이라는 부작용이 있는데 중첩을 할 때 선택자 부분도 상속이 되면서 문제가 발생한는 것입니다. //1. .a { } .b { @extend a; }%: placeholder로 오로지 @extend 규칙을 확장해서 사용할 수 있는 것 %a { } .b { @extend a; }@mixin 사용 방법 // @mixin 사용법 @mixin a { } .b { @include a; }😼 함수 js에서의 function과 매우 유사합니다. 다만 @를 붙여줘야 합니다. @function a() {..

😸 CSS TIL 😽 Done it 😼 Sass 중첩 .container { &:hover { // &: 상위 선택자 } @at-root .item { // @at-root: root 선택자] } //flex-grow, flex-shrink, flex-basis 편리하게 사용하기 flex: { grow: 1, shrink: 0; basis: auto; } } 😼 Sass 변수 선언 $를 붙여서 사용합니다. 😼 유효볌위 변화시키는 flag !global: 전역 변수로 변환 $w: 200px !global; !default: 기존에 있는 변수 값 사용 유효범위 내에서 이미 있는 변수에 값을 재지정 했을 때 재지정 값을 사용X $w: 500px !default; 😼 보간 "#{변수, 값}" 을 사용합니다. 선..

😸 CSS TIL 😽 Done it 😼 다단 : 한페이지를 여러 조각으로 나누는 것 column-count: auto: 조각낼 갯수(= 1) column-width: auto: 지정된 값을 기준으로 최적의 너비를 자동으로 판단한다. column-rule:: 단과 단 사이에 선을 넣어주는것(border와 유사) column-gap: normal: 단과 단사이의 gap 😼 Filter blur(0): 흐림 처리 grayscale(100%): 무채색 invert(100%): 색상 반전 drop-shadow(x축거리 y축거리 그림자흐림정도 그림자색상): 그림자(배경색상이 없는 경우 설정된다.) brightness(1): 명도 contrast(100%)..