간단하게 버튼을 클릭하면 리스너를 달고 지정한 폴더안에 있는 파일을 다운로드하는 코드를 연습하면서 사용한 메소드를 정리한다. getElementById(elementId: string): HTMLElement | null; : 지정된 ID에 값을 가진 첫번째 개체에 대한 참조를 반환 파라미터로는 String을 받는다. createElement(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]; : 지정된 태그에 대한 요소의 인스턴스를 만듭니다. HTMLElementTagNameMap 안에 정의되어 있음. 이는 인터페이스로 선언되어 있음 appendChild(newChild: T): T; Node.appendChild() 메소드..

WEB Service Web Service의 기본적인 동작 과정은 다음과 같다 HTML Form -> Servlet -> HTML Page 1. 사용자가 웹 페이지(HTML Form)를 통해 값을 입력 (Input) 2. Servlet 의 메소드는 입력한 데이터 form data 에 맞게 관련된 정보를 검색 3. 사용자의 요청에 맞는 동적 컨텐츠를 제공한다 (Output) -Form Tag 속성- 1. action : form을 전송할 서버 쪽 스크립트 파일 지정 2. name : form을 식별하기 위한 이름 3. accept-charset : 어떤 문자 인코딩을 적용할지 지정 4. target : action에서 지정한 스크립트 파일을 다른 위체에서 열리도록 지정 5. method : form을 서버..

Js 파일을 변경하고 was 서버에 반영이 안되는 현상이 날때 해결 해당 파일은 Jquery를 담고있는 js를 script 해옵니다. 만약 제가 그 파일을 수정하고 다시 시작한다고 해도 js 파일을 수정한 부분이 적용이 안될 수도 있습니다. 그 이유는 브라우저는 캐쉬를 사용하게 되고 이 캐시로 js 나 css 문서가 처리가 되기 때문입니다. jsp파일의 경우는 설정을 해 놓고 새로고침만 해도 변경점이 바로 적용됩니다. 여러번 f5를 눌러 갱신할 경우 될 수도 있지만. 이러면 좋지 않습니다. 브라우저가 캐쉬에 있는 파일을 사용하지 않고 바로 변경된 파일을 사용하는 법은 위의 사진에서와 같이 파일명 뒤에 ?ver= 를 붙이는 것입니다. 숫자는 뭐든 상관이 없습니다. 버전정보가 들어감으로써 캐쉬에 들어간 정보..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 자료구조 : Array 연습 // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; //join 사용 const result = fruits.join("") console.log(result); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; // split(separator: string | RegExp, limit?: number): string[]; const result = fruits.split(',',2); //split은 구분..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 자료구조 : Array 1. 배열 선언 위와 같이 선언할 수 있다. 배열은 안에 들어간 값을 index로 참조할 수 있다. 2. Array APIs lib.es5.d.ts 에 정의되어 있는 함수를 알아보았다. 2-1 반복문 배열 안에 있는 value 들 마다 내가 전달할 함수를 출력하는데 용이하다. 2-2 Addtion, Deletion, copy pop 과 push 의 경우 마지막 인덱스를 조작하기 때문에 빠르게 실행된다. 하지만 shift나 unshift 의 경우 앞을 조작하다보니 뒤의 index를 당기거나 밀어야 한다. 배열이 커질수록 걸리는 시간이 증가한다. 2-3 splice : index 번호로 추..

개발을 하다 보면 한 페이지에서만 사용하는 함수가 아니라 여러곳에서 사용하는 함수들이 있습니다. 이를 각각 페이지에 적게 되면 시간도 오래걸리고 유지보수가 어려워 한 파일에 넣어서 관리하고 참조하여 사용합니다. 간단하게 예제를 만들어 보았습니다. 해당하는 경로에 common.js를 만들고 자기 자신을 리턴하는 함수로 구현합니다. 그리고 그 안에 ui가 있고 그안에는 download 라는 함수가 있습니다. 맨 하단부는 다음과 같이 const로 $commons -> 불려질 이름 으로 지정합니다. 사용할 페이지에 이런식으로 선언합니다 (Android 에서의 import라고 이해하였습니다) 사용시에는 이런식으로 접근하여 해당 함수를 불러옵니다.

