Codekata💢

[...문자열]

const sameReverse = (num) => {
  return Number([...String(num)].reverse().join("")) === num;
};
// 문자열을 넣을시 각 문자를 요소로 갖는 배열이 생성됨
// 원래 배열을 복사하는 메소드

---

React Intro 복습

why Framework? Libarary?

• 배경
  Web/Application 복잡해짐에 따라서 DOM 접근하기 어려워졌기에
  효율적인 개발을 위해 무수히 생김
• 분류

3대장

• Angular(Framework)
• Vue(Framework)
• React(Libarary)

React!!

• 사용자 인터페이스(UI)를 만들기 위한 Javascript Library
• 가상돔(Virtual DOM)
  이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합만을 수정하는 기술

why node.js / npm / gitignore?

node.js

• 탈 웹22
  자바스크립트가 브라우저 밖에서도 동작하게 하는 환경 자체를 node 라고 한다
• '뷰'만을 위한 라이브러리 아닌가
  기존에 있는 주요 개발 환경 및 도구가 Node.js 기반이기 때문에 활용
  (CRA, Babel, Webpack)

npm: Node Package Manager

• node 기반 패키지들의 관리하는 도구
• node.js 와 같이 자동으로 설치되며 다양한 패키지를 설치하고 버전을 관리해준다

CRA: Create-React-App

• 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅하는 도구
• 왜 CRA 활용해서 개발을 시작하셨나요?
  직접 개발환경을 구축할 수 없었기에 바로 프로젝트를 확인할 수 있는 CRA를 활용하게 되었습니다

---

map

• 배열.map((요소, 인뎃스, 배열) => {return 요소});

const array1 = [1,3,5];
const map1 = array1.map(x=>x*2);
console.log(map1);//[2,6,10]
// return을 쓰지 않아도 자동 출력

• react 에서의 활용
  https://ko.reactjs.org/docs/lists-and-keys.html
  (공식 문서 링크)

---

this.state & this.setState

• this.state.key.메소드(값)
• this.setState({key:값})
• state 수정하려는 두가지 방법 중 무엇이 옳은 것일까
  정답은 후자(setState)
  전자(state 직접 메소드를 적용하려는 방법)는 state 수정되기는 하지만
  변화된 state에 대해 해당 state를 활용하는 다른 html에 전혀 반영되지 않는다

---

#push VS concat

• 두 가지 메소드 모두 배열에 요소를 추가하는 기능

this.setState({
        commentList: this.state.commentList.push(e.target.value),
      });

this.setState({
        commentList: this.state.commentList.concat(e.target.value),
      });

// 어느 것이 활용 되어야 하는가
// 답은 후자(concat)

• 예제

let test1 = [1, 2, 4];
let test2 = [1, 2, 4];
console.log(test1.push("a"));// 4
console.log(test1);// [1,2,4,'a']
// push 메소드는 배열의 **길이**를 리턴하며
// 기존의 배열을 수정한다


console.log(test2.concat("a"));// [1,2,4,'a']
console.log(test2);//[1,2,4]
// concat 메소드는 배열 **자체**를 리턴하며
// 기존의 배열은 수정하지 않는다
- 앞선 질문으로 돌아가 concat 활용해야 하는 이유는 리턴 값으로 배열을 받아야 하기 때문이다.

---

Git

• git remote -v
  연결된 원격저장소가 무엇인지 확인하는 방법
• git 기초 코드 정리 자료 링크
  https://medium.com/@pks2974/%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EA%B8%B0%EC%B4%88-git-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-533b3689db81