Blog | 📝 TIL(Today I Learned)

공부는 어떻게?#

구글링#

영어 vs 한국어
한국어는 컨텐츠가 부족하다. 공식 사이트를 보자.

MDN#

stackoverflow#

질문을 남기고 답변을 달아라

디버깅#

인생의 절반 이상을 디버깅에 쏟는다
디버깅하면서 학습하라
this , closure 등등 어려운 개념은 디버깅 창을 띄우고 콜 스택에 쌓인 지역변수의 값이 뭔지 보면서 학습
디버깅 주도 학습
에러 메시지 무시하지 마라
에러 메시지를 자주 봐야지 다음 번에 에러 메시지만 보고 상황을 판단할 수 있음

JS의 표준#

ECMAScript
ES 2015 == ES6
prototype 몰라도 개발할 순 있지만, JS의 핵심이 prototype 이다. 꼭 이해해야한다.

객체지향 프로그래밍#

현실 세계에 있는 사물. 실존하는 것.

객체지향 프로그래밍의 핵심은 역할

역할을 나누는 것이 중요하다.

new 키워드 생성자, 속성을 파라미터로 넣어서 객체를 만든다.

스타벅스 커피, 바리스타의 예시

의존성이 낮은 연결고리를 만들어 주어야 한다.

연결을 느슨하게 하는 것이 중요하다. → 디자인 패턴

의존성이 낮아서 수정이 되도 연결된 다른 객체는 영향을 받지 않음

코딩보다 디자인

메소드 vs 프로토타입#

메소드는 메모리 공간을 차지

프로토타입은 각 객체가 메모리 공간을 쉐어 함.

module vs import#

즉시실행함수와 `private`#

비동기 프로그래밍#

JavaScript는 싱글스레드로 동작

then이 실행된 게 아니라 then에 등록된 콜백 함수가 실행 되는 것이다.

클로저
이벤트 루프

Github 위키와 이슈#

Milestone (지점)

Javascript#

Type#

숫자 → 부동소수점 방식

함수#

콜백#

회고#

I have done#

feeling#

나의 각오/계획#

우아한테크캠프 끝나고 함께 프로젝트할 사람들 만나기
다른 사람 의견 잘 듣기
내가 아는 것은 친절히 알려주기
모르는 것은 잘 질문하기
배운 것은 개인적으로 써먹어 보기
오늘 배운 내용은 오늘 복습하기

Git / Github#

Git에 관하여#

Git은 리누스 토발즈(Linus Torvalds)가 리눅스(Linux) 커널을 관리하기 위해서 만든소스관리 툴이다. (ㄷㄷ) Git 이전의 형상관리 툴은 SVN, CVS 등이 있었음.

간단한 소규모 프로젝트에 Git을 사용하는 것은 난이도를 높이지만, 복잡한 대규모프로젝트에서는 프로젝트의 난이도를 상당히 낮출 수 있기 때문에 필수적이다.

안티 패턴#

git add . : 변경사항이 있는 모든 파일을 한번에 스테이징 하지 말아라. 한 파일한 파일 씩 변경사항을 확인하면서 커밋해라.
git commit -m "" : 커밋은 git commit 으로 제목과 함께 간단한 설명까지 덧붙여서 작성하는 것이 정석이다.

이러한 안티 패턴이 만연해 있음. 좋은 커밋 습관을 기르는 것이 중요하다.

Git flow#

Git-flow, Github flow, Gitlab flow 각각이 다른 형상 관리 전략이다. 이 외에도 수많은 flow 들이 존재. 하지만 Git-flow 라는 이름 때문에 Git flow가 정석, 표준이라는 오해를 하기 쉽다. 하지만 Git flow가 복잡하고 어렵기 때문에 이를 사용하는 것이바람직하지 않은 조직, 팀이 있을 수 있다. Git flow 외에도 훌륭한 flow 전략들이 많기 때문에 Git flow에 대해 공부하는 것은 좋지만 무조건 GIt flow를 적용하는 것이표준인 것은 아니다.

Understanding the GitHub flow

우린 Git-flow를 사용하고 있어요 - 우아한형제들 기술 블로그

하루에 1000번 배포하는 조직 되기 | 뱅크샐러드

커밋 메시지에 대해#

메시지는 한글도 가능하다.
커밋 메시지는 팀원 뿐만 아니라 미래의 나를 위해 남기는 것이다. 적당한 단어를찾지 못한 어색한 커밋 메시지를 남기는 것보다 한글로 명확하게 작성하는 것이 훨씬낫다.
우리 프로젝트는 오픈 소스가 아니니까
하이브리드로 커밋 메시지 제목을 영어로 남기고 설명을 한글로 작성하는 방법도 있다.
실제로 TDD를 잘하는 팀에선 테스트 코드의 메소드 명을 한글로 하는 경우가 있다. 훨씬 명확한 메소드 명으로 인해 좋은 효과가 있다.
fork 후 PR과 branch 후 PR의 차이
기본적으로 fork는 내가 이 저장소에 권한이 없을 때 하는 것이다. 오픈 소스에 기여하는 경우 등등..

Git 명령어와 동작 원리#

Git 동작 원리를 제대로 배운 것은 처음이었고 기존 알고 있던 개념이 잘못되었다는것을 깨닫고 개인적으로 충격을 받았다.

Learn Git Branching

git init : 숨겨진 폴더가 하나 생김
- .git : 로컬 저장소
  - git의 저장 단위는 커밋
    - Working directory → Stage → Commit
- GitHub or GitLab ... - 원격 저장소
- git reset → 날아가지 않음.
- 워킹 디렉토리의 변경사항에 대한 스냅샷
- 커밋은 내부적으로 트리로 구성되어 있음 트리에 오브젝트들이 달려서 하나의 커밋을 구성함
- git cat-file -t ce013
- git cat-file blob ce013
- git cat-file -t HEAD
- git log -n1
- git cat-file -t 7da33cf4
- git cat-file commit 7da33cf4
- git ls-tree aaa96ced2d9a1c8e ...
- branch는 헤드에 대한 참조일 뿐
- 커밋은 부모 커밋이 있다
- git checkout C4 vs git checkout hello
- git은 diff를 저장하는 것이 아니라 전체를 저장한다.
- svn은 diff를 저장한다
- tree .git
- 브랜치를 많이 만들어도 용량이 증가하지 않는다.
- git status
- git checkout master
- 브랜치는 커밋에 대한 참조일 뿐 아무것도 아니다.
- 깃에는 커밋밖에 없다. 태그, 브랜치, 어쩌고는 다 참조 변수일 뿐이다 실제 존재하는 객체는 아무것도 없다.
- git reset —hard Head~1 시에 복원하는 법
- git branch test 체크섬
- git reflog 모든 참조 변수들의 로그를 보는 명령
- git push 로컬 저장소에 있는 것을 원격 저장소로 보냄

