CATEGORIES
자바스크립트에는 많은 데이터 타입이 존재하며 그 중 하나로 배열(array)이 존재합니다. 배열은 자바를 비롯한 대부분의 언어가 가지는 데이터 타입으로 자바스크립트만의 특별한 자료 구조는 아닙니다. 그렇다면 배열이 사용, 선언되는 경우는 언제일까요?# 배열이 사용되는 경우배열을 선언하는 이유는 배열값이 한개의 값이 아닌 여러개의 데이터값을 동시에 가질 수 있기 때문입니다. 그래서 데이터의 집합을 저장하기 위한 용도로 사용하며 반대로 단일 데이터의 경우에는 문자 및 숫자 등의 타입이 사용됩니다. 이런 이유로 배열을 사용할 경우 아래와 같은 장점이 있을 것입니다.! 배열의 데이터 타입(구조)의 장점 단일 데이터(Single data)가 아닌 다수의 데이터(Multiple data) 저장 연관있는 데이터를 함께
Last Modified : 2021-01-05 12:21:14
아래는 정규표현식을 사용한 태그의 제거 방법입니다. 태그를 제거하기 위해서 내장함수에서 태그를 지원하는 함수가 있다면 편리하겠지만 순수 자바스크립트에서는 없는 부분이기에 다른 방법이 필요합니다. 가장 간편한 방법이 바로 정규표현식을 활용하는 방법입니다.정규표현식의 replace() 함수는 특정 문자열을 패턴에 따라 원하는 대로 수정하여 반환할 수 있습니다. 그럼 어떻게하면 정규표현식을 사용해 태그를 제거할 수 있는지 알아봅니다.# 정규표현식으로 태그 제거하는 방법아래는 태그를 제거하기 위한 정규표현식으로 모든 태그를 제거합니다.var newText = oriText.replace(/(<([^>]+)>)/ig,"");위 정규표현식은 새로운 변수 newText에 변수 oriText에 포함된 태그 요소만 제거하여
Last Modified : 2019-08-07 20:38:44
엑셀 프로그램에서 json 파일을 불러오는 방법에 대하여 알아봅니다.# 엑셀로 json 파일 불러오기이 전에 한 가지 알아두셔야 할 사항이 있습니다. 엑셀 버전에 따라 조금씩 차이가 있을 수 있습니다. 즉 office 신규버전 또는 2013, 2010, 2007 버전 등에 따라 메뉴가 다르거나 없는 기능이 있을 수 있으니 참고하세요. 그럼 아래에서 알아봅니다.! 엑셀로 json 파일 불러와야 할까?만약 관계형 데이터베이스의 자료를 전달할 필요가 있다고 가정합니다. 이 때 비개발자 또는 json 문법을 잘 모르는 사용자가 해당 데이터가 필요한 경우 json 파일 보다는 이를 xlsx 또는 csv 등의 형태로 변환된 데이터를 요구할 수 있겠죠. 이런 목적으로 json을 엑셀로 변환해 사용하기도 합니다."이제 엑
Last Modified : 2020-12-23 08:05:50
만약 웹서버(Web Server)를 쉽고 빠르게 구축할 필요가 있는 경우 어떤 방법이 있을까요? 많이 사용되는 Nodejs 웹서버 구축 방법에 대하여 알아봅니다.제 경우는 급하데 프로젝트를 진행해야해서 퍼블리싱이 필요했습니다. 이때 서버 환경이 아니라면 스태틱한 파일(이미지, css, script)들의 경로를 모두 바꿔야하는 경우가 있을 수 있죠. 이런 경우 서버 구축 후 진행하면 편리하겠죠.# Why NodeJS Server음... node를 서버 구축하는 이유는 여러가지가 있습니다. 먼저 가볍고 쉽게 구축한다는 점이 장점이구요 자바스크립트를 알고 있다면 문법 이나 자료형등이 어렵지 않고 쉽게 배울 수 있습니다. 또 다른 이유라면 node를 사용한 유용한 툴, 라이브러리 또는 컴포넌트가 많기 때문입니다.
Last Modified : 2019-08-07 20:38:34
자바스크립트가 비동기방식의 ajax가 없었다면 꽃을 피웠다 얘기할 수 있었을까요? 재미있게 시작했지만 분명 자바스크립트에게 ajax, 비동기 방식의 호출은 가장 큰 발전의 계기가 되었음이 틀림없습니다... 아래는 이 중요한 ajax에 대하여 하나하나 알아보려합니다. 먼저, ajax가 무엇인지 알아보고 자바스크립트를 사용해 이를 구현하는 다양한 방법들에 대하여도 함께 알아보도록 하겠습니다.! ajax란 무엇인가?ajax는 비동기식 자바스크립트 통신을 의미합니다. 즉 서버와의 웹통신 방법을 비동기식으로 웹페이지를 리로드하지 않고 필요한 순간에 접속하여 데이터를 가져오는 방법입니다. 비동기 방식을 구현하기위해서는 자바스크립트의 XMLHttpRequest 라는 API가 존재하는데 이는 비동기 방식을 구현해주는 가장
Last Modified : 2019-08-01 08:15:59JSON 객체가 가진 메소드중 stringify()는 객체타입을 JSON 타입으로 변경할 수 있게도와줍니다. JSON.stringify(객체데이터)보시는 것처럼 사용방법은 매우 간단합니다. 매개변수로 객체데이터를 넣으면 이를 JSON 형태로 변환하여줍니다. 사실 객체와 JSON은 매우 흡사합니다. 객체와 JSON의 키값에 따옴표가 있느냐 없느냐만 다를분 동일한 모습을 띄고 있습니다. 아래 두 타입의 데이터를 참고하세요objectStr = {test1: '123', test2,: '456', test3,: '789'};jsonStr = {'test1': '123', 'test2',: '456', 'test3',: '789'};두 데이터를 비교해보시면 무엇이 다른지 한눈에 보이실겁니다. 그럼 위 objectSt
Last Modified : 2017-04-27 08:47:58Ajax등의 비동기 통신으로 받은 데이터가 문자열이나 객체 구조를 띄는 경우가 있습니다. 실제로 데이터베이스 또는 로컬에 저장할때 문자열로 변환 후 저장하기도 하는데 이런 경우 다시 객체 구조로 변환해야 사용할 수 있죠. 이 방법으로 JSON.parse()를 사용합니다.# JSON.parse()를 사용하여 객체로 변환하기아래 예제는 받아온 데이터가 responseText라는 변수에 저장하였고 이를 다시 변환해 사용하는 간단한 예제입니다.먼저 responseText에는 다음과 같은 문자열이 저장되어 있습니다.var responseText = '{ "name": "webisfree", "url": "webisfree.com" }';매우 간단한 예제코드입니다. 이제 위 텍스트를 객체 형태로 변환해볼까요? 아래를
Last Modified : 2017-10-20 14:05:22npm을 최신버전으로 업데이트 하는 방법을 알아봅니다. 어떻게하면 최신버전으로 업데이트 할 수 있을까요?! npm을 최신버전으로 업데이트 해야하는 이유는?만약 npm이 최신 버전이 아닌 경우 디펜던시 등의 이유로 앱이 동작하지 않을 수 있습니다. 또한 개발환경을 맞추어 보다 안정적인 환경에서 개발하려면 최신 버전이 필요할 수 있죠. 이런 이유로 npm을 최신버전으로 유지하기 위해서 아래와 같이 가능합니다.(! npm 최신버전이 더 높은 버전의 node package 정보를 가졌기 때문에 가급적 npm 최신 버전 설치는 필수적입니다.)# npm 최신 버전으로 업데이트 방법그럼 npm의 버전 업데이트를 해보겠습니다. npm 버전은 크게 두 가지로 나뉘는데 latest와 next 버전입니다. 둘 다 다른 방법으로
Last Modified : 2019-01-08 01:14:35
nodejs에서 npm을 사용하여 여러가지 모듈을 쉽고 빠르게 설치할 수 있습니다. 이 때 npm을 사용하는데 아래에서 자세히 알아봅니다.nodejs는 사용할 모듈을 직접 설치해야합니다. 모듈 설치를 할 경우 node 밖에 실행해야하므로 만약 node 안에 있다면 Ctrl-D 키를 눌러 빠져나오도록 합니다.(이는 process.exit()와 같다) 이제 node shell에서 빠져나왔다면 다음 커맨드를 입력해 원하는 모듈을 npm을 통하여 설치할 수 있습니다. 그럼 npm이 무엇인지 간단하게 알아보겠습니다. # npm 이란 무엇인가?먼저 npm은 Node Package Manager로 nodejs에 필요한 모듈을 설치하고 관리하는 패키지 매니저입니다. 이 npm을 사용하여 nodejs를 위해 필요한 모듈을
Last Modified : 2020-09-21 16:06:45
제이쿼리는 ajax() 함수외에도 다양한 단축메소드가 존재합니다. 이중에서도 getJSON() 메소드에 대하여 알아보고자 합니다. 참고로 ajax 단축 메소드는 이외에는 get(), post(), load()등의 메소드가 존재합니다. getJSON() 메소드는 언제 사용할까요? getJSON()은 비동기식으로 서버와 접속해 데이터를 불러올 때 사용하는 점은 같으나 JSON 타입의 데이터를 불러옵니다. 이는 ajax() 메소드의 dataType: 'json' 과 동일한 역할을 수행합니다.$.ajax({dataType: 'json', ... }) // 왼쪽의 축약형 getSON() 메소드일단 아래에서는 getJSON() 메소드의 간단한 사용 모습을 알아보자.getJSON(url, data[Option], cal
Last Modified : 2016-05-16 20:02:20
오늘은 데이터 타입의 하나로 매우 넓리 사용되는 JSON 타입에 대하여 알아보려한다.json은 데이터의 타입 중 하나로 잘알려진 XML과 함께 많이 사용되고 있다. 이런 json은 서버와의 데이터 통신시 전달되는 데이터로 많이 쓰이고 비동기 방식의 ajax() 메소드들과 함께도 많이 사용된다.처음 json 타입을 보게되면 객체와 차이점을 느끼기 어렵다. json 타입은 객체와 매우 유사한 모습을 띄고 있으며 차이점이라면 사용되는 이름 그리고 값 모두가 따옴표(")를 사용하여 표기된다는 점이다. 이는 자바스크립트 객체와 차이점으로 아래의 코드를 통해 무엇이 다른지 확인이 가능하다./* 자바스크립트 객체의 문법 */{ name: "Webisfree", gender: "male"}/* JSON 형태의 문법 *
Last Modified : 2017-10-20 13:52:06hls.js를 사용하는 경우 발생하는 에러 이벤트를 처리, 핸들링 하기 위하여 아래와 같이 에러 이벤트를 등록할 수 있습니다.# HLS 에러 이벤트 처리 방법만약 생성한 인스턴스의 이름이 hlsVideo인 경우 아래와 같이 에러를 발생합니다.hlsVideo.on(Hls.Events.ERROR, function(event, data) { var errorType = data.type; var errorDetails = data.details; var errorFatal = data.fatal; throw new Error('Error occued! ErrorType, Details: ' + errorType + ', ' + errorDetails);});예제에서는 브라우저에 이벤트를 호출하도록 동작시켰
Last Modified : 2017-04-25 19:08:09
요즘의 웹에서 비동기 방식의 ajax 호출이 웹환경에서의 꽃이라 할만큼 중요한 부분을 차지합니다. 그만큼 비동기 방식의 통신이 많이 사용되고 반드시 필요하기 때문이죠. 제이쿼리에서 ajax를 사용한 비동기 방식에 대하여 간단하게 알아보고 어떻게 사용하는지 아래에서 알아보겠습니다.# ajax란 무엇이고 장점은?먼저 ajax에 대하여 알아보겠습니다. ajax를 설명하자면... 동기 방식과 달리 페이지 전체를 다시 불러오지 않고 필요한 부분 일부만 호출하여 웹사이트에 반영하는 기술입니다. 이런 비동기 방식을 사용하면 다음과 같은 장점이 있습니다.! ajax 비동기 방식의 장점 보기비동기 방식의 장점은 무엇인지 알아봅니다. 간단하게 아래와 같은 장점이 있습니다.1. 일부만 불러오므로 호출시간과 페이지 로딩 시간이
Last Modified : 2019-10-21 14:28:51자바스크립트에서 자주 등장하는(?) 바닐라JS(VanillaJS)에 대하여 알아봅니다. 바닐라JS는 무엇일까요? 뭘 의미할까요?# 바닐라JS란 무엇인가? VanillaJS우선 바닐라JS는 프레임워크나 라이브러리가 아닙니다. 하지만 그렇게 잘못 이해하기도 하는데 실제로 바닐라JS의 소스를 확인해보면 용량이 0byte로 내용이 없습니다. 다시 말해 바닐라JS는 순수 자바스크립트(Pure Javascrpipt)와 동일합니다. 하지만 순수 자바스크립트와 바닐라JS가 용어가 웹에서 혼용되 사용되면서 이런 혼동이 발생하지 않았나 생각되네요. (실제로 뭐가 더 좋은지 뭘 사용해야 하는지 묻는 질문도 쉽게 찾을 수 있죠.)어쨌든 자바스크립트가 바로 바닐라JS입니다. 바닐라라는 의미가 기본적인 맛... 뭔가 첨가가 거의 없
Last Modified : 2020-12-17 07:20:13Bootstrap의 datepicker를 사용하여 날짜를 선택할때 만약 선택가능한 날짜를 지정하려면 어떻게할까요?우선 최소 및 최대 날짜가 필요하고 아래 방법처럼 두 가지의 방법이 존재합니다.1. html 코드에 설정값을 추가2. datepicker config에 최소 최대값 추가# html 코드에 추가하는 방법<input type="text" datepicker-popup="" ng-model="dt" is-open="opened" min="'2017-03-01'" max="'2017-03-30'" datepicker-options="dateO
Last Modified : 2017-09-21 00:24:04반나절을 헤메다가 100%는 아니지만 어느 정도 해결된 인코딩 문제의 해결 과정에 대하여 이야기하려 합니다. 인코딩 문제는 웹사이트 구축시 매우 자주 발생하는 이슈중 하나죠. 해결도 비교적 간단하지 않습니다.! 문제 발생JSON 타입의 파일을 자바스크립트(jQuery)를 사용해 AJAX로 불러온 후 화면에 출력하려고 코딩 하던 중 뜻하지 않은 오류가 발생했습니다. 이상하게도 불러올 값 중에서 제목은 아무런 문제가 발생하지 않았으나 본문을 불러올때 AJAX 기능에 문제가 생기더군요...!! 증상일단 본문 인코딩 때문이라 생각하고 태그도 없애고 길이도 줄여가고 인용코드인 따옴표등도 삭제하기도 하고... 참 많은 방법을 사용했습니다. 그 결과 일부 문자열 출력시 정상 동작하였으나 원하는 텍스트 전체를 불러올 경우
Last Modified : 2015-11-30 14:01:45
React앱에서 js, ts가 아닌 jsx, tsx 파일의 확장자를 사용하면 XML 방식으로 템플릿 코드를 작성할 수 있습니다. 이때 주석 작성 방법에 대하여 알아봅니다.! React jsx, tsx의 주석 작성 방법tsx 확장자 역시 동일하므로 jsx를 예로 들어 알아봅니다. tsx 파일이 아래와 같이 존재한다고 생각해봅니다.@ comment.jsxclass AComponent extends React.component { render () { return ( <ChildComponent> Hello! Webisfree.com </ChildComponent> ) }}AComponent를 만들었죠. 내부의 render 함수를 보면 <ChildComponent>를
Last Modified : 2020-07-10 19:36:22
프론트 프레임워크 Next.js를 사용하는 웹 프로젝트에서 내부 및 외부의 스크립트 파일을 추가하는 방법에 대하여 알아봅니다.# next.js에서 script 파일 추가하기nextjs는 서버 사이드 렌더링을 위한 목적으로 많이 사용됩니다. next.js에서는 <script> 파일을 불러오고 싶을때 어떻게 사용할 수 있을까요? 크게 두 가지 방법으로 가능합니다.하나. 페이지가 열릴 때 함수를 사용하여 추가하는 방법둘. /page/ 라우팅 페이지에 추가하여 사용하기여기서는 두 번째 방법을 알아봅니다. 왜냐하면 가장 빠르고 쉬운 방법이기 때문입니다.! /page/ 라우팅 페이지에 추가하여 사용하기이 방법은 원하는 웹페이지만 쉽게 스크립트 파일을 추가할 수 있습니다. 서버 사이드 렌더링(SSR) 방식이므로 해당 페
Last Modified : 2020-07-13 20:59:31
자바스크립트의 객체가 만약 문자열인 경우를 생각해봅니다. 예를들어 input 태그에 문자열로 아래의 값이 저장된 경우를 생각해봅니다.'{ siteName: "webisfree" }'문자열이지만 원래는 객체임을 한 눈에 알 수 있습니다. 그렇다면 위 문자열을 다시 객체로 변환해보려고 합니다. 어떻게 하면 될까요?! JSON.parse()를 사용할 경우가장 먼저 생각하는 방법이 객체로 변환할 수 있는 JSON.parse()입니다. 하지만 에러가 발생합니다. JSON.parse('{ siteName: "webisfree" }');// 아래와 같이 에러가 발생Uncaught SyntaxError: Unexpected token s in JSON at position 2왜 안될까요? 그 이유는 간단합니다. JSON
Last Modified : 2020-03-26 11:49:35자바스크립트 파일을 압축해주는 uglifyjs 라이브러리는 꽤 유명합니다. 워낙 예전부터 유명한 자바스크립트 압축 유틸리티로 js 파일을 압축해 크기를 줄일 수 있는 방법이죠.! uglifsjs는?압축(Compress)으로 잘 알려져 있지만 Parcer, Minifier, Beautifier로서의 기능도 있습니다. 그럼 아래는 uglifyjs를 설치하고 사용하는 방법에 대하여 자세히 알아보겠습니다.# 자바스크립트 라이브러리 uglifyjs먼저 설치하는 방법을 알아봅니다. 간단하게 npm을 사용해 설치가 가능합니다.npm install uglify-js -g여기서 -g 옵션을 사용하면 글로벌로 설정되어 cli 커맨드라인 명령어가 가능하게 됩니다. 이제 node 패키지를 사용해 설치가 완료되었습니다. ! ugl
Last Modified : 2020-03-29 02:14:52
React 프레임워크 nextjs에서 커스텀 404(custom 404) 페이지를 만드는 방법을 알아봅니다.! Custom 404 페이지란?없는 페이지를 주소창에 입력할 경우 '404 not found page'와 같은 페이지를 찾지 못했다는 메시지가 나타나게 됩니다. 이처럼 찾는 페이지가 없는 경우 404 에러가 발생할 때 서버의 기본 에러 메시지가 아닌 404 에러 페이지를 따로 만들어 보여주는 것이 바로 커스텀 404 웹페이지 입니다.!! 커스텀 404의 장점은?404 페이지를 만들면 크게 두 가지 기대 효과가 있습니다. 먼저 좀 더 웹사이트에 맞는 디자인의 웹페이지를 제공할 수 있습니다. 또 하나는 찾지 못했지만 비슷한 링크나 아니면 기타 페이지 링크를 제공하는 것도 가능합니다. 그럼 아래에서 nex
Last Modified : 2020-08-31 22:34:47정규표현식은 두가지 표기 방법이 있습니다. 하나는 리터럴 표기에 의한 방법으로var pattern = /abcdf/;두번째는 RegExp 객체를 사용하는 방법입니다.var pattern = RegExp('abcdf');보는 것은 매우 다를 수 있지만 둘 다 정규표현식에 필요한 인스턴스를 만들어 사용할 수 있습니다. 사실 정규표현식은 다루어야 할 부분이 매우 많습니다. 하지만 매우 복잡한 코드를 한줄로 줄일 수 있는 강력한 기능이 있기 때문에 매우 중요한 부분이라 할 수 있습니다. 그럼 아래부터는 예제와 함께 알아보겠습니다.# 문자에서 숫자만 x 기호로 바꾸어 감추는 예제<script type="text/javascript">var test = "123abc";var pattern = /[0-9]+/gi;te
Last Modified : 2015-12-22 12:47:07React 프레임워크 nextjs에서 페이지 이동하는 다양한 방법과 예제를 알아봅니다.# nextjs 페이지 이동하는 방법nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.state 변경의 비동기 이동 방식서버 사이드 렌더링(SSR) 방식의 페이지 이동아래에서 각각 알아봅니다.! 서버 사이드 방식의 페이지 이동, nextjs여기서 두 번째에 해당하는 SSR 방식은 일반적인 자바스크립트 코드나 a 태그를 사용하는 방법을 그대로 사용하는 것입니다.<a href="/test">Move</a>자바스크립트를 사용할 수도 있죠.window.open('/test', '_self');다음으로 서버사이드렌더링 방식이 아닌 라우팅을 사용한 sta
Last Modified : 2020-08-28 19:51:19
Next.js를 사용하는 경우 head 영역에 스크립트 코드를 추가하려고 합니다. 어떻게 하면 되는지 간략하게 알아봅니다.# next.js head에 스크립트 추가하기아래는 nextjs 앱에서 analytics 등의 웹 트래킹 코드 추가가 필요하여 사용한 방법입니다. 이처럼 스크립트를 head에 추가한 이유는 하나의 페이지가 아닌 웹 사이트 전체에 스크립트 요소를 추가하기 위해서 입니다. 그럼 방법은 어떻게 될까요?- next/head 모듈을 사용하기- dangerouslySetInnerHTML를 사용하기가장 필요한 방법은 바로 위의 두 가지 입니다. 첫째로 next/head 모듈이 필요합니다.! next/head 사용하기이 모듈을 사용하면 앱의 head 영역에 원하는 코드를 추가할 수 있습니다. 스타일,
Last Modified : 2020-11-16 23:12:46React 앱에서 css를 선언하여 사용하는 방법에 대하여 알아보려고 합니다.# React 앱에서 css 스타일 선언 및 사용하기스타일을 선언하고 사용하는 방법은 크게 두 가지로 구분됩니다. 하나는 모듈 형태로 추가하여 사용하는 방법이고 다른 하나는 jsx 파일 내부에 style 태그를 추가하여 사용하는 방법입니다.둘 다 사용되는 방법이지만 여기서는 jsx 파일 내부에 style 태그를 인라인으로 추가하는 방법을 알아보고자 합니다.jsx에 style 태그로 추가하는 방법! jsx에 inline 태그 형식으로 추가하는 방법jsx 타입의 경우 내부에 렌더링 할 태그 요소를 직접 입력할 수 있습니다. 이 때 style 태그 요소 역시 추가할 수 있습니다. 이 경우 전역 스타일(global style)과 컴포넌트
Last Modified : 2020-07-15 17:07:18날짜를 변경할 때 유용하게 사용하는 moment.js를 사용할 때 다음과 같은 에러가 발생하는 경우 해결하는 방법을 알아봅니다.'Invalid date'데이터 포맷 관련 에러인데 증상은 크롬에서는 잘 동작하나 타 브라우저에서 동작하지 않는 문제가 있을 수 있습니다. 위 메시지가 나타난 부분은 커스텀된 날짜를 사용할 때 발생하였습니다.예를들어 아래의 포맷 날짜를 사용하는 경우 ISO 날짜 포맷과 관련 브라우저에서 동작 안되는 문제가 나타날 수 있습니다.start = '2018.10.04';moment(start).format('YYYY-MM-DD');이를 해결하기 위해서 아래와 같이 텍스트를 변경하니 잘 동작하였습니다.start = '2018.10.04';변경 후start = '2018-10-04';위와 같이
Last Modified : 2018-10-04 16:35:09
React에서 리스트(배열) 타입의 데이터를 사용하여 여러개의 컴포넌트나 태그로 jsx 파일에서 출력, 렌더링하는 방법을 알아봅니다.# React 리스트 타입 데이터 여러 개로 출력하는 방법, map리액트 앱에서는 다른 프레임워크에서 사용하는 반복 프로퍼티, 디렉티브 등이 존재하지 않습니다. 예를들어 v-for 또는 @ngFor 를 사용할 수 없죠.그렇다면 어떻게 하면 리스트 타입의 컬렉션 데이터를 여러 개의 컴포넌트 또는 태그로 변환해 웹페이지에 출력할 수 있을까요? 아래에서 자세히 알아봅니다.! react 리스트 데이터에 map() 메소드 사용하기자바스크립트의 map()은 배열에 사용하며 반복하여 내부 값을 모두 순환합니다. 즉 배열 타입의 데이터에 map()을 사용해 출력할 수 있죠. 대부분의 reac
Last Modified : 2020-09-11 10:47:56angularjs에서 가장 많이 사용되는 디렉티브 중 하나가 바로 ng-repeat라고 할 수 있습니다. 워낙 많이 사용되기 때문에 반드시 알아야 하는 필수 디렉티브로 아래는 ng-repeat의 쓰임과 활용에 대하여 상세히 알아보려합니다.! ng-repeat의 역할ng-repeat는 연속된 여러개의 값을 가진 데이터 값을 사용하여 하나의 리스트 또는 목록으로 반환하고 보여주는 기능을 가지고 있습니다. ng-repeat는 for()문 또는 제이쿼리의 $forEach()와 비슷한 동작을 구현합니다. 그럼 아래는 예제코드입니다.예를 들어 fruit이라는 변수가 있고 이를 ng-repeat를 사용하여 연속된 과일을 목록으로 만들어 보여주려면 아래와 같이 사용할 수 있습니다.1 - banana : 100원2 - ma
Last Modified : 2016-12-13 08:36:06AngularJS에서 드래그앤드랍(Drag and Drop) 즉, 드래그하여 요소를 이동하는 방법은 어떻게 될까요?# 드래그앤 드랍 AngularJS에서 구현하는 방법 알아보기먼저 드래그앤 드랍을 구현하기 위하여 커스텀 디렉티브(Custom Directive)를 사용합니다.그리고 반드시 필요한 드래그 이벤트는 아래 3가지입니다. 그 외의 이벤트는 필수는 아니며 선택적입니다.i. dragstart : 드래그가 가능하도록 변경ii. dragover : 드래그한 요소가 엘리먼트에 위치할 경우 발생iii. drop : 드래그가 실제 발생하였을때 이벤트# Drag and Drop 코드보기Html 및 CSS 코드입니다.<div class="wrap-div"> <ul> <li draggable="true" dra
Last Modified : 2017-08-11 01:43:12상황에 따라 변하는 텍스트 및 요소들을 구현하기 위하여 ng-switch 디렉티브를 사용할 수 있습니다. ngSwitch는 자바스크립트 switch() 비슷한 역할을 구현가능하게 해줍니다.만약 사용자가 글을 작성하게 저장할 경우 Save 버튼이 Saved로 변경하게 만들 경우 이 역시 switch를 사용하는 방법이 가능합니다. (참고로 조건이 적은 경우 ngIf 디렉티브를 사용하는 것도 좋습니다.)! ngSwitch 예제보기아래 예제에서는 isSaved라는 변수를 만들고 Save 버튼을 클릭시 이 변수값을 true로 변경하여 텍스트가 Saved로 바뀌게 하는 간단한 예제입니다.<div ng-app="testApp" ng-controller="AppCtrl"> 저장하려면 아래 Save 버튼을 클릭하세요!
Last Modified : 2016-12-19 10:59:25자바스크립트에서 사용되는 CommonJS에 대하여 간략하게 알아봅니다.@ CommonJS의 간략한 정보- 자바스크립트의 모듈화를 위한 프로젝트 중 하나 임- 2009년 ServerJS의 이름으로 시작해 다시 CommonJS로 이름이 변경됨- CommonJS를 구분하는 가장 쉬운 방법으로 require()와 module.exports를 사용하는 것으로 판단할 수 있음. (ECMA Script 모듈의 경우 import, export 사용)- Class, Singleton 등을 사용할 수 있음- Node의 경우 CommonJS를 기본으로 사용함- Webpack 역시 CommonJS를 기본으로 사용함
Last Modified : 2020-08-24 20:31:24JSBin이란 무엇인지 알아보겠습니다.JSBin은 자바스크립트, html, css의 코드를 작성하고 실행, 테스트를 수행할 수 있는 웹서비스입니다. 비슷한 서비스로 Plunker JSFiddle을 생각할 수 있습니다.JSBin은 다른 서비스들 해당 소스를 저장하고 읽을 수 있으며 바로바로 실행하여 문제점을 찾을 수도 있습니다. 모든 소스코드를 JSBin을 사용하여 개발하기 보다는 소스코드의 일부, 모듈등을 나누어 테스트하는 과정에 많이 사용됩니다.JSBin이 가진 장점은 필요한 기능만 갖추어 상대적으로 가볍고 빠른 실행이 가능하다는 점입니다.
Last Modified : 2017-06-01 18:13:39이 문제는 웹페이지에서 비동기식 AJAX를 사용하여 호출하기 위한 경우 발생합니다. JSON 타입의 포맷으로 PHP 문서를 만들어 API 형태로 불러오는데 파싱 에러가 발생한다면 아래의 문제일 가능성이 높습니다.- 따옴표에 따른 문법 오류(홀따옴표, 쌍따옴표의 차이)- 따옴표 앞에 escape 문자가 없는 경우- nl2br을 사용하지 않았거나 사용하였음에도 변환되지 않은 경우- JSON 문자에 띄어쓰기 코드 r n 등이 포함된 경우위와 같은 이슈를 해결하기 위하여 대부분의 방법들을 사용해 보았으나 예외 케이스가 가끔씩 나타나는 현상이 발견되어 아래의 방법으로 최종 해결하였습니다.! php의 json_encode() 함수를 사용하여 변환하기이 방법을 사용하면 텍스트를 감싸고 있는 따옴표를 제거한 후 함수 호출
Last Modified : 2017-03-27 08:41:06AngularJS에서 모듈을 생성하고 사용하는것은 매우 중요한 부분입니다. 아래는 .factory()를 사용하여 커스텀 서비스를 만들고 이를 디렉티브에 적용하여 사용하는 간단한 예제입니다.먼저 myApp에 커스텀서비스인 customServices를 생성하고 서비스명 testService에 메세지를 보여줄 showmsg() 메소드를 만들어봅니다.angular.module('customServices', []) .factory('testService', function() { return { showmsg: function(name) { return name; } } });이제 testService를 적용한 후 showmsg()를 사용하여 출력해보겠습니다. 아래는 전
Last Modified : 2017-08-11 01:40:37타입스크립트(typescript)를 사용하는 웹어플리케이션이 많아지고 있습니다. 그 만큼 장점이 많기 때문이죠. 그런데 타입스크립트를 사용하면 개발 로컬 환경에서 추가적인 컴파일(트랜스파일) 시간이 길어지게 됩니다. 아래는 이에 대한 해결방법을 알아보려고 합니다.! 타입스크립트를 사용하면 왜 늦을까타입스크립트 역시 컴파일 과정을 통해 설정된 es5, esnext 등의 버전으로 변환되는 과정을 거치게 됩니다. react 등의 프론트엔드 환경에서는 웹팩(Webpack) 등의 번들링 과정을 거치게 될 것이고 이때 타입스크립트의 컴파일 역시 함께 수행되므로 로딩 시간은 더 걸리게 됩니다.가장 큰 문제는 시간이 생각보다 꽤 걸린다는 점입니다. 이는 프로젝트의 규모가 커질수록 더더욱 큰 이슈로 나타날 수 있습니다. 사
Last Modified : 2020-07-13 19:56:40컴포넌트 단위의 모듈을 개발하여 사용하기 위한 자바스크립트 방법으로 CommonJS가 많이 사용됩니다. CommonJS는 AMD와 함께 모듈화를 가능하게 합니다.각 모듈은 Scope, Definition, Usage의 세 가지로 구분되어 사용됩니다. 그럼 아래는 간단한 모듈 선언 및 사용의 예제입니다.# 모듈의 사용, require() 함수먼저 모듈을 사용하기 위해서는 require() 함수를 사용합니다. require()는 현재 스코프에 원하는 모듈을 import하여 사용할 수 있도록 해줍니다.var yourModule = require('./yoursomething');변수 yourModule에는 사용할 모듈 yoursomething.js 파일이 선언되었습니다. yourModule을 통하여 모듈 내부의
Last Modified : 2017-08-16 17:09:11
자바스크립트 프레임워크 next.js에 대하여 알아봅니다.! next.js는?next.js는 매우 잘 알려진 프레임워크입니다. next.js를 사용하는 큰 이유 중 하나로 React를 사용한 프론트엔드 프레임워크이면서 서버사이드 랜더링이 가능하다는 점입니다.대시보드를 가지는 어드민, 관리자 페이지의 경우 서버사이드 렌더링이 꼭 필요한 것은 아니나 일반적인 홈페이지의 경우 SEO, 검색엔진 최적화를 위해서 서버사이드 렌더링 방식을 사용합니다. 이 경우 서버 코드를 직접 html 템플릿에 입력하는 방식은 하나의 언어만 사용하는 것보다 어렵고 비효율적일 수 있죠. 이런 문제를 해결할 수 있는 대안 중 하나가 바로 next.js와 같은 작고 기능에 충실한 프레임워크를 사용하는 방법입니다.# next.js 단순하고
Last Modified : 2020-06-22 22:40:25클라이언트 브라우저에서 Python 서버로 값들을 전송할 수 있습니다. 이때 여러 타입의 값들을 Python에서 전달 받는 방법을 알아봅니다.# Python 서버에서 여러 값들 전달 받는 방법전달 받는 값의 타입은 json, urlencoded, 파일(file) 등등 여러가지가 있겠습니다. 각각의 타입들을 서버에서 받기 위해서는 대부분 request 모듈을 사용합니다. 이때 모듈의 내부 함수는 조금씩 다른데요 하나씩 알아봅니다.! 먼저 GET 방식인 경우get 방식인 경우 주소 파라미터(query parameter, 쿼리 스트링)로 전달됩니다.request.args.get(key)예를들어 아래와 같은 주소로 전달된 경우라면?webisfree.com?sitename=webisfree&no=123request.
Last Modified : 2020-10-23 21:18:38만약 생성한 인스턴스의 이름이 hlsVideo인 경우 페이지를 이탈하거나 더 이상 이벤트가 필요하지 않은 경우 아래와 같은 방법으로 Destroy, 중지합니다.# hls.js를 사용한 인스턴스 destroy 방법아래와 같이 destroy() 함수를 사용합니다. 만약 인스턴스 네임이 hlsVideo인 경우...hlsVideo.destroy();위의 방법으로 정상적으로 destroy()됩니다.
Last Modified : 2017-04-26 13:11:25next.js 프레임워크에서 라우팅(routing)을 사용하는 방법입니다. 어떻게 라우팅을 설정하는지 아래에서 알아봅니다.# next.js 라우팅 설정하기서버 사이드 렌더링 방식의 next.js는 매우 간단하고 쉽게 페이지 라우팅 설정이 가능합니다. 우선 라우팅 설정을 위해 앱의 상위 폴더에 /pages/ 폴더를 생성해야 합니다.하나. /pages/ 폴더 생성하기next.js에서 라우팅 설정하기 위해 /pages/ 폴더를 만들어야합니다. /pages/폴더에 추가된 파일들은 각각 하나의 페이지로 매핑되게 됩니다. 예를들어 만약 아래와 같은 세 페이지가 있다고 생각해봅니다.webisfree.comwebisfree.com/about/webisfree.com/contact/둘. /pages/ 폴더에 파일 만들어 추
Last Modified : 2020-08-27 12:04:44$scope.$apply() 사용시 $digest 에러가 발생할 수 있습니다. 해결 방법은 무엇일가요?원인은 $apply 또는 $digest가 이미 진행중(In progress)인 상태이기 때문입니다. 가장 간단한 방법으로 $setTimeout()을 사용합니다.$timeout(function() { // 실행할 코드를 추가})위에 코드를 추가하면 자동으로 $apply와 동일하게 반영됩니다.
Last Modified : 2017-05-23 18:24:59만약 AngularJS에서 JsonPadding을 사용하는데 Undefined가 발생하는 경우 해결하는 방법입니다. 해당 이슈는 jQuery에서는 잘 동작하지만 AngularJS에서 동작하지 않는 경우에 해결될 수 있습니다. 일단 undefined는 아래처럼 메시지가 나타납니다.JSONP_CALLBACK is not defined문제의 원인은 angularJS는 JSONP 방식으로 받게 될 callbak 함수의 이름이 angular.callbacks._0으로 변환되기 때문입니다. 이를 해결하기 위한 방법으로 JSONP가 호출할 Url의 template을 수정하여 해결합니다.! 수정 전JSONP_CALLBACK({JsonData});! 수정 후angular.callbacks._0({JsonData
Last Modified : 2017-08-11 01:25:22
우리가 알고있는 자바스크립트(Javascript) 그리고 ECMAScript는 다른 것일까? 다르다면 무엇이 다른지 알아보고자 한다.ECMAScript는 1995년 SUN과 넷스케이프에서 개발하고 발표한 스크립트언어의 이름이다. 이는 이름이 Mocha로 바뀌고 다시 LiveScript로 바뀌었고 그 뒤에야 현재의 자바스크립트로 불리게 되었다. 그런데 클라이언트 스크립트 언어를 MS에서도 만들면서 JScript로 명하였다. 이 후 이 스크립트가 익스플로러 3가 1996년 8월에 도입되면서 다른 스크립트 간의 호환성 문제가 생기게 되었다.결국에는 발생하는 호환성 문제를 해결하기 위하여 두 스크립트 간의 표준을 정하였고 하나의 자바스크립트로 사용하기 위해 필요한 API들이 통합되었다.현재 우리가 알고 있는 자바스
Last Modified : 2017-09-21 00:10:31Python의 Flask는 Jinja2 엔진을 사용하여 html 코드에서 angularJS의 표현식을 {{ text }}을 사용할 경우 의도한 바와 다르게 Python에서 파싱이 일어나게 됩니다. 이런 문제점을 해결하는 방법을 알아봅니다. 어떤 방법이 있을까요?! raw를 선언하는 방법<ul>{% raw %} {% for item in seq %} <li>{{ some_var }}</li> {% endfor %}{% endraw %}</ul>이런 이유로 둘 중 하나의 표기를 바꾸는 방법이 많이 사용되는데 보통 아래처럼 많이 사용합니다.! Python Flask 원래코드<span>{{ angularValue }}</span>변경 후<span>{[{ angularValue }]}</span> <sp
Last Modified : 2018-04-30 11:20:50angularjs 내장 서비스 알아보기$anchorScroll해당 앵커 위치로 이동시킴$animatetransition 애니메이션 기능을 구현$complie$controller
Last Modified : 2017-08-11 01:42:16AngularJS에서 Service와 Factory의 차이점은 무엇이고 언제 어떻게 사용할까요?
Last Modified : 2017-08-11 01:43:08angular js 언어에서 angularjs 2를 사용할 경우 가장 큰 장점은 무엇인가요?
Last Modified : 2017-09-21 00:19:04