VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.! 라우터(Router) 설정이란?다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주소로 접근할 경우 원하는 페이지의 정보를 보여줄 수 있도록 설정하는 것이 바로 라우터(router)에서 라우트(route)를 설정한다고 생각하시면 됩니다.SPA(싱글 페이지 어플리케이션)에서는 하나의 페이지로 동작하기 때문에 실제로 다른 주소로 접근하여 웹페이지를 리로드하지 않는 대신에 Router 설정이 반드시 필요하게 됩니다.# Vue Router 설치 및 설정하기가장 먼저 Router를 설치하는 방법입니다. vuejs 프로젝트에서 Vue Router를 사용하려면 script를 추가하거나 npm을 사용하여 install하는 방법 두 가지가 있습니다
2019-03-25 13:45:36HTML에서 입력폼을 만들때 사용하는 form 태그에 대하여 자세히 알아봅니다. 언제 그리고 어떻게 사용할까요?# form 태그 알아보기form 태그는 매우 자주 사용되는 중요한 태그인 만큼 하나하나 자세히 알아보도록 하겠습니다.! form 태그를 사용하는 경우는?먼저 form 태그의 기능은 웹페이지의 방문자에게 특정한 정보를 얻고 이를 서버에 전송할 수 있는 기능을 가지고 있습니다. 그래서 입력을 얻을 수 있는 input이나 textarea 등의 태그 요소를 내부의 자식요소로 가지게 되죠. 일반적으로 아래와 같은 모습입니다.<form> <input type="text" value="" name="title" /> <textarea name="description"></textarea></form>그렇다면 form에 적용할 수 있는 속성(attribute)들은 어떤게 있을까요? 다음과 같은 속성들이 사용됩니다.action // form이 submit되는 경우 이동할 페이지 u
2019-02-01 12:51:58클라이언트에서 파일을 업로드할 경우 ajax 즉, 비동기 방식으로 업로드는 하는 방법을 알아봅니다. 어떻게 하면 그리고 왜 비동기식 파일 업로드가 필요할까요?# AJAX를 사용한 파일 업로드 알아보기예전에는 주로 form 태그에 몇 가지 속성을 사용하여 submit 방식으로 파일 업로드를 수행하였습니다. 하지만 최근에는 업로드하는 경우 AJAX 방식을 사용한 비동기식 파일 업로드가 많이 사용됩니다. 특히 SPA(Single Page Application)의 경우 더욱 더 많이 사용되지요. 이 경우 blob 방식으로 변환하는 방법도 있고 아니면 FormData 객체를 사용할 수 있습니다. 아래는 FormData 객체를 사용하는 방법을 알아봅니다.! ajax 방식의 파일 업로드 자바스크립트에서 구현하기파일 업로드를 위해서 FormData 객체를 사용해보겠습니다. FormData는 간편하게 업로드 할 데이터를 추가하거나 관련 Object를 콘트롤할 수 있는 내장객체입니다. 그럼 먼저 예제
2018-02-21 06:35:11자바스크립트의 반복문 중에서 for문에서 사용 가능한 약식 표기방법에 대하여 알아봅니다. 한줄에 사용할 경우 사용하는 for 반복문입니다.for() {} 문법은 매우 많이 사용되는 반복문으로 루프를 구현하는 방법들 중 하나입니다. while, while in, switch등이 있으나 아마도 for문이 가장 많이 사용되는 방법이죠. 아래에는 for 반복문 사용시 약식으로 표기하는 방법을 알아봅니다.# for를 사용한 약식표기로 1부터 5까지 출력예를들어 아래처럼 약식표기 방법으로 1부터 5까지 출력이 가능하죠. 이 경우 한줄에 반복문을 짧게 표현할 수 있게됩니다.for (var i=0; i<5; i++) console.log(++i);여기서 약식표기된 모습은 if() 문법의 약식 표기와 동일합니다. for() 뒤의 한줄에 수행할 모든 코드가 들어있어야 하므로 짧은 코드의 수행에 적합합니다.! 첫번째 인자없이 for문 사용하는 방법자주 사용되는 방법은 아니나 아래와 같은 방법으로 for
2017-11-02 02:42:04AngularJS에서 객체 또는 배열에 반복문을 사용하는 방법에 대하여 알아봅니다. 많이 사용되는 for문 외에 key, value로 객체의 프로퍼티를 반복하여 실행하는 반복문 사용이 가능한 forEach() 구문을 사용할 수 있습니다. 아래는 간단한 사용방법입니다.forEach(items, function(key, value) { // Code here});# AngularJS 반복문 forEach() 예제보기그럼 간단한 예제를 만들어 알아보겠습니다. 만약 객체 mySite가 있고 그 프로퍼티들을 출력하는 경우 아래와 같이 사용할 수 있습니다.mySite = { 'web': 'a', 'is': 'b', 'free': 'c'}forEach(mySite, function(key, value) { console.log(mySite[value]);})실행하면 각각의 프로퍼티 값들이 아래와 같이 출력됩니다.abc각각의 프로퍼티 값들이 forEach()를 사용하여 출력되었습니다. 이
2017-09-27 10:15:00Python jinja2(flask)를 사용하는 경우 표현식으로 for문을 만들 경우 index값을 가져오는 방법을 알아봅니다. 어떻게 하면 순서값인 index를 가져오는지 아래를 봐주세요. # Python for문 표현식 예제보기아래는 items 변수를 가져와 반복문을 실행하는 예제입니다. 만약 items가 3개의 값을 가지는 경우 for문을 사용하여 루프를 실행해보겠습니다.<ul> {% for item in items %} <li> {{ loop.index }} 번째 줄입니다 </li> {% endfor %}</ul>위 코드를 보면 몇 번째 줄인지 나타내기 위해서 {{ loop.idex }}를 사용하였습니다. 출력결과는 아래와 같습니다.1 번째 줄입니다2 번째 줄입니다3 번째 줄입니다이처럼 loop객체의 프로퍼티 index는 값 1부터 n까지의 값을 가지고 있습니다. 이를 사용하여 순서, index를 보여주거나 해당 index에만 측정한 코드를 실행
2017-08-15 22:43:17웹퍼블리싱 배우기! 키워드를 찾아 검색할 수 있는 기능을 웹에 추가하기 위하여 검색창을 만드는 방법을 알아보겠습니다.# 검색창은 무엇이고 언제 사용되나요검색창은 방문자에게 원하는 웹사이트의 콘텐츠를 좀 더 찾기 쉽도록 도와주는 역할을 합니다. 예를 들어 css에 관련된 블로그 글을 찾는 경우 간단하게 검색창에 css를 타이핑하여 검색결과로 확인 및 이동하게됩니다. 아래에서는 검색창을 구현해보고 아래 사항도 고려하여 만들도록 하겠습니다.서버와 연동하기부트스트랩을 활용한 UI서버와 연동하는 경우 동기식, 비동기식 두가지가 존재합니다. 비동기식 ajax는 별도의 양식에 대한 고민이 크지 않으므로 동기식 방법으로 알아보겠습니다.그리고 부트스트랩을 사용하여 UI를 퍼블리싱하면 더 간단하고 쉽게 만들 수 있습니다. 여기서도 부트스트랩을 활용해보도록 하겠습니다 # Search,검색창 UI 구현먼저 아래는 html과 css를 사용하여 검색하기 편리한 인터페이스를 구현하였습니다.<for
2017-05-18 00:25:41python에서 for문 사용하기 및 예제보기
2017-05-04 12:06:03검색페이지 초성으로 검색하기 구현하는 방법
2017-05-01 21:02:51window.performance 객체를 활용하는 방법은?
2017-03-22 18:35:55자바스크립트에서 성능향상을 위한 방법으로 무엇이 있을까요? 아래는 필요한 성능 개선 방법들을 요약한 것입니다.- 자바스크립트 엔진에서 마지막 위치를 찾지 않도록 모두 세미콜론(;)을 사용하여 종료할 것- 전역 변수를 피할 것- 메모리 leak를 피할 것- 자식노드의 교체시 메모리 문제 발생할 수 있음- 엘리먼트의 조작이 많은 경우 innerHTML을 사용하는 방법이 DOM 생성시 파싱되므로 더 효율적일 수 있음- 텍스트 노드에 대한 변경일 경우 innerHTML, outerHTML이 아닌 innerText, outerText를 사용할 것- DOM을 조회하는 코드는 가급적 변수를 사용하여 횟수를 줄일 것- 이벤트 버블링, 캡쳐링을 활용하여 해당 요소보다는 부모 요소를 사용하여 호출할 것- for문 switch문을 사용할 것- for 등의 루프보다는 함수를 반복 호출할 것(호출 횟수가 제한적인 경우)- DOM 파싱을 위해 innerHTML을 활용할 것- 이벤트를 지연시키는 코드를 사용할
2017-03-22 16:54:04웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 html에는 fieldset이라는 태그가 존재하며 이 태그를 사용할 경우 다수의 입력폼들을 그룹화하여 관리 및 콘트롤할 수 있다. 그럼 아래에서 좀 더 자세한 내용을 확인해보자.! fieldset 태그 알아보기fieldset 태그는 아래와 같은 몇 개의 속성들을 지정하여 사용할 수 있으며 각각의 속성들의 특징은 다음과 같다. 아래처럼 이 태그에 사용가능한 태그는 매우 한정적이다.disabled - 해당하는 그룹을 모두 disable 할 수 있음form - 원하는 form을 선택할 수 있음name - 원하는 name 속성을 선택할 수 있음이 태그의 가장 큰 장점 중 하나로 퀀한에 따른 선택 그룹 전체를 비활성화(Disable
2016-06-30 14:23:06이 글은 자바스크립트의 가장 유명한 사람인 더글라스 크락포드의 글을 읽고 적은 내용이다. 더글라스 크락포드는 제이슨(JSON) 형식의 창시자로 아마 많은 분들이 이미 이 글 및 이 책에 대하여 알고 있을 것이다. 그는 '자바스크립트 핵심 가이드'라는 책의 저자이기도 하다."세상에서 가장 잘못 이해되고 있는 언어, 자바스크립트"처음 이 글을 읽던 때도 벌써 몇 년 지났다. 이 글이 전해주고자 하는 바는 자바스크립트는 다른 어떤 언어보다 강력한 기능을 가진 언어임에도 이를 발못이해하여 제대로 사용하지 못하고 있음을 일깨워주는 내용이다.자바스크립트를 공부하거나 관련된 직무를 하고 있다면 반드시 읽어바야 할 필수 글이 아닌가 생각된다. 좀 더 자세한 내용은 그의 웹사이트에서 찾아볼 수 있다. 이 글은 그의 글에 대하여 일부의 소개이다. 아래링크를 참조하자! 이글은 아래 링크를 참조한 내용임을 밝힌다.* 참조 (Douglas Crockford)- www.crockford.com/javasc
2016-04-28 13:05:31자바스크립트는 in 연산자를 통해 객체가 가진 프로퍼티나 메소드가 맞는지의 여부를 확인할 수 있다. 다시말해 진짜 이 값을 가진 객체인지 판별해주는 연산자이다.먼저 간단한 예제를 통해 알아보자. 만약 장난감이란 객체를 만들고 해당하는 프로퍼티가 장난감 객체에 해당하는지 알아보려면 다음과 같이 수행할 수 있을 것이다.toy = new Object;toy.car = "sonata"toy.plane = "drone"위 예제를 통하여 우리는 toy 객체와 두개의 프로퍼티를 만들었다. 여기서 in 연산자를 사용하여 car 그리고 plane 프로퍼티가 toy 객체의 프로퍼티임을 확인하는 방법은 다음과 같다.# in 연산자를 사용한 특정 객체의 프로퍼티 확인 예제if ('car' in toy) { console.log('해당 객체가 맞습니다.');}if('plane' in toy) { console.log('해당 객체가 맞습니다.');}위 예제는 해당하는 속성 car 그리고 plane이
2016-04-23 18:31:31세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.! transform 속성을 이용한 요소의 이동아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.<style>div {transform: translate(x,y);}</style>위 코드는 div 요소를 좌우 x, y 값만큼 이동시키는 방법이다. 이 방법은 요소를 이동시키는 다양한 방법들과 비교할 때 몇가지 이점이 있는데 그 이유가 무엇인지 알아보자...transform 속성을 사용하는 사장 큰 이유는 바로 좌우 상하 이동시 절대값 뿐만 아니라 상대값을 이용한 이동이 가능하다는 점이다... 좀 더 쉽게 설명하자면...transform: translate(10px,10px);transform: translate(10%, 10%);위 보기는 두 가지 방법을 보여주는데 여기서 아래에 위
2016-03-09 15:52:26웹사이트에서 모달(Modal) 및 팝업창을 띄우거나 기타 특정 요소를 가로 또는 세로로 중앙 정렬하기 위한 방법은 몇 가지가 있다. 이때 해당 요소를 스크롤 및 브라우저 크기가 관계 없이 항상 고정된 위치에 중앙 정렬을 가지려면 어떤 방법이 가장 효과적일까...우선 요소를 중앙정렬 시키기는 일반적이면서 가장 간단한 방법으로 left 속성을 사용하며 우리는 아래와 같이 CSS를 사용해 이를 가능하게 할 수 있다.position: fixed;left: 50%;top: 50%;오른쪽(우측)으로 요소를 상대값 50% 만큼 이동시키면 해당하는 엘리먼트의 크기의 절반 만큼 다시 왼쪽으로 이동시킬 필요가 있게된다. 그래서 사용되는 방법이 해당요소의 크기만큼 50%를 다시 반대방향으로 이동하는 것이다. 예를 들어서...만약 요소의 크기가 800px인 경우 좌측으로 -400px 이동시키면 동일한 값을 가지게 된다. 하지만 left 속성은 이미 사용되었기 때문에 왼쪽으로 이동시킬 다른 css속성이
2016-03-09 14:25:40숫자인 원시값을 보여줄 경우 세자리수 마다 콤마를 찍을 때가 있습니다. 파일 용량이나 긴 숫자의 경우 콤마를 사용하면 방문자가 단위를 확인하는데 도움이 많이 되죠 ~ 이럴때 number_format() 함수를 사용할 수 있습니다.number_format(숫자값)# 숫자에 콤마넣기 예제소스 보기<?php$test = 123456789; echo $test; // 123456789를 출력 echo number_format($test); // 123,456,789를 출력?>
2015-09-26 14:15:25우선 애니메이션 구현시 자주 사용하는 transform 속성에 나타나는 문제를 해결하고자 합니다. 대부분의 최신 브라우저는 정상적이나 Safari(사파리)와 익스플로러 예전 버전(8.0 이하)에서 나타나는 문제를 해결하기 위한 방법입니다. 그럼 해당하는 문제가 어떤 브라우저이냐에 따라 아래 내용을 참고해주세요.! 사파리(Safari) 브라우저에서 발생할 경우웹킷엔진인 사파리에서 3d효과를 구현하기 위해 CSS3의 translate 속성을 사용할 경우 유독 Safari에서만 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 수 많은 구글링이 필요했고 결국 방법은 찾았습니다.# 부모 요소에 -webkit-perspective 속성을 사용할 것-webkit-perspective 속성은 3d 요소가 얼마만큼 나타나게 될지를 결정하는 속성으로 원근감을 표현할 때 사용할 수 있는 속성입니다. 이 속성을 부모요소에 사용하니 사파리에서도 정상 작동됨을 확인하였습니다.!! 익스플로러(IE) 8.
2015-06-03 16:18:46button 태그에 대하여 알아보겠습니다. button 태그는 웹사이트에서 매우 많이 사용되는 엘리먼트 요소 버튼 모양의 레이아웃을 보여주고 특정 기능을 실행하거나 form 태그에 submit하는 등의 용도로 사용됩니다. 그럼 button 태그를 어떻게 사용하는지 아래에서 자세히 알아봅니다.# HTML button 태그의 사용먼저 button 태그는 다음과 같은 모습으로 사용됩니다. 그리고 그 아래는 사용 가능한 속성들입니다.<button>test</button>! button 태그에 사용 가능한 속성보기 button 태그는 다은과 같은 속성을 사용할 수 있습니다.i. typebutton // 단순 버튼 형태로 클릭시 폼태그를 submit하지 않음submit // 클릭할 경우 form 태그의 action 속성의 위치로 submit됨reset // 전송값들을 리셋함(초기화)위 타입값 중에서 form 태그를 리셋하기 위한 방법으로 reset 값을 설정할 수 있습니다. 예를들면 아래의
2015-02-12 10:14:01아래는 자바스크립트 또는 제이쿼리를 사용하여 반복문을 만드는 방법을 알아보려고합니다. 어떻게 반복문을 만들 수 있고 어떤 차이가 있는지 알아보세요.# 자바스크립트 제이쿼리 반복문 만들기자바스크립트에서 반복문(루프)을 만드려고 할 경우 아래와 같이 for문을 사용하는 방법이 가장 많이 사용됩니다. 반복문을 배우는 경우 가장 먼저 for문을 먼저 알고 나머지 방법들을 알아가는 것이 좋습니다.! 자바스크립트에서 반복문을 사용하는 다양한 방법들1. for in을 사용한 반복문2. for length를 사용하는 방법3. 제이쿼리(jQuery)를 사용한 each() 함수 반복문4. do() while 반복문5. while 반복문위 방법들이 먼저 가장 쉽고 빠르게 적용 가능한 for in 반복문을 알아봅니다.! for in 반복문 알아보기for in 반복문의 장점은 가장 쉽고 간단한 방법입니다. for in은 배열이나 객체처럼 내부에 값을 가지는 경우 적용할 수 있습니다. 먼저 아래는 간단한
2015-02-05 11:03:34
