CODE_PLAN

Object 선언 - key - value -pair

자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않습니다.

자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않습니다.

자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원합니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

slice() 메소드는 배열의 일부분을 새로운 배열로 만듭니다.

Object.keys() 메소드는 객체의 속성 이름을 배열로 반환

Object.values() 메소드는 객체의 속성 값들을 배열로 반환 

객체는 이름: 값 으로 형성됨

Object.entries() 메소드는 객체의 속성 이름과 속성 값들을 2차원 배열로 반환합니다.

Object.assign() 메소드는 기존 객체를 복사하여 새로운 객체를 만듭니다

객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없습니다. 대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 합니다.

객체 병합을 할 때는 전개 연산자(...)를 사용합니다.

shift() 메소드는 배열의 첫 번째 요소를 삭제합니다.

unshift() 메소드는 배열의 맨 앞에 요소를 추가합니다.

오늘배운것중 정리할것

- 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 하는 이유가있음