CODE_PLAN

오늘배운것중 정리할것

- yarn 을 많이 쓰는이유 : package.json에 dependencies에 의해서 전부 설치되는데 yarn add 하면 default 로 다 넣어줌  

tip) node moduels 때문에 시간이 많이 소요함. 따라서 삭제하고 나중에 node modules 파일 없이 받은뒤 npm i 하면 됨 
팀원들끼리 프로젝트를 압축해서 옮길떄 node_modules 삭제하고 나중에 npm i로 설치 

- 매개변수로 들어가는 함수가 callback fn

- map vs filter -> map은 새로운 배열생성! /  ( 필터는 조건에 만족해야 출력), filter 출력결과 배열이나옴

- map 화살표 멀티라인은 중괄호써야 아니면 잘안씀 
-배열은 users[0].age 이렇게 접근 / 객체는 users.age 이런식으로 접근

- users.map(fucn(item) { 
  return
}) //함수로 사용시

- map 함수 반복적으로 return 하는 부분들은 반드시 태그를 붙여줘야함

- onchange 인라인으로 쓰는거 권장되는것은 X
- 피치못하게 여기에 event 인자를 넣어줄려고 하면 함수로 꼭 감싸줘야함 
ex) onChange{() => nameChageHandler(event)}
cf) onChange={nameChangeHandler(event)} 하면 함수를 실행해버림 
왜냐하면 넘겨주는 시점에서 이미 그렇게 하면..
cf) event만 넘겨줄거면 onChange ={ageChagehandler} 이런식으로 써도됨 
자동으로 event는 인자값으로 넘어감

- 메모리 할당과정(+ 얕은복사등)

-  가운데정렬 alignItems : 'center' , justifycontent : 'center' 같이사용

- map에서 멀티라인일 경우 소괄호를 쳐줌, 화살표일때는 중괄호 쳐주고
멀티라인이 1줄이상? 

- git flow => 깃을 잘사용하기 위한 모델로서 git flow / branch 를 어떻게 운용할지에 대한 좋은사례 

- git flow 프로그램 vs git 

- git graph 사용법 : git graph 설치후 -> 소스제어 클릭 ( Ctrl+Shift+G ) 필요 

참고> https://velog.io/@devp1023/GIT-Visual-Code-Git-Graph

- master 는 언제나 실행가능한 상태를 유지해야함 = 최신버전 = 실행가능상태 

- 실행가능한 상태 만들어가는 branch = develop

- :wq

오늘배운것중 기억해야할것

- "반드시 주의해야할점"

만든 프로젝트를 열어줘야 합니다!
상하위 폴더를 열어서 그러면 안되고 Src폴더만 있으면 안됩니다.
react 파일에 node module src publc 구조 항상있어야함! 

- root.render 
랜더= 화면에 그림

- 상대경로 -> 절대경로로 바꿔주는방법 : 

jsconfig.json 파일에 아래코드 작성

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

cf) ./ 이런게 상대경로 입니다. 

- 화면에 보여지게 하다"를 줄여서 Rendering 
- 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.
- js에 스타일 넣을때 중괄호 하나하고 객체를 넣어주는게 좀 더 정확한 의미 (스타일 작성시)

- //혹은 스타일 객체를 변수로 만들고 쓸 수 있습니다.