200320

2020년 3월 20일 · 약 2분

Younho Choo

younho9

Ajax#

Ajax(Asynchronous JavaScript and XML)

자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을의미

JSON#

JSON

JSON(JavaScript Object Notation)

JavaScript에서 객체를 만들 때 사용하는 표현식을 의미

이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다.

{    "coord": {"lon": 139, "lat": 35},    "weather": [        {            "id": 800,            "main": "Clear",            "description": "clear sky",            "icon": "01n"        }    ],    "base": "stations",    "main": {        "temp": 281.52,        "feels_like": 278.99,        "temp_min": 280.15,        "temp_max": 283.71,        "pressure": 1016,        "humidity": 93    },    "wind": {        "speed": 0.47,        "deg": 107.538    },    "clouds": {        "all": 2    },    "dt": 1560350192,    "sys": {        "type": 3,        "id": 2019346,        "message": 0.0065,        "country": "JP",        "sunrise": 1560281377,        "sunset": 1560333478    },    "timezone": 32400,    "id": 1851632,    "name": "Shuzenji",    "cod": 200}

JSON API#

`JSON.parse()`#

인자로 전달된 문자열을 자바스크립트 데이터로 변환한다.

`JSON.stringify()`#

인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.

200317

2020년 3월 17일 · 약 12분

Younho Choo

younho9

NPM#

NPM1 - YouTube

Node Package Manager : 앱스토어에서 앱을 설치하는 것처럼 NPM에서 패키지를 설치할수 있음.

패키지는 -g (global)에 설치할 수도 있고, 해당 디렉토리의 부품으로써 사용하도록설치할 수 있다.

검색과 설치#

npm

NPM을 검색하고 설치할 수 있는 사이트

만약 local-web-server 라는 패키지를 설치하고 싶을 때,

npm i local-web-server
npm install local-web-server

i는 install의 약자

컴퓨터의 전역적인, 독립적인 프로그램으로 설치하고 싶을 때,

npm install -g local-web-server

g는 global의 약자

권한이 없다면 sudo 를 앞에 추가한다.

패키지 목록 보기와 업데이트, 삭제#

현재 디렉토리에 설치된 패키지 보기

npm list

전역에 설치된 패키지 보기

npm list -g

전역에 설치된 패키지 중 제일 상단에 있는 패키지만 보기

npm list -g --depth=0

전역에 있는 패키지 업데이트하기

npm update -g local-web-server

전역에 있는 패키지 삭제하기

npm uninstall -g local-web-server

📌 바퀴를 다시 만들지 마라!

React#

React - YouTube

React 앱 만들기#

npm install -g create-react-app - 전역에 설치해서 사용하는 방법.

npm install -g create-react-appmkdir my-appcd my-appcreate-react-app .

npx - 임시로 패키지를 설치해서 사용하고 지우는 실행 도구.

npx create-react-app my-appcd my-appnpm start

React 앱 실행#

npm run start

코딩하기#

`public` 디렉토리 - static 자원이 위치한 곳.#

index.html

<div id="root"></div>

이 root 안에 리액트 컴포넌트들이 들어가게 된다.

`src` 디렉토리 - source 코드가 있는 곳.#

index.js

ReactDOM.render(<App />, document.getElementById('root'));

<App /> 컴포넌트를 root 엘리먼트로 전달하게된다.

App.js 클래스형 (클래스형과 함수형 컴포넌트가 있는데 이 강좌는 클래스형으로진행)

import React from 'react';import logo from './logo.svg';import './App.css';
class App extends React.Component {    render() {        return (            <div className="App">                <header className="App-header">                    <img src={logo} className="App-logo" alt="logo" />                    <p>                        Edit <code>src/App.js</code> and save to reload.                    </p>                    <a                        className="App-link"                        href="https://reactjs.org"                        target="_blank"                        rel="noopener noreferrer"                    >                        Learn React                    </a>                </header>            </div>        );    }}
export default App;

☝️ 반드시 리액트는 반환할 때 하나의 태그로 감싸져 있어야 한다.

배포하기#

npm run build - 리액트 앱을 빌드해줌
npx serve -s build - 빌드한 앱으로 로컬 호스팅

JSX#

📌 JSX는 JavaScript가 아니다!

JSX로 작성한 코드는 create-react-app에 의해 JavaScript 코드로 컨버팅 된다.

Hello World!#

import React from 'react';import './App.css';
class App extends React.Component {    render() {        return <div className="App">Hello World!</div>;    }}
export default App;

App class는 리액트 컴포넌트를 확장하고 render 라는 메소드를 가진다. (필수), 클래스 내부 메소드에서 function 키워드는 생략 가능하다. (ES6)

`Components` 와 `props`#

컴포넌트를 여러 개 사용할 때 완전히 똑같은 컴포넌트만 사용해야 한다면, 한계가 있을 것이다. 컴포넌트가 특정 속성을 가짐에 따라 변경해줄 수 있도록 props 를 활용할 수 있다.

import React from 'react';import './App.css';
class Subject extends React.Component {    render() {        return (            <header>                <h1>{this.props.title}</h1>                {this.props.sub}            </header>        );    }}
class App extends React.Component {    render() {        return (            <div className="App">                <Subject title="WEB" sub="World Wide Web!" />                <Subject title="React" sub="For UI!" />            </div>        );    }}
export default App;

React Developer Tools#

React Developer Tools

컴포넌트 파일로 분리하기#

App.js

