전체 글
MVC 패턴
MVC 패턴은 Model, View, Controller의 약자를 합친 디자인 패턴 중 하나. 이러한 패턴을 통해 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것이며 특정한 규칙을 가지고 만들어진다. 또 MVC패턴의 경우 1과 2가 있는데 1의 문제를 보안해서 나온 것이 바로 2이다. 1의 경우 유지보수가 힘들기 때문에 단점을 보완하기 위해 나온 모델이며 Controller와 View를 모두 JSP가 조종한 1의 경우와 달리 View만 JSP가 건드리는 구조다. Model : 서비스, DAO(Data Access Object), DTO(Data Transger Object), VO(Value Object), Entity로 구성된다. ..
Text Effect
안녕하세요. 오늘은 한 글자 씩 나오는 글자 효과를 JS로 만들어 보겠습니다. SETTING Hellow .title { color: #000000; font-size: large; text-align: center; } .title > h1 { margin-top: 0; margin-bottom: 0; } span { opacity: 0; transition: all 1s ease; } span.fade { opacity: 1; } opacity: 0으로 인해 현재 화면은 아무것도 보이지 않는 화면이 생깁니다. 그렇다면 JS를 통해서 각각의 글자에 fade를 주면 opacity: 1로 인해 글자가 생깁니다. 그러면 글자를 하나 씩 생기게 하면 한 글자씩 생기는 효과가 생기겠네요. JS //hi 선택자를..
XHR
xhr을 사용하는 이유는 페이지의 변화 없이 외부 데이터 수신 즉, 요청을 받기 위해서 우리는 xhr을 사용한다. 그러면 우리가 해야 할 일은 무엇일까? xhr을 사용하려면 우리가 xhr을 설정해줘야 한다. 즉, 정의되지 않은 xhr을 사용하려면 아무것도 발생하지 않기 때문이다. 그렇다면 우리가 먼저 해줘야 되는 것은 그것은 아마 당연하게도 xhr 객체를 만들어 줘야 한다. 우리는 xhr을 let xhr = new XMLHttpRequest();를 통해서 객체를 만들 수 있다. 이렇게 만들어진 객체는 아무것도 모르는 상태이다. 사람으로 따지면 갓난아기인 셈이다. 그러면 갓난아기에 관해 생각해볼까? 배우지 않은 아기가 한글을 말하고 걷는 것을 할 수 있을까? 아기가 태어나자마자 바로 말하고 걷을 수 있다면..
인터페이스
인터페이스(interface) -추상 메서드의 집합 조상이 여러 개 - 선언부가 다르면 둘 다 상속받으면 그만인데. 선언부가 같고 내용{}이 다르면 어느 쪽을 상속받을지 결정할 수 없다. -> 이럴 때 충돌이 발생하는데 -> 인터페이스로 만들어버리면 충돌 없음 인터페이스의 구현 -인터페이스에 정의된 추상 메서드를 완성하는 것 - 인터페이스에 정의된 추상 메서드를 모두 구현해야 함 -> class 클래스 이름 implements 인터페이스 이름 {} - 일부만 구현하는 경우, 클래스 앞에 abstract를 붙여야 함. -> ex) 인터페이스 안에 추상 메서드가 두 개인 경우 다른 클래스를 통해 인터페이스를 구현할 때 추상 메서드가 1개일 때 abstract를 클래스 앞에 붙여서 남은 메서드 1개를 생략할 ..
추상
추상 클래스(abstract class) -미완성 설계도. 미완성 메서드를 갖고 있는 클래스 -추상 메서드 몸통{}이 없는 (미완성 메서드) -앞에 abstract라는 키워드를 붙임 -다른 클래스 작성에 도움을 주기 위한 것. 인스턴스 생성 불가. ex) 생성자 참조 변수 = new 생성자; //에러 : 추상 클래스의 인스턴스 생성 불가 -상속을 통해 추상 메서드를 완성해야 인스턴스 생성 가능 ex) class A extends 추상 클래스 { 추상 클래스에서 만든 추상 메서드를 구현할 수 있음. } -> 이를 통해 A는 인스턴스 생성이 가능하다. 즉, 완성된 설계도이다. 추상 메서드(abstract method) -미완성 메서드. 구현부(몸통, {})가 없는 메서드 -꼭 필요하지만 자손마다 다르게 구현..
HashCode
해시 코드는 객체 멤버 변수의 메모리 번지수를 찍어냄 즉, 우리가 String 타입의 무언가를 가져올 때 toString을 재정의 하지 않으면 User@1 b3 b2 a 이런 식으로 출력이 된다 즉 골뱅이 뒤에 있는 번지수를 찍어 내는데 이것은 컴퓨터가 무언가를 저장할 때 16진수로 저장할 때 사용하는 방식이다 그러면 객체의 멤버 변수가 문자열이 같으면 해시 코드는 같나? 같다고 할 수 있다. 객체의 문자열을 찍어주는 메모리 번지수를 우리는 해시 코드라고 할 수 있기 때문이다. 이러한 해시 코드의 사용 이유는 그럼 무엇인가? 객체는 키와 값으로 저장하는데 키는 여기서 메모리 번지수라고 할 수 있고 값은 더미 데이터 즉, 버려지는 값인 거다. 우리가 멤버 변수에 직접 넣는 값들은 버려지는 값인 거다. 그러..
NodeList
안녕하세요. 오늘은 NodeList에 대해 알아봅시다. NodeList 웹 문서에서 추출한 노드의 집합이며 HTMLCollection 객체와 거의 비슷하다. 즉, 배열은 아니나 배열처럼 Index를 통해서 각 노드에 접근이 가능하다. Index는 배열과 동일하게 0부터 시작한다. 모든 브라우저는 childNodes 속성에 대해 NodeList 객체를 반환하며 대부분의 브라우저는 querySelectorAll () 메서드에 대해 NodeList 객체를 반환한다. 그렇다면 NodeList는 배열의 기능을 할 수 있을까? NodeList 객체는 Array는 아니지만 forEach()를 사용하여 반복할 수 있다. 하지만 배열의 map이나 filter, find 등의 여러 가지 기능은 사용하지는 못 한다. 이때 ..