일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
- toString
- http://jeonghwan-kim.github.io/dev/2019/06/25/react-ts.html
- 출처 : https://webdir.tistory.com/506
- https://velog.io/@velopert/create-typescript-react-component
- 게시판
- object
- Today
- Total
목록글 전체 보기 (234)
Back Ground
IterationSample.js1234567891011121314import React, { Component } from 'react';class IterationSample extends Component{ render(){ return( 눈사람 얼음 눈 바람 ); }} export default IterationSample;cs 이런식으로 ...를 연속으로 사용 해야 할때 반복 코드를 이용해서 작성해보도록 하겠다 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 랜더링할 수 있다.map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열 생성한다. 1var new_array = arr.m..
에로우 펀션 에서 프로퍼티 JSON 형태로 사용할때는 ({ label : literal }) 를 사용하여아한다. params => {object:literal}이렇게 했을때 에러가 발생한다. 12var func = () => { foo: 1 }; // func() 호출은 undefined를 반환!var func = () => { foo: function() {} }; // SyntaxError: function 문은 이름이 필요함cs 1func = () => ({ foo: 1 });csfoo는 레이블(라벨)로 인식하게 된다. 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A..
리액트 컴포넌트 안에서는 ID를 사용하면 안된다? 리액트 컴포넌트 안에서도 id를 사용할 수는 있다.JSX안에서 DOM에 id를 달면 해당 DOM을 랜더링할 때 그대로 전달된다. 하지만 특수한 경우가 아니면 권장하지 않는다. 예를 들어 같은 컴포넌트를 여러번 사용 한다고 가정해보면 HTML에서 DOM의 id는 유일해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기는 잘못된 사용입니다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에만 작동하기 때문에 이런 문제가 생기지않는다.대부분은 id를 사용하지 않고도 원하는 기능을 구현할 수 있지만,다른 라이버리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 수 있습니다. ref1ReactDOM.render( ,documnet.getE..
리액트 이벤트 시스템 render(){ return ( 안녕하세요 {this.props.abcd} 여긴 state 값이 출력됩니다. : {this.state.num} { this.setState({ num:this.state.num + 1 }) } }> ) } HTML과 비슷해보이지만 다른 표현 있어서 주의해야 한다. 1. 이벤트이름은 카멜케이스로 작성onclick -> onClickonkeyup -> onKeyUp 2. 이벤트에 실행할 자바스크립트 코드를 전달하는것이 아니라, 함수 형태의 값을 전달HTML에선 더블쿼테이션안에 실행할 코드를 넣지만리액트에선 함수 형태로 전달한다. onclick="event()" -> onClick={event()} 3. DOM 요소에만 이벤트를 설정할 수 있다.DOM요소..
컴포넌트란? 컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다. 이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다. 웹사이트를 구축할 경우 모든 것을 새로 만드는 웹 사이트를 상상조차 할 수 없는게 현실이다. 대부분이 라이브러리, 플러그인, 모듈 그리고 컴포넌트로 재사용이 되는 부분들이 대단히 많다 하겠으며 이를 얼만큼 효과적으로 가장 적합한 어떤 것을 찾고 적용하는 역량이 더 중요해졌다 말할 수 있다. 출처 : https://web..
JSX란 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다.JSX는 리액트에서 사용하는 방식중 하나이다 JSX12345var a = ( 리액트 스터디 )cs이러한 모습을 하고있는데 javascript에 Xhtml을 넣은 모습이다 이 코드는 리액트에서만 사용가능하기 때문에바벨로 컴포넌트를 트리구조로 정의되어 변환하는데 JS1234567891011121314var a = React.createElement( "div", null, React.createElement( "h1", null, "리액트", React.createElement( "i", null, "스터디" ) ) )cs이렇게 변환 된다. 이게 무슨뜻이냐면 12345React.createElement( "h1", //요소 null, //기능 "..
React 프로젝트를 만드는 방법은 여러가지 있지만Node.js 기반으로 개발할때 유용하게 프로젝트를 생성 할때[create-react-app] 이 있다. webpack과 babel 등을 사용하여 개발하는 경우가 많은데해당 도구를 설치하고 일일이 설정해야 되는게 정석이지만 쉽게 리엑트 프로젝트를 만들수 있게 해주는 create-react-app 도구를 사용한다. create-react-app npm과 yarn으로 설치할 수 있는데 패키지를 설치하는데 방법이 2가지 있는데1. 지역적(local)으로 설치2. 전역적(global)으로 설치 둘의 차이점은 - 프로젝트 디렉터리에서만 사용할지- 모든 디렉터리에서 사용할지 정하는것인데 create-react-app는 커맨드라인 도구라 모든 디렉터리에서필요하므로 전..
먼저 React를 html에서 link를 이용하여도 사용할 수도 있지만. 우리는 Node를 활용하여 만들것이다. 그러기 위해서 Node를 먼저 설치해준다. Node.js다운로드 : https://nodejs.org/ko/ node.js 다운로드 사이트에서 자신의 windows의 bit에 알맞게 다운로드 할 수있게 되어있다. Node를 설치가 됐다면 npm을 함께 설치되었다. 에디터는 VS Code(Visual Studio Code)를 사용하기로 하였다. 자신에게 맞는 운영체제로 다운로드 해주면 된다. 다운로드 : https://code.visualstudio.com/ 다 설치가 됐다면 저 버튼을 눌러서 확장 프로그램을 설치해주는데 ESLint 자바스크립트 문법을 체크한다. Relative Path 상대 ..