A JavaScript library for building user interfaces: 화면을 만들기 위한 기능들을 모아놓은 것 장점

• 빠른 업데이트와 렌더링 속도: Virtual DOM을 사용하여 Browser DOM을 직접 수정하는 것이 아니라 업데이트할 최소한의 부분만을 찾아서 업데이트 한다
• Component-Based: 레고 블록을 조립하듯 컴포넌트들을 모아서 개발할 수 있다 -> Reusability -> 개발 속도가 빨라진다
• 페이스북에서 만들었기 때문에 하루아침에 사라질 확률이 낮다
• 활발한 지식 공유 & 커뮤니티

  JSX 소개

  A syntax extension to JavaScript: JavaScript + XML/HTML

  const element = <h1>Hello, world!</h1>

  React에서 JSX를 쓰는 것이 필수가 아님

  // JSX를 사용한 경우
  class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
  }
  

ReactDOM.render( document.getElementById('root') );

// JSX를 사용하지 않고 JS를 사용한 경우 class Hello extends React.Component { render() { return React.createElement('div', null, Hello ${this.props.toWhat}); } }

ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('root') );

JSX는 객체를 나타냄

const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

// 위 코드의 결과로 아래와 같은 객체(React elements)가 만들어짐 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };

JSX의 장점
- 간결한 코드
- 가독성 향상 -> 버그를 발견하기 쉬움
- Injection Attack 방어
#### Rendering Elements
Element
- Elements are the smallest building blocks of React Apps.
- React elements are immutable: 생성된 후에는 children이나 attributes를 바꿀 수 없다

// Root DOM node

const element =

Hello, world

리액트는 바뀐 부분만 계산을 해서 해당 부분만 새롭게 랜더링함
#### Components and Props
Components
- 리액트는 component-based library
- react component는 props라는 입력값을 받아서 React element라는 출력값을 낸다
Props
- property를 줄여서 말함
- read-only(값을 변경할 수 없음): All React components must act like pure functions with respect to their props.

// PURE - input을 변경하지 않으며, 같은 input에 대해서 항상 같은 output을 리턴 function sum(a, b) { return a+b; }

// IMPURE - input을 변경함 function withdraw(account, amount) { account.total -= amount; }

Component
- 항상 대문자로 시작해야 함, 소문자로 시작하면 리액트에서는 DOM tag로 인식함
- 최대한 작게 만들어서 재사용성을 높이자
- component 합성: component안에 또 다른 component를 쓸 수 있음
- Function component

function Welcome(props) { return

Hello, {props.name}

- Class component

class Welcome extends React.Component { render() { return

Hello, {props.name}

#### State and Lifecycle
State
- React component에 대한 변경 가능한 데이터
- 사용자가 정의함
- JavaScript의 객체임
- 직접 수정하면 안됨, setState 함수를 통해서만 수정하자

class LikeButton extends React.Component { constructor(props) { super(props);

this.state = {
  liked: false
};

}

render() { if (this.state.liked) { return 'You liked this.'; }

return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

} }

Lifecycle
![React component lifecycle](https://velog.velcdn.com/images/jay_jykim91/post/e3fc63eb-33ca-4bc2-b5b7-aedd21321d48/image.png)
Copyright@Soaple
#### Handling Events

// This binding is necessary to make 'this' work in the callback
this.handleClick = this.handleClick.bind(this);

}

handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); }

render() { return ( {this.state.isToggleOn ? 'ON' : 'OFF'} ) } }

// 또는 class LoggingButton extends React.Component { // This syntax ensures 'this' is bound within handleCllick. // Warning: this is experimental syntax. handleClick = () => { console.log('this is: ', this); }

render() { return ( Click me ); } }

#### Conditional Rendering

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; }

ReactDOM.render ( , document.getElementById('root') );

Inline condition

