본문 바로가기
[js] 자주 쓰이는 정규식(regular expression) 모음 (ft. 정규표현식) 자주 쓰이는 정규식 1. 암호 조건1. 6~20 영문 대소문자, 최소 1개의 숫자 혹은 특수 문자를 포함해야 함 /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/ 조건2. 8 ~ 10자 영문, 숫자 조합 var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; 조건3. 특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식 var regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/; 2. 이메일 /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/ 3. 핸드폰 /^010([0|1|6|7|8|9]?)-?([0-9]..
[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.2) 자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.2)입니다. - 기능 구현, 초기화 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 2개씩만 오픈하도록 설정 2 카드끼리 색깔이 같은지 다른지 체크 3 같을 경우, 카드 계속 오픈 클릭 방지 4 틀릴 경우, 1초 후 카드 닫기 클릭 방지 5 클릭한 카드의 색깔이 같을 경우, 클릭한 카드를 완성 카드에 넣어줌 6 완성 카드가 모두 오픈 되었을 경우, 성공 메시지 출력 타이머 7 초기화 피츠예이츠 셔플 함수로 설정, 백업변수 구현 화면(성공 후) html 코드 script 전체 코드 const x = 4; const y = 3; //카드 뒤 색깔 7개 2개씩 미리 설정 let backColor..
[js] 자바스크립트 forEach() 사용법 자바스크립트 forEach 메서드의 사용법 입니다. forEach문 배열의 반복문 배열에서만 사용하는 메서드 배열의 처음부터 마지막 요소까지 반복하여 실행 인자로 콜백함수를 받아옴 주어진 콜백함수를 배열 요소 각각에 대해 실행 querySelectorAll() 전체 선택자를 이용하여 주로 사용 arr.forEach(callback(item, index, array) //참고로 마지막 인자, array는 forEach()를 호출한 배열로 거의 사용안함 forEach문 예제 const food = ['🍕', '🥨', '🥪', '🍔']; food.forEach(function(ele, index) { console.log(ele, index); }); //결과 🍕 0 🥨 1 🥪 2 🍔 3 food.forEac..
[js] 피셔 예이츠 셔플, 알고리즘 피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크 예이츠(Frank Yates)가 만들어 피셔-예이츠 셔플이라고 합니다. 제로초님의 자바스크립트를 이용한 게임을 구현하면서 이 셔플을 알게 되었고, 랜덤 정렬이 필요할 경우마다 사용되므로 아주 유용한 알고리즘입니다. 저는 자바스크립트를 이용한 게임 야구, 로또 추첨기, 카드 뒤집기 게임에서 사용하였고, 음악 앱에서 음악 랜덤 플레이를 만들때도 사용한다고 합니다. 피셔 예이츠 셔플 예제 숫자 야구 //숫자뽑기 let candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let..
[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.1) 자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 세팅 총 14개의 카드(7개씩 2쌍) 2 css 스타일링 설정 카드의 앞과 뒤를 tranform을 사용하여 뒤집는 효과 3 클릭하여 카드 뒤집기 toggle 메서드 이용하여 flipped 클래스명 toggling 4 카드 뒷면 색깔 랜덤 설정 피셔 예이츠 방식을 이용하여 7가지 색깔 섞은 후 설정 구현 화면(카드 앞면/뒷면) html 코드 - 없음 자바스크립트로 구현하려는 것을 미리 주석으로 html으로 짜봅니다. css 코드 .card { display: inline-block; width: 70px; height..
[js] 자바스크립트 toggle 적용하기(ft. add, remove) 자바스크립트를 이용한 toggle 메서드의 사용을 알아보겠습니다. toggle() 토글이란, on/off switch의 개념으로 스위치를 켰다, 껐다 하는 기능을 가지고 있습니다. add()와 remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다. 보통 click 이벤트에 classList를 이용하여 toggle로 css로 style을 준 클래스명을 on/off 처리합니다. 참고: class 아니고, classList 입니다. 변수명.addEventListener('click', function() { 변수명.classList.toggle('클래스명'); }); add() 지정한 클래스 값을 추가합니다. 변수명.addEventListener('click', function() { 변수명.clas..
[vscode]비주얼스튜디오 유용한 플러그인 추천 최근에 가장 인기있는 코드 에디터, 비주얼 스튜디오의 대표적인 플러그인을 소개합니다. 비주얼 스튜디오 플러그인 리스트 Live Server : 정적 파일을 로컬 서버에 올리고 자동 갱신해주는 플러그인 Auto Close tag : HTML 태그 자동 닫기 플러그인 Material Icon Theme : 폴더 아이콘 테마 ESLint : 자바스크립트 문법 검사 플러그인 TSLint : 타입스크립트 문법 검사 플러그인 Prettier : 코드 Formatter 기능 Vetur : Vue.js 전용 플러그인 Material Dark Syntax : 코드 하이라이팅 플러그인 Live Server 가장 필수인 플러그인, 실시간 미리 보기입니다. Auto Close tag 자동으로 닫는 태그를 생성해줍니다. Mat..
[vue] vue.js props / emit 사용방법 일반적인 컴포넌트에서의 데이터 전달 방식인 props, emit의 사용방법을 알아보겠습니다. 구현 화면 코드 예제 폴더 구조 AppHeader.vue(하위 컴포넌트1) 상위 컴포넌트에서 제목을 props로 받아와 출력합니다. AppContent.vue(하위 컴포넌트2) 상위 컴포넌트에서 데이터를 받아와 리스트를 출력하고, 클릭하면 emit으로 상위 컴포넌트로 올라와서, 상위 컴포넌트에서 다시 메소드를 이용하여 변경된 데이터를 뿌려줍니다. //emit 방법 1 - method 통해 emit 처리 @click="method 이름()" //methods에서 this.$emit('emit 이름') 처리 //emit 방법 2 - 바로 emit 처리 @click="$emit('emit 이름')" App.vue(상위..
[vue] vue.js 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.7) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.7)입니다. - 리팩토링, 공통 컴포넌트화 - 예제는 인프런의 캡틴 판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을 때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화시킵니다. 구현 내용 각각의 페이지에서 사용되는 user information을 하나의 컴포넌트화 시키기 위한 작업을 합니다. 리팩터링 작업 · components > UserProfile.vue 파일 생성 · 기존의 ItemView.vue의 내용(위 오른쪽 UI)을 copy //기존 ItemView.v..
[css] 수직 수평 가운데 정렬(ft. flex, align-items: center, justify-content: center;) css로 수직 수평 가운데 정렬하는 가장 간편한 방법입니다 css를 통하여 text-align: center 또는 margin: 0 auto 등을 이용하여, 수평 가운데 정렬을 하는 방법은 많이 알고 있지만, 수직 가운데 정렬하는 방법은 정확하지 않고, tricky 한 편입니다. 이때 간편하게 가운데 배치하는 방법이 display: flex 입니다. 수직 가운데 정렬 부모 또는 해당 요소 css display: flex; align-items: center; 예제 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nulla, quaerat itaque, magnam tempora quam, voluptate eos rerum iste..
[css] reset css 기본값 코드(ft. 기본 css 세팅) 사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일 초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” 2.0 css 코드 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q..
[vue] vue 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.6) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화 시킵니다. 구현 내용 News/Ask/Jobs 각 페이지를 ListItem.vue에서 컴포넌트를 시킨 후 각각의 페이지에서 ListItem.vue를 import 시킵니다. 리팩토링 before vue > NewsView.vue {{ item.points }} {{ item.title }} {{ item.time_ago }}..
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) 스타일링을 할때 ellipsis에 대해 정리해 보도록 하겠습니다. 게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우, css를 이용하여 일정 크기 이상에서는 '...' 으로 정리합니다. css 코드 한 줄로 글자 수 제한 표시 (single line) · display: block(block레벨)에서만 적용 · text-overflow:ellipsis text가 초과할 경우 생략 부호로 표시 · white-space:nowrap : 공백 문자가 있는 경우 줄 바꿈 하지 않고 한 줄로 나오도록 처리 width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 여러 줄로 글자수 제한 표시 (multi line) overflo..
[vue] vue getters, v-html, transition(api 통해 뉴스 사이트 구현 ver.5) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.5)입니다. - getters/v-html - getters 적용 코드 정리를 위하여 getters를 이용하여 긴 코드를 줄이고, 가독성을 높일 수 있습니다. getters 적용 before views > ItemView.vue {{ this.$store.state.item.title }} {{ this.$store.state.item.content }} getters 적용 after views > ItemView.vue {{ fetchedItem.title }} {{ fetchedItem.content }} store > index.js export const store = new Vuex.Store({ getters..
[vue] vue.js vue 동적 라우트(api 통해 뉴스 사이트 구현 ver.4) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.4)입니다. - 동적 라우트 매칭 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 동적 라우트 매칭(dynamic route matching) dynamic route matching 공식문서: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes Dynamic Route Matching | Vue Router Dynamic Route Matching Very often we will need to map routes w..
[vue] vue vuex , store적용(api 통해 뉴스 사이트 구현 ver.3) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.3)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. vuex 적용 모듈화 process No. 순서 remark 1 기본 설정 2 state data 속성 3 actions api 호출, dispatch api 호출 4 mutation state 값 변경, commit api 호출 5 화면 출력 6 getters 리팩토링 컴포넌트 데이터 호출 방법 BEFORE: component에서 직접 api를 호출하여 사용 AFTER: vuex(상태관리도구)를 이용하여 vuex의 state에 api를 담아서 화면에 표시 vuex 설치 ..
[vue] vue axios 이용한 api 서버 통신(api 통해 뉴스 사이트 구현 ver.2) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.2)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. axios 이용한 api 호출 해당 API 문서 주소: http://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md tastejs/hacker-news-pwas HNPWA - Hacker News readers as Progressive Web Apps 📱 - tastejs/hacker-news-pwas github.com axios 설치 npm i axios --s axios에 대한 자세한 설명은 아래 포스트로 ..
[vue] vue.js 라우터 연결, nav 출력(api 통해 뉴스 사이트 구현 ver.1) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 구현할 사이트(해커뉴스): https://news.ycombinator.com/ 해당 API 문서 주소: github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md tastejs/hacker-news-pwas HNPWA - Hacker News readers as Progressive Web Apps 📱 - tastejs/hacker-news-pwas github.com 프로젝트 생성 · 폴더 만들기 · 터미널에서 해당 프로젝트 생성 v..
[js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 틱택토 구현 BEFORE 버전은 아래 포스트로 이동하세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com 추가 구현 기능: · 컴퓨터의 턴(나의 턴: X/컴퓨터의 턴: O) · 무승부일 경우 자바스크립트 코드 컴퓨터의 턴 순수자바스크립트 코드(컴퓨터의 턴) let table =..
[vue] vue.js computed 속성 vue.js에서 사용되는 computed속성에 대하여 알아보겠습니다. computed 속성 실시간으로 계산, 로직을 화면에 출력할 때 사용합니다. 실습 예제 {{ header.toLocaleUpperCase() }} add item cancel add {{ item.subject }} 예제 1) 실시간 계산 input에 텍스트 입력할 때마다 실시간으로 text가 몇 글자인지 계산 {{ charaterLength }}/50 add 화면 결과(Result 클릭)
[vue] v-if, v-else, v-show (ft. v-if와 v-show 차이점) vue.js에서 v-if를 이용한 조건부 렌더링을 알아보겠습니다. v-if v-if와 v-else는 자바스크립트의 조건문 if, else if와 같은 의미입니다. 조건이 성립하지 않으면 렌더링 자체를 하지 않아 태그 자체가 비어있습니다. True False //결과: True v-else v-else는 v-if 와 함께 이용할 수 있습니다. 앞의 조건이 성립하지 않는다면 else 조건이 동작합니다. 예제) button을 이용하여 form을 조건부 렌더링 · add item 버튼 클릭 시 form 출력 · cancel 버튼 클릭시 form 사라짐 {{ header.toLocaleUpperCase() }} add item cancel add {{ item.subject }} var app..
[js]자바스크립트 스코프, 클로저(ft. 지역/글로벌/렉시컬 scope) 스코프(scope) scope는 영어로 범위라는 뜻 함수 스코프는 자바스크립트 함수의 범위, 즉 { } 안을 의미 스코프는 함수 호출할 때가 아니라 함수선언할 때 생깁니다. 함수 선언도 변수와 같이 스코프의 적용을 받습니다. 스코프의 원칙 변수는 자신을 감싸고 있는 함수 밖을 벗어날 수가 없습니다. 스코프의 종류 전역 스코프(global scope) 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미 지역 스코프(local scope) 해당 함수 내에서만 접근할 수 있어 함수를 벗어난 곳에선 접근할 수 없습니다. 함수 스코프(function-scoped) 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 함수 범위 내에 선언한 변수는 해당 함수 안에서만 접근할 수 있는데 이를 함..
[vue] vue 클래스 바인딩(다이너믹 클래스, 객체, 배열, 토글, 스타일 바로 적용) vue.js에서 속성 바인딩으로 클래스를 적용하는 방법을 알아보겠습니다. 다이너믹 클래스(Dynamic class) 미리 클래스 이름에 스타일을 지정해 놓고, 조건에 맞추어 해당 클래스 적용시킬 때 사용합니다. 다이너믹 클래스를 적용하는 방법은 2가지입니다. 사용할 예제 {{ item.subject }} 화면 결과 v-for로 items에서 subject만 추출하였고, style 태그 안에, 클래스 done/important/ready의 이름과 스타일을 지정해 주었습니다. 다이너믹 클래스를 적용하는 방법은 객체와 배열의 방식이 있습니다. 하나씩 알아보겠습니다. 1. 객체(object) 객체 속성에는 클래스 이름, 값은 조건을 넣어 줍니다. v-bind:class="{ 클래스 이름: 조건 }" 예제 1) ..
[js] 자바스크립트로 반응속도 테스트 구현 자바스크립트를 이용하여, 반응속도 테스트를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 특이사항 준비 화면 상태 일 때 랜덤 한 시간 후에 자동으로 테스트 화면으로 전환 setTimeout으로 Math.floor(Math.random()*1000): 0-1초 사이 랜덤 시간 이후 click() 자동 클릭 시킴 html 코드 Click to start css 코드 #screen { width: 400px; height: 300px; text-align: center; user-select: none; /*해당요소의 드레그, 더블클릭, 블럭지정을 막는다.*/ font-size: 20px; font-weight: bold; } #screen.waiti..
[js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰판 만들기(화면단, 데이터단) · 화면은 table 태그 이용, · 데이터는 이차원배열 이용 parseInt() 지뢰 뽑기 Array.fill().map(), while문, splice() 지뢰 심기 연산자 /, % 오른쪽 마우스 클릭 이벤트 · 클릭시 깃발(느낌표), 물음표, 처음으로 표시 contextmenu, e.currentTarget, indexOf(), 왼쪽 마우스 클릭 이벤트 · 지뢰일 경우, · 지뢰가 아닐 경우, 주변 8칸의 지뢰 개수를 세고, 개수가 0 이면 주변칸 오픈 · 모든 칸을 열었을 경우 성공 ..
[js] 자바스크립트로 가위바위보 게임 구현하기 자바스크립트를 이용하여, 가위바위보 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. html 코드 바위 가위 보 css 코드 #computer { height: 250px; width: 140px; } 순수 자바스크립트 1. background 이미지 설정 const computer = document.querySelector('#computer'); let left = 0; //컴퓨터 결과 = left //0.15초마다 가위/바위/보 이미지 변경 setInterval(function() { if (left === '0') { left = '-100px'; } else if (left === '-100px') { left = '-270px'; } e..
[js] 자바스크립트로 로또추첨기 구현하기 자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 숫자 만들기 2 후보 숫자 랜덤으로 섞기 while문, Math.random(), splice() 3 보너스 숫자 뽑기: 섞은 배열의 마지막 요소 4 로또 숫자 뽑기: 섞은 배열의 앞에서 6개의 요소 slice() 또는 splice() 5 추출된 숫자 화면 출력 css, sort() 6 타이머 기능: 1초에 숫자 하나씩 출력 setTimeout 순수 자바스크립트 1. 45개의 후보 숫자 만들기 방법1. const candidates = []; for (i = 1; i v = i+1 ); //결과: (45) [1, 2, ..
[js] 자바스크립트로 틱택토 구현하기 (ft. e.target.value, forEach) 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 전체 코드 forEach() *** · 배열의 반복문 배열의 반복문 · 주어진 콜백함수를 배열 요소 각각에 대해 실행 · 콜백함수를 받아옴 const food = ['🍕', '🥨', '🥪', '🍔']; food.forEach(function(ele, index) { console.log(ele, index); }); //결과 🍕 0 🥨 1 🥪 2 🍔 3 food.forEach(function(ele) { console.log(ele); }); //결과 🍕 🥨 🥪 🍔 arrow 함수 표현 food.forEa..
반응형

티스토리툴바