function App() {
  const styles = {
    color: 'red',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

export default App;

----------------------VS---------------

function App() {


  return (
    <div className="App">
      <p style={{ color: 'blue', fontSize: '50px' }}>orange</p>
    </div>
  );
}

export default App; 
/// 방식 2개가능합니다.

- 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있습니다.
- 변수로 뻄으로서 재사용가능 
- 계속 내리다보면 props drilling 이라는  현상이 일어남 -> 이런현상이 무엇인지 (면접 단골 질문) 
- 여는 태그 닫는 태그 사이에 어떤값을두면 리액트는 자동적으로 children 이라는 props를 가지고 있음 
- 동일한 컴포넌트 쓰게되면 칠드런이 쓰일수 있음 (칠드런도 똑같음= 부모->자식) 
- <React.StrictMode> 해제 하면 2번출력한거 1번출력으로 보임
- props 추출 명시해서 이름써놓는게 더좋음 props라고 서놓는것보다 
- 컴포넌트 파일= jsx로 쓰는게 편함 
- default값 설정가능 (값이 없을시 만약을 대비해서)
- onChange 속성에서는 항상 event가 중요, onchange에는 항상 event가 딸려옴 
- input type = text, password 다름 
- input value , onChange 항상 쌍으로 묶기 
- 불변성 : 메모리에 있는 값을 변경할 수 없는 것.
- 원시데이터 -> 값바꾸는게 아니라 새로운 메모리 저장 공간을만듬 
- 객체같은것은 -> 기존공간을 바꿈! 불변성x
- 리액트에서 컴포넌트가 화면에 그려지기 위해서 렌더링을함
- 리액트에서 화면 랜더링할지말지 결정하는 조건이 state 의 변화 , 단순변수는 무시함 
- 화면을 다시 그려준다 = 리랜더링 
- 배열 또는 객체가 나온다 -> 스프레드 문법 or map, filter (불변성을 지키기 위해서 사용)
... 으로 새로운 주소값으로 복사 

오늘배운것중 기억해야할것

- if 안에 var 선언하고 
바깥에서  a 쓰면 다른언어에서는 안되야 정상 -> 이유 block lebel 스코프 
var는 블록레벨 스코프x 
-> 햇갈 -> var키워드 사용x 
- js 심화과정에서 메모리 관점에서 상당히 자세히 들여다 볼 필요가 있음
- object의 key -value 에서 value에는 항상 어느것이든 다올수있음
- key랑 변수랑 다름 
-> ex const a =21; 이랑 객체에 있는 age: 21 하고는 다름
- 사실은(값을 바라보는게 아니라) 주소를 복사해서 같은 메모리 공간을 바라보게됨 == 얕은복사

화살표함수>
리턴문이 한줄이라면 리턴문이 생략이 가능 
중괄호 뺴줄때 항상 retru문이 없어야함 
매개변수가 1개면 소괄호도 생략할수 있음

- 노드를 설치해야지 npm 이라는 친구를 같이 설치가능 
- npm을 설치해야 우리가 리액트 패키지도 설치할수있고 + 리액트 개발에 필요한 많은 패키지 설치가능
패키지 매니저 바로 npm
npm = 마켓이면서, 명령어

npm 과 비슷한 친구 = yarn
yarn은 마켓은 아니고 명령으로서 비슷 
yarn도 하나의 npm 패키지
yarn 은 기호에맞게 ㄱ
자바스크립트가 돌아가는 런타임 환경은
- 노드 환경, 브라우저 환경 2가지 있음
--save 하는 이유가있음 

1. 가장 인상 깊었던 배움에는 뭐가 있었는지?

-> 튜터님의 코칭이 가장 인상 깊었습니다.

2. 그 배움까지 다가가는데 어떤 어려움이 있었는지?

->  실제로 적용해보는거랑 직접 적용하는것이 어려웠습니다. 

3. 그 과정에서 나는 무엇을 깨달았고, 어떤 감정/생각이 들었었지?

-> 분발해야 겠다고 생각들었고 부족한 부분이 많아서 겸손해지는것 같았습니다 ㅎㅎ

4. 결과적으로, 현재 나의 상태는?

-> 자바스크립트 기초지식 획득 활용은 아직 부족한단계

5. 이 상태에서 다음 일주일을 더 잘 보내려면 어떻게 해야 할까?

-> 일일회고 잘쓰고 복습잘하고 개념을 잘 파악해야 실전에서 잘 활용할수 있을것같습니다.

MPA와 SPA의 차이를 설명할 수 있다

화면에 나오듯이 객체타입 입니다! 

결론부터 말하면
for...of 는 배열의 반복에서 사용되고,
for...in은 객체의 반복에서 사용됩니다.

for...in 은 객체를 순환할 때 사용됩니다.

객체가 아닌 배열에 사용한다면 

copy yamlvar arr = [1, 2, 3];

for (var item in arr) {
  console.log(item) // 0, 1, 2
}

JavaScript에선 배열도 Object 타입으로 인식하기 때문에 결과가 나오긴 나옵니다.
다만 일치하는 값은 아니고 해당 배열의 index가 출력되는 걸 확인할 수 있습니다.

Storage 타입은 key-value 쌍을 저장하도록 설계되었습니다. Storage 타입은 Object와 같은 추가 메소드를 가지고 있습니다.

• setItem(name, value) - name을 키로 값을 저장합니다.
• removeItem(name) - 이름에 해당하는 key-value 쌍을 제거합니다.
• getItem(name) - 주어진 이름에 대한 값을 가져옵니다.
• key(index) - 주어진 숫자 위치에 있는 값의 이름을 가져옵니다.
• clear() - 모든 값을 제거합니다.

Storage 객체의 key-value 쌍의 갯수를 얻으려면 length 속성을 사용할 수 있으며, Storage 객체에는 문자열만 저장할 수 있는데 문자열이 아닌 데이터를 저장하면 문자열로 자동 변환됩니다.

결국, Storage 객체에서 값을 가져오면 결과는 항상 문자열로 받게 됩니다.