본문 바로가기
반응형

React,Node,JQuery,js54

[React 따라하기 #6] React Components(컴포넌트) React Component 파보기 Class Component 와 function Component 가 있습니다. 예를 들면, ReactDOM 으로 랜딩 시 ReactDOM.render(, document.getElementById('root')); 여기서 를 class 로 만들거나 function 으로 만들수 있습니다. class 로 생성 시 class Car extends React.Component { render() { return Hi, I am a Car!; } } function 으로 생성 시 function Car() { return Hi, I am a Car!; } 를 class 로 만들든 function 으로 만들든 결과는 같습니다. 하지만 Car 에 무엇인가 속성과 내부 메소드가 필.. 2019. 12. 30.
[React 따라하기 #5] React JSX JSX 란? JSX는 JavaScript XML을 나타냅니다. JSX를 사용하면 React에서 HTML을 작성할 수 있습니다. JSX를 사용하면 React에서 HTML을보다 쉽게 ​​작성하고 추가 할 수 있습니다. // JSX 없이 코딩 const myelement = React.createElement('h1', {}, 'I do not use JSX!'); ReactDOM.render(myelement, document.getElementById('root')); // JSX 사용 const myelement = I Love JSX!; ReactDOM.render(myelement, document.getElementById('root')); 태그는 반드시 닫혀야 합니다. const myCar = (.. 2019. 12. 30.
[React 따라하기 #4] ES6, js Class 에 대한 간단한 설명 ES6 는 자바스크립트의 6 버전 이라고 대충 생각하시면 됩니다. react 가 사용하고 있는게 ES6 죠. 아래는 많이 사용하고 있는 키워드 입니다. Classes Arrow Functions Variables (let, const, var) - Class 간단 설명 일단 아래 정도만 알고 가죠. 주석 잘 보시고 이해하시면 됩니다. - Arrow Functions ES6 이전에는 아래와 같이 메소드를 정의했습니다. var anon = function (a, b) { return a + b }; ES6 부터는 아래와 같이 사용 가능합니다. var anon = (a, b) => a + b; 선언과 사용법 hello = () => "Hello World!"; // 파라메터 없이. hello2 = (val) .. 2019. 12. 30.
[React 따라하기 #3] Codepen에서 실행해보기 Codepen.io 에서 아래 코드를 바꿔가며 실행해 볼수 있습니다. 아래의 코드팬들의 우측상단에 Codepen 을 누르면 새창이 열리고 소스를 수정하면 반영이됩니다. See the Pen XWJaQpd by Seunggeun Oh (@seunggeun-oh) on CodePen. js 의 return 안에 있는 html 도 바꿔보고, 변수 사용하는 방법 See the Pen rNaGBVz by Seunggeun Oh (@seunggeun-oh) on CodePen. 그리고 아래와같이 javascript 함수들을 사용할 수 있습니다. See the Pen OJPxLyL by Seunggeun Oh (@seunggeun-oh) on CodePen. [React 따라하기 #1] React 개발에 필요한 도구.. 2019. 12. 30.
[React 따라하기 #2] React 시작하기 hello world! React 따라하기 #2 자동 생성된 소스 수정하기 이전 포스트 ↓ [React 따라하기 #1] React 개발에 필요한 도구 설치 src/index.js 를 보면 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to regis.. 2019. 12. 30.
Codepen 에서 react 개발 설정하기 Codepen 일단 codepen 에 가입되어있어야 합니다. 기본적인 설명은 여기서. 2019/09/07 - [HTML,Javascript] - Codepen 사용법 (html,css,javascript 실행 웹 툴) Pen 으로 갑니다. Settings 로 들어갑니다. JavaScript 텝에서 중간쯤 검색 영역에 react 와 react-dom 을 검색해서 선택합니다. JSX 문법을 쓸거면 Babel 을 선택하시고 Save&Close 를 누릅니다. 이제 설정은 완료되었습니다. 그럼 간단하게 react 작성을 해보겠습니다. HTML 에 JS 에 class Test extends React.Component { constructor(props){ super(props); this.state = { }; .. 2019. 12. 27.
[React 따라하기 #1] React 개발에 필요한 도구 설치 Windows 로 시작 합니다. 제가 윈도우 쓸거기 때문에. ㅎㅎ; 일단 npm, nodejs, yarn 은 아래 링크 참고하시어 설치합니다. [React,Node,JQuery,js] - Node js, NPM 설치하기 (윈도우10) [React,Node,JQuery,js] - yarn 이란? yarn 설치 방법 (Windows) [React,Node,JQuery,js] - yarn 이란? yarn 설치 방법 (Mac) 그리고 프로젝트를 생성할 때 편리하게 해주는 create-react-app 를 설치합니다. cmd 를 실행하고 아래 명령어를 입력합니다. npm install -g create-react-app yarn 을 이용한 설치 방법은 yarn global add create-react-app 요.. 2019. 12. 27.
yarn 이란? yarn 설치 방법 (Windows) Yarn 에 대한 간략한 설명은 아래의 이전 글을 보시고요. 2019/12/24 - [HTML,Javascript] - yarn 이란? yarn 설치 방법 (Mac) 여기에선 윈도우 yarn 설치 방법만. 일단 사이트 들어가서 설치 파일 받아서 실행하시면 설치가완료됩니다. (chocolatey 가 설치되어있다면 터미널에서 choco install yarn 으로 설치가 가능합니다.) https://yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. yarnpkg.com 다운받은 yarn-1.21.1.msi 파일을 실행합니다. 모두 default 로 next next next 합니다. .. 2019. 12. 27.
Node js, NPM 설치하기 (윈도우10) 일단 node js 사이트 접속합니다. https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 대부분 사용자들을 위한 LTS 버전을 선택합니다. 그리고 쉬운 설치를 위해 .msi 파일로 자신의 운영체제에 맞는 버전을 선택합니다. 그리고 Default 로 Next 를 누르기만하면 됩니다. (혹시 추후에 chocolate 을 필요로 하다면 설치 중간에 체크해서 설치 가능합니다. 일단 저는 pass) 저는 체크하지 않습니다. 나중에 설치할 수 있습니다. 설치가 완료 되었습니다. 설치 전부터 Command 창이 열려 있었다면 닫.. 2019. 12. 27.
yarn 이란? yarn 설치 방법 (Mac) yarn 은 자바스크립트 패키지 매니저 중 하나 입니다. npm 같은거죠. npm 은 모든 패키지들을 다 갖고있어서 무겁고 .. 그래서 페이스북, Exponent, 구글과 Tilde의 엔지니어 그룹들이 함께 협력하여 npm의 핵심 이슈를 해결하기 위해 yarn 이라는 패키지 매니저를 만든 이유입니다. 일단 mac을 쓰다보니, mac에서 설치 하는 방법으로 해보겠습니다. (윈도우는 여기서 -> 2019/12/27 - [HTML,Javascript] - yarn 이란? yarn 설치 방법 (Windows)) - yarn 설치 설치방법은 brew 와 npm 으로 가능합니다. 터미널을 실행합니다. 1. brew 로 설치방법 ( node가 설치되어있다면 --without-node 명령어를 추가합니다 ) brew .. 2019. 12. 24.
728x90
반응형

티스토리툴바