Array.forEach
Array.map
Array.some
Array.every
Array.filter
Array.reduce
Author: shine1092
git flow
|
1 2 3 4 5 6 7 8 |
git flow feature start 'yoon' ----------------------------- git add . git commit -m 'message' ----------------------------- git flow feature finish yoon // git push origin develop |
vuex
State Management Pattern
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // action methods: { increment () { this.count++ } } }) |
You cannot directly mutate the store’s state. The only way to change a store’s state is by explicitly committing mutations.
mapState
Getters
mapGetters
Mutations ( 변이 )
Actions
Modules
Object.assign()
JavaScript Object Prototypes
Vue-cli project
Vue-cli installation
|
1 2 3 4 |
// vue-cli 2 npm install -g vue-cli // vue-cli 3 npm install -g @vue/cli-init |
with mac
|
1 |
sudo npm install -g vue-cli |
creating a project
|
1 2 3 4 |
// vue create project-name npm install -g @vue/cli-init # vue init now works exactly the same as vue-cli@2.x vue init webpack my-project |
vue-cli vuejs-templates
vue list
|
1 2 3 4 5 6 7 8 9 |
Joui-MacBook-Pro:workbench zzou$ vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
. ├─ README.md ├─ index.html ├─ webpack.config.js ├─ package.json └─ src ├─ main.js ├─ App.vue ├─ components │ ├─ common │ └─ ... ├─ routes router │ ├─ index.js │ └─ routes.js ├─ views router pages │ ├─ MainView.vue │ └─ ... ├─ store state │ ├─ auth │ ├─ index.js │ └─ ... ├─ api api │ ├─ index.js │ ├─ users.js │ └─ ... ├─ utils utils fn │ ├─ filters.js │ ├─ bus.js │ └─ ... ├─ mixins │ ├─ index.js │ └─ ... ├─ plugins │ ├─ ChartPlugin.js │ └─ ... ├─ translations 다국어 │ ├─ index.js │ ├─ en.json │ └─ ... ├─ images ├─ fonts └─ assets |
Regular Expression
Regular Expression)
git bash
|
Case
|
실행 명령어
|
설명
|
||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Case
|
실행 명령어
|
설명
|
||||||||||
| 저장소 생성 | git clone 원격저장소주소 | 최초 1회 | ||||||||||
| 신규 개발 브랜치 생성 | git checkout master
git pull git checkout -b 브랜치명 |
master 브랜치선택
원격저장소의 master를 가져옴 (최신 master) 최신 master 위에 신규 브랜치를 생성 후 브랜치로 이동 |
||||||||||
| 내가 작업중이 브랜치 확인 | git branch | ” * ” 표기가 있는 브랜치가 현재 선택된 브랜치 | ||||||||||
| 수정된 파일 보기 | git status |
|
||||||||||
| 커밋 하기 | git add 파일명
git commit |
작업파일을 커밋 대상으로 올림,
-m 옵션을 주면 메시지를 바로 입력가능 |
||||||||||
| 원격저장소에 신규 브랜치 올림 | git push -u:최초 1회떄 origin 브랜치명 | 신규 저장소 최초 1회 때에 -u 옵션을 주고 이후에는 그냥 push만 하면 됨 |
||||||||||
| 최신 master랑 Merge | git checkout master
git pull git checkout 브랜치명 git merge –no-ff master git status git commit -m “merge with master” git push origin 브랜치명 |
master 선택
원격저장소에서 master를 가져옴 작업브랜치로 이동 작업브랜치 master를 merge 상태확인 커밋 Push |
||||||||||
| 기존 작업 브랜치를 내려받아서 작업 | git checkout -b 브랜치명 origin/브랜치명 | hg에서 옮겨온 경우 브랜치명은 hg/브랜치명 |
Responsive Web Design
반응형웹은 쉽게 말해, 디바이스 화면의 크기에 따라 웹페이지의 레이아웃이 자동적으로 재조정 되는 것을 말합니다.
기존에는 PC와 모바일기기를 대응하기 위해 선별된 기기 유형에 따른 별도의 독립적인 템플릿 (각각의 *HTML, *CSS 소스)을 이용하였지만,
반응형웹은 미디어퀴리라는 CSS기법을 이용하여 하나 템플릿(HTML, CSS소스)만으로 다양한 환경에서 레이아웃이 변환되어 최적화된 환경을 사용자에게 제공합니다.
사용자 입장에서는 어느 기기에서든 같은 콘텐츠를 적절한 화면으로 볼 수 있고, 개발자 입장에서는 기기마다 따로 웹페이지를 개발하지 않아도 되므로 개발 비용을 절감할 수 있습니다.
*HTML(Hyper Text Markup Language) : 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어.
*CSS(Cascading Style Sheets) : HTML을 바탕으로 만들어진 문서를 꾸며주는 역할.
한 화면은 HTML로 구성되어 있으며 이 화면을 꾸며주기 위해서 CSS파일이 연결 되거나 안에 포함 되어 있다.
mediaquery
<link>
|
1 |
<link href="style.css" media="screen and (min-width: 768px) and (max-width: 1024px)" rel="stylesheet"> |
<style>
|
1 2 3 |
<style type="text/css" media="screen and (min-width: 768px) and (max-width:1024px)"> /* style */ </style> |
@import
|
1 2 3 |
<style type="text/css"> @import url(style.css) screen and (min-width: 768px) and (max-width: 1024px); </style> |
css
|
1 |
@media screen and (min-width:768px) and (max-width:1024px) |
The 960 Grid System
960 Grid System은 단순히 너비가 960px 인 Grid를 사용하여 웹사이트를 배치하는 방법이다.
web accessibility
웹 접근성이란?
월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
‘장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간’이라고 정의하였으며,
웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야
한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고,
웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.
월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.
웹 접근성 및 정보통신 접근성에 대한 주요 정의
| 구분 | 정의 |
|---|---|
| 장애인·노인 등의 정보통신 접근성 향상을 위한 권장지침 | 정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것 |
| 웹 접근성 이니셔티브 (WAI: Web Accessibility Initiative) |
장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것 |
| Wikipedia | 표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것 |
| 한국정보화진흥원 | 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 |