Front 120

[JavaScript] 자바스크립트 classList 사용방법

일단 classList 가 무엇인지 알아야겠다. Method classList의 특성은 읽기 기능의 특성이라고 보면된다. 사용가능한 속성으로는 add, remove, toggle 이 세가지가 있다. add는 class 를 추가 하는것 remove는 class 제거 하는 것 toggle은 추가 제거 하는 것. add 사용법은 간단하다. 다음 적어 놓을 부분을 유심히 보면 되겠다. 저렇게 사용하면 개발자 모드본 결과 newButton.classList.add(); 로 인해 class 안에 class1, class22, class55 요소가 생성 된 것을 확인 할 수 있다. revmove는 간단해서 생략하겠다. toogle 토글 기능은 말 그래도 추가 하였다가, 제거 하도록 하는 기능이다. this.class..

Front/JavaScript 2022.12.14

[HTML] href와 data-url의 차이

솔직하게 이것도 약간 입맛에 맛게 사용하는 것 같다. Method 다음을 간략하게 설명 해보자면 href 는 HTML에 주요 사용하는 페이지 이동하는 기술이다. 를 이용해서 사용한다. 반면 data-url 은 href와 마찬가지로 페이지간 이동이 가능하지만 자바스크릡트 코드에서 사용하는 용도이다. 그리고 data-url 은 커스텀 데이터를 저장하여 독단적으로 사용하는 것으로 표준 HTML 방식은 아니다. 그래서 HTML에서 사용할 때는 사실 href가 맞는 것 같다. 자바스크립트 코드에서 사용할 때는 data-url 이 맞고, 아무튼 그렇다. To be continue..

Front/HTML 2022.12.14

[JavaScript] append vs appendChild 차이점

둘의 쓰임은 비슷한 것 같다. 검색해보니까 다음과 같이 나왔다. Method 다음 예시를 보면 확실하게 쓰임이 다르지 않을 것을 확인 해 볼 수 있다. 그런데 One key difference between these two methods is that the append method is available on all modern browsers, while the appendChild method is only available on older browsers. Therefore, if you want your code to be compatible with older browsers, you may want to use the appendChild method instead of the append..

Front/JavaScript 2022.12.13

[JavaScript] 자바스크립트 innerHTML 응용하여 사용

일단 자바스크립트의 innerHTML 사용법에 대해서는 이제는 확실히 좀 와닿는것 같다. Method 우선 다음과 같이 테이블을 생성해주는 버튼 그리고 테이블 을 만들어준다. 테이블의 구조는 굳이 다 잡아줄 필요는 없다. 그냥 여기까지만 적어주어도 무방하다. 그리고 자바스크립트 파일에는 버튼을 인식시켜줄 객체를 하나 만들어준다. 나는 makeTable 이라고 하겠다. 그리고 함수를 하나 만들어준다. 사용방법은 다음에 한번에 설명해 두었다. 이렇게 적용시켜 놓으면 만든대로 잘 작동 시킬 수 있다. To be continue..

Front/JavaScript 2022.12.13

[JavaScript] 자바스크립트 innerHTML 사용방법

하루에 하나씩 자바스크립트를 내 것으로 만들어서 서둘러 성장을 해야 겠다. 파이팅이다 ... 그럼 바로 innerHTML Method jsp 단에서는 다음과 같이 선언을 해준다. 근데 다음과 같은 코드 습관은 좋지 않은게 일단 짜여진것 자체가 예쁘게 짜여져 있지 않을 뿐더러, 다음처럼 사용해서 callback 해주는 방법이 가장 예쁜 방식이다. callback 사용하면 좋은 이유는 언제든지 꺼내 먹듯이 본인이 필요할 떄 사용하면 된다. 똑같이 잘 작동한다. 짬뽕해서 한번 사용해보자.... 이렇게 되면 버튼을 눌렀을 때 글씨가 나타나게하는 효과를 줄 수 있게된다.. 굿.... To be continue..

Front/JavaScript 2022.12.12

[Spring] rethrowRuntimeException 해결 방법

ReflectionUtils.rethrowRuntimeException(Throwable) line: 142 너무 간단하다. 이러한 오류가 나타나는건데 이유는 컨트롤러 단 에서 있다. 다음처럼 테스트 프로젝트를 만들려고 했던건데 중첩되는것이 있었다. 바로.... 위에 @RequestMapping("/test) 이미 사용하고 있었던 것이다. 즉, RequestMapping 이 중첩되서 나타나는 에러이다.. 그래서 하나는 /testing 으로 바꿔주니까 다시 정상작동..... 아주 잘 작동 되는것 확인 가능하다... To be continue..

Front 2022.12.09

[CSS] hover 스타일 주는 방법

너무 초초초 간단스 해가지고 바르 설명 들어가겠다. Usage 여기서 마우스를 가져다가 대면 다음과 같이 바뀌도록 스타일 잡아 봤다. Method 다음과 같이 원하는 클래스에 :hover 를 입력해준다. 그리고 마우스를 가져다 놓았을 때 바뀌고 싶은 색상으로 버튼의 스타일을 잡아주면 된다. jsp파일 인데 이 부분은 class 와 mainButton 이 같다라는 것을 보여주기 위해서 캡쳐 해놓았다. 그럼 20000 To be continue..

Front/CSS 2022.12.08

[JavaScript] 자바스크립트 프레임워크 종류와 순위

이제야 내가 어떤 프레임워크를 사용하고 어떤 자바스크립트를 사용 하고 있는지 개념이 제대로 잡히게된것 같다.. 그래도 이제 와서라도 뒤 늦게 잡히게 되어서 오히려 다행이라고 생각이 된다.. Method https://hackr.io/blog/best-javascript-frameworks 10 Best JavaScript Frameworks to Use in 2022 [Recommended] JavaScript is one of the most popular programming languages and there’s no shortage of frameworks. We list the 10 best JavaScript frameworks in 2022 here. hackr.io (자바스크립트 순위와 설..

Front/JavaScript 2022.12.08

[JavaScript] 자바스크립트의 종류

자바스크립트 코드 짜면서 내가 짜고 있는 코드가 어떤 스크립트 인지도 모르고 짜고 있었다... 일반적으로 내가 가지고 노는 스크립트는 바닐라 스크립트였다.... 그리고 제이쿼리... Method 자바스크립트의 종류는 크개 다섯가지로 분류 해볼 수 있다. 더 많이 있지만, 보편적으로 사용하는 것들만 위주로 이야기를 해보겠다. 다음표를 보면 알 수 있다. 보편적으로 우리가 document.addEventListener('click', aa) 이런식으로 사용하는 방식이 바닐라 스크립트 이다.. 물론 다 할줄 알면서 좋겠지만 하나라도 전문적으로 아는 것이 더 중요하다고 생각한다. To be continue..

Front/JavaScript 2022.12.08