본문 바로가기

전체 글116

jQuery를 자바스크립트로 바꾸기 프로젝트를 진행하면서 자바스크립트보단 j쿼리를 많이 썼었다. 이유는 단순히.... 코드의 생김새(?)가 자바스크립트보다 예뻐보였다. 더 간결해 보였고 있어 보였달까 ㅋㅋ 선생님도 j쿼리를 더 써보라고 하셨었다. 근데 알고보니 j쿼리는 너무나 무거운 라이브러리라 신문물을 받아들이지 않는 곳 제외하면 실무에서 거의 쓰지 않는다고!!!! 그리고 확실히 대세는 리액트나 뷰! 공부를 하면 할수록 성능 같은 것을 알아 가는 것도 큰 재미이다. 아무튼 그래서 신나게 j쿼리로 작성 했던 코드들을 자바스크립트로 바꿔보고 있다. 열심히 골머리 앓으면서 짠 코드가 있는데.. 그거도 j쿼리인데.. 눈물을 흘리며 진행중 ㅋㅋㅋ 이제 더 심화해서 타입스크립트로도 바꿔봐야지 이런 과정도 리팩토링이라고 할 수 있나 밑에는 몇 가지 .. 2023. 4. 11.
자바스크립트 프로토타입? 자바스크립트는 프로토타입 Prototype이라는 공간을 가지고 있다. 프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간을 의미한다. //생성자 함수 만들기 function Student(name, korean, math, english) { this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; //메서드 this.getSum = function() { return this.국어 + this.수학 + this.영어; }; this.getAverage = function() { return this.getSum() / 3; }; this.toString = function() { return this.이름 + '\t' .. 2023. 4. 10.
JavaScript 자바스크립트 시계 만들기 타이머 관련 예제를 보다가 급 티켓팅할 때 애용했던 네이비즘 서버시간 사이트가 떠올라 간단하게 시계를 만들었다 ㅋㅋㅋ HTML 삽입 미리보기할 수 없는 소스 코드 전문 Date의 getDate() 메서드는 요일을 0~6의 숫자로 표현해준다. 따라서 요일을 담는 배열을 생성해 가져다 쓸 수 있도록 작성 getFullYear() 메서드부터 getSeconds() 메서드를 이용, 문자열을 조합하여 시간을 표현해줌 처음에 setInterval 메서드에 Date 객체 뽑아오는걸 바로 작성 했었는데 그러면 시계가 바로 나오지 않고 1초 뒤에 나오게 된다. 그래서 함수를 따로 만들어 빼주고 그 함수를 호출 해준 뒤 setInterval()이 돌아가게 하면 끝! 재밌다 ㅎ 화면 디자인 완전히 따라 만들진 않았고 이렇게.. 2023. 4. 9.
DOM(Document Object Model) 문서 객체 모델 문서 객체 모델(DOM: Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. DOM을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다. vellalog 위 코드는 아래와 같은 트리 모양으로 나타낼 수 있다. 위 그림 속의 각 요소들을 '노드'라고 부른다. 노드는 요소 노드(Element Node)와 텍스트 노드(Text Node)로 구분할 수 있다. 요소 노드는 html 태그를 의미하고 텍스트 노드는 요소 노드 안에 들어있는 글자를 의미한다. 1. 문서 객체 만들기 1-1. 동적으로 문서객체 만들기 💭 웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는.. 2023. 4. 8.
Spring 스프링 5버전 Controller - @InitBinder 전송된 값을 받을 때 변환이 가능한 데이터는 자동으로 변환 되지만 경우에 따라서는 파라미터를 변환해서 처리향 하는 경우가 존재한다. 예를 들어, 화면에서 '2022-10-28'과 같이 문자열로 전달된 데이터를 java.util.Data 타입으로 변환하는 작업이 그러하다. 스프링5의 Controller에서는 파라미터를 바인딩 할 때 자동으로 호출되는 @InitBinder 어노테이션을 이용해서 이러한 변환을 처리할 수 있다. 🎇 예제 1) 클래스 작성 2) 컨트롤러 클래스 작성 ✨ 실행 결과 2023. 4. 6.