VITE 환경설정
vite.config.js에서는 vue.config.js와 설정 방식이 많이 달라졌다. 어떻게 달라졌는지 확인해보자.
Posts by Tag
- frontend 17
- vue 16
- javascript 12
- CSS 7
- 웹접근성 3
- es6 2
- tool 2
- wai-aria 2
- accessibility 2
- interaction 1
- plug-in 1
- axios 1
- npm 1
- react 1
- postcss 1
- scss 1
- vscode 1
- mongodb 1
- db 1
- nosql 1
- vue3 1
- error 1
frontend
VUE CSS 파일형식 변경
vue.config.js에서 빌드 후 떨어지는 css의 파일형식을 변경
create-react-app PostCss설정
create-react-app에서 기본으로 제공되는 PostCSS와 craco를 추가 설치하여 import문을 절대 경로로 설정하는 방법을 정리하였다.
자바스크립트 프레임웍 비교
ANGULAR vs REACT vs VUE 비교
ES6
ES6는 ECMAScript 2015와 같은 의미로, ECMAScript의 6번째 주 버전을 발표한 것.
NPM
Node.js 기반 패키지 모듈들을 관리하는 도구.
Vue Loader
.vue 형태의 파일을 javascript 모듈 형태로 변환해주는 webpack loader.
AXIOS
vue에는 vue-resource라는 ajax를 지원하는 라이브러리가 제공되었지만, 현재는 관리되고 있지 않으며 axios(타사 HTTP 클라이언트 라이브러리) 를 사용할 것을 권장하고 있음.
VUEX
상태관리를 위한 라이브러리. 데이터의 변경사항을 추적하고 관리해주는 도구.
VUE ROUTER
VUE ROUTER는 VUE의 공식 라우터로, URL 체계를 형성하기 위한 라이브러리임.
Template Syntax
Template영역에서 사용 가능한 별도의 VUE문법으로 한 번 배워보자
VUE 라이프사이클
VUE의 생명주기로, 생성되어 소멸될때 까지의 과정을 일컬음.
VUE DOM
VUE DOM은 웹 DOM과 같은 DOM이 아닌 가볍게 복사된 가상DOM의 개념.
VUE INSTANCE
new Vue 생성자를 통해, 화면 단위로 사용될 data 및 함수, 라이프사이클, 마운트할 엘리먼트 등을 정의 함.
VUE 구조
.vue 확장자 파일로 구성되어, template, script, style 세개의 영역을 갖음.
VUE 설치
VUE는 NPM기반으로 node.js를 우선 설치.
VUE 소개
SPA(Single Page Application) 개발을 위한 JAVASCRIPT 프레임웍 중에 하나로, MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(view)단 라이브러리.
vue
VITE 환경설정
vite.config.js에서는 vue.config.js와 설정 방식이 많이 달라졌다. 어떻게 달라졌는지 확인해보자.
VUE CSS 파일형식 변경
vue.config.js에서 빌드 후 떨어지는 css의 파일형식을 변경
자바스크립트 프레임웍 비교
ANGULAR vs REACT vs VUE 비교
ES6
ES6는 ECMAScript 2015와 같은 의미로, ECMAScript의 6번째 주 버전을 발표한 것.
NPM
Node.js 기반 패키지 모듈들을 관리하는 도구.
Vue Loader
.vue 형태의 파일을 javascript 모듈 형태로 변환해주는 webpack loader.
AXIOS
vue에는 vue-resource라는 ajax를 지원하는 라이브러리가 제공되었지만, 현재는 관리되고 있지 않으며 axios(타사 HTTP 클라이언트 라이브러리) 를 사용할 것을 권장하고 있음.
VUEX
상태관리를 위한 라이브러리. 데이터의 변경사항을 추적하고 관리해주는 도구.
VUE ROUTER
VUE ROUTER는 VUE의 공식 라우터로, URL 체계를 형성하기 위한 라이브러리임.
Template Syntax
Template영역에서 사용 가능한 별도의 VUE문법으로 한 번 배워보자
VUE 라이프사이클
VUE의 생명주기로, 생성되어 소멸될때 까지의 과정을 일컬음.
VUE DOM
VUE DOM은 웹 DOM과 같은 DOM이 아닌 가볍게 복사된 가상DOM의 개념.
VUE INSTANCE
new Vue 생성자를 통해, 화면 단위로 사용될 data 및 함수, 라이프사이클, 마운트할 엘리먼트 등을 정의 함.
VUE 구조
.vue 확장자 파일로 구성되어, template, script, style 세개의 영역을 갖음.
VUE 설치
VUE는 NPM기반으로 node.js를 우선 설치.
VUE 소개
SPA(Single Page Application) 개발을 위한 JAVASCRIPT 프레임웍 중에 하나로, MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(view)단 라이브러리.
javascript
다운로드 관련 JAVASCRIPT
다운로드 기능 구현시 사용되는 JAVASCRIPT
마우스및키다운 & IFRAME관련 부모요소 제어
iframe으로 외부페이지를 불러온 레이어모달 영역의 이벤트를 부모페이지에서 컨트롤하는 방법
이벤트 프로퍼티
이벤트 프로퍼티 목록
브라우저의 렌더링 과정
HTML과 CSS의 렌더링 과정
비동기처리 Promise
Promise 객체는 비동기 작업시 결과값의 완료 또는 실패에 따른 처리를 할 수 있는 API.
textContent와 innerText
textContent는 script 요소 안의 텍스트를 반환하지만 innerText는 반환하지 않음.
ES6
ES6는 ECMAScript 2015와 같은 의미로, ECMAScript의 6번째 주 버전을 발표한 것.
DOM
HTML구조를 JAVASCRIPT에서 접근하여 조작할 수 있게 구조화된 객체모델임.
Array
배열객체로, 데이터를 나열하여 정의할 수 있는 문법임.
Function
함수는 호출를 위해 사용되는 문법으로, 여기서 자세한 문법을 알아보자
Prototype
상속된 모든 다른 객체들과 공유된 속성을 제공하는 객체
Object
ECMASCRIPT에 정의된 내장객체로, String, Number, Boolean, Array, Function 등의 객체의 프로토타입 객체임.
CSS
SCSS 문법정리
SCSS 고급 문법
normalize.css
normalize 속성 알아보기
Grid 레이아웃 2편
IE에도 Grid를 사용할 수 있도록 적용 방법을 알아보자!!
Grid 레이아웃 1편
CSS의 Grid속성은 레이아웃을 잡는데 활용되며, 구조의 제약이 있던 CSS 레이아웃보다 유연성을 갖는다.
CSS로 화살표 만들기
화살표 이미지없이 css로 만들어 적용하기
ios fixed 버그
fixed값을 갖는 모달에 input과 같은 요소가 있는 구조에서 input요소에 focus가 매치되지 않는 버그
Flex 속성 정리
flex 속성들을 알아보고 실무에 활용해보자!!
웹접근성
WAI-ARIA 2편
WAI-ARIA 실무 적용 예제를 자세히 알아보자!
WAI-ARIA 1편
W3C에서 접근성과 상호 운용성을 개선하기 위해 발표한 기술 명세가 WAI-ARIA (Web Accessibility Initiative - Web Accessible Rich Internet Applications) 이다.
유용한 개발툴
UI개발자가 사용시 더 빠르고 손쉬운 코딩이 가능한 유용한 개발툴들을 정리하였다.
es6
자바스크립트 프레임웍 비교
ANGULAR vs REACT vs VUE 비교
ES6
ES6는 ECMAScript 2015와 같은 의미로, ECMAScript의 6번째 주 버전을 발표한 것.
tool
MongoDB 정리
MongoDB와 Robomongo툴 사용법 정리
유용한 개발툴
UI개발자가 사용시 더 빠르고 손쉬운 코딩이 가능한 유용한 개발툴들을 정리하였다.
wai-aria
WAI-ARIA 2편
WAI-ARIA 실무 적용 예제를 자세히 알아보자!
WAI-ARIA 1편
W3C에서 접근성과 상호 운용성을 개선하기 위해 발표한 기술 명세가 WAI-ARIA (Web Accessibility Initiative - Web Accessible Rich Internet Applications) 이다.
accessibility
WAI-ARIA 2편
WAI-ARIA 실무 적용 예제를 자세히 알아보자!
WAI-ARIA 1편
W3C에서 접근성과 상호 운용성을 개선하기 위해 발표한 기술 명세가 WAI-ARIA (Web Accessibility Initiative - Web Accessible Rich Internet Applications) 이다.
interaction
플러그인 모음
마크업에 유용한 플러그인 종류
plug-in
플러그인 모음
마크업에 유용한 플러그인 종류
axios
AXIOS
vue에는 vue-resource라는 ajax를 지원하는 라이브러리가 제공되었지만, 현재는 관리되고 있지 않으며 axios(타사 HTTP 클라이언트 라이브러리) 를 사용할 것을 권장하고 있음.
npm
NPM
Node.js 기반 패키지 모듈들을 관리하는 도구.
react
create-react-app PostCss설정
create-react-app에서 기본으로 제공되는 PostCSS와 craco를 추가 설치하여 import문을 절대 경로로 설정하는 방법을 정리하였다.
postcss
create-react-app PostCss설정
create-react-app에서 기본으로 제공되는 PostCSS와 craco를 추가 설치하여 import문을 절대 경로로 설정하는 방법을 정리하였다.
scss
create-react-app PostCss설정
create-react-app에서 기본으로 제공되는 PostCSS와 craco를 추가 설치하여 import문을 절대 경로로 설정하는 방법을 정리하였다.
vscode
유용한 개발툴
UI개발자가 사용시 더 빠르고 손쉬운 코딩이 가능한 유용한 개발툴들을 정리하였다.
mongodb
MongoDB 정리
MongoDB와 Robomongo툴 사용법 정리
db
MongoDB 정리
MongoDB와 Robomongo툴 사용법 정리
nosql
MongoDB 정리
MongoDB와 Robomongo툴 사용법 정리
vue3
VUE3 에러 정리
VUE3 문법을 사용하면서 발생한 오류 정리
error
VUE3 에러 정리
VUE3 문법을 사용하면서 발생한 오류 정리