유혁스쿨

javascript에서 변수 혹은 참조(모듈)등 선언 후 사용하지 않을 경우 위와같은 에러가 발생하며 아래와 같이 lint 옵션을 설정한다. .eslintrc.jsmodule.exports = { /* 생략 */ rules: { 'no-unused-vars': 'off' }}

vue 에서 변수 혹은 참조(모듈, 컴포넌트)등 선언 후 사용하지 않을 경우 위와같은 에러가 발생하며 아래와 같이 lint 옵션을 설정한다. .eslintrc.jsmodule.exports = { /* 생략 */ rules: { 'vue/no-unused-vars': 'off' }}

vue를 사용할때, 컴포넌트를 import 후 사용하지 않는 컴포넌트에 대해 런타임시  eslint에 의해 에러를 뱉는다.해결방법은 아래와 같다 ./.eslintrc.jsmodule.exports = { /* 생략 */ rules: { /* 생략 */ 'vue/no-unused-components': 'off' }}

export한 module을 import 한 뒤 사용하지 않는 경우 발생하는 런타임 에러이다. 해결방법은 아래와 같다. ./.eslintrc.jsmodule.exports = { /* 생략 */ "parserOptions": { "ecmaVersion": 2015, "sourceType": "module" },}

Vue는 기본적으로 파일명을 파스칼 2개의 단어를 파스칼 케이스로 작명하는게 관례인데, 한 단어로 파일명을 구성할 경우 eslint에서 에러를 발생시킨다. 해결방법은 아래와 같다. ./.eslintrc.jsmodule.exports = { /* 생략 */ rules: { /* 생략 */ 'vue/multi-word-component-names': 'off' }}

Node.js (노드) 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(플랫폼) 2008년 크롬 웹브라우저가 출시되면서 자바스크립트의 속도가 점차 빨리지게 되었고, 이에 자바스크립트를 웹 브라우저가 아닌 곳에서 쓸 수 있게 만들자는 의견에 의해 CommnJS표준이 작성되었고, Node.js는 CommonJS표준에 맞춰 크롬 V8엔진을 기반으로 개발된 플랫폼 환경이다 주로 서버측 프로그래밍에서 사용되며 비동기 이벤트 기반의 단일 스레드 모델을 사용하여 효율적으로 네트워크 애플리케이션을 개발할 수 있도록 지원한다. Node.js를 사용하면 웹 브라우저가 아닌 곳에서 자바스크립트로 프로그램을 개발할 수 있다. JAVA Spring 진영에서의 Tomcat(내/외장) 서버와 비슷한 역할을 해준다...

호이스팅 function sayHello () { console.log("Hello!") } sayHello(); sayHello(); sayHello(); sayHello(); function sayHello (name) { console.log("Hello my name is " + name) } sayHello("YooHyeokSchool"); sayHello("DoubleDoorStone"); sayHello("YooHyeokChoi"); sayHello("UrekMazino"); 위와 같은 함수선언식 방식의 재정의 코드가 있다고 가정했을때 해당 함수를 호출한다면 기대하는 출력의 예는 아래와 같다. 하지만 실제 출력은 아래와 같이 출력된다. 이는 자바스크립트 엔진에 의해 선언된 변수와 함수를 최상..

[프론트서버 백앤드서버 CORS연동 설정] axios 통신주소로 Spring의 url을 입력하여 프론트 서버와 백앤드 서버가 서로 통신하기 위해서는 백엔드 서버에서 CORS 를 설정해야한다. Cors Mapping (Cross-Origin Resource Sharing,CORS) 이란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말한다. 따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는대로 리소스를 공유하지 못하게 된다. 아래와 같이 설정할 클래스를 만들어야하는데, 이때 WebMvcConfigurer 인터페이스를 구현받아야 한다. import org.springframework.context.annotation.Configuration; import org.spring..

