본문 바로가기
[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..
웹, 앱 무료 컬러 색상 추출 사이트 추천 (ft. color 추천, 두 컬러 조합) UI 디자인을 위한 컬러 선택에 참고할 사이트를 추천합니다. 프로젝트 UI 디자인 작업을 할 때, 가장 중요한 것이 컬러 구성입니다. 어떤 컬러를 선택할지, 몇가지 컬러는 사용할지, 컬러를 어떻게 조합하여 사용할지, 매번 고민하고, 시간을 투자하여 결정합니다. 컬러에 어려움을 느낀다면 주로 아래 추천사이트에서 색을 추출하여 사용하세요. 고민 없이, 30초 안에 컬러 선택과 추출한 후 바로 적용이 가능합니다. 1. 2 Color Combinations - 어울리는 2개 컬러 최근 가장 애용하는 2가지 어울리는 색 세트를 찾아주는 사이트입니다. https://2colors.colorion.co/ Two Color Combinations Two color combination palettes 2colors.c..
[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 이면 주변칸 오픈 · 모든 칸을 열었을 경우 성공 ..
구글 애드센스 pin 번호 우편물 도착(ft. pin 번호 등록. 은행 계좌 등록) 구글애드센스 입금을 위하여 pin번호를 받고 등록하는 과정을 이야기하겠습니다. 구글 애드센스 홈페이지에서 오랫동안 알림이 떠왔었습니다. pin번호 우편을 보냈고, pin번호를 입력해달라는. 이런 알림을 받고, 아무런 우편물을 받지 못한 채.. 이상해서 내가 제대로 주소를 기입했나 체크도 하고, 눈 빠지게 기다리다가 애드센스 핀번호 우편물 드디어 도착! 처음에는 구글애드센스 사이트에서 ''주소를 확인하지 않아 지급이 보류 중입니다.'라는 메시지가 상단에 뜹니다. 계정에 주소를 등록합니다. 이후 애드센스 핀번호 우편은 광고 배치 후 10달러를 초과하면 구글 아시아지부인, 말레이시아 지사에서 등록된 우편을 보냅니다. 보통 도착하는데 한달 정도가 소요됩니다. 주소를 잘못 입력하거나, 이사 전 주소로 등록했을 경..
[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..
[js] 자바스크립트로 숫자야구 게임 구현하기 자바스크립트를 이용하여, 숫자야구를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 순수 자바스크립트(리팩토링 전) 순수 자바스크립트(리팩토링 후) 리팩토링 부분 다음 문제 내는 코드가 3번 반복되므로 이를 함수로 만들어 준다. function selectNumFn() { candidate = [1, 2, 3, 4, 5, 6, 7, 8, ..
[js] 자바스크립트로 끝말잇기 구현하기 자바스크립트를 이용하여, 끝말잇기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트 화면 결과(Result 클릭)
Buy me a coffee 티스토리에 적용하기(바이미어커피 위젯 달기) Buy me coffee 위젯을 내 블로그에 적용하는 방법을 알아보겠습니다. Buy me coffee 사이트 회원 가입 및 계정 생성 아래의 사이트에서 회원가입을 하고, buymeacoffee 뒤에 붙는 link 이름을 등록합니다. 회원 가입 시 등록한 이메일을 통해 verification code를 입력한 후 가입이 완료됩니다. https://www.buymeacoffee.com/home Buy Me a Coffee Buy Me a Coffee is the best way for creators and artists to accept support and membership from their fans. www.buymeacoffee.com PAYPAL 계정 연결 후원금 입금 처리를 위하여, 회원 가입..
[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) 자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립트 2. vue.js 간단한 구현 내용으로 vue.js cdn을 설치하였습니다. 구구단 {{ num1 }} 곱하기 {{ num2 }} 는? //focus() 처리를 위하여 ref 사용 결과 {{result}} parseInt() String을 Number 타입으로 바꾸는 함수 입니다. 타입을 바꾸기 위해 Number() 또는 String()을 사용하기도 합니다. parseIng() 예제 parseInt("10"); // 10 parseInt("-10") // -10 parseInt("10.5")..
[js] 자바스크립트로 검색 기능 구현하기 form 에서 자주 사용하는 기능, 검색을 구현하는 법입니다. 화면 결과 html, css 수도: Australia Canberra Argentina Buenos Aires Austria Vienna Bahamas Nassau Belgium Brussels Canada Ottawa Chile Santiago China Beijing Cuba Havana Czechia Prague Denmark Copenhagen Ecuador Quito Egypt Cairo Finland Helsinki France Paris Germany Berlin Greece Athens Hungary Budapest India New Delhi script 코드 1) indexOf() function filter() { let ..
[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) jsonplacehoder의 fetch를 사용하여 ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력 평소에 데이터 서버 기능 구현을 위해서 테스트용으로 많이 사용하는 JSONPlaceholder 사용법을 알아보겠니다. 사이트 이동 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Fake online REST API for testing and prototyping When to use JSONPlaceholder is a free online REST API that you can use ..
[js] 자바스크립트 map(), filter() 사용법(ft. 배열) 배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. 결과를 "return ..." 리턴 값으로 추출합니다. 단, 실행문이 한 개만 반환될 경우, return 키워드와 {} 를 생략할 수 있습니다. 예시 cosnt a = numbers.map(number => { return number number < 3) map 함수 구문 array.map(callbackFunction(current value, index, array), thisArg) currentV..
[vue] vue로 게시판 구현하기(ft. 검색, 게시물 추가, 편집, 삭제 기능) vue.js로 게시판을 만들고, 검색, 게시물 추가, 편집, 삭제하는 기능 구현입니다. 게시판 구현 화면 구현 내용: · vue, vue material CDN 방식으로 html 문서에 설치 · api 서버 통신 대체용 임시 테스트 데이터 script 내 설정 · 게시판에 게시물 추가 - 추가 기능 · 해당 게시물 편집 - 편집 기능 · 해당 게시물 삭제 - 삭제 기능 · 게시물 제목 이용한 검색 기능 html 간단한 마크업을 위해 vue, vue material을 cdn 방식으로 설치하고, 임의의 더미데이터를 삽입하여 데이터 추가, 검색, 편집, 삭제 기능을 구현한 코드입니다. Todo List Search for SUBJECT DESCRIPTION {{ listItem.subject }} {{ lis..
[vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, html과 css의 코드를 그대로 나의 문서에 적용시키면 됩니다. 모달창 적용 방법 1. Modal.vue 의 파일(모달용 하위 컴포넌트)을 하나 생성합니다. 2. 상위 컴포넌트에 Modal 컴포넌트를 부릅니다.(import) 3. 가이드의 코드를 위의 컴포넌트들에게 적용합니다. 구현 화면 Modal.vue(모달용 하위 컴포넌트) default header default body default footer close ..
[vue] vue.js Post 폼 데이터 api 전송하기(axios, 유효성 검사) vue.js의 폼데이터를 axios를 이용하여 서버통신하는 방법을 알아보겠습니다. form 화면 구현 내용: · vue, axios, vue material CDN 방식으로 html 문서에 설치 · axios, post방식으로 form data api로 전송 · 가상의 post url : http://jsonplaceholder.typicode.com/posts · 디자인 vue material 사용 · 유효성 검사 - 이름, 이메일, 성별, 동의 체크박스 필수 입력 · 전송후 form 데이터 입력값 다 지우기 · 특정 값 선택시 textarea disabled 속성 처리 html 문서 내 코드 Sign up Name Email address Gender Male Femail Your job Develo..
반응형

티스토리툴바