Daehyunii's Dev-blog

Vue란? 사용자 인터페이스를 만들기 위한 프로그레시브 자바스크립트 프레임워크이다. Vue 3 버전이 현재 가장 최신 버전이며, Vue 2 버전에서 Vue 3 버전으로 넘어가고 있는 과도기이다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와 통합이 쉽다. 레이아웃을 처리하는데 유용하다. 1. 선언적 렌더링 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링할 수 있다. 데이터와 DOM이 연결되었으며 반응형 데이터가 되었다고 말할 수 있다. 데이터가 바뀔 때 연결되어 있는 화면도 바뀌는 것을 반응성이라고 한다. 반응형 데이터를 선언하고 화면에 렌더링해보자. 참고로 setInterval() 콜백함수는 this가 참조하는 곳이 달라질 수 있기 때문에 화살표함수로..

재활용 1. @mixin 규칙 재활용할 스타일을 정의할 수 있다. 마치 함수처럼 선언하는 방법이다. @include 규칙을 사용하여 원하는 곳에 스타일을 적용할 수 있다. @mixin large-text($size: 30px) { font-size: $size; } .box { @include large-text(40px); } 매개 변수를 사용하지 않고 mixin을 사용하는 곳도 있기 때문에 매개변수의 초기값을 꼭 설정해주어야 한다. 매개 변수에 …을 붙이면 가변 인수라는 의미가 된다. @mixin bg($w, $h, $b...) { width: $w, height: $h, background: $b } .box { @include ( 100px, 200px, url('/images/a.png') no..

Sass(SCSS)란? CSS 전처리 도구(Preprocessor)이다. SCSS는 중괄호와 세미콜론이 사용되고, Sass는 중괄호와 세미콜론이 사용되지 않는다. 이것이 가장 큰 차이점이다. SCSS에서는 CSS에서 사용하는 문법 그대로 사용해도 호환되기 때문에, Sass보다는 SCSS를 사용하는 것을 적극 권장한다. SassMeister | The Sass Playground! SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com SCSS를 CSS로 컴파일해주는 사이트 1. 중첩기능 SCSS .container { d..

변수 선언의 실행 시점과 변수 호이스팅 자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행합니다. 선언 단계 : 변수 이름을 등록(실행 컨텍스트의 렉시컬 환경)해서 자바스크립트 엔진에 변수의 존재를 알립니다. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 합니다. (const 제외) console.log(score); // undefined var score = 'Hello World' console.log(score); // 'Hello World' var hoisting = '선언문이 스코프의 선두로 끌어 올려진 것처럼 동작하는 것을 자바스크립트만의 고유한 특징인 호이스팅 이라고 합니다' var 키워드로 선언한 변수의 특징 1. 변..

CSS 변수 1. 사용법 —변수명을 선언하고 var(—변수명)을 속성 값으로 넣어주면 사용할 수 있다. 변수는 변수를 선언한 요소의 하위 요소로 상속이 된다. /* 최상위에 전역으로 변수를 선언 */ :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(--co..

Grid란? 2차원 레이아웃 구조를 만드는데 사용한다. row와 column 2개의 축을 사용해서 레이아웃을 작업한다. display: grid를 적용한 곳을 grid container라고 하고, 그 하위 요소들을 grid items라고 부른다. 수평 정렬 시, grid 또는 inline-grid를 사용할 수 있다. grid: grid container가 block 요소의 특징을 가진다. 수직 정렬, 가로 너비를 최대로, 세로 너비를 최소로 하려는 특징 inline-grid: grid container가 inline 요소의 특징을 가진다. 수평 정렬, 가로 세로 너비를 최소로 하려는 특징 grid container에 적용할 수 있는 속성들에 대해 알아보자. 1. grid-template-rows 행 축의..

Float 수평정렬 레이아웃에서 사용하긴 하지만, 요즘은 대부분 flex로 한다. float를 사용하는 요소들만 형제요소로 묶고, 부모에 clearfix 클래스를 적용해서 관리해야 문제가 생기지 않는다. float를 사용하면 flex, inline-flex, grid를 제외하고는 display가 block으로 바뀐다. 1. Float 해제 방법 float를 사용하면 다음 요소에 영향이 가기 때문에 float 속성을 해제하는 것이 필요하다. 총 3가지 방법이 존재하나, 3번째 방법이 가장 적합한 방법이다. clear를 적용할 마지막 요소의 다음 형제요소를 추가한다. 부모에 overflow: hidden을 추가한다. ::after를 사용하여 가상요소를 만들고 clear를 사용한다. ::after를 사용하기 ..

ES6 module 이란? 1. import export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드이다. import를 사용하려면 웹 서버가 필요하다. 우리는 npx serve 모듈을 사용하여 로컬 웹서버를 띄우고 있어 상관없다. from 이후 모듈 이름 맨 뒤에 .js를 빼먹지 않았는지 체크해야 한다. import defaultExport from 'module-name; 위의 경우에는 module-name 내에 export default로 내보내진 것을 가져온다. 보통 컴포넌트 단위로 코드를 구성할 때는 하나의 파일에 export default가 하나만 있게 구현한다. import * as allItems from 'module-name' 위의 경우에는 module-name 내에서 e..