초보개발자(10)
-
[WEB 개발]_사용한 함수, 기능 정리 3번
1] li 안의 Template 를 만들고 그 안을 for문으로 원하는 만큼 반복문으로 만들기 시작점을 지정하고 현재의 년도를 함수를 통해 받아온다. for문을 통해 시작점부터 현재의 년도까지 반복하게 된다. 해당하는 html 태그를 만든다음에 template tag에 맞는 값을 생성하고 그 안의 html을 내가 지정한 방식으로 만들게 됩니다. 그리고 node라는 곳에 저장하고 그 값은 true 로 보여지게 됩니다. 그리고 yearList.append(node) 를 적어두면 잘 작동하게 됩니다. 2] 위의 방법으로 만든 template를 어떠한 액션 리스너에 의해 지우고 원하는 값으로 다시 만들 때 사용하는 방법 #안의 값은 querySelector로 떠 온 값을 변수에 지정하고 그값을 넣어준 것입니다...
2021.12.15 -
[초보개발자]_Web Service, Servlet, JSP 란?
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을 서버..
2021.12.07 -
[초보개발자]_JS, Css 파일 수정 내용 적용 불가 오류 해결
Js 파일을 변경하고 was 서버에 반영이 안되는 현상이 날때 해결 해당 파일은 Jquery를 담고있는 js를 script 해옵니다. 만약 제가 그 파일을 수정하고 다시 시작한다고 해도 js 파일을 수정한 부분이 적용이 안될 수도 있습니다. 그 이유는 브라우저는 캐쉬를 사용하게 되고 이 캐시로 js 나 css 문서가 처리가 되기 때문입니다. jsp파일의 경우는 설정을 해 놓고 새로고침만 해도 변경점이 바로 적용됩니다. 여러번 f5를 눌러 갱신할 경우 될 수도 있지만. 이러면 좋지 않습니다. 브라우저가 캐쉬에 있는 파일을 사용하지 않고 바로 변경된 파일을 사용하는 법은 위의 사진에서와 같이 파일명 뒤에 ?ver= 를 붙이는 것입니다. 숫자는 뭐든 상관이 없습니다. 버전정보가 들어감으로써 캐쉬에 들어간 정보..
2021.12.06 -
[프론트엔드]_JavaScript(es6)_6.Array
공부 자료 : 드림코딩 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 번호로 추..
2021.12.05 -
[IntelliJ]_jQuery 라이브러리 추가, 적용
개발환경을 만들면서 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;..
2021.12.03 -
[TypeScript]_IntelliJ Spring_lib.dom.ts 외부 라이브러리 가져오기
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로 부릅니다. 다음과 같이 .로 참조한 뒤 원하는 함수를..
2021.12.02 -
[IntelliJ]_Spring 개발환경 설정 (feat.Tomcat)
이전에 두었던 Tomcat 으로만 구현된 웹서버 개발환경에는 큰 문제가 있었다. 이렇게 두고 톰켓을 이용한 서버는. 단순한 구조일 뿐 더러. 지금 직장에서 사용하는 환경과는 동 떨어져 있기 때문이다. 그래서 분석해본 결과. spring을 뼈대로 나누고 MVC처럼 동작하는것 처럼 만들었다. 그래서 spring 연동을 해볼 예정이다. 1. 프로젝트 만들기 new- > project 에 들어간 다음. 이름과 location 지정 후 순서대로 java : 자바기반 언어로 만들것이기 때문에 선택 Maven : 프로젝트 타입 group : 프로젝트 저장소와 관련된 Artifact 그룹 artifact 사용하는 maven project에서 빌드 결과물로 나오는 개체를 artifact라고 한다. 프로젝트 -> 빌드 -..
2021.11.30 -
[프론트엔드]_JavaScript(es6)_5. Object
공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 1.Object 오브젝트란 저번에 말한 것처럼 틀이 정해져 있다면 그안에 값을 지정해서 메모리에 올라가 동작하는 것을 말한다. {} 안에 직접 지정하는 object literal 문법이 있고 생성자를 이용해서 만드는 object constructor 문법이 있다. 이처럼 yoon 이라는 object를 {}를 사용하여 생성하고 이를 Function 의 파라미터로 전달 할 수 있다. 자바스크립트는 동적으로 (Runtime) 동작하는 언어인데. 뒤늦게 하나의 property를 추가 할 수 있다. 이렇게 생성하고 지울 수 있지만 필드에서 유지보수를 할 때 힘들고 오류발생을 야기한다. 이 개념에서 가장 중요한 것은 O..
2021.11.27 -
[프론트엔드]_JavaScript(es6)_4. Class
공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 클래스란 무엇인가? 클래스는 모양이 정해진 틀과 같다. 붕어빵 틀 혹은 청사진이라고도 부를 수 있다. 데이터가 들어가 있지 않고 한번만 선언된다. 메모리에 올라가지 않는다. 오브젝트란? 클래스에서 틀을 만들었다면 값 (붕어빵에서는 팥붕어빵, 슈크림 붕어빵) 과 같이 테이타를 넣어서 instance를 생성했을 때 Object가 된다. 데이터가 들어가 있고, 여러번 선언될 수 있다. 또한 메모리에 올라가게 된다. JS에서는 es6 전까지는 class 라는게 정의되어 있지 않고 object로 만들었었다. 클래스는 prototype-based 로 만들어진 것이며 의미는 같다. 1. 기본 형식 위에서 Person 이라..
2021.11.27 -
[초보개발자]_JSP 메모장 1번
1. Form태그 -> bootstrap 에서 제공하는 형태이다. 즉 action이 달려있는 의미 그중 submit은 페이지 이동이 강제로 일어난다. SPA 에서는 필요가 없기 때문에 버튼으로 수정하고 Form 태그를 지워줘야 Enter 입력시 tab이 닫히는 현상을 막을 수 있다. form은 전달 형식중 한가지이며 post와 get 방식이 나눠져있다. 2. 함수 선언은 굳이 한번 쓴다면 밖에 할 필요는 없다. -> 이는 메모리 참조로 이어진다. 또한 변수 선언을 let으로 해줘야한다 let으로 선언하지 않을때는 var로 선언되는데 이는 hoisting되어 다른 오류를 발생시킬 수 있다. 3. 그리드 페이지 검색기능 개발 onchange 와 onkeyup을 이용하여 구현 onchange는 안의 값이 변경..
2021.11.25