본문 바로가기
[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 국민연금 가입증명서 인터넷 발급 신청 증명서등 발급 > 가입증명서(국/영문) 또는 상단 메뉴 전자민원 > 개인민원 으로 이동하여 들어가세요. ..
[js] DOM과 BOM의 차이점 자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미지 등)으로 구조화 합니다. 이 요소들은 상,하위 구조나 병렬구조로 체계화 되는데 이 웹문서(document)에 대한 모든 내용을 담고있는 객체를 DOM 이라고 합니다. document는 window의 document (html 문서) 입니다. document object model(돔 객체)는 html과 javascript를 연결해주는 통역사 같은 역할입니다. 웹페이지 구조는 이 모든 태그들을 감싸고 있으며, 그내부는 다시 와 로 나누에 집니다. 태그에는 의 구조로 나뉘고, ..
사직서 작성 방법(ft. 무료 사직서 양식 다운로드, 근로기준법 사직 통보기간) 사직서 작성하기 입니다. 직장생활에서 가장 홀가분한 순간? 바로 사직서를 제출할 때와 회사 단체 카톡방을 나올 때입니다. 샐러리맨들이라면 누구나 이 순간을 꿈꾸지만, 다음 달 카드값, 대출원금 이자 상환, 각종 공과금, 당장 갈 곳 없는 현실, 불투명한 미래 등의 이유로 직장을 벅차고 나오기가 쉽지 않습니다. 하지만 이 글을 읽으시는 모든 분들은 더 좋은 곳에 이직, 개인 사업을 시작, 나은 미래를 위한 삶의 변화 등의 본인에게 유리하고 좋은 이유로 설렘을 동반한 퇴사이길 바랍니다. 사직서 작성 방법 회사마다의 사직서 양식이 있는 곳이 있고, 없을 수도 있으니 사전에 회사 내부적인 양식 확인 후에 사직서를 준비해주시면 됩니다. 특별한 양식이 없을 경우, 아래의 무료 양식을 추천드립니다. 참고로 저도 이 ..
[js] let vs const vs var (ft. var의 문제점, 호이스팅) 변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담고 있는 값을 의미합니다. ES6에서 기존의 변수 var를 보완하기 위하여 나온 변수 선언 방식이 let과 const입니다. 더 이상 var 키워드는 사용하지 않는 것을 추천합니다. var의 문제점 ES6 이전에 사용해왔던 더 이상 사용하지 않는 변수 선언 방식입니다. 왜 더이상 사용하면 안 될까요? 변수는 선언하고 나서 값을 할당하는 것이 정상입니다. 하지만 var를 사용할 때는 이상하게도 선언하기 전에 변수의 값을 할당해도 작동이 됩니다. 예제 - var : 호이스팅 발생 ..
[js] 자바스크립트 onclick · addEventListener 비교 사용법 자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 이벤트가 특정 element에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다. click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다. click 이벤트 사용 방법 1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML) 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를..
[티스토리] 구글 애드센스 신청하기 제가 코로나 19의 장애물을 뛰어넘어 15번째 도전만에 결국, 애드센스에 승인이 되었다는 포스팅을 하였었는데요. 저뿐만이 아니라 많은 블로거분들이 이렇게 애드고시라고 하는 애드센스에 사활을 거는 이유는 무엇일까요? 바로 광고노출을 통하여 이익을 얻고, 수익형 블로그를 운영하기 위함입니다. 광고 솔루션 중에 보편적으로 가장 많이 사용하는 것은 구글의 애드센스 입니다. 다음/카카오/네이버의 광고도 있으나 애드센스가 가장 고수익으로 연결되기 때문입니다. 이 때문에 네이버 블로그가 아닌 티스토리 또는 워드프레스를 사용합니다. 그래서 오늘은 티스토리를 이용하여 구글 애드센스 신청하는 방법을 알아보겠습니다. 신청전 url 주소 준비 구글 이메일 주소와 티스토리 블로그가 있음을 확인하세요. 신청할 때 url 주소가 ..
[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) 홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다. 최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여 매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에 아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다. 그래서 오늘은, flaot 속성에 대하여 이야기하겠습니다. float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.) float의 성격 · block 의 성격을 무시합니다. · 형제 구조로 이루어져있습니다. · 해당 요소들의..
센드비 기프티콘 모바일쿠폰 구입 및 발송(ft. 샌드비) 센트디로 기프티콘 보내는 방법입니다. 회사에서 모바일 쿠폰을 대량으로 구입해야 할 경우가 많습니다. 저는 회사에서 이벤트 페이지를 기획하면서 당첨자 선물로 스타벅스 아메리카노와 베스킨라빈스 싱글컵 기프트콘을 보냈던 경험이 있습니다. 먼저 기프트콘 구입하여 발송까지 하는 대행 업체는 몇 군데 알아보고, 센드비라는 회사를 선정한 후 기프트콘 발송을 하여 이벤트를 진행하였습니다. 1. 업체선정 인터넷을 검색하면 많은 업체가 나오고, 그 중 센드비라는 업체를 선택했습니다. 선택한 이유는, 상품 가격이 저렴하다. 회원가입이 쉽다, 구입하고, 문자로 발송까지 프로세스가 쉽다. 회사에서 지출증빙으로 요구하는 사전에 견적서, 사후에 전자세금계산서 요청 가능하다. 궁금한 점은 실시간 상담받기에서 바로 대응이 가능하다. ..
[티스토리] 애드센스 합격 후기 (ft. 애드고시 승인받는 법 꿀팁) 3개월 일주일 만에 길고 긴 여정이었습니다. 드디어 저도 애드센스의 승인이 되어 이렇게 포스트를 할 수 있게 되었습니다. 아직도 실감이 잘 나지 않습니다. 그동안의 히스토리를 살펴보니 6월 15일에 처음 승인 신청을 하여 14번의 실패 끝에, 15번째 도전을 마지막으로 9월 22일 "축하합니다."라는 메시지로 드디어 승인 이메일을 받게 되었습니다. 제가 애드센스 승인을 위하여 찾고 고민하고 연구한것을 바탕으로 합격 꿀팁을 공유하겠습니다. 저와 같이 코로나19로 인하여 재승인 어렵다는 문구를 반복해서 받는 분들. 콘텐츠 부족 등과 같은 이유로 승인 거절되는 분에게 도움이 되었으면 좋겠습니다. 승인 과정 총 정리: · 승인 기간: 3개월 일주일 · 거절 횟수: 총 14번 · 거절 사유: 콘텐츠 부족(2회),..
[react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) 리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 첫 화면에서 오른쪽의 최신 버전으로 다운로드합니다. 설치 화면 위의 추가적인 설치 화면이 나오면서 설치가 완료됩니다. 최신 node.js는 설치와 동시에 npm이라는 패키지 관리 도구까지 설치가 됩니다. 이제 npm을 이용하여 create react app을 설치하여 리액트 프로젝트를 시작할 수 있..
[css]뷰포트 미디어쿼리 사용하기(ft. 반응형웹 만들기) 화면 크기에 반응하여 화면 요소들을 자동으로 바꿔 사이트를 구현하는 것이 반응형 웹입니다. PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인을 반응형 웹 디자인이라고 합니다. 반응형 웹을 제작하기 위해서 기본적으로 알아두어야 할 것이 뷰포트(viewport)와 미디어쿼리(mediaqueri) 입니다. 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다. 뷰포트 지정 방법 아래는 가장 일반적으로 사용되는 설정 입니다. · width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. · initial-scale=1 : ..
반응형

티스토리툴바