[자바스크립트 bind(this)] 순수 자바스크립트 코드에서 이벤트 핸들러 함수의 this는 무엇을 가르킬까? 이벤트 핸들러가 적용된 Element객체를 가르킨다. 만약 위와 동일한 코드에서 이벤트 핸들러 함수에 bind(this)를 한다면 어떻게될까? Global 객체인 Window객체를 가르키게된다. HTML 태그의 이벤트 속성으로 함수를 호출해본다. 테스트다 bind를 하지 않았을 때에는 Global객체인 Window를 가르킨다.. 테스트다 bind(this) 처리 한 뒤, 이윽고 결실을 맺었다...! [bind() 함수를 통해 객체에 값 전달] 다음은 bind함수를 통해 값을 전달해본다. 위에서 다루었던것과 같이 순수 자바스크립트 코드 상에서 bind(this)를 선언하면, 이벤트핸들러 함수 내..

[dataset] HTML태그의 Attribute(prop) 속성에 값을 싣고 자바스크립트를 통해 값을 불러올때 dataset을 사용한다. 형태는 아래코드와 같다. 우선 HTML 태그에서 data-'속성명' 의 형태로 속성을 기제하고 값을 부여한다. 이후 자바스크립트에서 이벤트객체를 통해 값을 추출할 때 e.target.dataset.'속성명' 으로 접근할 수 있게 된다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

[ Ajax ] 컨트롤러로 부터 return 응답을 받는 데이터의 형태이며 text, xml, json, html 등이 가능하다. 문자열이라면 text이고 객체나 Map 혹은 List라면 Json으로 지정해 주면 된다. 'JSON' 서버의 데이터를 JSON 형태로 받아온다. 조회 작업을 할 때 return을 통해 데이터를 JSON형태로 받아온다. 'TEXT' 서버의 데이터를 text형태로 받아온다. 보통 (입력,수정,삭제) 작업 성공시 return을 통해 success문자열을 반환받기 위해 사용한다. ex) 컨트롤러 : return "success"; 스크립트 : if(data == "success"){} 성공에대한 문자열 반환은 text가 아닌 JSON으로 지정되어있다면 Map형태로 Key:Value형..

1번 2번 3번 위와같이 라디오버튼에 대한 html코드가 구성되어있다. 위코드처럼 두번째에 해당하는 #btnYn2 id 속성을 가진 라디오버튼에 checked옵션을 부여할 수 있다. 위처럼 한번에 옵션 부여가 가능하다. name속성이 frm인 form태그에서 input name이 btnYn인 요소 중 value속성이 2인 요소를 찾은후 prop 함수를 통해 checked 속성을 부여하는 로직이다.

문서가 준비되면 ready() 함수의 매개변수에 해당하는 콜백함수를 실행하라는 의미로써, jQuery 이벤트 중 하나이다. jQuery의 또 다른 표현방식은 다음과 같다 자바스크립트에서 다음코드와 비슷한 기능을 수행한다. 2022.01.18 - [JavaScript/DOM & Event] - window객체와 이벤트 (BOM/DOM) window.onload window객체와 이벤트 (BOM/DOM) window.onload 브라우저 객체 모델 BOM, Browser Object Model은 웹 브라우저와 관련된 객체의 집합을 의미한다. 대표적인 브라우저 객체 모델로는 Window, Location, Navigator, history, screen, document 객체가 있다. window.. u-it..

사용 사용 input 태그와 label 태그를 연동시키지 않으면 "사용" 텍스트를 눌렀을 때 라디오 버튼이 선택되지 않는다. 연동시키는 방법 1) label 태그로 input 태그를 감싸는 방법 2) label 태그에 input의 ID를 지정해주는 방법 label 태그는 input 태그를 제어하여 상태를 변경하게 도와주는 태그로서, 클릭시 유효범위 정도 라고 정의한다. 다시말해 라디오선택 동그라미를 클릭하지 않고 Label로 감싸준 Text를 클릭해도 원하는 라디오동그라미에 체크가 된다. label에 for 속성을 사용할 경우 부모 input 요소의 id명과 같은 값을 선언해야한다. Label의 text를 가져오기 위해서는 다음과같이 사용한다. $("input[name=searchYn]:checked")..