TIL ( Today I Learned )

210210_TIL

outwater 2021. 2. 11. 02:08

반성하며 시작..

금요일, 월요일, 화요일 3일간 TIL도 작성하지 못했고, 정규시간 이외의 자율학습도 원활하게 진행하지 못했던 것 같다.

 

금요일 저녁에 오랜만에 약속이 있어서 술도 한잔하고, 주말에는 또 이것저것 다른 스케줄을 하고 보내다 보니, 주말에 하려고 잡아두었던 코딩공부들도 못하게 되었고, 리듬을 잃었던 것 같다.

 

매일 하던 일을 하루 빼먹는다고 해서 그 하루만 삐끗하는 것이 아니라, 매일 해오던 리듬이 흔들리게 되는 치명타를 맞기도 한다.
오래 달리기를 할 때, 호흡이 한 번 트이고, 안정적으로  자기 페이스를 찾을 때 상당히 빠른 속도로  긴 거리를 꾸준하게 달려나갈 수 있다. 그런데 오버페이스가 되었든, 잠깐 쉬기 위해서이든 한 번 달리기를 멈춘 후에 다시 뛰려고 하면, 이전보다 배는 힘들다는 것을 느끼게 된다. 

리듬을 다시 찾는 것에 3일 이라는 시간이 걸렸다.

스스로에게 부끄럽기도 하고, 어떤 위기 의식이 계속해서 맴돌기도 한다.

웹개발자로서 커리어를 처음 시작하기 위해 굉장히 중요한 순간에 와 있다. 

 

더 나태해지지 말고, 겸손하게, 긍정적으로 생각하고 다시 찾은 리듬 놓치지 않고, 수료할 때 까지 이어나가고 싶다.

 

 

🎄오늘 한 일

✔️ 1.  React의 기본 개념 이해

  • 그디어 React에 첫발을 내딛었다. 공식문서와 짧은 강의들을 통하여 JSX, Component, Props, State, Lifecycle. event 등 기본 개념을 학습하는 시간을 가졌다. 오랜만에 본 React가 반갑기도 하고, 예전에 아무것도 모르고 쓸 때가 떠올라서, 빨리 제대로 배우고 React를 사용해보고 싶은 마음이 간절히 들었다.

✔️ 2.추석 todo list 작성

  • 앞서 반성의 시간을 가지게 되면서, 이번 설날은 내 리듬을 유지하는 수준에서 휴식을 취하기로 하였다.
    그래서 추석동안 해야할 list를 한 번 정리해보았다.
    -밀렸던 toy problem 풀기
    -server & node 챕터 부족했던 부분 다시 한 번 학습하기
    - 1. Im prep, 2.Inheritance patterns, 3.Data structure, 4.Algorithms, 5.Async&Promise , 6.Interaction with server, 7. server&node 까지 총 7가지의 챕터를 학습하고 노션에 정리해 왔는데, 설날 연휴 동안 하루에 2챕터씩 복습진행하기

🎄기억할 것

✔️1.  React 소개 (lesson 영상)

  • React는 무엇인가?
    : web page를 보다 효율적으로 만드는 방법으로, 프론트엔드 프레임워크 중 하나이다.
    • 등장 배경
      : 최신 웹페이지들은 단순 data를 보여주는 역할이 아니라, **유저와의 수많은 인터렉션(상호작용)**을 기반으로 한다.
      : 많은 상호작용은 수 많은 상태관리를 필요로 한다. (특히 DOM관리)
      : 더 편하고 효율적인 상태관리를 위한 방법에 대한 해결방법이 리액트와 같은 프론트앤드 프레임워크.
    • React의 핵심 개념인 '컴포넌트'
      : 하나의 의미를 가진 독립적인 단위 모듈 ( = 나만의 HTML 태그 ) : 재사용성과 직관성을 높임
  • ES6
    : 리액트는 ES6를 기반으로 하는 프레임워크이다.
    • ES6의 7가지 개념
      • destructuring
      • spread operator
      • rest paramethers
      • default paramethers
      • template literals
      • arrow functions
      • for - of loop
