⌚️ 시간관리

☀️ 기상시간 - 10:00 (❌기상시간 웬말이야!!ㅠㅠ)
🌕 마감시간 - 24:30

💻 오늘 배운 것

< react >

1. 환경설정하기

• yarn : 이전 강의에서 설치했던 npm이 어떤 역할을 하는지도 모르고 그냥 따라하면서 설치했었는데 패키지 매니저의 한 종류인 것을 이번 강의를 통해 알게 되었다. 자바스크립트에서 개발자들이 코드패키지를 공유하고 이를 조립하여 프로젝트를 빌드하는 도구로 패키지 매니저를 사용하는데, 이중에서 가장 유명한게 npm이었다. 이는 jQuery, Bootstrap, React와 Angular 같은 엄청난 양의 패키지들을 호스팅하지만 단점이 존재한다. 이떄문에 페이스북, 구글 등의 그룹이 협력하여 만든 안정적이고 보완성이 뛰어난 새로운 패키지 매니저가 yarn이다.
  - 설치방법 : 기존에 나는 npm을 설치했었기 때문에 이를 통해 설치가 가능했다. 강사는 'brew install --without-node'를 통해 설치하라고 알려주었지만, 내 커멘드에서는 brew가 존재하지 않는 문구만 떠서 다른 방법을 찾던 중 알게 되었다.

  npm install --global yarn

yarn을 글로벌 하게 사용 할 수 있도록 터미널에서 PATH 환경 변수 설정을 잊으면 안된다고 한다.

• 프로젝트 생성하기 : 터미널에

  npx create-react-app contact-app'을 통해 생성

• vs code에서 'Reactjs code snippet'을 설치하면
  • rcc : react의 class형 컴포넌트가 자동으로 입력
  • rsc : react의 함수형 컴포넌트가 자동으로 입력

2. react 코드작성하기

• App.js에 다른 컴포넌트 파일을 랜더링할 때 직접 import부터 입력하는 것보다 return값에 <컴포넌트 파일이름 />을 입력하고 엔터를 누르면 자동으로 랜더링됨
• state를 통해 input값을 변경하는 방법

  state = {
    name: '',
    phone:'',
  }
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
     render() {
         return (
             <form>
                 <input 
                 name="name"
                 placeholder="이름" 
                 onChange={this.handleChange} 
                 value={this.state.name}/>
                 <input 
                 name="phone"
                 placeholder="전화번호" 
                 onChange={this.handleChange}
                 value={this.state.phone}/>
                 <div>
                   {this.state.name} {this.state.phone}
                 </div>
                 
             </form>
         );
     }

3. 배열 데이터 렌더링 및 관리법

• React에서는 불변성을 지켜주어야 함.
• map(내장함수) : 배열을 특정 함수를 사용하여 전체적으로 변환할 때 사용
  예) const numbers = [1,2,3,4,5];
  const squared = numbers.map(n => n * n)
  squared =[1,4,9,16,25]
• key : 배열내에서 어떠한 요소의 변경이 일어날 경우, 효율적으로 작업하기 위한 기능을 함
• filter함수 : 배열에서 조건에 해당하는 값을 추출
  예) numbers = [1,2,3,4,5]
  numbers.filter(n => n < 3)
  --->[4,5]
  이 때 기존 배열은 변경되지 않는다.

❓오늘의 나는

1. 1시를 넘겨서 자다보니(대부분 핸드폰이 문제야...) 아침이 너무 힘들다. 오늘도 그래서 나도모르게 잠들어버렸고 결국 10시가 넘어서 일어나버렸다ㅠㅠ
2. react강의를 80% 수강했다. 오늘 배운 배열 데이터 관리하는 법은... 내용도 너무 방대하고 정리하기도 힘들어서 집중하기가 어려웠다. 그래도 어느정도 코드를 작성하는 규칙들이 조금씩 눈에 들어오는 것 같다 👀
3. 윤쌤의 운동은 아니지만 오늘도 40분정도? 운동을 완료했다!!
4. 운동하고 씻고 할일 하다보니 12시를 넘겨버렸다. 평일에는 기필코 1커밋을 놓피지 않으려고 했는데... 오늘따라 좌절감이 많이 든다😭😭😭😭😭😭
5. 핸드폰을 보는 시간이 너무 과한것같다. 차라리 노트북에 카톡을 깔고 공부시간에는 저 멀리 치워놔야겠다.
6. 오늘의 하루를 되돌아보며 반성하는 것도 중요하지만, 더 온고잉 하기 위해서는 조금의 당근도 필요한 것 같다. 하지만 채찍도 놓치지 않으려고 노력해야겠다.

❗️내일의 나는

1. 내일은 ethen에게 그동안의 공부를 점검받는 날이다. 앞으로 우리가 할 수 있는것들에 대해 깊이 캐묻고 배우고 와야겠다.
2. 내일 공부량은 장담할 수가 없다. 오전부터 지원금신청으로 바깥에 있을 것 같아서.. 그래도 너무 헤이해지지 않도록 주의해야겠다.
3. 게으른 나였기에 내일은 조금 더 부지런한 사람이 되어야겠다. js책 내용도 들여다봐야겠다.
4. 시간이 된다면 react강의를 우선적으로 들어야겠다.