본문 바로가기

전체 글

 (166)
Vue문법(2) - 바인딩, 렌더링, 핸들링 클래스와 스타일 바인딩 클래스에 active: isActive를 표시해줍니다. active값은 isActive의 영향을 받습니다. isActive가 true면, active를 추가할 수 있지만 false면 active를 추가할 수 없습니다. 이것이 클래스 바인딩입니다. 클래스 바인딩 참조 문서 스타일 바인딩 참조 문서 조건부 렌더링 조건부 렌더링 참조 문서 v-if, v-else, v-show 리스트 렌더링 리스트의 각각의 id를 고유하게 만든 shortid 패키지를 사용할 수 있습니다. npm i -D shortid 생성시 id: shortid.generate() 메소드를 통해 고유한 id를 생성합니다. 리스트 렌더링 참조 문서 이벤트 핸들링 이벤트 핸들링 참조 문서 이벤트 핸들링 - 이벤트 수식어 이..
Vue 문법(1) - computed, getter/setter, watch 인스턴스와 라이프사이클 vue 인스턴스 모든 vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다. vue 라이프사이클 훅 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 과정에서 라이프사이클 훅이란 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다. 템플릿 문법 템플릿 문법 참조 문서 v-on, v-bind, {{ }} 등 기본 문법을 소개해줍니다. Computed 옵션 computed는 계산된 데이터입니다. 예시처럼 계산된 데이터를 함수형태로 반환합니다. 태그 안에 v-for혹은 v-if를 사용시 길게 작성할 필요없이 짧고 명확하게 보입니다. Computed 캐싱 methods를 사용하면 똑같은 로직을..
Vue 시작하기 Vue.js 3버전 홈페이지 CDN CDN 및 NPM 설치 VUE VLI, Vetur Vue CLI App.vue 파일은 하이라이트가 없어서 Vetur를 설치하면 하이라이트 생겨서 편하게 보입니다. Vetur은 vue를 2로 인식하는 경우가 많습니다. 이럴 때는 volar를 써보세요! Vue3 Webpack Template 기존 webpack-template 예제로 만들 겁니다. js폴더를 삭제하며, src폴더 새로 생성, 안에는 main.js, App.vue 두 파일을 만듭니다. npm i vue@next npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc 위 두 명령어로 vue개발환경을 설치합니다. webpack.config.js 파일에 entr..
webpack bundler Webpack Bundler 매우 꼼꼼한 구성으로, 중/대형 프로젝트에 적합합니다. 프로젝트 생성 terminal --> npm init -y 명령 실행 terminal --> npm i -D webpack webpack-cli webpack-dev-server@next 명령 실행 package.json 파일에 "scripts" 부분 기존 내용 지우고, "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" 작성 webpack.config.js 파일 새로 생성한 후, 필요한 옵션 작성 terminal --> npm run dev 명령 실행 webpack.config.js 파일은 꼼꼼하게 관리해주는 역할을 합니..
parcel bundler 번들러 개요 기본적으로 우리는 HTML, CSS, JS를 사용해서 웹페이지를 만들 수 있습니다. 하지만 이 3개만 갖고 작업할 때는 비효율적인 부분이 존재합니다. 그래서 우리는 Sass, vue등을 사용해서 좀 더 쉽게 작업하려고 합니다. Sass, vue 같은 경우 웹에서 바로 작동 안 됩니다. 번들러를 통해 웹에서 동작시킬 수 있는 형태로 바꿔줍니다. 그렇다고 해서 bundler이 자동 변환해주지 않습니다. sass패키지를 통해 변환해주는 겁니다. 여러 패키지들을 일일히 제어하기 복잡해서 bundler가 대신 해주는 겁니다. Parcel Bundler 구성 없는 단순한 자동 번들링, 소/중형 프로젝트에 적합 프로젝트 생성 terminal --> npm init -y 명령 실행 terminal --> ..
Bootstrap 개요 bootstrap 문서 참조 부트스트랩(bootstrap)은 css 프레임워크입니다. 색상이 있는 버튼, 드롭다운, 리스트등등 css에서 스타일 잡을 필요없이, 부트스트랩 클래스를 추가하면 편리하게 만들 수 있습니다. 5버전부터 SCSS문법을 적용하며, 트리 쉐이킹 없었던 단점도 이 버전부터 지원됩니다. 트리 쉐이킹(Tree Shaking)이란 단일 번들을 최적화할 때 사용되는 필요하지 않은 코드를 제거하는 기술을 말합니다. CDN 프로젝트 생성 부트스트랩은 css및 js 두개 나눠져 있습니다. 특별히 설명해야할 것은 JS cdn입니다. 부트스트랩 일부 기능은 popper이란 외부 패키지를 사용하고 있습니다. bundle은 popper를 포함된 겁니다. popper이 포함되어 있는 거랑 별도 imp..
SCSS(Sass) - (2) - 기본 사용법 반복문 @for $변수 from 숫자 through 숫자 { } zero base가 아니고 1부터 시작됩니다. nth-child뒤에는 보간으로 변수를 넣어야 합니다. SCSS에서 보간은 #{ } 방식으로 진행됩니다. 함수 JS문법과 비슷합니다. 다만 @를 붙여줘야 합니다. 색상 내장 함수 mix(기존 색상, 새로운 색상) --> 두 색상의 혼합색을 출력합니다. lighten(기존 색상, a%) --> 해당 색상을 a%를 밝게 출력합니다. darken(기존 색상, a%) --> 해당 색상을 a%를 어둡게 출력합니다. saturate(기존 색상, a%) --> 해당 색상의 채도를 a%를 올려서 출력합니다. desaturate(기존 색상, a%) --> 해당 색상의 채도를 a%를 낮춰서 출력합니다. grays..
SCSS(Sass) - (1) - 개요 및 기본 사용법 SCSS(Sass)는 CSS 전처리 도구입니다. Sass는 css와 호환이 안 될 경우가 있어, SCSS를 개발했습니다. 하나의 도구에 두 가지 문법으로 보면 됩니다. Sass 홈페이지 스타벅스 클론 예제에서 css 파일보시면 어떤 요소를 찾을려는게 너무 길게 써여졌습니다. Sass를 통해 좀 더 손쉽게 요소를 찾을 수 있고 처리할 수 있습니다. Sass는 표준 css문법보다 훨씬 쉽고 강력한 기능들을 가지고 있습니다. 실제로 브라우저에서 동작한 것은 표준css뿐입니다. Sass에서 css로 컴파일(변환)해야 합니다. SCSS 파일생성 css파일과 유사하게 .scss로 끝나는 파일을 만들고 html파일에 link로 연결하면 됩니다. SCSS 주석 /* */ 과 // 둘 다 가능합니다. /* */ 주석은 ..
JS Level Up(3) - 정규표현식 정규표현식(Regular Expression) 정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다. 정규표현식은 크게 다음과 같은 역할을 수행합니다 1. 문자 검색(search) 2. 문자 대체(replace) 3. 문자 추출(extract) 정규표현식 테스트 사이트 https://regex101.com/ https://regexr.com/ JS 정규식 생성 1. 생성자 함수 방식 RegExp 생성자 함수를 호출하여 사용할 수 있습니다. 2. 리터럴(Literal) 방식 정규표현식은 / 로 감싸진 패턴을 리터럴로 사요합니다. JS 정규식 메소드 메소드 의미 정규식.exec(문자열) 일치하는 하나의 정보(array) 반환 정규식.test(문자열) 일치 여부(boolean..
JS Level Up(2) - 데이터 실습 가져오기, 내보내기 default export는 이름을 따로 지정 안 해도 되는 기본 통로입니다. named export는 이름을 지정한 후 내보낼 수 있습니다. 어떤 파일들은 가져오는 것만 있고(main.js), 어떤 파일은 내보내기만 있습니다(module.js). default 통로에 이름을 지정 안 해도 됨으로 함수의 getType을 지워도 상관없습니다. 다른 파일에서 불러올 때도 import abc from './getType' 로 해도 상관없습니다. default가 없으면 이름을 지어서 내보내야 합니다. 이때, 다른 파일에서 불러오려고 하면 { } 안에 똑같은 이름을 적어야 됩니다. 모듈이름을 as 를 통해 다른 이름을 불러서 파일에 사용할 수 있습니다. 또한 모든 함수를 한꺼번에 불러 오고 싶..

티스토리툴바