Section 1 - 19일차

1. Algorithm Baisc 7, 8

• String 메소드와 filter 메소드 등을 활용하여 문제없이 해결

2. React

• Javascript 오픈소스 라이브러리
• 3가지 특징
  - 선언형 : 명시적, 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 것
  JSX를 활용한 명시적인 코딩
  - 컴포넌트 기반 : 하나의 기능 구현을 위해 코드를 묶어놓은 것, 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하여, 기능 자체에 집중할 수 있음. 컴포넌트간 의존성이 없어져서 독립성이 생김. 유지보수, 유닛 테스트에 좋다.
  - 범용성 : JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다. React Native를 활용하면 모바일 개발도 할 수 있다.
• JSX
  - JSX는 HTML, JavaScript XML의 줄임말이나 문자열이 아닌 JavaScript를 확장한 문법
  • 브라우저가 React 문법을 이해할 수 있게 변환해주는 것이 Babel (컴파일)
  • 컴파일 된 것을 브라우저가 읽고 렌더링
• JSX 문법
  - 여러 엘리먼트를 작성하고자 할 때는 하나의 tag로 감싸주어야 한다
  opening tag - closing tag
  • 기존의 class를 작성하려면 className으로 작성한다, JS의 Class로 받아들이기 때문
  • JSX에서 JS 표현식을 쓰려면 {중괄호}를 사용
  • 사용자 정의 컴포넌트의 이름은 대문자로 시작
  • 조건부 렌더링은 if문이 아닌 삼항연사자 사용
  • 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수 사용
  • map() 함수 사용 시 key 속성을 넣어야 함
  • 데이터가 변경될 때마다, 알아서 렌더링되는 것을 위해 map()사용
  • key 값은 id와 같이 고유한 값이어야 한다. 상황이 안될 경우 최후의 수단으로 배열의 인덱스를 사용할 수도 있다.
• 컴포넌트
  - 컴포넌트를 여러개 만들고 조합하기
  - 컴포넌트들의 관계를 트리구조로 형상화 할 수 있다
  • root 컴포넌트를 근원으로 트리구조를 형성
• Create React App이란 리액트SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인, 여러가지 개발툴을 설치해준다.
  npx create-react-app 프로젝트명

3. Pair Programming / Twittler

• Bare Minimum 과제는 할만했음
• Advanced 과제는 prop, state를 활용해야할 것 같음