function MailBox(props) { const unreadMessages = props.unreadMessage; return (

If else condition

render() { const isLoggedIn = this.state.isLoggedIn; return (

null을 리턴하면 렌더링 되지 않음

function WarningBanner(props) { if(!props.warn) { return null; }

return (

#### Lists and Keys
List
- JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것

function NumberList(props) { const numbers = props.numbers; const listItems = number.map((number) =>

{listItems}

const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , documeng.getElementById('root') );

Keys
- 아이템들을 구분하기 위한 고유한 문자열
- key의 값은 해당 element사이에서만 고유한 값이면 된다
key로 값을 사용하는 경우

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>

key로 객체의 ID를 사용하는 경우

const todoItems = todos.map((todo) =>

key로 index를 사용하는 경우 -> index는 고유한 key값은 아님

const todoItems = todos.map((todo, index) => // Only do this if items have no stable IDs

key는 props로 전달되지 않음

const content = posts.map((post) => <Post // 아래에 있는 key는 Post에서 props.key 찍어봐도 안나옴 key={post.id} // 그래서 id를 전달한다 id={post.id} /> );

#### Forms
Controlled Components는 값이 react의 통제를 받는 Input form element를 의미함

handleChange(event) { this.setState({value: event.target.value}); }

handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); }

render() { return (

File input tag는 값을 읽을 수만 있고 통제할 수 없기 때문에 Uncontrolled Components
#### Lifting State Up
Shared State
- state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우
- 하위 컴포넌트들이 각자 state에 데이터를 가지고 있을 필요가 없음
Lifting State Up
- sharing state is accomplished by moving it up to the closest common ancestor of the components that need it
- 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림
#### Composition vs. Inheritance
Composition
- 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것
- Containment: children이라는 prop을 사용해서 조합

function WelcomdDialog() { return ( // 여기서부터

Welcome

Thank you for visiting our spacecraft!

- Specialization: 'WelcomeDialog'는 'Dialog'의 특별한 케이스

npx create-react-app 프로젝트 이름

node_modules 폴더

• 이 프로젝트를 실행할 때 필요한 dependency 모듈들이 모여 있음
• package.json 파일의 'dependencies'에 기록되어 있음 package.json 파일 중 'scripts'
• start: 개발 모드로 프로그램을 실행
• build: 실제 배포 모드로 만들어 줌
• test
• eject: 내부 설정 파일을 꺼내는 역할, 웹페이지나 바벨 설정을 변경하고 싶을 떄 사용

  컴포넌트, JSX

  function App() {
  const name = "Tom";
  const naver = {
    name: "네이버",
    url: "https://naver.com",
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Coding angma</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React~~~~!!
        </a>
      </header>
      <h1
        style={{
          color: "#f0f",
          backgroundColor: "green",
        }}
      >
        Hello, {name}.<p>{2 + 3}</p>
      </h1>
      <a href={naver.url}>{naver.name}</a>
    </div>
  );
  }

  CSS 작성법(module css)

1. inline style 사용

   <h1
    style={{
    color: "#f00",
    borderRight: "12px solid #000",
    marginBottom: "50px",
    opacity: 1,
    }}
   >
    Hello
   </h1>

2. index.css, app.css 파일 사용 이때 단점은 css 파일들이 각 컴포넌트에 종속되는 것이 아니라 html의 header 부분에 들어가서 모든 페이지에 영향을 미치게 됨
3. css module 활용 보통 '컴포넌트이름.module.css'로 파일 생성 동일한 클래스 이름을 사용하더라도 각 컴포넌트 별로 다른 클래스 이름이 생성됨 글로벌 단위가 아닌 컴포넌트 단위로 관리할 수 있어서 편리함 나는 요렇게만 해봤다...

   // jsx파일에는
   import styles from "./Hello.module.css";
   

function Hello() { return (

// module.css파일에는 .box { width: 200px; height: 50px; background-color: blue; }

#### 이벤트 처리(Handling Events)

export default function Hello() { function showName() { console.log("Mike"); } function showAge(age) { console.log(age); } function showText(txt) { console.log(txt); }

return (

#### State, useState
state: 컴포넌트가 가지고 있는 속성값

export default function Hello() { // let name = "Mike"; const [name, setName] = useState("Mike");

return (

#### Props
props로 전달받은 값을 props.age = 100 과 같이 직접적으로 변경 불가능 -> 변경 원한다면 useState 사용해야 함

// App.js function App() { return (

// Hello.js import { useState } from "react"; import UserName from "./UserName";

export default function Hello({ age }) { const [name, setName] = useState("Mike"); const msg = age > 19 ? "성인 입니다." : "미성년자 입니다.";

return (

// userName.js export default function UserName({ name }) { return

Hello, {name}

#### 라우터 구현 react-router-dom

npm install react-router-dom

강의는 v5로 만들어졌는데 현재는 v6가 나와있으니 아래 docs 참고
https://reactrouter.com/docs/en/v6
#### json-server, REST API
json-server: 빠르고 쉽게 rest api를 구축해 줌

npm install -g json-server

json-server --watch 더미데이터 있는 곳 --port 지금 사용하고 있지 않은 포트 json-server --watch ./src/db/data.js --port 3001

REST API
- uri 주소와 method로 CRUD(Create: POST, Read: GET, Update: PUT, Delete: DELETE) 요청을 하는 것
#### useEffect, fetch()로 API 호출
useEffect
- 상태 값이 변경되어 다시 랜더링 됐을 때 호출 됨
- 어떤 상태 값이 바뀌었을 때 동작하는 함수를 만들 수 있음
- 첫 번째 매개변수로 함수를 받음
- 두 번째 매개변수로는 의존성 배열
    - 배열 안에 어떤 것이 변경되었을 때 호출될 지 작성
    - 랜더링 된 후 최초 1번만 호출하고 싶으면 빈 배열 사용

// DayList.js useEffect(() => { fetch("http://localhost:3001/days") .then(res => { return res.json(); }) .then(data => { setDays(data); }); }, []);

// Day.js useEffect(() => { fetch(http://localhost:3001/words?day=${day}) .then(res => { return res.json(); }) .then(data => { setWords(data); }); }, [day]);

#### Custom Hooks
hooks 폴더 만들어서 나만의 hooks를 정리해보면

// useFetch.js import { useEffect, useState } from "react";

export default function useFetch(url) { const [data, setData] = useState([]);

useEffect(() => { fetch(url) .then(res => { return res.json(); }) .then(data => { setData(data); }); }, [url]);

return data; }

// Day.js const words = useFetch(http://localhost:3001/words?day=${day});

// DayList.js const days = useFetch("http://localhost:3001/days");

#### PUT(수정), DELETE(삭제)

// Word.js function toggleDone() { // isDone 수정 fetch(http://localhost:3001/words/${word.id}, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...word, isDone: !isDone, }), }).then(res => { if (res.ok) { setIsDone(!isDone); } }); }

function del() { if (window.confirm("삭제 하시겠습니까?")) { fetch(http://localhost:3001/words/${word.id}, { method: "DELETE", }).then(res => { if (res.ok) { setWord({ id: 0 }); } }); } }

// 단어의 id가 0이면 보이지 않게 if (word.id === 0) { return null; }

#### POST(생성), useHistory()
Chrome 개발자 도구에서 Network를 'Online'에서 'Slow 3G'로 바꿔서 느린 환경을 가정하여 테스트 해볼 수 있음

// Day.js {words.length === 0 && Loading...}

// CreateWord.js if (!isLoading) { setIsLoading(true); fetch(http://localhost:3001/words/, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ day: dayRef.current.value, eng: engRef.current.value, kor: korRef.current.value, isDone: false, }), }).then(res => { if (res.ok) { alert("생성이 완료 되었습니다"); history.push(/day/${dayRef.current.value}); setIsLoading(false); } });

<button style={{ opacity: isLoading ? 0.3 : 1, }}

{isLoading ? "Saving..." : "저장"}

#### 타입스크립트 적용
create-react-app으로 만든 프로젝트에 typescript를 추가하려면

npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

.js 파일은 .ts로, .jsx 파일은 .tsx 파일로 변경

// Word.tsx interface IProps { word: IWord; }

export interface IWord { day: string; eng: string; kor: string; isDone: boolean; id: number; }

export default function Word({ word: w }: IProps) {}

```

참고자료

Reactjs 강좌 by 코딩앙마

DOM(Document Object Model): HTML 문서의 각 요소들을 트리 형식으로 표현해 줌

const pList = document.getElementsByTagName('p');
for(p of pList) {
  p.style.fontSize = '20px'
}
// 이때 pList는 배열은 아니고 iterable
// 그래서 for ... of ... 사용
document.querySelectorAll('.link');
document.querySelector('#first');
document.querySelector('h3:nth-of-type(2)').style.color = 'red';

부모, 자식, 형제 노드

document.querySelectorAll('p');
// 반환값이 NodeList

document.getElementsByTagName('p');
// 반환값이 HTMLCollection

// NodeList, HTMLCollection 둘다 유사배열 객체 이면서 iterable 임
// for ... of 로 순회함
// 이때 실시간으로 p태그를 하나 추가 해보면
// NodeList에는 반영이 안되지만 HTMLCollection에는 반영이 됨

const red = document.getElementById('red');
red.parentNode;
// 부모 노드를 반환함
red.parentElement;
// 부모 노드 중 요소 노드만 반환
// 요소 노드는 html 태그로 이루어진 요소

const ul = document.getElementById('color');
ul.childNodes;
// NodeList - li 말고도 주석을 포함한 모든 텍스트(줄바꿈 포함)를 반환
ul.children;
// HTMLCollection - li만 반환
ul.firstChild;
ul.lastChild;
// 위에 두개 보다는 아래 두개를 더 많이 사용함
ul.firstElementChild;
ul.lastElementChild;

const blue = document.getElementById('blue');
blue.previousSibling;
blue.nextSibling;
// 위가 아니라 아래를 사용한다
blue.previousElementSibling;
blue.nextElementSibling;

보통 요소 노드만 뽑아서 사용한다

노드 생성, 추가, 복제, 삭제

const blue = document.getElementById('blue');
const blueTextNoe = blue.firstChild;
blueTextNode.nodeName; // '#text'
blueTextNode.nodeType; // 3
blueTextNode.nodeValue; // 'Blue'
// 텍스트 밸류를 가지고 있을 때만 nodeValue를 이용하여 수정 가능
blueTextNode.nodeValue = '파랑';
// 또는 innerHTML로 수정

const newLi = document.createElement('li');
newLi.innerHTML = 'green';
const ul = document.getElementById('color');
ul.appendChild(newLi);

const newLi2 = document.createElement('li');
const newText = document.createTextNode('pink');
newLi2.appendChild(newText);
ul.appendChild(newLi2);

const newLi3 = document.createElement('li');
const newText3 = document.createTextNode('orange');
ul.inserBefore(newLi3, red);

// 기존 노드를 사용하면 노드가 이동함
ul.appendChild(red); // red가 맨 아래로 이동

// cloneNode
const newOrange = newLi3.cloneNode(); // li만 복사 됨
const newOrange2 = newLi2.cloneNode(true); // 안에 있는 요소(텍스트 등)까지 복사

// removeChild
ul.removeChild(red);
ul.removeChild(ul.firstElementChild);

CSS style, class 제어

const box = document.getElementById('box');
box.style.backgroundColor = 'red';

box.className = 'bg-red';
box.className = 'bg-red txt-pink';

box.classList.add = 'txt-white';
box.classList.remove = 'txt-white');
box.classList.replace('bg-red', 'bg-blue');
box.classList.toggle('bg-blue');

이벤트 핸들러(Event Handler)

// 1
<button onclick="alert('click')"> 클릭1 </button>

// 2
<button onclick='sayHello()'> 클릭2 </button>
<script>
  function sayHello() {
    alert('hello');
  }
</script>

// 3
<button id='btn'> 클릭3 </button>
<script>
  const btn = document.getElementById('btn');
  btn.onclick = sayHello;
</script>

// 4
<button id='btn2'> 클릭4 </button>
<script>
  const btn = document.getElementById('btn2');
  btn.addEventListener('click', sayHello);
</script>

// removeEventListener도 있음

event 종류

• dbclick(더블 클릭), keydown, keyup
• focus, focusin <-> blur
• mousemove -> clientX, clientY 이용가능
• resize -> window.innerHeight, innerWidth 이용가능

이벤트 버블링, 이벤트 위임

이벤트 버블링: 자식 요소에 발생한 이벤트는 부모 요소에 전파된다

// 대부분의 이벤트는 버블링이 일어나나, 
// focus, blur, mouseenter, mouseleave는 그렇지 않음
// 인위적으로 막고 싶다면
event.stopPropagation();

이벤트 위임: 자신에게 발생한 이벤트를 다른 요소에서 처리하는 것

// li를 클릭할 때 효과를 주고싶으면 모든 li에게 addEventListener를 걸 것이 아니라
// li를 감싸고 있는 ol 또는 ul전체에 addEventListener를 걸어라
// 이벤트가 위임되기 때문에 똑같이 적용됨
event.target; // 이벤트를 발생시키는 요소
event.currentTarget; // 이벤트 헨들러가 등록된 요소

참고자료

JavaScript 활용편 DOM&EVENT by 코딩앙마 mdn web docs_Node.nodeType

1. 평소에 사용하면서도 애매하게 알고 있었던 것
2. 있다는 건 알고 있지만 사용하려고 하면 맨날 오류나서 결국 사용하지 못하는 개념들

How to use script tag

1. head 태그 안에 그냥 script 넣기 parsing HTML -> fetching JS, executing JS -> parsing HTML

• JS 파일이 클 경우 나머지 HTML을 parsing하기 까지 오래 걸림

  <head>
    <script src="main.js"></script>
  </head>

2. body 태그 맨 끝에 그냥 script 넣기 parsing HTML(끝까지) -> fetching JS, executing JS

• 웹사이트가 js파일에 많이 의존적이라면, 사용자가 의미있는 콘텐츠를 보기 위해 시간이 오래 걸림

  <body>
    ...
    <script src="main.js" async></script>
  </body>

3. head 태그 안에 async로 script 넣기 parsing HTML 하면서 동시에 fetching JS, fetching JS가 끝나면 HTML 받아오던거 멈추고 -> executing JS -> parsing HTML

• 2번 방법 보다는 fetching JS가 병렬적으로 일어나기 때문에 fetching JS하는 시간을 절약할 수 있음
• 하지만 HTML을 전부 받아오기 전에 js가 실행되기 때문에 js가 실행되는데 필요한 요소들이 아직 준비가 안되어 있을 수 있음
• 여러 js파일을 모두 async로 받아올 경우, 다운로드가 완료된 js파일 순서에 따라 실행되기 때문에 js파일들 간의 의존적인 기능이 있다면 제대로 작동하지 않을 수 있음

  <head>
    <script src="main.js" async></script>
  </head>

4. head 태그 안에 defer로 script 넣기 parsing HTML 하면서 동시에 fetching JS, parsing HTML이 모두 끝난 후 -> executing JS

• fetching JS와 parsing HTML이 병렬적으로 진행되어 시간도 아끼고, HTML이 모두 준비된 후에 js를 실행할 수 있음

  <head>
    <script src="main.js" defer></script>
  </head>

Class

Getter and Setter

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    // 위에 있는 this.age;는 메모리를 읽어오는 것이 아니라
    // 이 getter를 호출하게 됨
    return this._age;
  }

  // setter를 정의하는 순간 위에서 = age;를 호출할 때(값을 할당할 때),
  // 메모리에 값을 할당하는 게 아니라 이 setter를 호출하게 됨
  // 이 말은, setter 안에서 전달된 value를 age에 할당 할 때,
  // 메모리에 값을 할당하는게 아니라 setter를 호출하게 됨. 그러면 무한 반복
  // 따라서 getter와 setter에 쓰여지는 변수는 이름을 다르게 쓴다
  set age(value) {
    // 
    this._age = value;
  }
}

Public field and Private field

class Experiment {
  publicField = 2;
  #privateField = 0;
}

const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined

Static properties and methods

class Article {
  // object에 상관 없이 class 자체에 연결되어 있음
  static publisher = 'Dream Coding';
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);
console.log(article1.publisher); // undefined
console.log(Article.publisher); // Dream Coding
Article.printPublisher(); // Dream Coding

Object

for ... in vs. for ... of

// for (key in obj)
for (key in ellie) {
  console.log(key); // ellie 안에 있는 모든 키 출력
}

// for (value of iterable)
const array = [1, 2, 3];
for (value of array) {
  console.log(value);
}

Cloning

const user = { name: 'ellie', age: 20 }
const user2 = user;
// user는 레퍼런스가 들어있는 메모리를 가리키고 있고, 그 레퍼런스는 데이터를 가지고 있는 오브젝트를 가리킨다
// user2의 변수는 user안에 있는 레퍼런트의 값이 동일한 레퍼런스가 들어있음, 따라서 똑같은 오브젝트를 가르킴

user2.name = 'coder';
console.log(user); // { name: 'coder', age: 20 }

// 위가 아니라 진짜 복사를 하고 싶다면
// old way
const user3 = {};
for (key in user) {
  user3[key] = user[key];
}
// new way
const user4 = {};
Object.assign(user4, user); // Object.assign(target, source);
// 위 두줄을 한줄로 하면
const user4 = Object.assign({}, user);
// 여러 오브젝트를 줄 수 있음
const mixed = Object.assign({}, fruit1, fruit2);
// 동일한 키가 있다면 뒤에 있는 값이 계속 덮어 씌움

JSON

Object to JSON

// stringify converts a JavaScript value to a JavaScript Object Notation(JSON) string.
let json = JSON.stringify(true);
console.log(json); // true

json = JSON.stringify(['apple', 'banana']);
console.log(json); // ["apple", "banana"] -> "" 사용은 JSON의 규격 사항

const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${this.name} can jump!`);
  }
};
json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori", "color":"white", "size":null,"birthDate":"2022-01-10어쩌구"}
// jump 함수는 제외됨, 데이터가 아니기 때문
// symbol같이 JS에만 있는 특별한 데이터도 포함되지 않음

json = JSON.stringify(rabbit, ["name", "color"]);
console.log(json); // {"name":"tori", "color":"white"}

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return value;
  // 결과는 아래 이미지
});

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'ellie': value;
});
console.log(json); // {"name":"ellie", "color":"white", "size":null,"birthDate":"2022-01-10어쩌구"}

JSON to Object

// parse converts a JavaScript Object Notation(JSON) string into an object.
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
// {name: "tori", color: "white", size: null, birthDate: "2022-01-10어쩌구"}
// stringify를 할 때 함수는 변환되지 않기 때문에 parse한 결과에서도 함수가 없다
rabbit.jump(); // tori can jump!
obj.jump(); // jump is not a function

console.log(rabbit.birthDate.getData()); // 10
// 값이 그냥 string이기 때문.. rabbit에 있던 birthDate은 데이트라는 오브젝트 였었다
console.log(obj.birthDate.getData()); // getDate is not a function

// 세밀하게 parse 하고 싶을 때
const obj = JSON.parse(json, (key, value) => {
  return key === 'birthDate' ? new Date(value) : value;
}
console.log(obj.birthDate.getDate); // 10

비동기 처리_Promise 사용 예시

class UserStorage {
  loginUser(id, password) {
      return new Promise((resolve, reject) => {
            setTimeout(() => {
            if (
              (id === 'ellie' && password === 'dream') ||
              (id === 'coder' && password === 'academy')
            ) {
              resolve(id);
            } else {
              reject(new Error('not found');
            }
            }, 2000);
      }
  });


  // 사용자의 데이터를 받아서 그 정보를 바탕으로 백엔드에 해당 사용자의 역할을 요청해서 받아오는 api
  getRoles(user) {
    return new Promise((resolve, reject) => {
            setTimeout(() => {
          if (user === 'ellie') {
            resolve({ name: 'ellie', role: 'admin' });
          } else {
            reject(new Error('no access');
          };
          }, 1000);
    }); 
  } 
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

userStorage
// 로그인을 하고
.loginUser(id, password)
// 로그인에 성공하면 그 유저를 이용해서 역할을 받아오고
.then(user => userStorage.getRoles)
// 그것에 성공하면 alert를 띄운다
.then(user => alert(
  `Hello ${user.name}, you have a ${user.role} role`
))
.catch(console.log);

비동기 처리_Async, await 사용 예시

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
  // await을 쓰면 delay가 진행되는 3초동안 기다려줌
  await delay(3000);
  // throw 'error';
  return '🍎';
}

async function getBanana() {
  await delay(3000);
  return '🍌';
}
// getBanana를 promise로 써보면 아래와 같이 쓸 수 있다
// 하지만 위와 같이 동기적인 코드를 쓰는 것처럼 하면 쉽게 이해할 수 있음
function getBanana() {
  return delay(3000);
  .then(() => '🍌');
}

// 아래와 같이 하면 콜백 지옥 비슷해짐
function pickFruits() {
  return getApple()
  .then(apple => {
    return getBanana()
    .then(banana => `${apple} + ${banana}`)
  })
}

// 위 코드를 async를 써서 해보자
async function pickFruits() {
  // try, catch로 에러처리 해줄 수도 있음
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`;
}
// 여기서 문제는 사과를 받는데 3초가 지나고 또 바나나를 받는데 3초가 지남
// apple과 banana 사이에는 서로 연관이 없기 때문에 서로를 기다릴 필요가 없다

// 따라서 아래와 같이 해볼 수 었음
// const를 만드는 순간 코드는 실행이 된다, 따라서 미리 만들어두고 await을 건다
// 병렬적으로 실행 가능, 하지만 코드가 정말 더러워짐
// 아래 promise api를 이용해봐
async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();

  const apple = await applePromise();
  const banana = await bananaPromise();
  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

// Useful Promise APIs
function pickAllFruits() {
  // 프로미스 배열을 전달해주면 모든 프로미스들이 병렬적으로 받을 때까지 모아주는 아이
  return Promise.all([getApple(), getBanana()])
    // 이 경우 결과가 배열로 받아짐
  .then(fruits => fruits.join(' + ');
}
pickAllFruits().then(console.log); // 🍎 + 🍌

// 어떤 과일이던 먼저 따지는 과일 받아오기
function pickOnlyOne() {
  // 배열에 전달 된 프로미스 중에서 값을 가장 먼저 리턴하는 아이만 전달되어짐
  return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);

Nullish Coalescing operator

leftExpr ?? rightExpr - 왼쪽 코드가 null, undefined인 경우에만 오른쪽 코드가 실행된다 leftExpr || rightExpr - 왼쪽 코드가 falsy인 경우에만 오른쪽 코드가 실행된다

// Bad
function printMessage(text) {
  let message = text;
  if (text == null || text == undefined) {
    message = 'Nothing to display';
  }
  console.log(message);
}

// Good
function printMessage(text) {
  // text가 있다면 그대로 쓰고 없으면 'Nothing to display'
  const message = text ?? 'Nothing to display';
  console.log(message);
}

printMessage('Hello'); // Hello
printMessage(undefined); // Nothing to display
printMessage(null); // Nothing to display

// 위 함수를 default 값을 준다면?
// undefined인 경우에만 default값이 할당 됨
function printMessage(text = 'Nothing to display') {
  console.log(text);
}

printMessage('Hello'); // Hello
printMessage(undefined); // Nothing to display
printMessage(null); // Null

Optional Chaining

const bob = {
  name: 'Julia',
  age: 20
};
const anna = {
  name: 'Julia',
  age: 20,
  job: {
    title: 'Software Engineer',
  }
};

// Bad
function displayJobTitle(person) {
  if (person.job && person.job.title) {
    console.log(person.job.title);
  }
}

// Good
function displayJobTitle(person) {
  // job이 있다면 그 job 안에 title이 있는지 아닌지 확인
  if (person.job?.title) {
    console.log(person.job.title);
  }
}

function displayJobTitle(person) {
  const title = person.job?.title ?? 'No Job Yet';
  console.log(title);
}

AJAX_요즘 사용 방식

fetch('https://codingapple1.github.io/price.json')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Error 400 or Error 500')
    }
    return response.json()
  })
  .then((result) => {
    console.log(result);
  })
  .catch(() => {
    console.log('에러남');
  })

OR

async function fetchingData() {
  let response = await fetch('https://codingapple1.github.io/price.json');
  if (!response.ok) {
    throw new Error('Error 400 or Error 500');
  }
  let result = await response.json();
  console.log(result);
}
fetchingData().catch(() => {
  console.log('에러남');
})

참고자료

Youtube 자바스크립트 기초 강의 by 드림코딩

Description

In this kata you are required to, given a string, replace every letter with its position in the alphabet. If anything in the text isn't a letter, ignore it and don't return it. "a" = 1, "b" = 2, etc. Example alphabetPosition("The sunset sets at twelve o' clock.") Should return "20 8 5 19 21 14 19 5 20 19 5 20 19 1 20 20 23 5 12 22 5 15 3 12 15 3 11" ( as a string )

My answer

function alphabetPosition(text) {
  let alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('');

  let result = text.toLowerCase().split('').map(function(letter) {
    return alphabets.includes(letter) ? alphabets.indexOf(letter) + 1 : ' '
  })

  return result.filter(a => a != ' ').join(' ');
}

Other solutions

function alphabetPosition(text) {
  var result = "";
  for (var i = 0; i < text.length; i++){
    var code = text.toUpperCase().charCodeAt(i)
    if (code > 64 && code < 91) result += (code - 64) + " ";
  }

  return result.slice(0, result.length-1);
}

Wrap up

charCodeAt method

The charCodeAt() method returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.

String.charCodeAt(index)

Parameters

index

An integer greater than or equal to 0 and less than the length of the string. If index is not a number, it defaults to 0

Return value

A number representing the UTF-16 code unit value of the character at the given index. If index is out of range, charCodeAt() returns NaN.

Examples

// The following example returns 65, the Unicode value for A.

'ABC'.charCodeAt(0)  // returns 65

source: mdn web docs

Description

Write a program that will calculate the number of trailing zeros in a factorial of a given number. N! = 1 * 2 * 3 * ... * N Be careful 1000! has 2568 digits... For more info, see: http://mathworld.wolfram.com/Factorial.html Examples zeros(6) = 1 // 6! = 1 * 2 * 3 * 4 * 5 * 6 = 720 --> 1 trailing zero zeros(12) = 2 // 12! = 479001600 --> 2 trailing zeros Hint: You're not meant to calculate the factorial. Find another way to find the number of zeros.

Other Solution

function zeros (n) {
  let result = 0;

  while(n > 0){
    n = Math.floor(n/5);
    result += n
  }

  return result;
}

Comments

5 comes from the prime dividers To have a trailing zero, the number have to be divided by 10. Same as divided by 2 and 5. In a factorial computation, there will be a lot more of *2 that *5, so we count how many times the final number can be divided by 5 and we have the number of times it's dividable by 10.

source: wikipedia_Trailing zero

Description

Count the number of Duplicates Write a function that will return the count of distinct case-insensitive alphabetic characters and numeric digits that occur more than once in the input string. The input string can be assumed to contain only alphabets (both uppercase and lowercase) and numeric digits. Example "abcde" -> 0 # no characters repeats more than once "aabbcde" -> 2 # 'a' and 'b' "aabBcde" -> 2 # 'a' occurs twice and 'b' twice (b and B) "indivisibility" -> 1 # 'i' occurs six times "Indivisibilities" -> 2 # 'i' occurs seven times and 's' occurs twice "aA11" -> 2 # 'a' and '1' "ABBA" -> 2 # 'A' and 'B' each occur twice

My answer

function duplicateCount(text){
  let inputArr = text.toLowerCase().split('');
  let resultObj = {};

  for(let i = 0; i < inputArr.length; i++) {
    (resultObj.hasOwnProperty(inputArr[i])) ? 
      resultObj[inputArr[i]].count += 1 : resultObj[inputArr[i]] = { count: 1 }
  }

  let result = 0;

  for(let key in resultObj) {
    if (resultObj[key].count > 1) {
      result += 1;
    }
  }

  return result
}

Other solutions

function duplicateCount(text){
  return text.toLowerCase().split('').filter(function(val, i, arr){
    return arr.indexOf(val) !== i && arr.lastIndexOf(val) === i;
  }).length;
}

Description

Given two arrays of strings a1 and a2 return a sorted array r in lexicographical order of the strings of a1 which are substrings of strings of a2. Example 1: a1 = ["arp", "live", "strong"] a2 = ["lively", "alive", "harp", "sharp", "armstrong"] returns ["arp", "live", "strong"] Example 2: a1 = ["tarp", "mice", "bull"] a2 = ["lively", "alive", "harp", "sharp", "armstrong"] returns [] Notes: Arrays are written in "general" notation. See "Your Test Cases" for examples in your language. In Shell bash a1 and a2 are strings. The return is a string where words are separated by commas. Beware: r must be without duplicates.

My answer

function inArray(array1,array2){
  let result = [];

  for(let i = 0; i < array1.length; i++) {
    for(let j = 0; j < array2.length; j++) {
      if (array2[j].includes(array1[i])) {
        result.push(array1[i])
      }
    }
  }

  return [...new Set(result)].sort()
}

Other solutions

function inArray(arr1, arr2) {
  return arr1.filter(function(needle) {
    return arr2.some(function(haystack) {
      return haystack.indexOf(needle) > -1;
    });
  }).sort();
}

function inArray(array1,array2){
  return array1
    .filter(a1 => array2.find(a2 => a2.match(a1)))
    .sort()
}

Description

Your task, is to create NxN multiplication table, of size provided in parameter. for example, when given size is 3: 1 2 3 2 4 6 3 6 9 for given example, the return value should be: [[1,2,3],[2,4,6],[3,6,9]]

My answer

multiplicationTable = function(size) {
  let result = [];

  for (let i = 1; i <= size; i++) {
    let pushedArr = [];
    for (let m = 1; m <= size; m++) {
      pushedArr.push(m * i);
    }
    result.push(pushedArr);
  }
  return result;
}

Other solutions

multiplicationTable = function(size) {
  var result = [];

  for (var i = 0; i < size; i++) {
    result[i] = [];
    for(var j = 0; j < size; j++) {
      result[i][j] = (i + 1) * (j + 1);
    }
  }

  return result
}

multiplicationTable = function(size) {

  return Array.apply(null, new Array(size)).map(function(val, i) {
    return Array.apply(null, new Array(size)).map(function(val, j) {
      return (i+1) * (j+1);
    });
  });
}

Wrap up

apply function

func.apply(thisArg, [argsArray])

Parameters

thisArg

The value of this provided for the call to func.

argsArray(optional)

An array-like object, specifying the arguments with which func should be called, or null or undefined if no arguments should be provided to the function.

Return value

The result of calling the function with the specified this value and arguments.

Examples

const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

// min/max number in an array
const numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
let max = Math.max.apply(null, numbers);
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

let min = Math.min.apply(null, numbers);

source: mdn web docs

Description

ISBN-10 identifiers are ten digits long. The first nine characters are digits 0-9. The last digit can be 0-9 or X, to indicate a value of 10. An ISBN-10 number is valid if the sum of the digits multiplied by their position modulo 11 equals zero. For example: ISBN : 1 1 1 2 2 2 3 3 3 9 position : 1 2 3 4 5 6 7 8 9 10 This is a valid ISBN, because: (11 + 12 + 13 + 24 + 25 + 26 + 37 + 38 + 39 + 910) % 11 = 0 Examples 1112223339 --> true 111222333 --> false

My answer

function validISBN10(isbn) {
  if (!(/^\d{9}[\d|X]$/.test(isbn))) { return false }

  let sum = 0;
  let arr = [...isbn];
  for (let i = 0; i < arr.length; i++) {
    sum += (arr[i] === 'X') ? (10 * (i+1)) : (arr[i] * (i+1))
  }
  return (sum % 11 === 0) ? true : false;
}

Other solutions

function validISBN10(isbn) {
  var len = isbn.length;

  if (len !== 10) {
      return false;
  }

  return isbn.split('')
      .map(function (num, index) {
         return (num === 'X' && index === len - 1 ? 10 : parseInt(num, 10)) * (index + 1); 
      })
      .reduceRight(function (a, b) {
          return a + b;
      }, 0) % 11 === 0;
}

Description

When working with color values it can sometimes be useful to extract the individual red, green, and blue (RGB) component values for a color. Implement a function that meets these requirements: Accepts a case-insensitive hexadecimal color string as its parameter (ex. "#FF9933" or "#ff9933") Returns a Map<String, int> with the structure {r: 255, g: 153, b: 51} where r, g, and b range from 0 through 255 Note: your implementation does not need to support the shorthand form of hexadecimal notation (ie "#FFF") Example "#FF9933" --> {r: 255, g: 153, b: 51}

My answer

function hexStringToRGB(hexString) {
  let array = [hexString.slice(1,3), hexString.slice(3,5), hexString.slice(5,7)];
  let result = {}

  result.r = parseInt(array[0], 16);
  result.g = parseInt(array[1], 16);
  result.b = parseInt(array[2], 16);

  return result;
}

Other solutions

const hexStringToRGB = str => {
  const [r, g, b] = str.match(/\w{2}/g).map(x => parseInt(x, 16));
  return { r, g, b };
}

1. 평소에 사용하면서도 애매하게 알고 있었던 것
2. 있다는 건 알고 있지만 평소에 잘 사용하지 않아 이번 기회에 다시 한번 짚고 가는 것

CSS 구문

selector { property: value }

h1 { 
  color: yellow 
}

CSS 적용

1. Inline html 파일 안에서 해당 요소에 직접 스타일 적용

   <div style="color:red;"> 내용 </div>

2. Internal html 파일 안에서 head 태그 안에 style 태그를 활용하여 스타일 적용

   <style> div {color: red;} </style>

3. External 외부 css 파일에 스타일을 작성하고 html에서 아래와 같이 연결하여 스타일 적용

   <link rel="stylesheet" href="css/style.css">

4. Import css 파일 내에서 다른 css 파일을 불러와서 적용하는 방식

   @import url("css/style2.css");

선택자

1. 요소 선택자(태그 선택자)

   h1 { color: yellow; }

2. class 선택자

   css 파일
   .foo { font-size: 30px; }
   

html 파일

...

html 파일

...

/* 다중 class */ .foo.bar { ... }

/* id와 class의 조합 */ #foo.bar { ... }

5. 속성 선택자

css 파일 p 태그 중 class나 Id속성을 가지고 있는 요소 p[class] { color: silver; } p[class][id] { text-decoration: underline; }

p 태그 중 class가 'foo'인 요소, Id가 'title'인 요소 p[class="foo"] { color: silver; } p[id="title"] { text-decoration: underline; }

html 파일

Hello

CSS

HTML

css 파일 p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 / p[class^="color"] { font-style: italic; } / 1, 3번째 요소 / p[class$="color"] { font-style: italic; } / 2번째 요소 / p[class="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

html 파일

red

blue

rainbow

#### 가상 클래스(pseudo class)
미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자
#### 속성 - 단위 - 상대 길이
%: 부모의 값에 대해서 백분율로 환산한 크기
em: font-size를 기준으로 값을 환산, 소수점 3자리까지 표현 가능
rem: root의 font-size를 기준으로 값을 환산
vw: viewport의 width값을 기준으로 1%의 값으로 계산
#### 속성 - 색상
컬러 키워드: ex) yellow, red
16 진법 
- 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타내며, 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미함 ex) #RRGGBB
- 6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있음 ex) #aa11cc 는 #a1c로 축약
RGB( ): RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의하며, 0~255의 정수로 된 값을 지정. 0 → 255는 검정 → 흰색으로 값의 변화를 나타냄
RGBA( ): 기존 RGB에서 A값이 추가된 형태. rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 나타냄. A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기하며, 0 → 1은 투명 → 불투명으로 값의 변화를 나타냄 ex) rgba( 0, 0, 0, 0)는 투명한 색상
#### background 속성

#### 타이포그래피의 구조
em: 폰트의 전체 높이
ex(=x-height): 해당 폰트의 영문 소문자 x의 높이
Baseline: 소문자 x를 기준으로 하단의 라인
Descender: 소문자에서 baseline 아래로 쳐지는 영역, 서체에 따라 descender의 길이가 다름(g,j,p,q,y)
Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역(b,d,h,l)
![structure of typography](https://velog.velcdn.com/images/jay_jykim91/post/f10d7838-efe6-42b6-9766-49e57481d65c/image.png)
#### webfont 속성
@font-face: 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성

#### 단어 관련 속성
white-space: 요소 안에 공백을 어떻게 처리할지 지정하는 속성
- normal: 공백과 개행을 무시, 필요한 경우에 자동 줄바꿈 O, 기본 값
- nowrap: 공백과 개행을 무시, 자동 줄바꿈 X
- pre: 공백과 개행을 표현, 자동 줄바꿈 X
- pre-line: 공백은 무시, 개행만 표현. 필요한 경우에 자동 줄바꿈 O
- pre-wrap: 개행은 무시, 공백만 표현. 필요한 경우 자동 줄바꿈 O
#### clear 속성_레이아웃
요소를 floating 된 요소의 영향에서 벗어나게 하는 속성
- none: 양쪽으로 floating 요소를 허용(기본값)
- left: 왼쪽으로 floating 요소를 허용하지 않음
- right: 오른쪽으로 floating 요소를 허용하지 않음
- both: 양쪽으로 floating 요소를 허용하지 않음
#### HTML/CSS 유효성 검사 테스트
[The W3C Markup Validation Service](https://validator.w3.org/)
#### Media query
미디어 타입
- all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
미디어 타입
- width, height, device-width, device-height, orientation(세로/가로 모드), aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

#### Viewport
설정 시, head 태그 안에 meta 태그 사용
- width(height) : 뷰포트의 가로(세로) 크기를 지정. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정)
- initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정(소수값)
- user-scalable : 사용자의 확대/축소 기능을 설정

<br>, <img src=''>, <input type=''>

<b> : bold 태그는 글자를 굵게 표현하는 태그
<i> : italic 태그는 글자를 기울여서 표현하는 태그 
      특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용
<u> : underline 태그는 글자의 밑줄을 표현하는 태그
<s> : strike 태그는 글자의 중간선을 표현하는 태그

<dt> : 용어를 나타내는 태그
<dd> : 용어에 대한 정의 또는 설명을 나타내는 태그

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

<button type="submit|reset|button">버튼 안에 들어갈 텍스트</button>

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>

function maskify(cc) {
  if (cc.length < 5) { return cc };
  return '#'.repeat(cc.slice(0, -4).length) + cc.slice(-4);
}

function maskify(cc) {
  return cc.slice(0, -4).replace(/./g, '#') + cc.slice(-4);
}

function maskify(cc) {
  return cc.replace(/.(?=....)/g, '#');
}

function maskify(cc) {
  return cc.replace(/.(?=.{4})/g, "#");
}

String.prototype.camelCase=function(){
  return this.split(' ').map(function(word) {
    return word.charAt(0).toUpperCase() + word.slice(1)
  }).join('')
}

function toWeirdCase(string){
  let result = string.split(' ').map(function(word) {
    let arr = word.split('');
    for(let i = 0; i < arr.length; i++) {
      i % 2 === 0 ? arr[i] = arr[i].toUpperCase() : arr[i] = arr[i].toLowerCase();
    }
    return arr.join('');
  })

  return result.join(' ');
}

function toWeirdCase(string){
  return string.split(' ').map(function(word){
    return word.split('').map(function(letter, index){
      return index % 2 == 0 ? letter.toUpperCase() : letter.toLowerCase()
    }).join('');
  }).join(' ');
}