개발환경을 만들면서 jQuery가 필요해서 IntelliJ 에 가져와 보았습니다. jQuery 를 사용하는 이유 - 크로스 브라우징: 한번의 코딩으로 모든 브라우저에 적용 - 다양한 플러그인: jquery 기반 플러그인들이 무료로 배포 - 브라우저 호환성 - Ajax 통신처리 용이 우선 다운로드를 받기 위해 공식 사이트에 들어간다. https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging;..

TypeScript 에 있는 함수를 사용하기 위해서 외부 라이브러리를 IntelliJ 에 추가해야한다. 준비물 1. IntelliJ 에서 Ts Plupin install (미설치 시) 2. 사용할 외부 라이브러리의 jar 파일 저는 dom4j-1.6.1.jar 를 준비하였습니다. 우선 IntelliJ 에서 file->project structure클릭 모듈을 선택하고 왼쪽의 + 클릭 후 JARs or Directories 클릭 추가할 Jar 파일 클릭 잘 들어온 것을 확인 후 ok 버튼 클릭 그럼 아래의 그림처럼 External Livraires에 잘 들어온것을 확인 가능 이제 jar 안에 있는 함수를 쓰려면 lib.dom.ts 에서 Document로 부릅니다. 다음과 같이 .로 참조한 뒤 원하는 함수를..

1. 저번에는 개발 환경을 만들어 보았다 이번에는 추후 로그인 페이지를 대비하여 빌드 후 원하는 jsp 파일을 호출하도록 해봤다. 그전에 알아둬야할 것 - Controller Spring 에서 controller의 시작점은 서버가 실행 될 때 전부 메모리에 올라간 뒤에 서버가 시작된다. controller의 특징 다양한 타입의 파라미터 처리, 다양한 타입의 리턴 타입을 사용 가능하다. 대규모 프로젝트로 갈 수록 서비스가 많아지는데 이걸 하나의 클래스에서 처리하는 것이 아니라 controller 라는 중간 제어자 역활을 하는 것을 만들어서 각각 호출하게 만들 수 있다. MVC 패턴에 포함된다. 이는 유지보수가 용이하다. 우선 homeController 안에 다음과 같은 코드를 작성한다. @Controlle..

IntelliJ ctrl + s 후 페이지에서 f5로 갱신하는 방법 여기에서 On Update atrion 과 On frame deactivation을 해당 항목으로 선택후 apply 하면된다.

이전에 두었던 Tomcat 으로만 구현된 웹서버 개발환경에는 큰 문제가 있었다. 이렇게 두고 톰켓을 이용한 서버는. 단순한 구조일 뿐 더러. 지금 직장에서 사용하는 환경과는 동 떨어져 있기 때문이다. 그래서 분석해본 결과. spring을 뼈대로 나누고 MVC처럼 동작하는것 처럼 만들었다. 그래서 spring 연동을 해볼 예정이다. 1. 프로젝트 만들기 new- > project 에 들어간 다음. 이름과 location 지정 후 순서대로 java : 자바기반 언어로 만들것이기 때문에 선택 Maven : 프로젝트 타입 group : 프로젝트 저장소와 관련된 Artifact 그룹 artifact 사용하는 maven project에서 빌드 결과물로 나오는 개체를 artifact라고 한다. 프로젝트 -> 빌드 -..

개발환경에서 IntelliJ 를 쓰면서 자주 사용하는 단축키를 정리. 코드 편집에 유용한 단축키 Ctrl + / : 선택한 라인 주석 처리 Ctrl + Shift + / : 선택한 영역만큼 주석 처리 Ctrl + Y : 커서가 위치한 라인 삭제 Ctrl + D : 현재 코드 복사하여 바로 밑에줄에 붙여넣기 Alt + Enter : import Ctrl + W : 커서 근처의 코드 선택 영역 확장 Ctrl + Shift + W : 커서 근처의 코드 선택 영역 축소 Ctrl + P : 커서가 위치한 메서드의 매개변수 조회 Alt + Insert : 생성자, Getter/Setter, toString과 같은 코드 생성 Ctrl + E : 최근 연 파일 목록 검색 Shift + F6 : Rename Shift ..