본문 바로가기
[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..
[vue] vue.js로 todolist 투두리스트 앱 만들기(리팩토링 후) vue.js와 vue material을 이용한 todolist 앱 리팩토링 리팩토링 전의 앱의 구현 내용은 아래의 포스트로 이동해주세요. https://goddino.tistory.com/90 [js] vue.js로 todolist 투두리스트앱 만들기(refactoring전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header,.. goddino.tistory.com 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. TodoList 앱화면 리팩토링 작업 과정: 하위 컴포넌트..
[vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header, input, list, footer component로 분리 · Things To Do라는 input 박스에 해야할일을 기입 · 해야할일 기입 후 enter 또는 오른쪽 plus버튼 클릭시, 아래 리스트에 추가 · CLEAR ALL 버튼 클릭시 전체 삭제 · refactoring 전 구현이 미완성된 상태 · vue material을 이용한 css · localstorage를 이용한 데이터 저장/불러오기/삭제하기 기능 App.vue TodoHeader..
[vue] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기) 간단한 예제를 통하여 vue에서 axios를 통하여 서버 통신 하는 법을 알아보겠습니다. axios란 · axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다. · axios는 자바스크립트 비동기 처리에 사용되는 객체인 promise를 기반으로 이루어졌습니다. · aixos는 오픈소스이므로 axios github를 통하여 자세한 내용을 확인할 수 있습니다. · 이와 비슷하게 jQuery에서는 ajax를 이용하여 데이터를 호출, 받아오고, 수정하는 작업을 합니다. axios 요청 방법 데이터 불러오기: axios.get(url[, config]) 데이터 입력하기: axios.post(url[, data[, config]]) 데이터 수정하기: axios.patch(url[, dat..
[vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생성 2. 상위 컴포넌트(App.vue) script 내에 하위 컴포넌트로 import로 콜 3. export default, components 메소드 안, import한 하위 컴포넌트 export 처리 4. 상위 컴포넌트 template 태그내, 각 하위 컴포넌트 태그 삽입 이렇게 컴포넌트 작업이 완료되었습니다. main.js 파일을 확인해 보면, 각각의 하위 컴포넌트가 하나로 합쳐진 App.vue 파일이 import가 되어 아래 vue 인스턴스를 통하여 Virtual Dom 화면에 출력..
[vue] vue.js 기초 정리 요약(pass props/emit event) vue.js 기초 정리편 vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를 듣고 참조하여 정리하였습니다. Vue.js 공식 문서 https://vuejs.org/v2/guide/ Introduction — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue.js란? Progressive Javascript framework for buiding user interfaces and front-end applications Vue.js의 핵심 Reactivity (반응성) Vue의 가장 큰 특징으로서, 데이터에 대한 변화를 vue에서 감지하여 화면에 바로 반영합니다. 즉, 데이터..
[서식] 견적서 양식 다운로드 견적서양식(한글파일)을 다운로드 해주세요. 다운로드 파일 견적서 작성요령
[서식] 교육신청서 다운로드 교육신청서 excel, pdf, jpg 파일 중 골라서 다운로드 해주세요. 다운로드 파일
[서식] 휴가신청서 다운로드 휴가신청서 excel, pdf, jpg 파일 중 골라서 다운로드 해주세요. 다운로드 파일
[워드프레스] 블루호스트 해지 후 도메인 비용 청구 스팸 메일 처리 방법 오늘 아침에 이메일을 확인하였다가, 제가 예전에 블루호스트 사이트를 통하여 만든 워드프레스 사이트의 도메인과 관련된 내용의 이메일을 받았습니다. "간단하게, 도메인 비용을 계속 지불하지 않고 있으니, 당신의 데이터를 삭제시키기 전에 입금 시켜라" 라는 내용이었습니다. 몇개월 전에 블루호스트를 이용하여 도메인을 생성하고 호스트 비용를 납부한지, 하루만에 계정/도메인을 삭제하고 환불처리를 받았습니다. 도메인을 삭제했다고 생각했는데, 이런 이메일을 받고나니 기분이 황당했고, 저번에 블루호스트 chat을 통하여 제대로 도메인 삭제에 관한 의사전달을 안했나 싶어서 걱정이 되었습니다. 이런 번거로운 일은 아침부터 빨리 해결해야 할 것 같았습니다. 그래서 다시 블루호스트 사이트에 들어가, 실시간 채팅을 시작하였습니다..
[엑셀] 문자 치환, 문자 바꾸기(ft. REPLACE 함수) 엑셀 replace 함수를 이용하여 문자를 치환, 대체하는 방법 입니다. 콘텐츠를 올릴때, 보통 개인정보의 경우는, ○ 또는 * 로 대체 작업 후에 올립니다. 엑셀을 통해 빠르게 문자 치환 하는 방법을 알아보겠습니다. REPLACE 함수 사용법 REPLACE(text_before, start_num, char_num, text_to) REPLACE 함수는 총 4개의 인자를 받습니다. · text_before: 바꿀 텍스트 셀 주소 · start_num: 몇 번째 글자부터 바꾸는지? · char_num: 몇개의 글자를 바꾸는지? · text_to: 바꾸는 글자 예제1 임세진 -> 임O진 예제2 010-1111-7129 -> 010-1111-**** 완성
[js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 ) 고객이 응모하는 이벤트 페이지를 제작할 때, 고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다. 그리고 응모한 데이터를 넘기는 작업도 필요합니다. 이럴때 필요한 이벤트 페이지용, 개인정보 입력 후, 자바스크립트를 이용하여 유효성 검사를 한 후 ajax의 json type으로 데이터를 넘겨주는 작업을 하겠습니다. 구현내용: · UI: html 태그를 사용 · getElementById 를 이용한 객체 접근 방식 사용 · 올드한 방법인, form을 이용한 객체 접근 방식 사용 · 자바스크립트를 이용한 유효성 검사 · ajax json 타입으로 데이터 전송 유의사항: · ajax url 연결 안 됨 · 주소검색은 api 연결 안 됨 · 먼저 제이쿼리 스크립트 연결 getEleme..
[상업용 무료폰트] 둥근모꼴 다운로드 90년대 PC통신에서 사용되었던 글꼴, 둥근모꼴입니다. 둥근모꼴은 옛날에 사용하던 고전식 스타일 폰트입니다. 레트로한 감성과 디자인이 필요한 문구에 딱 사용하기 좋은 폰트입니다. 마리오 또는 한글타자 게임, 응답하라 1997에서도 나왔던 베네치아 게임이 생각하게 하는 옛날 느낌의 글꼴입니다. 이제 무료 다운로드하는 방법을 알아보겠습니다. 1. 아래 링크로 이동 https://cactus.tistory.com/193 둥근모꼴+Fixedsys 둥근모꼴+ Fixedsys 1.3 가나다라마바사아자차카타파하힣 ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㄳ ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅝㅞㅟㅠㅡㅢㅣ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567 cactus.tist..
[js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기 팝업창 코드 .box { text-align: center; margin-bottom: 10px; } .bgColor { width: 200px; height: 200px; margin: 0 auto; background-color: #f9b514; } 한번에 보기
[무료아이콘폰트] 폰트어썸 Font Awesome6 사용법. 사이트 적용하기 웹사이트를 만들 때 아이콘 많이 사용하시죠? 아이콘은 이미지와 텍스트를 대체하는, 보다 직관적으로 표현하면서, 사이트를 심플하게 디자인해 줍니다. 제가 퍼블리싱 학원을 다닐 때 선생님께서 사이트에 이미지가 텍스트가 너무 많으니, 빼고 아이콘으로 대체하라 라는 조언을 많이 해주신 다음부터, 아이콘을 필수적으로 사용하고 있습니다. 이럴때 사용하는 가장 유명한 아이콘 제공 사이트, 폰트어썸을 소개하겠습니다. 폰트어썸은 웹에서 사용하는 아이콘 폰트를 제공합니다. 아이콘은 이미지가 아닌 폰트 이기 때문에 css를 통하여 사이즈, 컬러 수정이 자유롭게 설정이 가능합니다. 폰트어썸에서 제공하는 무료 아이콘 숫자는 현재 기준, 1,609개(유료 7,865개)로 검색하면 웬만한 것들은 무료로 제공이 됩니다. 폰트어썸 내..
[무료템플릿] 미리캔버스로 이벤트 배너 만들기 이벤트의 아이디어를 기획하고, 이벤트 페이지를 구성하고, 제작하는 일은 제법 시간이 많이 필요합니다. 페이지에 삽입할 홍보 문구, 개인정보 요구의 여부, 사용할 이미지에 관하여, 어떤 것을 사용할지, 이미지의 저작권, 레이아웃까지 모두 고려하여 만들어야 합니다. 하지만! 이런 고민들을 빠르게 해결해 주는 무료 템플릿이 있습니다. 뚜둥! PPT, 로고, 배너, 카드 뉴스, 상세페이지, 썸네일 등을 미리캔버스 템플릿을 이용하여 정말 빠르고, 편하게 제작할 수 있습니다. 여기서 중요한 것은, 저작권 걱정 없이, 상업적 사용이 가능합니다. 저작권 관련 사항은 이 포스트의 맨 아래 부분에서 확인해주세요. 미리 캔버스 이용 방법에 대하여 알아보겠습니다. 미리 캔버스 홈페이지 이동 회원가입 후 로그인해주세요. htt..
[js] 자바스크립트 모달창(팝업창) 구현 자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달창 open · 모달창을 제외한 배경(background)는 어두운 검은 배경 · X 버튼 클릭시 모달창 close · 검은 배경 클릭시 모달창 close 모달창(팝업창, 다이얼로그)창 띄우기 예제 html, javascript 모달창 open Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus cons..
[상업용무료폰트] 빙그레 싸만코체 2020 다운로드 빙그레에서 2020년 10월 9일 한글날을 맞이하여 상업적 무료서체, 빙그레 싸만코체를 8일에 배포하였습니다. 갖나온 뉴 폰트 "빙그레 싸만코체"는 빙그레의 대표 아이스크림 붕어싸만코, 여러분이 잘 알고 계시는 그 붕어싸만코!의 로고 디자인을 베이스로 하여 윤디자인 그룹이 디자인을 맡아 제작이 되었습니다. 갖나온 뉴폰트 "빙그레 싸만코체"는 빙그레의 대표 아이스크림 붕어싸만코, 여러분이 잘 알고 계시는 그 붕어싸만코!의 로고 디자인을 베이스로 하여 윤디자인 그룹이 디자인을 맡아 제작이 되었습니다. 붕어싸만코 아이스크림 특유의 붕어 모양과 부드럽고 달달한 맛을 표현을 담은 캘리그라피 서체로 개발되었습니다. 빙그레에서 나온 이전 서체, 메로나체, 따옴체, 빙그레체 역시 현재 배포중이고, 저는 평소에 동글동글..
국민연금 가입증명서 인터넷 발급방법(ft. 국민연금 가입증명) 국민연금 가입자 가입증명서 인터넷 발급방법 입니다 . 우리가 이직을 하게 될 경우, 옮기는 회사에서 직장 이력을 확인하기 위하여 국민연금 가입증명서를 제출자료로 내는 경우가 많습니다. 예전에는 재직증명서를 요구하여, 회사 인사과에 요청하여 받는 번거로움이 있었지만, 이제는 국민연금 홈페이지에서 직접 가입증명서를 본인이 출력할 수 있어 이런 번거로움도 없어지고, 공공기관의 증명서이기 때문에 보다 확실한 경력 증명의 서류가 됩니다. 국민연금공단 사이트 로그인(공인인증서 필요) www.nps.or.kr/jsppage/main.jsp 국민연금공단 www.nps.or.kr 국민연금 가입증명서 인터넷 발급 신청 증명서등 발급 > 가입증명서(국/영문) 또는 상단 메뉴 전자민원 > 개인민원 으로 이동하여 들어가세요. ..
반응형

티스토리툴바