이번 피드에서는 Json데이터에 대해 알아보겠습니다. 우선 간단히 Json데이터가 무엇인지 살펴보겠습니다. Json데이터는 key-value 쌍으로 이루어진 데이터입니다. Json데이터의 기본 포멧은 아래와 같습니다. 1 2 3 4 5 { "name": "Kim", "age": 25, "address": "Seoul" } cs 살펴보면 데이터가 {} 괄호로 쌓여있고, 데이터는 "key 값" : "value 값" 이런식으로 표현되게 됩니다. Json데이터는 대표적으로 Ajax서버통신에 많이 사용되기 때문에, 자주 사용하게되는 데이터입니다. 이제 본격적으로 사용방법에 대해 알아보겠습니다. 1. Json데이터 파싱 Json데이터를 파싱에 관련된 함수는 2가지가 있습니다. 각각, 데이터를 Json데이터로 파싱해..

이번 피드에서는 배열의 기본 사용방법을 알아보겠습니다. 배열생성, 배열 초기화, 배열을 0으로 초기화, 배열에 특정값을 넣어 초기화, 배열에 값을 입력, 삭제하는 방법입니다. 1. 배열 생성(배열초기화) 배열을 생성, 초기화하는 방법은 매우 간단합니다. 우선 코드로 확인해 보겠습니다. 1 2 3 4 5 6 7 8 // 배열 기본 선언 var arr1 = []; var arr2 = new Array(); // 배열 값을 넣어 초기화 var arr3 = [1,2,3,4,5]; // 결과값 : [1,2,3,4,5] var arr4 = new Array(5); // 결과값 : [] => length가 5인 배열 생성 var arr5 = new Array(1,2,3,4,5); // 결과값 : [1,2,3,4,5]..

이번 포스팅에서는 유용한 이클립스 플러그인을 하나 추천드리겠습니다. 어떤기능을 가진 플러그인인가 한번 살펴보겠습니다. 1. 선택한 파일의 경로를 복사해주는 기능 2. 선택한 파일의 폴더경로까지 폴더를 실행해주는 기능 3. 선택한 파일의 폴더경로까지 쉘스크립트를 실행해주는 기능 바로 위와같은 기능을 가진 플러그인입니다. 해당기능은 뭐 별거 아니네 생각할수도 있지만, 막상 사용해보면 엄청 편리합니다. 기존에 경로를 복사하기 위해서, 파일 우클릭 -> 프로퍼티(propertie)에서 경로를 복사한다고 생각해보시면 이해가 됩니다. 한 두번정도는 이런식으로 해도 큰 불편함을 느끼지 못 할수 있지만, 횟수가 늘어난다면.... 끔찍하네요. 해당 플러그인은 한번에 여러개의 파일의 경로가 동시에 복사도 할 수 있습니다...

프로젝트를 진행하다보면 날짜타입의 값을 거의 빼먹지않고 사용하게 됩니다. 이렇듯 많이 쓰이는 날짜함수를 정리해보겠습니다. 1. 초기화 날짜함수의 초기화 방법은 간단합니다. 아래 코드와 같이 new Date(); 를 사용해 주면 됩니다. 그런데, 결과값으로 오늘 날짜가 노출되기는 하는데 직관적으로 알아보기 힘든 값입니다. "Wed Oct 07 2020 23:31:20 GMT+0900 (대한민국 표준시)" 이 값을 그대로 사용하기는 보다는 보기 쉽게 바꿔서 표현해 주는게 좋겠습니다. 그럼 다음단계에서 형변환에 대해서 알아보겠습니다. 1 var today = new Date(); // Wed Oct 07 2020 23:31:20 GMT+0900 (대한민국 표준시) cs 2. 형변환(타입변환) 날짜를 필요한 용..

이번 피드에서는 이클립스에서 메이븐 프로젝트를 생성하는 방법을 올려보겠습니다. 일단 이클립스에서 프로젝트 생성을 누르고 검색란에 Maven을 검색하거나 직접 찾으셔도 됩니다. 아래와 같이 Maven Project를 선택 한 후, 다음단계로 넘어가 줍니다. 그럼 아래와 같은 화면이 나오게 되는데요, 여기서도 Next버튼을 한번 더 눌러줍니다. Next버튼을 누르면 아래와 같은 화면이 나오게 됩니다 그럼 여기서 org.apache.maven.archetypes를 검색해 주어도 되고 직접 찾아 주어도 되는데, 검색이 더 편합니다! GROUP ID : org.apaache.maven.archetypes Artifact ID : maven-archetype-webapp 위와 같이 선택해주면 됩니다. 선택을 마치고..

