[프론트엔드]_/[Javascript]_ES6(69)
-
[초보개발자]_JSP 메모장 3번
※단순 공부용 메모이며, 내용은 틀릴 수 있습니다. 1. 개발환경 탐색 지금 사용하고 있는 환경은 tomcat과 spring 조금 jsp로 이루어져 있다. jsp란? java 언어를 기반으로 하는 ServerSIde 스크립트 언어이다. html 과 java 코드가 공존함으로써 정적인 html을 http통신(동적)을 혼합하여 사용할 수 있게 한다. JSP가 실행되면 was(tomcat) 은 내부적으로 java로 변환한다. 변환된 servlet을 이용하여 기능을 수행한다. tomcat이 만들어놓은 객체를 사용한다. 벡엔드부터 처음까지 하게 되면 Http 통신부터 공부해야한다. 이를 쉽게 도와주는 것이 spring Framework 이다. 2. 우선 tomcat을 실행하면 최상단 root부터 시작하게 되고 /..
2021.11.29 -
[IntelliJ ]_설치와 Tomcat 서버 연동
1. IntelliJ 공식 홈페이지에서 다운로드를 받는다. https://www.jetbrains.com/ko-kr/idea/download/#section=windows 다운로드 IntelliJ IDEA: 우수성과 인체 공학이 담긴 JetBrains Java IDE www.jetbrains.com 2. 한국어가 좋다면 한국어 패치를한다. https://plugins.jetbrains.com/plugin/13711-korean-language-pack------/versions Korean Language Pack / 한국어 언어 팩 - IntelliJ IDEs Plugin | Marketplace The Korean Language Pack localizes the UI of IntelliJ IDEA,..
2021.11.27 -
[프론트엔드]_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 메모장 2번
1. Intellij 와 SVN 1단계 intellij와 VSN 둘다 처음 쓰다보니 햇갈려서 적어봅니다. GIT과 유사하게 update 선 commit을 해야하고 해당 파일 혹은 directory 에서 마우스 우클릭 -> subversion 항목으로 들어간다. history 항목으로 들어가서 어느 값이 변경되었는지 확인할 수 있다. 이는 충돌이 났을때 (파일이 빨간색) 일때 사용하면 된다. 파일 색으로 추측이 가능하다. 대표적으로 파란색은 서버에 올라가있는 파일과 차이점이 있을때 나타나고 빨간색은 merge 충돌이 났거나 오류가 발생했을 때 회색은 삭제할 예정일 때 발생한다. 자세한 색은 다음과 같다 : https://www.jetbrains.com/help/idea/file-status-highligh..
2021.11.26 -
[초보개발자]_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 -
[프론트엔드]_JavaScript(es6)_3. Function
공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 함수 하나의 함수는 한가지의 일만 하도록 만들어야 효과가 좋다. 함수의 이름은 무엇인가 동작하는 것 으로 만들어야한다 => 동사 자바스크립트에서의 함수 func = object 이다. 변수에 할당 할 수도 있고 파라미터로 전달 할 수도 있다. 문법 function printHello(){ console.log('hello'); } printHello(); function log(message){ console.log(message); } log('hello@'); log(1234); 파라미터 값에 의한 전달 (Passed by value) Premitive 파라미터 : value 가 전달 [원시 타입] : B..
2021.11.21 -
[프론트엔드]_JavaScript(es6)_2. operator, if, for loop
공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js String 연산 Js에서도 + 사용 가능. 연산자 console.log(2**3); // 2의 3승 ++/-- 순서 다른 언어와 같다. 증감 연산자 x += y; // x = x + y x -= y // x = x - y 논리 연산자 || 와 && 를 사용한다. 여기서 코드적으로 중요한 부분은 || 의 경우 앞에서부터 검사하게 되는데 앞이 true가 나와버리면 어차피 전체 결과는 true로 반환된다. 즉 뒤의 2가지 검사는 하지 않고 반환하기 때문에 시간적으로 걸리는( 함수 등..) 을 앞에 넣어버리는 것 보다 빠르게 결과가 나오는 것을 앞에 두는 것이 효율적인 코드라고 할 수 있다. &&도 마찬가지로 한가..
2021.11.21 -
[프론트엔드]_JavaScript(es6)_1. Variable
공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 변수 선언 어플리케이션 마다 쓸 수 있는 메모리는 정해져 있다. let 이라고 정의하게 되면 한가지의 포인터가 생긴다. 이는 내용을 참조하여 변경이 가능하다. Var 변수 선언 es6 이후 var는 사용하지 않는다. 대부분의 프로그램 언어는 선언 후 값을 할당하는데 var의 경우에는 선언하지 않고도 사용이 가능하다. 즉 Hoisting이 된다. hoisting은 어디에 선언했는지 상관 없이 제일 위로 끌어올려주는 것을 말한다. 또한 block Scope 도 무시한다. 즉 어디에서나 접근이 가능하다 규모가 큰 프로젝트에서는 의도하지 않은 호출이 될 수 있기 때문에 최대한 사용을 줄인다. Mutable 과 Imm..
2021.11.21