✔️ 2. JSX와 React Element
  • JSX 소개 (공식문서)
    : 자바스크립트의 확장 문법으로 (html처럼 보이지만) UI 생성 작업을 위해 React Element를 생성하도록 한다.
    • 특징
      • 복잡도를 낮추고, 가독성을 높인다.
      • JSX 문법을 사용하면, "**babel"**이 자동적으로 JSX를 DOM을 조작하는 js 언어로 변환시켜준다.
    • JSX 사용 규칙
      1) 반드시 하나의 엘리먼트로 감싸주어야한다.
      2) 자바스크립트 코드를 적용할 때는 { } 안에 사용
      3) JSX 내부에서 if문 사용불가 (삼항연산자 사용)
      4) 엘리먼트 클래스 이름을 적용할 때, class 가 아닌 className 프로퍼티 사용
  • Element 렌더링 (ReactDOM.render() )
    :React DOM 은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.
    • 엘리먼트는 컴포넌트를 구성하는 하나의 구성요소이다.
    • React 엘리먼트는 불변객체로, 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 따라서 새로운 UI를 업데이트 하는 방법은 새로운 엘리먼트를 생성하여 ReactDOM.render( )로 실행하는 것이다.
    • 변경된 부분만 업데이트
      • React DOM은 해당 엘리먼트(그 자식 엘리먼트까지)와 이전의 엘리먼트를 비교하여, 변경된 부분만을 DOM업데이트 해준다. 

✔️3. Component와 Props

  • 컴포넌트
    : "props"를 입력받아, 화면에 어떻게 표시되는지를 기술하는 React Element(JSX)를 반환하는 함수와 같다.

    • 컴포넌트를 만드는 2가지 방법 : 함수컴포넌트와 클래스 컴포넌트가 존재한다.

      • 함수컴포넌트

      • 클래스컴포넌트

    • 컴포넌트 합성 : 자신의 출력에 다른 컴포넌트들을 참조할 수 있는 것을 의미한다.

      • 하나의 컴포넌트 안에는 여러개의 컴포넌트들이 조합되여 구성될 수 있다.
      • React 앱은 보통 최상위에 단일 App 컴포넌트를 가지고 있다.

    • 컴포넌트 추출 : 재사용 가능한 구성요소들을 따라 컴포넌트화 하여 추출하는 것을 의미한다.

    • Clock 사례 (state와 lifeCycle)

  • props
    : "props" 는 해당 react컴포넌트로 전달되는 객체로, 해당 컴포넌트의 속성을 나타내는 데이터이다.

    • 설명
      : React에서 <Welcome name ="Sara> 안녕하세요 </Welcome> 라는 코드는
      { name : "Sara", children : "안녕하세요" } 라는 props 객체를 입력받아, Welcome 컴포넌트(함수)를 전달하여 호출,
       실행하도록 한다.

    • props의 가장 큰 특징
      : props의 가장 큰 특징은 읽기 전용이라는 것이다.
      : 따라서 컴포넌트 내부에서 props를 동적으로 수정하지 않고 항상 같은 받은 값으로 사용되어야 한다.

  • 조건부 렌더링
    : 여러 조건식을 통해서 원하는 상태를 나타내는 컴포넌트만을 렌더링 할 수 있다.
         1) IF 문을 통한 분기 (props 값에 따라)
         2) IF 문을 통한 분기 (state 값에 따라)
         3) 논리연산자 && 을 통해 If문을 인라인으로 표현하기
         4) 조건부연산자 조건 ? A : B
         5) 조건에 따라 렌더링하는 것을 막는 법

 

✔️4. State와 Lifecycle

  • State
    : 살아가면서 변할 수 있는 값
    : 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

    • props와 state 구분하기 : ↔ props 는 외부로 부터 전달받은 값,  state 는 내부에서 변하는 값

      이름 ,성별 ⇒ props

      나이, 현재사는 곳, 취업여부 ,결혼/연애여부 ⇒ state

    • Class 컴포넌트에서 state 지정하기

      • 초기 state 지정 constructor 내부에서 this.state = { isOn: false } 로 지정

      • state 변경

        handleClick(){ this.setState( state ⇒ ({ isOn: !state.isOn })) }

      • 이벤트처리방법 (?)

      • 이벤트 처리시 bind 메소드를 이용해 this를 바인딩하는 이유

🎄더 공부할 것

✔️1. React의 lifecycle 에 대해서 더 공부하기
✔️2. 함수형 컴포넌트, 클래스형 컴포넌트, 그리고 hooks를 이용한 함수형 컴포넌트에서의 상태관리법 찾아보기



모두들 즐거운 명절 되셔요 : )