본문 바로가기
반응형

분류 전체보기706

[SCSS] 스타일 규칙 - 중첩(Nesting) 중첩 (Nesting) 기본적인 스타일 규칙은 CSS와 동일한 방식으로 작동하지만, SCSS에서는 중첩 (Nesting) 기능을 사용해 상위 선택자의 반복을 피하고 좀 더 편리하게 구조를 작성할 수 있다. nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } to css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12p.. 2022. 6. 22.
[VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) store/index.ts 보통 vue-cli를 통해 프로젝트를 생성하게 되면 index.ts가 기본적으로 생성이 되어있을 텐데, 타입 스크립트를 사용할 때는 index.ts의 경우에는 모든 타입들과, 각각의 저장소들을 한 곳에 모아주는 역할만 담당한다. import { createStore } from "vuex"; import { CreateState, .. 2022. 6. 17.
[VSCode] eslint error: Delete `␍` prettier/prettier eslint와 prettier를 같이 사용하면서 작업을 하는 도중 갑자기 Delete `␍` prettier/prettier 라는 에러가 발생하였다. 찾아보니 prettier 2.0이상 부터 endOfLine 기본 옵션이 'auto' 에서 'lf' 로 변경되어서 발생하는 에러라고 한다. .eslintrc.js 파일에서 아래와 같이 설정해주면 문제가 해결된다. rules: { "prettier/prettier": ["error", { "endOfLine": "auto" }], }, 2022. 6. 15.
[SCSS] 변수(Variables)와 데이터 타입(Data Types) (ft. 주석) 주석 (Comment) CSS에서의 주석은 /* ... */ 로 해야 하는 반면에, Sass(SCSS)에서는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 여기서 또 Sass 와 SCSS에 다른 특징이 나오는데, 아무래도 SCSS가 CSS와 호환이 쉽게 나왔기 때문에 비슷한 측면이 있다. // Sass /* 컴파일되는 * 여러 줄 * 주석 */ // SCSS /* 컴파일되는 여러 줄 주석 */ Sass의 경우 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고 더 나아가 라인까지 맞춰줘야 하는 반면에, SCSS의 경우에는 CSS처럼 사용하면 된다. 데이터 타입 (Data Types) 데이터 설명 예시 Numbers 숫자를 의미하며 단.. 2022. 6. 14.
[VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기 Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다. Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다. 이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다. 프로젝트 생성 이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다. Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다. # 1. Install Vue CLI, if it's not already installed npm .. 2022. 6. 14.
[CSS] Reset.css 와 Normalize.css란? 등장 배경 브라우저마다 제공하는 user agent style이라는 게 존재하는데, 말 그대로 브라우저별 스타일 기본값이라고 생각하면 된다. 브라우저 별로 모두 일관된 스타일을 제공해줘야 하는 입장에서 이 기본 스타일이 브라우저별로 다르다는 점은 참으로 불안한 상황이다. 그래서 나온 전략으로 reset.css 와 normalize.css라는 게 등장하였다. reset.css 이름 그대로 모든 브라우저의 형태에서 기본으로 제공하는 스타일을 전부 없애버린 초기화 기법이다. 아무래도 가장 유명한 기법이었는데, 마지막 업데이트 날짜가 2011년인 것을 보면 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율적이다 라는 말이 많이 나온다. Eric Meyer의 reset.css normalize.css.. 2022. 6. 13.
[VueJS] vue 프로젝트에서 CSS 전처리기(Pre-Processor) 전역 스타일 설정하기 vue 프로젝트에서 CSS 전처리기(예를 들어 sass, scss, less 같은 것들)를 사용할 때 가장 난감한 게, vue는 싱글 파일 컴포넌트 형식으로 .vue 파일 안에 스타일 역시 존재하는데, 여기서 전역으로 설정된 변수 같은 것들을 항상 import 해서 사용해줘야 하는 불편함이 생긴다. 그렇기 때문에 자주 사용하는 변수나, mixin같은 경우 전역 스타일로 설정하여 사용을 해야한다. 전역 스타일 설정은 vue.config.js 파일에서 설정해 주면 된다. // vue.config.js module.exports = { css: { loaderOptions: { // pass options to sass-loader // @/ is an alias to src/ // so this assume.. 2022. 6. 13.
[SCSS] SCSS 사용할 때 유용한 확장 프로그램 (ft. VSCode) VSCode 카테고리에 유용한 확장 프로그램 추천 게시글이 있으나 SCSS만 따로 정리하고자 새로 작성한다. (마지막 수정 일자 : 2022.06.13) 1. SCSS IntelliSense https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss SCSS IntelliSense - Visual Studio Marketplace Extension for Visual Studio Code - Advanced autocompletion and refactoring support for SCSS marketplace.visualstudio.com 꼭 필요하다 생각하는 확장 프로그램인데, 바로 "자동완성"을 도와주는 역할을 한다. 여기서 말하.. 2022. 6. 13.
[VueJS] vue 프로젝트에서 webpack 설정하는 방법 (vue-cli 와 webpack) 초기 세팅 우선 webpack 설정에 대해 알아보기 위해 vue-cli를 이용한 vue 프로젝트가 만들어져야 한다. [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) VSCode에서 Vue.js 개발 환경을 구축해보자. VueJS는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI인 Vue CLI를 제공한다. 우선 VSCode와 Node.js가 당연히 있다는 가정하에 시작해보도록 한 mine-it-record.tistory.com vue 프로젝트에서 이제 webpack설정을 하기 앞서 vue-cli의 버전이 몇인지부터 알아야 한다. 아무래도 아주 예전부터 사용하.. 2022. 6. 13.
반응형
TOP

티스토리툴바