본문 바로가기

전체 글101

[JSTL]이란? JSTL CORE태그 사용법 1. JSTL 이란? -JSP 표준 태그 라이브러리(여러 프로그램이 공통으로 사용하는 코드를 모아놓은 집합)의 약어 -이미 만들어진 태그를 이용하여 JSP환경에서 보다 가독성 좋게 JAVA를 사용할 수 있다. -기본적으로 제공하는 태그 외에도 자신만의 태그를 만들어서 사용할 수 있다. 2. JSTL 라이브라러 다운로드 -http://tomcat.apache.org/download-taglibs.cgi(다운로드 경로) 3. JSTL 라이브러리 적용방법 아래와 같이 taglib지시문을 이용하여 선언 후에 사용가능하다. 종류가 여러가지 있으니 본인이 필요한 부분만 선언해서 사용하면 된다. 4. JSTL 사용방법 및 예시 JSTL중에 가장 많이 사용하는 core태그(prefix="c")만 간단한 예시를 통해 알.. 2019. 5. 18.
<Node.js>Express.js 설치하기, 기본세팅 Express.js는 Node.js의 프레임워크이다. 당연히 express.js를 설치하기 위해서는 Node.js가 설치되어 있어야만 한다. Node.js를 설치하면 자동으로 npm이라는 일종의 앱스토어(?)가 설치되는데 여기서 express.js를 다운로드 받을 수 있다. 우선 node.js와 npm이 제대로 설치되었는지 확인해 보겠다. vscode 터미널에서 npm -v를 입력하면 npm의 버전을 확인 할 수 있다. node.js가 설치되었고 함께 설치되는 npm또한 정상적으로 설치되었다는 의미이다. 그다음 콘솔의 경로를 작업할 폴더로 이동한다. 경로이동은 cd [이동경로]를 입력하면 되겠다. 그 후 npm init를 입력하면 기본적으로 입력해야하는 양식이 나오는데 버전이라던가 프로젝트이름과 같은 내.. 2019. 5. 15.
<Node.js>다운로드 설치방법 및 개념정리 우리는 좋으나 싫으나 웹 front개발을 할때 javascript를 사용 해야한다. 왜냐하면 언어가 javascript밖에 없기 때문이다. 이러한 javascript는 브라우저에서만 사용할 수 있는데 이를 서버로 가져와서 사용하는게 node.js이다. 브라우저에서만 작동하던 자바스크립트가 서버로 오면서 컴퓨터의 자원을 관리하게 되고 이는 백앤드 개발 또한 javaScript로 할 수 있다는 의미이다. javascript하나로 모든걸 다 할수 있다니 정말 놀라운 일이다. 1. node.js설치 우선 node.js설치 방법에 대해서 알아보겠다. 아래링크로 접속하면 다음과 같은 화면이 나오는 여기서 왼쪽은 검증된 버전의 node.js이며 오른쪽의 다운로드 버튼은 최신버전의 node.js이다. 개인적으로는 왼쪽.. 2019. 5. 15.
<Servlet>redirec와 forward개념 Redirect와 Foward는 JSP환경에서 현재 작업중인 페이지에서 다른페이지로 이동하는 방식이다. 그렇다면 결과적으로 같은 기능을 하는 이 두가지는 어떠한 차이점이 있을까?? ​ ​1. redirect의 개념 1. 리다이렉트는 HTTP프로토콜로 정해진 규칙이다. 2. 서버는 클라이언트의 요청에 대해 특정 URL로 이동을 요청할 수 있다. 이를 리다이렉트라고 한다. 3. 서버는 클라이언트에게 HTTP 상태코드 302로 응답하는데 이때 헤더 내 Location 값에 이동할 URL 을 추가한다. 클라이언트는 리다이렉션 응답을 받게 되면 헤더(Location)에 포함된 URL로 재요청을 보내게 된다. 이때 브라우저의 주소창은 새 URL로 바뀌게 된다. ​ 4. 클라이언트는 서버로부터 받은 상태 값이 302.. 2019. 5. 15.
[jQuery] Ajax사용하기 jQuery에서 Ajax사용하기 웹 프론트에서 가장 중요한 기능을 물어본다면 고민을 해봐야겠지만 지금 당장 대답한다면 저는 아마도 Ajax라고 대답할것 같습니다. 그만큼 Ajax는 많이사용하고 중요하고 또 웹페이지를 멋지게 해주는 기능입니다. ajax를 사용하는 방법은 여러가지가 있겠지만 이 포스팅에서는 JSP에서 jQuery를 이용한 Ajax로 Spring 백엔드와 통신하는 방법에 대해서 설명하고자 합니다. 1. Ajax란? 과거의 웹은 모든것이 동기화방식으로 운영되어 졌습니다. 예를들어 페이스북의 좋아요 버튼을 누르게되면 단지 좋아요 카운트만 올려주면 되는데 좋아요 카운트 한개를 화면에서 변경하기 위해 전체페이지를 리로딩하는 것이 바로 동기화 방식입니다. 하지만 곰곰히 생각해보면 페이스북의 좋아요기능.. 2019. 5. 15.
[jQuery] 기본 세팅방법(CND, 직접선언 등) jQuery는 브라우저 호환성이 있는 다양한 기능을 제공하는 자바스크립트 라이브러리이다. jQuery에서 제공하는 오픈 라이브러리들을 통해 java script로 ajax, event, 다양한 ui 기능 등을 구현할 수 있으며 이 포스팅에서는 jQuery를 사용하기 위해서는 어떻게 세팅하는지에 대해서 알아보고자 한다. jQuery를 추가하는 방법은 2가지가 있다. URL을 이용해서 라이브러리를 추가하거나 혹은 라이브러리를 다운받아 나의 프로젝트의 특정폴더에 넣어두고 가져다 사용하는데 이는 개발자가 선호하는 방향으로 결정하면 되겠다. URL이용 방법(CND 방식) 직접 추가하는 방법 참고로 jQuery는 아래 사이트에서 다운로드 가능하다. https://jquery.com/download/ 다운로드 받는 .. 2019. 5. 14.
[JavaScript] XMLHttpRequest를 이용한 바닐라자바스크립트 ajax XMLHttpRequest를 이용한 바닐라자바스크립트 ajax 웹을 개발하면서 ajax기술은 거의 필수라고 해도 무방할정도로 널리 사용되어지고 있습니다. 하지만 대부분의 ajax들이 과거 jquery가 유행하던 시절에 jquery를 기반으로 하여 작성되어 지다보니 jquery를 사용하지 않는 프로젝트에서는 어떻게 ajax를 작성하는지 궁금해 졌습니다. 더군다나 jquery를 점점 제거하는 추세여서 라이브러리가 없는 순수 자바스크립트에서는 ajax를 어떻게 작성하는지 알아볼 필요가 있다고 생각되어졌고 오늘 이에 대하여 포스팅을 남겨보려고 합니다. 앞서 설명한것처럼 그 어떤 라이브러리 없이 순수한 자바스크립트 즉, 바닐라자바스크립트로만 ajax를 구현하며 서버백단은 java를 이용하여 통신하는 코드를 기술할.. 2019. 5. 14.
<JavaScript>배열과 객체에 함수를 넣어서 사용하기 개인적으로 javascript의 꽃은 객체라고 생각한다. 자바스크립트에서의 객체는 JSON타입의 데이터라고 생각하면 되는데 이 객체 안에는 일반적인 int, string과 같은 데이터 타입외에도 또다른 객체가 들어간다거나 혹은 배열 심지어 함수도 넣어서 사용할 수 있으니 그 활용도가 무궁무진하다. 이 포스팅에서는 배열안에 객체를 넣고 그 객체안에 있는 함수를 호출하여 사용하는 소스코드를 통해서 어떤식으로 객체를 이용하는지 확인해 보고자 한다. 위의 코드의 결과는 아래와 같다. 2019. 5. 14.
<JavaScript>html객체의 style값 가져오기 자바스크립트를 이용해서 html 요소의 속성과 속성값을 가져올 수 있다. 특히 style속성의 속성값을 가져오는 것은 상당히 유용한데 이를 이용해서 style diplay속성값을 none으로 수정하여 html객체를 사라졌다 보였다하게 만드는 toggle(토글)기능도 구현할 수 있게 해준다. 아래의 예시를 통해서 버튼을 누르면 텍스트입력창이 사라지는 기능을 구현해 보겠다. 처음 실행한 화면이다. 위의 화면에서 버튼을 누르면 텍스트입력창이 사라진다. 다시 버튼을 누르면 텍스트입력창이 활성화가 된다 소스코드를 본다면 아마 어렵지 않게 이해가 가능하리라 생각한다. 참고로 아래의 hidden type의 input태그는 보이지가 않는다. 그래서 상태값을 저장하는 변수처럼 사용하는데 이는 개발하는 사람마음이라 hid.. 2019. 5. 14.
<JavaScript>객체 사용법 자바스크립트에서의 객체는 key값과 value값이 있어서 이를 한대 묶어 저장할 수 있습니다. var test = { name : "홍길동", age: 20 }; 자바스크립트의 객체를 보면 JSON이 떠오르는데요 실제로 JSON은 자바스크립트의 객체구조를 본따 서버와 웹브라우저간의 데이터를 주고 받을 때 사용하기 위해서 만들어 졌다고 합니다. 이러한 객체에는 배열처럼 배열안에 숫자나 텍스트 타입의 데이터 뿐만 아니라 함수나 배열도 들어갑니다. 2019. 5. 11.
<Javascript>배열(Array) 선언및 사용방법 1. 자바스크립트 에서의 배열선언 및 개념 자바스크립트(Javascrip)에서 배열을 선언하는 방법입니다. 자바스크립트에서의 배열에는 모든 타입의 데이터가 들어갈 수 있습니다. 함수나 오브젝트, 심지어 배열안에 또다른 배열도 들어가집니다. var test = []; var test = [1, "hi", null, ture, []]; 2. 배열에서 사용할 수 있는 유용한 함수(메소드) var test = [1, 2, 3, 4]; // 배열의 원소에 특정 값이 들어 있는지 확인 // 4가 text[3]에 있음으로 3을 반환한다 // 없으면 -1 반환 alert(test.indexOf(4)); // 배열을 문자열로 합칠 수 있다. // "1,2,3,4" 반환 alert(test.join()); // 배열을 합.. 2019. 5. 10.
eclipes(이클립스) Maven Project 만들기 및 Maven(메이븐)이란 무엇일까? [1] Maven이란 무엇일까? Maven은 지금까지 애플리케이션을 개발하기 위해 반복적으로 진행해왔던 작업들을 지원하기 위하여 등장한 도구이다. Maven을 사용하면 빌드, 패키징, 문서화, 테스트와 테스트 리포팅, git, 의존성관리, svn등과 같은 형상관리서버와 연동(SCMs), 배포 등의 작업을 손쉽게 할 수 있다. ​ Maven을 이해하려면 CoC(Convention over Configuration)라는 단어를 먼저 이해해야 하는데 CoC란 일종의 관습으로서 예를 들자면 프로그램의 소스파일은 어떤 위치에 있어야 하고, 소스가 컴파일된 파일들은 어떤 위치에 있어야 하고 등을 미리 정해놓는 것을 의미한다. 결국 관습에 이미 익숙한 사용자는 쉽게 Maven을 사용할 수 있지만 관습에 익숙하지 않은.. 2019. 5. 4.