웹 프로그래밍 기초/자바기반의 웹&앱 응용SW 개발자131 자바기반의 웹&앱 응용 SW개발자 양성과정 78일차 -116 React State //하나의 시계 class Clock extends React.Component{ // 이 render로 전달되었을때 생성자가호출됨 constructor(props){ super(props); this.state = {date : new Date()}; } //DOM의 출력값이 삽입되면(렌더링되면)호출됨 componentDidMount(){ this.timerID = setInterval( //브라우저가 요청 ()=> this.tick(),1000 ) } componentWillUnmount(){ clearInterval(this.timerId); } //요청받아 현재 시각을 포함하는 객체를 호출하여 UI를 업데이트 tick(){ this.setState({ //호출로써 React는.. 2020. 7. 9. 자바기반의 웹&앱 응용 SW개발자 양성과정 77일차 -114 모듈은 외부 js파일의 함수를 import 해서 사용할 수 있도록 도와준다. 이전 js파일은 전부 html에 태그에 넣어서 사용했다. 당연했던 기능이 스크립트에서는 지원되지 않았습니다. 이러한 기능을 제공했는데 그것이 모듈화입니다. 함수에서만 국한되는 것이 아니라 클래스 또한 가능합니다. module.js 에서 외부로 노출시킬 api를 export로 등록해준 뒤. export const test1 = () => { console.log("module1"); } export const test2 = () => { console.log("module2"); } export const test3 = () => { console.log("module3"); } export default test2; 사용하는 j.. 2020. 7. 3. 자바기반의 웹&앱 응용 SW개발자 양성과정 76일차 -113 ECMAScript6에서 클래스를 정의하는 방법 class Exam{ constructor(kor.eng.math){ this.kor = kor || 0; this.eng = eng || 0; this.math = math || 0; } total(){ return this.kor + this.eng + this.math; } } 이전 ES5에서 생성자를 통해 객체를 생성하려면 다음과 같은 방식으로 했다. function Exam(kor, eng, math){ this.kor = kor || 0; this.eng = eng || 0; this.math = math || 0; } Exam.prototype.total = function(){ return this.kor + this.eng + this.ma.. 2020. 7. 2. 자바기반의 웹&앱 응용 SW개발자 양성과정 75일차 -112 ES6 1. Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다. 원시 타입 (primitive data type) Boolean null undefined Number String 객체 타입 (Object type) Object 심벌(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심벌은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 심벌 생성 심벌을 생성하기 위해서는 Symbol()를 사용한다. //s1은 유일한 프로퍼티의 key이다. let s1 = Symbol(); 심벌을 사용하기 위해 두 개의 객체를 만들어 보자. .. 2020. 7. 1. 자바기반의 웹&앱 응용 SW개발자 양성과정 74일차 -111 ES6 KEY : VALUE 값에서 KEY값에 변수를 사용하게 되면 오류가 발생한다. 변수를 변수로 인식하지 않고 KEY로 인식하기 때문에 변수의 값을 넣지 안기 때문이다. 이러한 점을 [] 대괄호를 이용해 KEY값을 감싸게 되면 해당되는 VALUE값을 키값으로 할당할 수 있다. let kor = 30; let eng = 20; let math = 0; let col = "name"; let exam = { kor, eng, math, [col]: 'yu sung il', total() { return this.kor + this.eng + this.math; } }; Destructiring let col = "name"; let exam = { kor: 10, eng: 1, math: 0, [col].. 2020. 6. 30. 자바기반의 웹&앱 응용 SW개발자 양성과정 74일차 -110 REPL - 단일 사용자의 입력을 취하고 이를 평가(실행)하고 결과를 사용자에게 반환시키는 단순한 상호작용 컴퓨터 프로그래밍 환경이다. 우리가 크롬에서 개발자 환경 창의 콘솔 창 , CMD창에서 단순 입력을 하면 실행하고 결과를 반환한다. 인터프리터를 이용한다. ES6 문법 1. 변수 선언 방법이 달라졌다. ES6이전 변수인 선언인 var는 코드 블록이나 중첩 선언이 가능했던 반면 새로운 변수인 let , const로 제약조건을 주었다. 지역변수를 선언할 수 있도록했다. 2 숫자에 대한 표현 범위 binary, octal 이진수와 8진수에 대한 범위를 추가했습니다. 3. 문자열과 변수의 표현을 백 틱으로 표현할 수 있도록 했습니다. `hi my name is ${name}`; 4. 익숙한 객체지향 방식 .. 2020. 6. 30. 자바기반의 웹&앱 응용 SW개발자 양성과정 73일차 -109 Category: Manipulation 이 섹션의 모든 메서드는 어떤 방식으로 DOM을 조작합니다. 그중 일부는 단순히 요소의 속성 중 하나 ( 속성 범주에도 나열됨)를 변경하는 반면 다른 요소는 요소의 스타일 속성 ( CSS 범주 에도 나열됨)을 설정합니다. 또 다른 요소는 전체 요소 (또는 요소 그룹) 자체 (삽입, 복사, 제거 등) 자체를 수정합니다. 이러한 메서드는 모두 속성 값을 변경하므로 "세터"라고 합니다. 이러한-이러한 방법의 몇 가지. attr(),. html()그리고. val() 나중에 사용하기 위해 DOM 요소에서 정보를 검색하는 "게터"로 - 또한 역할을 합니다. . appendTo() Insert every element in the set of matched elements t.. 2020. 6. 29. 자바기반의 웹&앱 응용 SW개발자 양성과정 72일차 -108 . animate( properties [, duration ] [, easing ] [, complete ] ) properties Type: PlainObject An object of CSS properties and values that the animation will move toward. duration (default: 400) Type: Number or String A string or number determining how long the animation will run. easing (default: swing) Type: String A string indicating which easing function to use for the transition. complete Typ.. 2020. 6. 29. JQuery 시작하기 Cross Browser를 지원하기 위한 조건 처리 JQuery 객체를 이용하면 Browser의 종류를 따질 필요가 없다. 다만 요즘은 DOM이 같아지기 때문에 jQuery를 사용할 필요가 없다. 왜냐하면 웹 표준이 생겨 브라우저들이 그 표준을 지키려고 노력하고 있기 때문이다. 우선 DOM이 뭔지 알아야 합니다. Document Object Model 은 간단히 말하면 HTML, XML의 문서 프로그래밍의 인터페이스다. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제.. 2020. 6. 25. 자바기반의 웹&앱 응용 SW개발자 양성과정 71일차 -106 검색 엔진에 노출되는 방법. 탭에 존재하는 키워드를 변경해야 합니다. 만약 고정됐다면 변경되는 사항에 대해 검색엔진에 노출되지 않습니다. 즉 영역에 을 노출시켜야 합니다. 우라는 tiles 프레임워크를 사용하고 있으므로 타일즈의 layout.jsp를 열어 변경되어야 할 title값을 tiles태그를 이용해 변경합니다. 만약 title이 존재하지 않는다면 도메인 이름이 기본적으로 title이 설정됩니다. tiles설정을 기본적으로 강제하지않는 속성입니다. ignore="true" 하지만 title값을 변경되는 값마다 변경되도록 하기 위해 EL표기법을 사용합니다. 그러기 위해서 tiles-el 라이브러리를 의존 설정을 해주어야 합니다. org.apache.tiles tiles-el 3.0.8 이제 title.. 2020. 6. 24. 이전 1 2 3 4 ··· 14 다음
