유혁스쿨

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")..

캡슐화 사각형을 의미하는 Rectangle 객체를 만든다고 가정했을때, 다음과 같이 Rectangle생성자 함수를 만들 수 있다. function Rectangle(wth, hgt) { this.width = wth; this.height = hgt; } Rectangle.prototype.getArea = function() { return this.width * this.height; } var rectangle = new Rectangle(5, 10); alert('AREA : ' + rectangle.getArea()); width 속성에 5를 입력하고 height 속성에 10을 입력했으므로 getArea( ) 메서드를 호출하면 50을 출력한다. 하지만, width속성이나 height 속성에 음수..

생성자 함수 new 키워드로 객체를 생성할 수 있는 함수를 의미한다. 이전 포스팅에서 함수로 객체를 생성하는 코드를 구현해보았지만 new 키워드를 사용하지 않았으므로 생성자 함수라고 부를 수 없다. 아래 코드는 Student 생성자 함수를 만드는 코드이다. function Student () { } 생성자 함수의 이름은 일반적으로 대문자로 시작한다. 대문자로 시작하지 않아도 문제 없지만 대부분의 개발자가 지키는 관례 같은 규칙이므로 대문자로 선언한다. 기본적으로 자바스크립트 내부의 생성자 함수들 또한 모두 대문자로 시작하도록 구현되어 있다. 위와같이 생성한 생성자 함수는 아래 코드와 같이 new 키워드로 객체를 생성한다. function Student () { } var student = new Stud..

이전 포스팅에서는 배열 안에 객체를 하나씩 직접 만들어 넣었다. 객체를 하나씩 만들어 배열에 넣으면 서로 다른 형태의 객체를 배열 안에 넣을 수 있다는 장점이 있다. 예를 들어 학생의 정보를 입력할 때 아래 코드와 같이 서로 다른 정보를 입력할 수 있다. var students = []; students.push({ 이름: '안준언' , 국어: 90 , 수학: 95 , 영어: 100 , 과학: 80 }); students.push({ 이름: '이건희' , 국어: 90 , 수학: 85 , 영어: 80 , 과학: 80 }); students.push({ 이름: '황병선' , 국어: 90 , 수학: 90 , 영어: 100 , 과학: 90 }); 위와 같이 개별적으로 객체를 만드는 것은 객체의 특성을 정확히 반..

객체와 배열 객체와 배열을 활용하여 학생들의 성적 총점과 평균을 계산하는 예제를 만들어본다 다음은 현실에 존재하는 student 객체에서 성적을 관리할 때 필요한 속성만 뽑아서 자바스크립트 객체로 만든것이다. 이렇게 현실에 존재하는 객체의 필요한 속성을 추출하는 작업을 "추상화" 라고 한다. 우선 학생데이터를 만든다. //학생 데이터 생성 var student0 = {이름: '안준언', 국어: 90, 수학: 95, 영어: 100, 과학: 80}; var student1 = {이름: '이건희', 국어: 90, 수학: 85, 영어: 80, 과학: 80}; var student2 = {이름: '황병선', 국어: 90, 수학: 90, 영어: 100, 과학: 90}; var student3 = {이름: '유재혁'..

처음 객체를 생성하는 시점 이후에 속성을 추가하거나 제거하는 것을 "동적으로 속성을 추가한다" 혹은 "동적으로 속성을 제거한다" 라고 표현한다. 이번 포스팅에서는 객체의 속성을 동적으로 추가 및 제거하는 방법을 알아본다. 객체 속성 동적 추가 아래와 같이 빈 객체를 생성한다. var student = {}; 동적으로 속성을 추가하는법은 아래 코드와 같이 구현한다 student.이름 = '남궁댕'; student.취미 = '폰게임'; student.특기 = '삑사리'; student.장래희망 = '프로그래머'; 메서드도 객체의 속성이므로 동일한 방법으로 추가할 수 있다. student.toString = function () { var output = ''; for (var key in this){ if(..