프로그래밍 (100) 썸네일형 리스트형 화살표 함수 5Arrow Function Expression 일반적인 function에 비해 구문이 더 짧고 스스로의 this, arguments, super, new.target을 바인딩하지 않는다는 특징이 있다. 화살표 함수는 항상 익명 함수라는 특징을 가지고 있다. 위 특징들때문에 화살표 함수 표현은 메소드 함수가 아닌 부분에 유용하게 쓰일 수 있지만 생성자로는 사용할 수 없다. var materials = [ 'Apple', 'Banana', 'Peach', 'Orange' ]; console.log(materials.map(material => material.length); //위 코드를 실행하면 Array [5, 6, 5, 6]이 결과로 나오게 된다. 화살표 함수로 변환 예 - 화살표 함수는 항상 익명함.. React 알아둘 개념 JSX는 기존 자바스크립트에 더해 XML까지 합쳐 한 번에 코드 작성이 가능하도록 해주는 문법이다. 자주 바뀌는 화면 내의 공간은 state로 등록해야 한다. constructor(props) { super(props); this.state = { ~ } } 코드 내부의 변수값 저장을 위한 state를 설정하고자 할 때 위와 같은 방식을 사용할 수도 있지만 super를 사용하지 않은 아래의 방식도 같은 효과를 얻을 수 있다. state = { ~ } 실무에서는 constructor를 쓰지 않고 state를 관리하는 경우가 더 많다. //return내 태그를 입력할 때 소괄호는 넣지 않아도 무방하나 깔끔한 가시성을 위해서 넣었다. render() { return ( {this.state.firstNumbe.. 리액트 학습 React를 위한 환경 조성하기 기존 jQuery에서 쓰던 방식으로는 만들 수 있는 가능성의 범위가 굉장히 적어진다. React는 Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트 기반을 닦아놓으면 기존의 개발보다 더 쉽고 편리한 환경을 얻을 수 있게 된다. Webpack과 Babel의 용도 Webpack은 여러 파일들을 한개로 결합하기 위해 사용하는 도구다. Babel은 JSX 등의 새로운 자바스크립트 문법을 무리없이 사용할 수 있도록 해주는 도구다. React 시작하는 방법 yarn 또는 npm을 설치한 후 cmd에서 npm install -g create-react-app 또는 yarn global add create-react-app 명령 을 통해 create-reac.. JavaScript (3) 보호되어 있는 글입니다. Effective Java 독서 (1) 보호되어 있는 글입니다. Java Script (2) Java Script 설정 가능한 이벤트- 왼쪽 클릭에 대한 이벤트 : click- 오른쪽 클릭에 대한 이벤트 : contextmenu- 엔터에 대한 이벤트 : submit- 커서가 목표 내부에 들어왔을 때 : focus- 커서가 목표 바깥으로 나갔을 때 : blur- 무엇인가 키를 눌렀을 때 : keypress특정 문자는 입력 불가하게 하거나 숫자만 입력하게 하기 위해서 등의 목적으로 사용된다. target과 currentTarget- 간단하게 봤을 때는 둘 다 현재의 이벤트가 일어난 지점이 어디인지 알 수 있다.- target은 이벤트의 가장 마지막에 위치한 최하위 요소를 반환한다. 즉, target은 클릭된 요소를 기준으로 사용할 때 주로 사용한다.- currentTarget은 이벤트 리스너를 달아.. JavaScript (1) JavaScript window객체에서 자주 쓸 것- window : 브라우저 전체를 담당하는 객체- document : 화면을 담당하는 객체이다. 한 페이지를 생각하면 쉽다.속성들과 메소드들이 들어있는 객체를 DOM객체라고 하며 document도 DOM 객체가 된다. 배열에서 요소 뽑기- push : 배열 마지막에 추가- pop : 배열의 마지막 요소 뽑아냄- unshift : 배열 처음에 추가- shift : 배열 처음 요소 뽑기- splice(위치, 개수) : 위치로부터 개수만큼 요소를 뽑아냄. 이 때 배열의 형태로 뽑게 된다. 문자 나누고 합치기- 문자.split(구분자) : 구분자로 나누어진 배열화- 배열.join(구분자) : 구분자가 포함된 합쳐진 문자열 목표하는 태그 지정- e.target .. React 학습 - Webpack 웹팩 (Webpack) Webpack은 무엇인가- 서로 연관관계가 있는 웹 자원들을 js, css, img와 같은 static 자원으로 변환해주는 모듈 번들러이다.Modules with dependencies -> Static assets- 웹페이지들간의 관계들을 웹팩에서 bundling하게 되며 또한 축소와 압축 작업까지 함께 수행하게 된다.- 웹팩의 역할1) 모듈간의 관계들을 정립하는 의존성 그래프를 갖게 하여 모듈 관리를 수월하게 해준다.2) 자원들을 minification등의 기법을 이용해 최적화하여 웹 페이지의 성능을 올린다. Webpack을 사용하는 이유 & 배경- 새로운 형태의 Web Task Manager기존 WTM (Gulp, Grunt)의 기능 + 모듈간의 의존성 관리초기 자바 스크립트.. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