import React from 'react';import Subject from './components/Subject';import Content from './components/Content';import TOC from './components/TOC';import './App.css';
class App extends React.Component {    render() {        return (            <div className="App">                <Subject title="WEB" sub="World Wide Web!" />                <Subject title="React" sub="For UI!" />                <Content text="HTML is FUN!" />                <TOC />            </div>        );    }}
export default App;

import React from 'react'; - 리액트 라이브러리를 사용하기 위해 필수.

해당 컴포넌트에서 사용하는 다른 컴포넌트는 import 에 명시.

해당 컴포넌트가 외부에서 사용할 수 있도록 export 에 명시.

`props` 와 `state`#

2020-03-17-200317-image-0

props 는 외부에서, 내부로 전달. 외부에서 사용할 컴포넌트에 속성에 기입하면 내부 컴포넌트에서 props 로 접근할 수 있음. 사용하는 입장에서 조작.

state 는 내부의 상태 값.

App.js

import React from 'react';import Subject from './components/Subject';import TOC from './components/TOC';import Content from './components/Content';import './App.css';
class App extends React.Component {    constructor(props) {        super(props);        this.state = {            subject: {title: 'WEB', sub: 'World Wide Web!'},        };    }    render() {        return (            <div className="App">                <Subject                    title={this.state.subject.title}                    sub={this.state.subject.sub}                />                <Subject title="React" sub="For UI!" />                <TOC />                <Content text="HTML is FUN!" />            </div>        );    }}
export default App;

constructor : 컴포넌트가 실행될 때 가장 먼저 실행되는 함수 ( state 값을 초기화)

해당 객체 안에서 { this.state.subject.title } 으로 접근할 수 있음.

`TOC` 개선#

TOC.js

import React from 'react';
class TOC extends React.Component {    render() {        var lists = [];        var data = this.props.data;        var i = 0;
        while (i < data.length) {            lists.push(                <li key={data[i].id}>                    <a href={'/content/' + data[i].id}>{data[i].title}</a>                </li>,            );            i = i + 1;        }
        return (            <nav>                <ul>{lists}</ul>            </nav>        );    }}
export default TOC;

TOC.js 에서 외부에서 data (객체가 담긴 리스트)를 props 로 전달받고, 해당리스트의 요소들을 순차적으로 lists 에 담아 출력하게 바꾼다.

이 때 여러 개의 목록은 key 를 가져야한다. key={data[i].id} 가 필수.

키를 기입하지 않을 경우.

2020-03-17-200317-image-1

App.js

import React from 'react';import Subject from './components/Subject';import TOC from './components/TOC';import Content from './components/Content';import './App.css';
class App extends React.Component {    constructor(props) {        super(props);        this.state = {            subject: {title: 'WEB', sub: 'World Wide Web!'},            contents: [                {id: 1, title: 'HTML', desc: 'HTML is for information'},                {id: 2, title: 'CSS', desc: 'CSS is for Design'},                {id: 3, title: 'JavaScript', desc: 'JavaScript is for Interactive'},            ],        };    }    render() {        return (            <div className="App">                <Subject                    title={this.state.subject.title}                    sub={this.state.subject.sub}                />                <TOC data={this.state.contents} />                <Content text="HTML is FUN!" />            </div>        );    }}
export default App;

이렇게 외부에서 Contents 를 추가할 수 있다.

이벤트 `state` , `props` , `render()` 함수#

React 에서는 props 또는 state 의 값이 변경되었을 때 render() 함수가 호출되도록 약속되어 있다. → 화면이 다시 그려진다.

동적으로 변수 제어#

Subject.title 을 클릭했을 때, this.state.mode 변수를 변경하고 싶다. 이 때 Subject.title 은 <a> 태그로 감싸져 있다.

onClick 속성으로 클릭했을 때 실행할 함수(이벤트 핸들러)를 정의할 수 있다.

그런데 onClick 이 발생했을 때, 화면이 새로고침 된다. <a> 태그의 기본 동작 방법이기 때문.

