츄리닝개발자

export를 통해 이 파일을 어떻게 사용한다고 알려줘야하는데 import React, { Component } from 'react' export default class Board extends Component { render() { return ( Board ) } } 이런식으로 매번 써주기는 귀찮으니 rcc라는 요약어를 적어주면되게하는데 이것을 사용할려면 확장을 깔아줘야한다. es7을 visual studio code안에 설치해준다. ES7+ React snippets 파일명에 export default class 이렇게 적어주면 이 클래스를 main으로 외부로 보내주겠다는 뜻이다.

자바스크립트의 확장 문법으로 화면에서 UI가 보이는 모습을 나타내준다. JSX는 UI를 보이게할때 자바스크립트(logic)과 HTML구조(markup)을 같이 사용할 수 있어 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현하게한다. 만약 JSX를 사용하지 않고 리액트를 사용하면 이렇게 사용해야한다. React.createElement API를 사용해 객체를 생성하고 In-Memory에 저장한다. ReactDOM.render 함수로 웹 브라우저에 그린다. const myelement = React.createElement('h1', {}, 'I do not use JSX'); -> ReactDOM.render(myelement, document.getElementById('roo..

일반적으로는 멀티페이지 어플리케이션이라고 여러 페이지들을 사용한다. 하지만 최신의 프론트엔드 라이브러리들은 싱글페이지 어플리케이션을 이용해 개발을 한다. 이게 가능한 것은 HTML5의 History API를 이용해서 가능하게된다. 하나의 html파일안에서 화면 이동이 가능하다. # History API History.back() 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드로 브라우저 뒤로가기와 같은 효과를 가지고 있다. History.forward() 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드로 브라우저 앞으로 가기와 같은 효과를 가진다. History.go() 특정한 세션 기록으로 이동하게 해주는 비동기 메서드로 1을 넣어 호출하면 바로 앞페이지로 가고, -1을 넣어 호출하면 바로 ..

리액트는 여러개의 컴포넌트로 구성되어있다. 리액트의 컴포넌트는 두가지가 있다. 1. 클래스형 컴포넌트 (Class Components) class App extends Component { render() { return 안녕하세요. } } 2. 함수형 컴포넌트 (Functional Components) - 리액트 Hooks이 나온이후 함수형 컴포넌트를 사용해서 개발을 많이 한다. function App() { return 안녕하세요. } # 리액트 실행전 node js, npm(node js가 설치될때 같이 설치된다.)을 설치해야한다. 리액트는 가상돔을 사용한다. CRP(critical render path)과정을 이용해서 브라우저에 뿌려주게된다. DOM tree 생성 -> Render tree생성(브..

type alias랑 interface 중 골라서 사용할 수 있는데 개발자마다 prefer하는 방법이 다르다. type Store = { currentPage: number; feeds: NewsFeed[]; } // 인터페이스는 =를 넣지 않는다. interface Store { currentPage: number; feeds: NewsFeed[]; } // 기본적인 문법은 이렇고 type A = B & { age: number; name: string; } interface A extends B { age: number; name: string; } // 이런식으로 다른클래스의 속성을 가져올때는 extends로 바뀐다.

자바에서도 있지만 타입스크립트도 타입을 정해주기 위해 제네릭이 존재한다. function getData(url: string): NewsFeed[] | NewsDetail { ajax.open("GET", url, false); // 사이트에서 동기적으로 데이터를 가져오겠다는 옵션 ajax.send(); // 데이터를 가져온다. return JSON.parse(ajax.response); } 를 사용하여 어떤타입을 명시할 수 있게 넣어준다. T라고 약어로 사용하기도 하고 명시적으로 더 길게 명시해줘도된다.

JavaScript로 작성된 코드를 TypeScript로 변경한다. 예전에는 언어 변경을 '포팅'이라고 많이 불렀다. 자바스크립트에서는 parcel.js라는 번들러로 큰 설정없이 개발이 가능했다. 타입스크립트에서도 parcel.js를 사용이 가능하지만 약간의 추가적인 설정이 필요하다. 1. 이름은 app.js에서 app.js로 타입스크립트 파일이라고 선언해줘야한다. 2. tsconfig.json이라는 설정파일을 만들어줘야 한다. 타입스크립트는 트랜스 파일러다. 그래서 웹에서 동작시킬려면 js로 변환을 해줘야한다. 이 컴파일 과정에서 여러 옵션을 설정할 수 있다. (설정을 하지않으면 기본설정이 적용된다.) { "compilerOptions": { // 기능을 얼마나 엄격하게 적용할것인가. false로 해두..

Rest Client: 웹으로 직접 볼 필요없이 에디터 상에서 결과를 볼 수 있게 도와준다.

type을 선언해줄때 type newsFeed = { id: number; comments_count: number; title: string; read?: boolean; } 이렇게 read뒤에 ?를 넣어주면 처음에 네트워크에서 데이터를 가져올때 optional하게 가져올 수 있는값이 되어 값이 없다가 나중에 넣을 수 있게된다. type을 선언할때 공통되는 속성을 따른 타입으로 선언해 하나의 타입을 선언할때 합쳐줄 수 있다. type News = { id: number; time_ago: string; title: string; url: string; user: string; content: string; } // 이렇게 공통되는 속성을 선언하고 type NewsFeed = News & { commen..

for(var i=1;i