음~ 오늘도 다 아는 내용~ 하지만 서블릿 재밌어~... 하다가! 갑자기 어려운 내용 쏟아져버리기 아파치와 톰캣 예전에 아파치는 정적 페이지였고 이후 톰캣이 동적 페이지를 만들었다. 나중에 아파치가 톰캣을 인수해서 아파치/톰캣이 되었다. 그래서 동적 페이지를 말할 땐 아파치/톰캣이라 한다. 즉 두 개를 같이 붙여서 말하는 게 동적 페이지라는 뜻. 그냥 아파치라고만 부르면 그건 정적 페이지를 뜻하는 것이다. 참고로 정적 페이지는 단순 Web Server라 하고, 동적 페이지는 Web Application Server라 한다. 추상화 공통된 것들을 추려 기능과 구현의 역할을 나누는 것이다. 예를 들어 인터페이스에는 DB 접속에 연결하기 위한 방법과 정보 등을 작성하고, 이를 구현하는 클래스에서 직접적인 기능..
왜 나만 졸려하는걸까.. 나도 뭘 마셔야되나.. JavaScript (JS) DOM (Document Object Model) 예제 예제 1 - 버튼 클릭으로 style 바꾸기 스타일 DOM으로 변경 스타일 변경 하기 const style에 div.style을 저장하고, const color에 style.color를 저장하였는데 이렇게 하지 않고 그냥 div.style.color로 하여도 되긴하다. 위 방법처럼 button에 바로 onclick을 주어도 되고, 이벤트 리스너를 추가해도 된다. 스타일 DOM으로 변경 스타일 변경 하기 button 클릭 시 EventListener가 동작한다. 위 코드와는 다르게 button에 onclick을 주지 않았다. 예제 2 - className 값 1 값 2 값 3..
JavaScript (JS) Closer (클로저) 지역 변수를 외부에서도 참조(By Reference)할 수 있는 함수 함수 중첩을 이용해 함수 호출이 종료되더라도 그 함수의 지역 변수 및 지역 변수 체인 관계를 유지할 수 있는 구조를 갖는다. 내부에 선언된 함수 객체가 반환되어 계속 유지되는 상태 -> 그 함수 객체에 딸린 [[scope]]에서도 참조를 계속 유지하는 상태 부모 함수가 종료된 후에도 부모 함수의 Variable(Activation) Object는 가비지 콜렉팅 되지 않고 유지된다. 간단하게 생각하면 자바의 캡슐화와 유사하다고 생각하면 된다. 밖에서 사용하지 못하도록 감추는 것이다. function func() { var x = 1; return { increase : function(..
JavaScript 비교 연산자 script 언어는 equals()가 없고 연산자로만 표현한다. == 는 기존 equals()와 동일하다. ===와 !==는 타입까지 비교할 때 사용한다. 특수 연산자 delete 객체(Object), 개체의 속성(Property), 배열의 특정 인덱스에 있는 원소를 지우는 연산자이다. var 키워드로 선언된 변수는 삭제할 수 없다. delete가 실행 가능하면, 속성이나 원소가 undefined로 설정된다. 이때 배열의 길이에는 변화가 없다. 실행이 가능하면 true를 반환하고, 실행이 불가능하면 false를 반환한다. 정의할 필요 없이 한 번 쓰고 버리는 변수나 함수 같은 경우 delete 연산자 사용 시 메모리 관리에 효율적이다. in 저장된 객체에 해당되는 속성이 ..
JavaScript (JS) ECMAScript 브라우저에서 사용되는 JS 같은 것들은 모두 ECMAScript를 토대로 한다. 옛날 JS는 브라우저마다 함수와 기능이 달랐었다. 그래서 ECMAScript 명세에 맞추어 만들기로 하였고, 이게 표준이 되었다. use strict 모드 자바스크립트의 장점은 자유롭다는 거지만 이게 단점으로 적용하여 디버깅하기가 힘들 수 있다. use strict 모드를 사용하면 문법 검사를 브라우저 자체에서 타이트하게 해 준다. JavaScript 자료형 Boolean 타입 논리 요소를 나타낸다. true와 false 두 가지 값이 존재한다. Null 타입 null 하나의 값만을 가질 수 있다. Undefined 타입 값을 할당하지 않은 변수가 가지는 타입이다. Null 타..
CSS margin 겹침 (통합) 현상 (margin-collapsing) 두 개 이상의 margin 값이 세로 방향으로 만났을 때 하나의 margin으로 합쳐지는 현상이다. 이런 게 있는지 이번에 처음 알았는데 그동안 디자인할 때 왜 그렇게 margin이 안 맞았는지 이제야 알았🤣🤬 div가 위 아래로 위치해있다 가정하고, 위 div의 margin-bottom이 20px이고, 아래 div의 margin-top이 30px 일 때 두 개가 만나면 bottom, top이 합쳐진 50px가 아닌 둘 중 큰 값인 30px가 된다. line-height 폰트는 그대로 있고 폰트 위 아래의 행간이 넓어진다. background color | image | repeat | position | attachment | ..
2개월 동안 HTML부터 Spring까지 다시 복습하는 시간을 가져본다 ! 근데 어제는 정리를 안 했기 때문에 TIL가 아닌 YIL (Yesterday I Learned) HTML XML 구조 언어로 인터넷에서 기존에 사용하던 HTML의 한계를 극복하고 SGML(Standard Generalized Markup Language)의 복잡함을 해결하기 위해 만들어졌다. !DOCTYPE (문서형 선언 DTD) 문서형 선언 Document Type Definition 줄여서 DTD이다. (오 한글로 치면 ㅇㅅㅇ) !DOCTYPE을 사용해 브라우저가 현재 HTML5 또는 HTML4 또는 XHTML로 작업할 거라는 걸 알려준다. 브라우저가 해당 문서는 웹 버전이라는 것을 인식시키게 하므로 필수적으로 넣어야 한다. ..
