마탁이의 개발 블로그

- 위와 같은 Error로 인해 React를 설치하지 못 할 경우, 아래와 같은 명령어를 입력한다. mkdir ~/.npm-global npm config set prefix '~/.npm-global' vi ~/.profile - 이후, 편집기에서 i 를 눌러 아래를 입력하고 다시 global 패키지를 설치 시도 해본다. export PATH=~/.npm-global/bin:$PATH

www.npmjs.com/ - npm 공식 페이지 npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com nomadcoders.co/react-hooks-introduction/lectures/1714 - React Hook 관련 강의..

1. npm과 npx - 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구. - npm을 조금 더 편하게 사용하기 위해서 npm에서 제공. - npx는 npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구. npm = Package Manager npx = Package Runner 2. package-lock.json - npm을 이용해서 node_mudles 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일이다. 또한 당시의존성에 대한 정보를 모두 가지고 있다. 따라서 package-lock.json 파일은 소스 저장소에 커밋해야한다. (node_modules 없이 배포하..

blueshw.github.io/2017/07/01/arrow-function/ [ES6, react] 리액트에서 화살표 함수(arrow function)는 선택이 아닌 필수 리액트를 개발하다보면 이런 코드를 본적 있을것입니다. this(아마도 react 클래스 객체)에 속한 어떤 메서드를 다시 this 에 bind 한다라?? 굳이 왜 이런짓을 해야하는지 의문이 들만합니다. 리액트 blueshw.github.io - 위 페이지가 정리 및 이해가 잘되어 참조하여 학습하였다. 1. this - 객체지향 언어에서의 일반적인 this의 의미 : 현재 객체를 지칭 JavaScript의 this : 실행시의 context - 아래의 예에서는 'undefined' 가 콘솔에 출력된다. Hello()가 출력될 때 co..

1. React Event - HTML과 마찬가지로 React는 사용자 이벤트를 기반으로 작업을 수행할 수 있다. - React는 HTML과 동일한 이벤트를 가지고 있다. (e.g : click, change, mouseover 등) 2. Event 추가 - React 이벤트는 camelCase 로 작성된다. (Upper Camel Case : 각 합성어의 첫 글자만 대문자로 표기하는 코딩 룰) - React 이벤트 핸들러는 중괄호 안에 작성된다. // React import React from 'react'; import ReactDOM from 'react-dom'; function shoot() { alert("Great Shot!"); } const myElement = ( Take the sho..

1. 컴포넌트의 수명주기 - React의 컴포넌트에는 세 가지 주요 단게에서 모니터링하고 조작할 수 있는 수명주기가 있다. 마운트 (Mounting) 업데이트 (Updating) 마운트 해제 (UnMounting) 2. 마운트 (Mounting) - 마운트는 컴포넌트를 DOM에 넣는 것을 말한다. - React에는 컴포넌트를 마운트할 때 순서대로 호출되는 4개의 내장 함수가 있다. constructor() getDerivedStateFromProps() render() componentDidMount() - render() : 필수적이고 항상 호출된다. (HTML을 DOM에 출력하는 함수) 다른 함수는 선택사항이고 정의할 경우 호출된다. - constructor() : 컴포넌트가 초기화될 때 다른 것보다..

1. React State - React 구성 요소에는 기본으로 제공되는 state 개체가 있다. - state 객체는 컴포넌트에 속하는 속성 값을 저장하는 곳. - state 객체가 변경될 때, 컴포넌트는 리-렌더링 한다. - 아래와 같이 state 객체를 사용할 수 있다. import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1994, }; } render() { return ( My {this.sta..

1. 컴포넌트 Prop - React Props는 JavaScript의 함수 매개변수와 HTML의 attributes와 같다. - React Prop는 읽기 전용이다. 값을 변경할 수 없다. - 아래의 예제와 같이 사용한다. // Car.js import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { render(){ return Hi, I am a {this.props.brand} ! } } export default Car; // index.js import React from 'react'; import ReactDOM from 'react-dom'; import Car from './..

1. React 컴포넌트(Components) - 컴포넌트 HTML Element를 반환하는 함수와 같다. - 독립적이고 재사용한 코드이다. - JavaScript 함수와 동일한 목적을 제공하지만 독립된 상태로 작동하고, render()함수를 통해 HTML을 반환한다. 2. 클래스 컴포넌트 요소 만들기 - React 컴포넌트를 생성할 때 컴포넌트 이름은 대문자로 시작해야 한다. - 컴포넌트는 extends React.Component문을 포함하야하며, 이 것은 React.Component에 대한 상속을 생성하고, 컴포넌트에 React.Component의 함수에 대한 액세스 권한을 부여한다. - 컴포넌트에도 render() 함수가 필요하며 이 함수는 HTML을 반환한다. import React from '..

1. React render() 기본 예제 - index.js (src 폴더) import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(Hallo, document.getElementById('sandy')); - index.html (public 폴더) - 위 코드 2개를 실행 후 결과를 보면 Hallo 가 밑에 추가 되어 있다. 2. React JSX(JavaScript XML) - JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가할 수 있다. - JSX를 사용하면 JavaScript로 HTML 요소를 작성하고 createElement(), appendChild() 및 '/' 없이 DOM에 배치 가능. -..