전체보기 (286) 썸네일형 리스트형 리액트 state state를 활용하려면 ES6 방식으로 클래스를 정의해야 한다. class Clock extends React.Component { constructor(props) { // 생성자 규칙 super(props); this.state = { date: new Date() }; // constructor 안에서만 이렇게 정의할 수 있다. } render() { return ( { this.state.date.toLocaleTimeString() } // this.state를 사용한다. ); } } ReactDOM.render(, document.getElementById('root')); state를 변경하려면 setState() 메소드를 써야 한다. 위의 경우 this.setState({ date: new.. 리액트 기본, 컴포넌트, props 1. JSX 리액트 개발 환경에서 태그가 나오면 JSX가 자동으로 객체 형태로 바꿔준다. const element = Hello; 위는 아래와 동일하다. const element = { type: 'h1', props: { className: 'greeting', // 리액트에서는 class 대신 className을 쓴다. children: 'Hello' } } 2. Rendering Elements 리엑트는 기본적으로 특정 엘리먼트에 추가하는 방식으로 사용한다. const element = Hello; ReactDOM.render(element, document.getElementById('root')); 3. Components and Props 리엑트는 편의성과 재사용을 위해서 보통 컴포넌트를 활용.. fetch를 이용해 서버의 데이터를 가져오는 방법 const server = 'https://koreanjson.com/posts/1'; fetch(server) .then(response => response.json()) .then(json => console.log(json)) .catch(error => console.log(error)); // 각 메소드는 Promise 객체를 리턴한다. // 1줄에서 가져온 것을 // 2줄에서 받아 json 형태로 바꾸고 // 3줄에서 json을 콘솔에 보여준다. // error가 발생하면 콘솔에 error를 표시한다. 참고 : https://koreanjson.com/ 프로젝트 폴더에 npm 설정하는 방법, npm 시작하는 방법 1. 터미널에서 해당 폴더로 들어간다. 2. 다음을 입력한다. npm init 3. 설정을 마친다. package.json 파일이 생성된다. 특정 파일과 폴더 깃 add 못하게 만들기 .gitignore 파일을 만들어서 위와 같이 입력한다. 폴더를 제외하려면 첫 번째 줄처럼 하고 파일을 제외하려면 두 번째 줄처럼 한다. Jest의 기본 메소드 test('Truthy & Falthy', () => { expect(null).toBeNull(); expect(undefined).toBeUndefined(); expect(1).toBeDefined(); expect(1).toBeTruthy(); expect(0).toBeFalsy(); }); test('Number', () => { expect(2).toBeGreaterThan(1); expect(2).toBeGreaterThanOrEqual(1); expect(2).toBeLessThan(3); expect(2).toBeLessThanOrEqual(3); expect(1.1 + 0.1).toBeCloseTo(1.2); // 소수의 계산을 확인할 때에는 toBe 대신 toBeCloseTo를 쓴다... Jest에서 toBe와 toEqual의 차이점 test('toBe는 obj가 같은 객체를 가리키고 있는지 확인한다', () => { const obj = {}; expect(obj).toBe(obj); // true }); test('객체의 내용이 같더라도 서로 다른 메모리에 있는 객체이기 때문에 toBe를 쓰면 false가 나온다.', () => { expect({ name: 'John' }).toBe({ name: 'John' }); // false }); test('대신에 객체의 내용이 같은지를 확인하려면 toEqual을 써야 한다', () => { const obj = {}; expect({ name: 'John' }).toEqual({ name: 'John' }); // true }); 참고 : https://jestjs.io/docs/en.. Jest 설치와 기본 사용 방법 - Testing Tool 1. 터미널에서 프로젝트 폴더에 들어가 다음을 입력한다. npm install --save-dev jest 2. sum.js 파일을 만들어 그 안에 다음을 입력하고 저장한다. function sum(a, b) { return a + b; } module.exports = sum; 3. sum.test.js 파일을 만들어 그 안에 다음을 입력하고 저장한다. const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); 4. package.json 파일을 만들어 그 안에 다음을 입력하고 저장한다. { "scripts": { "test": "jest" } } 5. 터미널에서 npm run test.. 이전 1 ··· 23 24 25 26 27 28 29 ··· 36 다음