프로젝트 진행 중 css, js파일을 수정하게 되는 일이 많습니다. 이때 코드 수정을 완료하고, 화면을 확인할때, 브라우저가 수정하기 전 css/js파일을 캐싱하고 있으면, 코드를 아무리 수정해도 변경된 코드가 반영이 되지 않을때가 있다. 이때 코드에는 문제가 없지만 화면에 적용이 안된 상황을 보고, 괜히 코드를 수정하는 불상사가 발생할 수 있습니다. 이를 방지하기 위한 방법이 여러가지가 있는데, 1. 수동으로 브라우저 캐시를 삭제한다. 2. 크롬 시크릿모드로 테스트 한다. 3. jsp파일에서 스크립트 사용시 뒤에 version이나 날짜를 붙여준다. ex) 해당 방법은 css, js, img파일 모두 동일하게 적용이 가능한 방법입니다. 개인적으로 혼자만 테스트를 진행하는 경우는 1, 2번 방법으로 하더라..

스프링 프로젝트의 기본적인 환경 세팅을 해보겠습니다. 우선 전체적인 프로젝트구조를 보고 시작하겠습니다. 예시프로젝트로 config라는 메이븐프로젝트를 생성하였습니다. 아래 이미지는 참고용으로 프로젝트 세팅완료 후 이미지입니다. 1. pom.xml 세팅 우선 메이븐 프로젝트를 생성 후 제일 처음 할 일은 pom.xml세팅입니다. 본 포스팅은 간단한 스프링 프로젝트 세팅용 예시이므로, 스프링 lib만 추가해 주겠습니다. 저는 pom.xml에 spring-webmvc를 추가하여 주었습니다. 1 2 3 4 5 6 org.springframework spring-webmvc 5.2.9.RELEASE Colored by Color Scripter cs 2. web.xml 세팅 다음은 중요한 web.xml세팅인데요...

web.xml 파일은 Tomcat과 같은 서블릿 컨테이너에 웹 애플리케이션을 배포하는 방법을 설명합니다. 이 파일은 Tomcat에 배포하는 모든 애플리케이션에 필요합니다. 파일의 위치는 항상 동일하며, application root / WEB-INF / web.xml에 위치하게 됩니다. web.xml 파일의 태그는 태그로 감싸져 있으며, 톰캣 버전별로 XSD, DTD선언이 조금씩 달라집니다. 1. 톰캣버전별 web.xml 예시 아래의 예시는 톰캣 버전별로 태그의 버전예시입니다. 1) Tomcat 8.0 1 2 3 4 5 6 7 Colored by Color Scripter cs 2) Tomcat 7.0 1 2 3 4 5 6 7 8 Colored by Color Scripter cs 3) Tomcat 6...

D3.js는 데이터를 기반으로 문서를 조작하기위한 Javascript 라이브러리입니다. D3는 HTML, SVG, CSS를 사용하여 데이터에 생명을 불어 넣는데 도움이 됩니다. 웹 표준에 대한 D3의 강조는 강력한 시각화 구성요소와 DOM(문서 개체 모델) 조작에 대한 데이터 기반 접근방식을 결합하여 독점 프레임워크에 묶이지 않고도 최신 브라우저의 모든 기능을 제공합니다. D3를 사용하는 방법은 2가지가 있습니다. 라이브러리 파일을 직접 다운로드 받거나, CDN을 이용하는 것입니다. 1. 직접다운로드 직접 다운로드는 d3메인페이지에서 최신 d3라이브러리 파일을 다운받을 수 있습니다. d3js.org D3.js - Data-Driven Documents D3 is a JavaScript library fo..

OPEN API인 다음 지도API를 간단히 사용해봤습니다. 우선 기본 지도 띄우기와 검색하여 마커로 위치정보를 찍는 부분까지 진행해 보겠습니다. 이정도까지가 지도API에 기본적인 부분이라고 생각해서 여기까지 진행했습니다. 이 글을 보지않아도 DAUM API센터에 설명이 무척 자세히 되어있지만, 그래도 필요하신 분은 참고가 되시면 좋겠습니다. 일단 API를 사용하려면 KEY를 발급받아야한다. 아래 링크에서 진행하시면 됩니다. 카카오 개발자센터 링크 : https://developers.kakao.com/ 사이트에 들어가 로그인을 한후 내 애플리케이션을 클릭하고 들어가면 된다. 내 애플리케이션 페이지에 들어오면 앱만들기를 할 수 있다. 여기서 앱 만들기를 클릭해서 앱을 만들면 된다. 앱을 성공적으로 만들면 ..