...
<h1><a href="/" onClick={function(e){  console.log(e);    // debugger;  e.preventDefault();}}>{this.state.subject.title}</a></h1>
...

☝️ debugger; 를 삽입하고 실행하면 해당 위치에서 멈춰지고 개발자도구에서 해당위치의 소스를 볼 수 있음

이벤트가 발생한 태그의 기본적인 동작방법을 못하게 막는 것이 event 객체의 preventDefault() 라는 함수이다. 이를 통해 새로고침되는 현상을 막을 수 있다.

state 를 변경하고 싶을 때.

return (    <div className="App">        <header>            <h1>                <a                    href="/"                    onClick={function (e) {                        e.preventDefault();                        this.setState({                            mode: 'welcome',                        });                    }.bind(this)}                >                    {this.state.subject.title}                </a>            </h1>            {this.state.subject.sub}        </header>        <TOC data={this.state.contents} />        <Content title={_title} desc={_desc} />    </div>);

이벤트가 실행됐을 때 실행되는 function 내부에 this 의 값이 아무것도 세팅되어있지 않다. → this 바인딩 사용해야함. 함수 안의 this 를 매개변수로 넣은 값으로 설정함. ( this = App )
state 를 동적으로 변경할 땐 setState 함수를 사용해야 함

React에서 객체 또는 배열 state 변경#

React에서는 컴포넌트의 state 가 변경될 때마다 해당 컴포넌트 render 함수와 하위 컴포넌트의 render 함수를 실행해 reload 하게 된다.

따라서 하위 컴포넌트에는 변경되는 것이 없다면 비효율적일 수 있다.

이를 위해 React.Component 의 shouldComponentUpdate 함수가 있다.

shouldComponentUpdate 는 newProps 와 newState 라는 매개변수를 가진다. 여기서 newProps 는 컴포넌트의 바뀐 props 값을 말한다.

newProps 와 이전 값을 나타내는 this.props.data 를 이용해 props 가 바뀌었을때만 해당 컴포넌트의 render 함수를 호출하게 할 수 있다. (둘이 같으면 false 리턴하고 둘이 다르면 true 를 리턴함으로 가능)

그런데 만약 state 에 객체 또는 배열이 있을 경우에, 객체나 배열의 원본을 변경하는 함수를 통해 state 를 업데이트하게 되면(예를 들어, 배열의 push 함수는 원본에 데이터를 추가한다.) 원본이 수정되었기 때문에 newProps 와 this.props.data 는 같을 수밖에 없고, 따라서 shouldComponentUpdate 함수를 통한 조작이 불가능해지고 이는 성능 개선을 불가능하게 만들게 된다.

따라서 배열에서는 push 함수 대신 concat , 객체에서는 Object.assign 함수 등으로 새로운 배열이나 객체로 state 를 바꿔주는 것으로 shouldComponentUpdate 함수를 통한 조작을 가능하게 할 수 있다.

200316

2020년 3월 16일 · 약 7분

Younho Choo

younho9

벨로퍼트와 함께하는 모던 리액트

React 입문#

`Input` 상태 관리하기#

사용자가 입력할 수 있는 input 태그의 상태를 관리하는 방법

input에 내용을 입력하면 아래의 값이 업데이트됨.
초기화를 클릭하면 input 내부에 내용도 지워지고, 아래의 값도 지워짐.

InputSample.js

import React, {useState} from 'react';
function InputSample() {    const [text, setText] = useState('');
    const onChange = (e) => {        setText(e.target.value);    };
    const onReset = () => {        setText('');    };
    return (        <div>            <input onChange={onChange} value={text} />            <button onClick={onReset}>초기화</button>            <div>                <b>값: {text}</b>            </div>        </div>    );}
export default InputSample;

App.js

import React from 'react';import InputSample from './InputSample';
function App() {    return <InputSample />;}
export default App;

input 의 onChange 이벤트를 사용. 이벤트 객체 e 를 파라미터로 받아와서 사용 . e.target 은 이벤트가 발생한 DOM인 input DOM을 가리키게 되고, DOM의 value 값, e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있다 .

Event | PoiemaWeb

여러 개의 `input` 상태 관리하기#

input 의 개수가 여러 개가 되었을 때 단순히 useState 를 여러번 사용하고 onChange 를 여러 개 만들어서 구현할 수도 있지만, 더 좋은 방법은 input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 이제 useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다.

InputSample.js

import React, {useState} from 'react';
function InputSample() {    const [inputs, setInputs] = useState({        name: '',        nickname: '',    });
    const {name, nickname} = inputs; // 비구조화 할당을 통해 값 추출
    const onChange = (e) => {        const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출        setInputs({            ...inputs, // 기존의 input 객체를 복사한 뒤            [name]: value, // name 키를 가진 값을 value 로 설정        });    };
    const onReset = () => {        setInputs({            name: '',            nickname: '',        });    };
    return (        <div>            <input name="name" placeholder="이름" onChange={onChange} value={name} />            <input                name="nickname"                placeholder="닉네임"                onChange={onChange}                value={nickname}            />            <button onClick={onReset}>초기화</button>            <div>                <b>값: </b>                {name} ({nickname})            </div>        </div>    );}
export default InputSample;

const onChange = (e) => {    const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출    setInputs({        ...inputs, // 기존의 input 객체를 복사한 뒤        [name]: value, // name 키를 가진 값을 value 로 설정    });};

이 부분을 풀어 쓰면

const nextInputs = {    ...inputs,};
nextInputs[name] = value;
setInputs(value);

`useRef` 로 특정 DOM 선택하기#

JavaScript를 사용할 때는 특정 DOM을 선택하기 위해 getElementById , querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.

리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생할 수있는데 그럴 때 ref 라는 것을 사용한다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용한다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용하는데, 클래스 컴포넌트는 현재 별로 중요하지 않다.

InputSample.js 에서 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 구현해본다.

InputSample.js

import React, {useState, useRef} from 'react';
function InputSample() {    const [inputs, setInputs] = useState({        name: '',        nickname: '',    });    const nameInput = useRef();
    const {name, nickname} = inputs; // 비구조화 할당을 통해 값 추출
    const onChange = (e) => {        const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출        setInputs({            ...inputs, // 기존의 input 객체를 복사한 뒤            [name]: value, // name 키를 가진 값을 value 로 설정        });    };
    const onReset = () => {        setInputs({            name: '',            nickname: '',        });        nameInput.current.focus();    };
    return (        <div>            <input                name="name"                placeholder="이름"                onChange={onChange}                value={name}                ref={nameInput}            />            <input                name="nickname"                placeholder="닉네임"                onChange={onChange}                value={nickname}            />            <button onClick={onReset}>초기화</button>            <div>                <b>값: </b>                {name} ({nickname})            </div>        </div>    );}
export default InputSample;

React 공부를 하며 느낀점#

JS 기초 문법만 떼고 바로 React 입문으로 넘어오니 DOM, Event 객체 등 JS에서 부족했던 개념이 등장할 때마다 낯선 React 구조와 함께 머리 속을 복잡하게 만들었다 .
아직 React와 JavaScript의 관계가 정확하게 어떤 것인지 모르겠다. 강의를 보면 JavaScript를 사용할 때와 React를 사용할 때를 구분하면서 사용하는 부분들이 있다 . React도 결국 JS니까 JS로만 해도 다 되는 걸로 생각했는데 왜 구분하는 건지 이해되지 않는다.
좋은 React 공부 자료를 찾기 어렵다. 최신 기술이라 빠르게 변하고 있어서 책보다는 인터넷 자료 + 온라인 강의로 공부해야 한다.
1. 공식 문서
2. 생활코딩 - 4시간 40분 분량
3. velopert 님 강좌 - 2시간 53분 분량
4. zeroCho 님 강좌 - 12시간 44분 분량
5. Udemy 강좌 - 26시간 42 분 분량

앞으로 ..#

zeroCho님의 JavaScript 웹게임 강좌와 React 웹게임 강좌가 친절하게 설명하면서도생각하게 만드는 예제들을 사용해서 도움이 되는 것 같다. 이 두 강좌를 듣고 기초를 쌓는다.
인터페이스디자인 수업 때 만든 미디어학과 수강계획 페이지를 만들어본다. 컴포넌트 기반인 React를 활용하기 좋은 예제인 것 같다.

200315

2020년 3월 15일 · 약 5분

Younho Choo

younho9

React#

`props` 를 통해 컴포넌트에게 값 전달하기 (계속)#

`defaultProps` 로 기본값 설정#

Hello.js

import React from 'react';
function Hello({color, name}) {    return <div style={{color}}>안녕하세요 {name}</div>;}
Hello.defaultProps = {    name: '이름없음',};
export default Hello;

이렇게 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용할 값을 설정할 수있다.

App.js

import React from 'react';import Hello from './Hello';
function App() {    return (        <>            <Hello name="react" color="red" />            <Hello color="pink" />        </>    );}
export default App;

2020-03-15-200315-image-0

`props.children`#

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 된다.

props.children 을 사용하는 Wrapper.js 를 만들어 본다.

Wrapper.js

import React from 'react';
function Wrapper() {    const style = {        border: '2px solid black',        padding: '16px',    };    return <div style={style}></div>;}
export default Wrapper;

App.js

import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';
function App() {    return (        <Wrapper>            <Hello name="react" color="red" />            <Hello color="pink" />        </Wrapper>    );}
export default App;

이렇게 하면 내부의 내용이 보이지 않는다. Wrapper.js 에서 props.children 을렌더링해주어야 한다.

Wrapper.js

import React from 'react';
function Wrapper(props) {    // props 대신 { children } 으로 비구조화 할당 후    const style = {        border: '2px solid black',        padding: '16px',    };    return (        <div style={style}>            {props.children} {/* 여기서 children 으로만 받아도 된다. */}        </div>    );}
export default Wrapper;

2020-03-15-200315-image-1

조건부 렌더링#

props 를 이용하여 특정 조건에 따라 다른 결과물을 렌더링 하도록 할 수 있다.

App.js

import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';
function App() {    return (        <Wrapper>            <Hello name="react" color="red" isSpecial={true} />            <Hello color="pink" />        </Wrapper>    );}
export default App;

isSpecial 이라는 props 를 전달하고, (이 때 true 는 자바스크립트 값이므로중괄호로 감싸야한다.

Hello.js

import React from 'react';
function Hello({color, name, isSpecial}) {    return (        <div style={{color}}>            {isSpecial ? <b>*</b> : null}            안녕하세요 {name}        </div>    );}
Hello.defaultProps = {    name: '이름없음',};
export default Hello;

삼항 연산자를 사용할 수 있다. 또한 단축 평가 논리 계산법으로 isSpecial && <b>*</b> 로 할 수도 있다.

또한 props 값을 설정할 때 이름만 작성하고 값 설정을 생략할 경우 이를 true 로설정한 것으로 간주한다.

App.js

import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';
function App() {    return (        <Wrapper>            <Hello name="react" color="red" isSpecial />            <Hello color="pink" />        </Wrapper>    );}
export default App;

Hello.js

import React from 'react';
function Hello({color, name, isSpecial}) {    return (        <div style={{color}}>            {isSpecial ? alert(isSpecial) : null}            안녕하세요            {name}        </div>    );}
Hello.defaultProps = {    name: '이름없음',};
export default Hello;

isSpecial 에 값을 설정하지 않고 Hello.js 에서 만약 isSpecial 이 true 라면 isSpecial 을 alert로 내보내게 했다.

2020-03-15-200315-image-2

true 가 출력된다.

`useState` 를 통해 컴포넌트에서 바뀌는 값 관리하기#

Counter 예제를 react로 구현해 본다.

App.js

import React from 'react';import Counter from './Counter';
function App() {    return <Counter />;}
export default App;

Counter.js

import React, {useState} from 'react';
function Counter() {    const [number, setNumber] = useState(0);
    const onIncrease = () => {        setNumber(number + 1);    };
    const onDecrease = () => {        setNumber(number - 1);    };
    return (        <div>            <h1>{number}</h1>            <button onClick={onIncrease}>+1</button>            <button onClick={onDecrease}>-1</button>        </div>    );}
export default Counter;

함수형 업데이트#

이 때, setNumber 함수(Setter 함수)를 사용할 때 업데이트 하고 싶은 새로운 값을파라미터로 넣어주고 있는데, 그 대신 기존의 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있다.

Counter.js

import React, {useState} from 'react';
function Counter() {    const [number, setNumber] = useState(0);
    const onIncrease = () => {        setNumber((prevNumber) => prevNumber + 1);    };
    const onDecrease = () => {        setNumber((prevNumber) => prevNumber - 1);    };
    return (        <div>            <h1>{number}</h1>            <button onClick={onIncrease}>+1</button>            <button onClick={onDecrease}>-1</button>        </div>    );}
export default Counter;

200314

2020년 3월 14일 · 약 5분

Younho Choo

younho9

React#

벨로퍼트와 함께하는 모던 리액트

React Component 만들기#

Hello.js

import React from 'react';
function Hello() {    return <div>Hello World!</div>;}
export default Hello;

리액트 컴포넌트를 만들 땐

import React from 'react';

를 넣어줘야한다.

리액트 컴포넌트는 XML 형식의 값을 반환할 수 있는데 이를 JSX 라고 부른다.

export default Hello;

이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미.

App.js

import React from 'react';import Hello from './Hello';
function App() {    return (        <div>            <Hello />        </div>    );}
export default App;

실행시켜보면, ( yarn start or npm start )

2020-03-14-200314-image-0

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(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();

여기서 ReactDOM.render 를 보면, id 가 root 인 DOM 내부에 리액트 컴포넌트( <App /> )를 렌더링하겠다는 의미이다.

이 DOM은 public/index.html 내부에 있다.

<div id="root"></div>

JSX#

JavaScript + XML, 자바스크립트의 확장 문법. 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줌. HTML 같이 생겼지만 실제론 JS 이다.

return <div>안녕하세요</div>;

Babel 은 XML 형태의 코드를 JS로 변환해준다.

규칙#

태그를 열었으면 닫아야 함. ( input , br 포함 모든 태그. 태그 사이에 내용이없을 땐, <input/> 로 셀프클로징 가능)
두 개 이상의 태그는 하나의 태그로 감싸져 있어야 한다. <> </> Fragment로 사용한다면 불필요한 태그 없이 두 개 이상의 태그 가능.
JSX 내부에 변수는 {} 로 감싸서 보여줄 수 있음.

`style` 과 `className`#

style 과 CSS class 설정 방법이 HTML과 다르다.

인라인 스타일은 객체처럼 작성.
background-color 같이 - 로 구분된 속성 이름을 가진 속성들은 camelCase 형태로 ( backgroundColor )
CSS class 설정시엔 class="" 가 아닌 className="" 으로.

App.js

import React from 'react';import Hello from './Hello';import './App.css';
function App() {    const name = 'react';    const style = {        backgroundColor: 'black',        color: 'aqua',        fontSize: 24, // 기본 단위 px        padding: '1rem', // 다른 단위 사용 시 문자열로 설정    };
    return (        <>            <Hello />            <div style={style}>{name}</div>            <div className="gray-box"></div>        </>    );}
export default App;

App.css

.gray-box {    background: gray;    width: 64px;    height: 64px;}

주석#

{/* JSX 내부 주석 작성법 */}

열리는 태그 내부에서는 // 이런 형태의 주석 작성도 가능

`props` 를 통해 컴포넌트에 값 전달#

App 컴포넌트에서 Hello 컴포넌트를 사용할 때 값을 전달하고 싶을 때

App.js

import React from 'react';import Hello from './Hello';
function App() {    return <Hello name="react" />;}
export default App;

Hello.js

import React from 'react';
function Hello(props) {    return <div>안녕하세요 {props.name}</div>;}
export default Hello;

props 라는 파라미터로 조회, 객체 형태로 전달되므로 props.name 으로 조회 가능

비구조화 할당#

App.js

import React from 'react';import Hello from './Hello';
function App() {    return <Hello name="react" color="red" />;}
export default App;

name , color 두 가지 값을 전달.

import React from 'react';
function Hello(props) {    return <div style={{color: props.color}}>안녕하세요 {props.name}</div>;}
export default Hello;

color: props.color 는 객체이므로 {} 로 한 번 감싸고, 이 객체가 JS 값이므로 {} 로 한번 더 감싼다.

두 가지 값을 전달할 때 비구조화 할당으로 간결하게 작성이 가능하다.

import React from 'react';
function Hello({color, name}) {    return <div style={{color}}>안녕하세요 {name}</div>;    // color: color -> color 로 작성 가능}
export default Hello;

200313

2020년 3월 13일 · 약 9분

Younho Choo

younho9

React-Native 실행 환경설정#

맥(Mac)에 react native 개발 환경 구축하기

이 블로그의 설정 방법을 따라가면서 React-Native 실행환경을 설정했다.

  ![2020-03-13-200313-image-0](./images/2020-03-13-200313-image-0.png)
  <br />


  ![2020-03-13-200313-image-1](./images/2020-03-13-200313-image-1.png)
  <br />

성공!

JavaScript 문법#

삼항연산자#

condition ? true : false

한 줄이 너무 길 때

let text = array.length === 0 ? `배열이 비어있다.` : `배열이 비어있지 않다`;

Truthy and Falsy#

undefined 와 null 은 모두 false 로 간주됨.

Falsy 한 값

undefined
null
0
NaN
false

이 외에는 모두 true 로 간주됨

! , !! 를 활용해 Falsy 한 값과 Truthy 한 값을 한번에 처리할 수 있음

단축 평가 논리 계산법#

A && B 연산자를 사용할 때 A가 Truthy 한 값이라면, B가 결과값이 되고, Falsy 한 값이라면, A가 출력된다.

console.log(true && 'hello'); // helloconsole.log(false && 'hello'); // falseconsole.log('hello' && 'bye'); // byeconsole.log(null && 'hello'); // nullconsole.log(undefined && 'hello'); // undefinedconsole.log('' && 'hello'); // ''console.log(0 && 'hello'); // 0console.log(1 && 'hello'); // helloconsole.log(1 && 1); // 1

A || B 연산자는 만약 A가 Truthy 한 값이라면, A가 결과값이 되고, Falsy 한값이라면 B가 출력된다.

console.log(true || 'hello'); // trueconsole.log(false || 'hello'); // helloconsole.log('hello' || 'bye'); // helloconsole.log(null || 'hello'); // helloconsole.log(undefined || 'hello'); // undefinedconsole.log('' || 'hello'); // helloconsole.log(0 || 'hello'); // helloconsole.log(1 || 'hello'); // 1console.log(1 || 1); // 1

함수의 기본 파라미터#

파라미터에서 = 기호를 사용해 기본값을 설정할 수 있다.

function calculateCircleArea(r = 1) {    return Math.PI * r * r;}
const area = calculateCircleArea();console.log(area); // 3.141592653589793

조건문 더 스마트하게 쓰기#

특정 값이 여러 값 중 하나인지 확인해야 할 때

function isAnimal(text) {    return (        text === '고양이' || text === '개' || text === '거북이' || text === '너구리'    );}
console.log(isAnimal('개')); // trueconsole.log(isAnimal('노트북')); // false

배열의 includes 함수를 사용

function isAnimal(name) {    const animals = ['고양이', '개', '거북이', '너구리'];    return animals.includes(name);}
console.log(isAnimal('개')); // trueconsole.log(isAnimal('노트북')); // false

화살표 함수 사용

const isAnimal = (name) => ['고양이', '개', '거북이', '너구리'].includes(name);
console.log(isAnimal('개')); // trueconsole.log(isAnimal('노트북')); // false

값에 따라 다른 결과물을 반환해야 할 때

function getSound(animal) {    if (animal === '개') return '멍멍!';    if (animal === '고양이') return '야옹~';    if (animal === '참새') return '짹짹';    if (animal === '비둘기') return '구구 구 구';    return '...?';}

switch 사용

function getSound(animal) {    switch (animal) {        case '개':            return '멍멍!';        case '고양이':            return '야옹~';        case '참새':            return '짹짹';        case '비둘기':            return '구구 구 구';        default:            return '...?';    }}
console.log(getSound('개')); // 멍멍!console.log(getSound('비둘기')); // 구구 구 구

객체 활용

function getSound(animal) {    const sounds = {        개: '멍멍!',        고양이: '야옹~',        참새: '짹짹',        비둘기: '구구 구 구',    };    return sounds[animal] || '...?';}
console.log(getSound('개')); // 멍멍!console.log(getSound('비둘기')); // 구구 구 구

값에 따라 다른 코드 구문을 실행할 때

function makeSound(animal) {    const tasks = {        개() {            console.log('멍멍');        },        고양이() {            console.log('고양이');        },        비둘기() {            console.log('구구 구 구');        },    };    if (!tasks[animal]) {        console.log('...?');        return;    }    tasks[animal]();}
makeSound('개');makeSound('비둘기');

비구조화 할당 (구조분해) 문법#

비구조화 할당#

const object = {a: 1, b: 2};
const {a, b} = object;
console.log(a); // 1console.log(b); // 2

함수의 파라미터

const object = {a: 1, b: 2};
function print({a, b}) {    console.log(a);    console.log(b);}
print(object);

비구조화 할당시 기본값 설정#

const object = {a: 1};
const {a, b = 2} = object;
console.log(a); // 1console.log(b); // 2

함수의 파라미터

const object = {a: 1};
function print({a, b = 2}) {    console.log(a);    console.log(b);}
print(object);// 1// 2

비구조화 할당시 이름 바꾸기#

const animal = {    name: '멍멍이',    type: '개',};
const nickname = animal.name;
console.log(nickname); // 멍멍이

animal.name 값을 nickname 값에 담고 있다. 이를 비구조화 할당을 사용한다면,

const animal = {    name: '멍멍이',    type: '개',};
const {name: nickname} = animal;console.log(nickname);

: 문자를 사용해서 이름을 바꿔줄 수 있다.

배열 비구조화 할당#

const array = [1, 2];const [one, two] = array;
console.log(one);console.log(two);

배열 안에 있는 원소를 다른 이름을 새로 선언해주고 싶을 때 사용하면 유용. 객체 비구조화 할당과 마찬가지로 기본값 지정이 가능.

const array = [1];const [one, two = 2] = array;
console.log(one);console.log(two);

깊은 값 비구조화 할당#

const deepObject = {    state: {        information: {            name: 'younho9',            languages: ['korean', 'english', 'chinese'],        },    },    value: 5,};

여기서 name , languages , value 값을 밖으로 꺼내고 싶을 때

const deepObject = {    state: {        information: {            name: 'younho9',            languages: ['korean', 'english', 'chinese'],        },    },    value: 5,};
const {name, languages} = deepObject.state.information;const {value} = deepObject;
const extracted = {    name,    languages,    value,};
console.log(extracted); // {name: "younho9", languages: Array[3], value: 5}

아래의 코드는 다음과 같다

const extracted = {    name: name,    languages: languages,    value: value,};

다른 방법은

const deepObject = {    state: {        information: {            name: 'younho9',            languages: ['korean', 'english', 'chinese'],        },    },    value: 5,};
const {    state: {        information: {name, languages},    },    value,} = deepObject;
const extracted = {    name,    languages,    value,};
console.log(extracted);

이렇게 하는 방법도 있다.

자바스크립트에서 비동기 처리 다루기#

2020-03-13-200313-image-2

function work() {    const start = Date.now();    for (let i = 0; i < 10000000; i++) {}    const end = Date.now();    console.log(end - start + 'ms');}
work();console.log('다음 작업');

work() 를 수행하는 동안 다음 작업이 진행되지 않는다.

이를 비동기적으로 처리하게 만들고 싶다. → setTImeout() 함수 사용

function work() {    setTimeout(() => {        const start = Date.now();        for (let i = 0; i < 1000000000; i++) {}        const end = Date.now();        console.log(end - start + 'ms');    }, 0);}
console.log('작업 시작!');work();console.log('다음 작업');

먼저 work() 이후의 작업을 실행하고 work() 는 백그라운드에서 실행한다.

만약 비동기적으로 처리하면서 work() 함수가 끝난 이후에 어떤 작업을 처리하게 만들어주고 싶다면, 콜백 함수를 사용할 수 있다.

function work(callback) {    setTimeout(() => {        const start = Date.now();        for (let i = 0; i < 1000000000; i++) {}        const end = Date.now();        console.log(end - start + 'ms');        callback();    }, 0);}
console.log('작업 시작!');work(() => {    console.log('작업이 끝났어요!');});console.log('다음 작업');

work() 가 끝난 뒤에 수행할 함수(작업)를 파라미터로 넘겨준다.

Promise#

그런데 만약 비동기 작업이 많아질 때, 모두 콜백 함수로 처리하면 코드가 난잡해지게된다.

function increaseAndPrint(n, callback) {    setTimeout(() => {        const increased = n + 1;        console.log(increased);        if (callback) {            callback(increased);        }    }, 1000);}
increaseAndPrint(0, (n) => {    increaseAndPrint(n, (n) => {        increaseAndPrint(n, (n) => {            increaseAndPrint(n, (n) => {                increaseAndPrint(n, (n) => {                    console.log('끝!');                });            });        });    });});

이를 위해 만들어진 ES6에 도입된 기능이 Promise 이다.

Promise 는 성공할 수도 있고, 실패할 수도 있다. 성공할 때는 resolve 를 호출해주고, 실패할 때는 reject 를 호출한다.

const myPromise = new Promise((resolve, reject) => {    setTimeout(() => {        resolve(1);    }, 1000);});
myPromise.then((n) => {    console.log(n);});

200311

2020년 3월 11일 · 약 6분

Younho Choo

younho9

객체지향 자바스크립트#

MDN 문서

함수 복습#

함수표현식에서 기명함수와 익명함수

var add = function sum(a, b) {    return a + b;};

여기에서 sum 가 함수 이름, add 이 함수 변수.

함수 이름은 외부 코드에서 접근 불가. (함수 내부의 재귀 호출 or 디버거에서 함수 구분을 위해 사용)

함수선언문은 함수 이름과 함수 변수가 같은 함수 표현식으로 생각하면 된다

함수 객체의 기본 프로퍼티#

아래의 명령어를 실행해서 위에서 정의한 add 함수의 프로퍼티 목록을 볼 수 있다.

console.dir(add);

caller : 해당 함수를 호출한 함수에 대한 참조를 저장. (전역인 경우 null )

function some() {    return foo();}
function foo() {    var a = 3;    return bar();}
function bar() {    return 'caller : ' + bar.caller;}
console.log(foo(bar)); // caller : function foo(func) {...}console.log(bar()); // null (browser에서의 실행 결과)

arguments : 함수를 호출할 때 전달된 인자값.

arguments 객체는 함수 호출 시 전달된 인수들의

function multiply(x, y) {    console.log(arguments);    return x * y;}
multiply(); // {}multiply(1); // { '0': 1 }multiply(1, 2); // { '0': 1, '1': 2 }multiply(1, 2, 3); // { '0': 1, '1': 2, '2': 3 }

__proto__ : 자신의 부모 역할을 하는 프로토타입 객체. 함수 객체의 부모는 Function.prototype 객체

length : 함수 정의 시 작성된 매개변수 갯수

function foo() {}console.log(foo.length); // 0
function bar(x) {    return x;}console.log(bar.length); // 1
function baz(x, y) {    return x * y;}console.log(baz.length); // 2

prototype : 위의 __proto__ 와 다른 프로퍼티로 이 함수가 생성자로 사용될 때이함수를 통해서 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다.

콜백 함수#

개발자는 단지 함수를 등록하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때시스템에서 호출되는 함수. (대표적으로 이벤트 핸들러 처리)

function initTmap() {    var map = new Tmapv2.Map(        'map', // "map" : 지도가 표시될 div의 id        {            center: new Tmapv2.LatLng(37.566481622437934, 126.98502302169841), // 지도 초기 좌표            width: '100%', // map의 width 설정            height: '452px', // map의 height 설정            zoom: 19,        },    );    //다각형    var polygon = new Tmapv2.Polygon({        paths: [            new Tmapv2.LatLng(37.56661, 126.985666),            new Tmapv2.LatLng(37.566595, 126.985985),            new Tmapv2.LatLng(37.566512, 126.986071),            new Tmapv2.LatLng(37.566397, 126.985894),            new Tmapv2.LatLng(37.566395, 126.985664),        ],        fillColor: 'pink',        draggable: true,        map: map,    });}
window.onload = initTmap;

어제 공부했던 Tmap API, 마지막줄의 window.onload = initTmap 로 위에서 정의한 initTmap 함수를 onload 시(웹 페이지의 로딩이 끝나는 시점)에 콜백 함수로 호출하게 된다.

이러한 용도로 사용할 때, 콜백 함수를 간단하게 익명 함수로 사용한다.

<!DOCTYPE html><html>    <body>        <script>            window.onload = function () {                alert('This is the callback function.');            };        </script>    </body></html>

즉시 실행 함수#

함수를 정의함과 동시에 바로 실행하는 함수.

(function (name) {    console.log('This is the immediate function --> ' + name);})('foo');

함수 리터럴을 괄호 () 로 감싸고 함수가 바로 호출될 수 있게 끝에 () 를 추가하고, 이 괄호 안에 인자를 넘길 수 있다.

즉시 실행 함수는 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용할 수있다. (변수들의 유효 범위를 전역이 아니라 내부 함수로 감추는 효과)

즉시 실행함수는 최초 한번만 호출되며 다시 호출할 수 없다.

내부 함수#

함수 내부에 정의된 함수.

클로저 생성이나 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도로 사용

내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근 가능
내부 함수는 일반적으로 자신이 정의된 부모 함수 내부에서만 호출 가능

외부에서 특정 함수 내부의 함수를 호출하는 방법

부모 함수에서 내부 함수를 외부로 리턴. (클로저)

공부는 어떻게?#

구글링#

MDN#

stackoverflow#

디버깅#

JS의 표준#

객체지향 프로그래밍#

메소드 vs 프로토타입#

module vs import#

즉시실행함수와 private#

비동기 프로그래밍#

Github 위키와 이슈#

Javascript#

Type#

함수#

콜백#

회고#

I have done#

feeling#

나의 각오/계획#

Git / Github#

Git에 관하여#

안티 패턴#

Git flow#

커밋 메시지에 대해#

Git 명령어와 동작 원리#

Ajax#

JSON#

JSON API#

JSON.parse()#

JSON.stringify()#

NPM#

검색과 설치#

패키지 목록 보기와 업데이트, 삭제#

React#

React 앱 만들기#

React 앱 실행#

코딩하기#

public 디렉토리 - static 자원이 위치한 곳.#

src 디렉토리 - source 코드가 있는 곳.#

배포하기#

JSX#

Hello World!#

Components 와 props#

React Developer Tools#

컴포넌트 파일로 분리하기#

props 와 state#

TOC 개선#

이벤트 state , props , render() 함수#

동적으로 변수 제어#

React에서 객체 또는 배열 state 변경#

React 입문#

Input 상태 관리하기#

여러 개의 input 상태 관리하기#

useRef 로 특정 DOM 선택하기#

React 공부를 하며 느낀점#

앞으로 ..#

React#

props 를 통해 컴포넌트에게 값 전달하기 (계속)#

defaultProps 로 기본값 설정#

props.children#

조건부 렌더링#

useState 를 통해 컴포넌트에서 바뀌는 값 관리하기#

함수형 업데이트#

React#

React Component 만들기#

JSX#

규칙#

style 과 className#

주석#

props 를 통해 컴포넌트에 값 전달#

비구조화 할당#

React-Native 실행 환경설정#

JavaScript 문법#

삼항연산자#

Truthy and Falsy#

단축 평가 논리 계산법#

함수의 기본 파라미터#

조건문 더 스마트하게 쓰기#

비구조화 할당 (구조분해) 문법#

즉시실행함수와 `private`#

`JSON.parse()`#

`JSON.stringify()`#

`public` 디렉토리 - static 자원이 위치한 곳.#

`src` 디렉토리 - source 코드가 있는 곳.#

`Components` 와 `props`#

`props` 와 `state`#

`TOC` 개선#

이벤트 `state` , `props` , `render()` 함수#

`Input` 상태 관리하기#

여러 개의 `input` 상태 관리하기#

`useRef` 로 특정 DOM 선택하기#

`props` 를 통해 컴포넌트에게 값 전달하기 (계속)#

`defaultProps` 로 기본값 설정#

`props.children`#

`useState` 를 통해 컴포넌트에서 바뀌는 값 관리하기#

`style` 과 `className`#

`props` 를 통해 컴포넌트에 값 전달#