1. React SPA

• 옛날의 웹은 그냥 딱딱하게 정보를 전달 할 뿐이었다.
• 요즘의 앱은 상업적 가치를 가질만큼, 커졌고, 우리는 간단하게 이동하는 웹 에플리케이션을 만들 수 있게 되었다.
• 그중 오픈 소스인 React Router 가 대중화를 앞당겼다!

2. Router(라우터)

• 하나의 경로로 들어온 것들을 여러가지 경로로 나눠준다.
• 일명, 길을 정해주는 것. (길은 '주소' 가 되겠지. 그래서 그 주소를 바꿔주면서 로딩 없이 창이 열리게 된다.)

3. 라우터는 어떤 것들이 들어가 있는가

• BrowserRoute : 길을 정해 주는 친구
• Route : 길 그 자체
  • 뒤에 path를 붙여서 주소를 이동시킨다.
• Switch : Route로 감긴 컴포넌트 중에 한놈만 고른다. 말 그대로 스위치.
• Link : 이것도 그대로 링크.
  • 하지만 중요한건 같이 나오는 to => 이 쪽 주소로 보내라!
  • 'a'태그는 어울리지 않는다. 그 링크는 계속 로딩이 된다.
• exact: Route와 path 사이에 넣어주면, 그 주소가 아닌 다른 주소를 입력 받았을때 무시하고 정확한 그 주소만을 연결 시킨다.
  • 주소를 입력 받으면 뒤에서 앞으로 읽는다고 생각하면 편하다. 그렇기 때문에, 홈페이지의 주소가 '/' 일 경우 다른 페이지들과 주소가 겹쳐
    무조건 홈페이지만 나오게 된다. 이럴때 exact 로 정확한 홈페이지를 정해준다. 그래서 홈페이지 만들때 자주 쓰인다.

팁 : 뭔가 만들기 전에, 기본 틀을 그려보고, 필요한 기능을 적어놓고 시작하자. 훨씬 편하다. Figma 를 잘 사용하자.
우분투는 아직도 말성이다. 진짜 맥북 사야하나...
npm 오류를 해결중이다.
리액트 문법을 조금 더 정확히 알아야 한다.

1. reduce 의 이해

• 다짜고짜 코드부터 본다.

function studentReports(students) {
  // TODO: 여기에 코드를 작성합니다.
  // filter 로 여학생만 뽑는다
  let onlyFemale = students.filter(students => students.gender === 'female');
  // 성적을 모두 합산한다. 객체 안에 grades 가 배열로 들어가 있으므로 map으로 배열마다
  return onlyFemale.map(function (el) {
    // 인자를 grades 로 하고 reduce로 쌓는다.
    let sumGrades = el.grades.reduce((acc, cur) => {
      return acc + cur;
    }, 0);
    // 평균을 구하기 위해 나눈다.
    let result = sumGrades / el.grades.length;
    // grades를 계산한 평균으로 할당한다.
    el.grades = result;
    // 모든 요소를을 리턴한다.
    return el;
  });
}

• students의 값들 중에 키 grades는 '배열'로 입력 되고 있다.
• 이때, 그냥 reduce를 화살표 함수로 바로 사용하려고 했다.

function studentReports(students) {
  // TODO: 여기에 코드를 작성합니다.
  // filter 로 여학생만 뽑는다
  let onlyFemale = students.filter(students => students.gender === 'female');
  let sumGrades = onlyFemale.reduce((acc, cur) => {
    return acc + cur;
} ,0)

• 이런 경우, onlyFemale의 값이 다수인 경우 배열들을 쌓은 것이기 때문에 각 배열이 합쳐진 이상한 형태가 나온다.
• 이럴때, 위의 코드 처럼 각 인자를 sumGrades 로 선언하고 계산하는 것이 옳은 방법일 것이다. 다른 경우,

function studentReports( studentList ) {
//여학생만 거름
    let femaleList = studentList.filter( recode => recode.gender === 'female');
//reduce 로 각 grades 배열을 받아 온다.
    femaleList.reduce( (acc, cur) => {
//그 배열에서 받아온 첫번째 인자를 다시 reduce로 합쳐준다.
        cur.grades = cur.grades.reduce( (inAcc, inCur) => {
//더해준 값의 평균을 위해 길이로 나눠준다.
            return inAcc + inCur }) / cur.grades.length;
    }, 0);
    return femaleList;
}

• 와 같은 식으로도 표현 가능하다.
• 화살표 함수와 일반 함수는 똑같이 기능하지만, 잘 모를때는 일반적인 형태로 사용해도 좋다.

우분투 오류로 인해 싹다 날리고 다시 깔았다.
내 맨탈도 함께 날아갔다...
오류의 원인은 알 수 없다. 그저 아침에 다시켰을때 오류로 인해 부팅이 아에 되지 않았다. 같이 깔려 있던 윈도우는 잘 작동 했으므로 전적으로 우분투의 알 수 없는 오류 인것 같다.
다시 설치한 우분투도 심지어 오류가 난다! 언어 서포트가 설치가 안되고, 터미널에서 다양한 설치 명령어가 안 될때가 많으며, 소프트웨어 센터도 맛이 가서 다시 인스톨 해 주었다.(물론 고쳐진것 같진 않다)
그래서 크게 공부를 하지 못 했다. 하지만 다이나믹한 삽질로 맨탈 공부가 되었다고 생각한다. 비록 작업물들도 날라가고 쪼오큼 슬프지만 일단은 작동하니 만족스럽다. 꼭 맥북을 사야겠다.

1. 배열에 유용한 Apl 정리

• map : 배열 안의 요소를 한 번씩 싹 다 수정하여, 다시 배열로 반환
  • 모든 배열 안의 요소를 다 돌 수 있으므로, 객체 안의 요소들 중에 키로 바꿔 그 키의 값만 반환하게 할 수도 있다!
• filter : 배열 안의 요소들 중에 필터의 조건을 제외하고 남은 것들을 반환한다.
• some : 배열안의 요소들 중에 조건에 만족되는 것이 하나라도 있다면 true, 아니면 false를 반환
• every : 배열안의 요소들이 전부 조건에 맞으면 true, 한놈이라도 조건에 맞지 않으면 false를 반환
• reduce : 배열안에 있는 요소들을 인자로 (prev, curr)을 받는데 이전 요소를 반영해 다음 요소를 누적시킬 수 있다.
  • 시작점부터, 모든 배열을 돌면서 값을 누적시킨다.라고 생각하면 좀 편하다.
• sort : 베열안의 요소들 중에 첫 번째 것이 '음수' 라면 먼저 반환된다.
  • (a, b) => a - b 라면 b가 만약, a 보다 크다면 음수가 되니까 a 보다 먼저 반환되어서 작은 거부터 큰 순서대로 정렬되어 반환될 것이고,
    　(a, b) => b - a 라면, b보다 a가 크다면 먼저 반환되어서 큰 순서부터 작은 순서대로 정렬되어 반환된다.

2. 콜백 함수

• 나중에 다시 불러쓰는 함수.
• 브라우저에 명령을 내려놓고, 모든 일들을 다 하고 나서 브라우저가 알아서 불러준다.
• 콜백 함수들을 엮어서 엮어서 엮어서 만들면 일명, 콜백 지옥을 만든다. 가독성은 너무 안 좋고, 유지보수도 몹시 골치 아프다.
  　일부러 숨기려고 하는 것이 아니면 저런 짓은 하지 않는 것이 좋다.

3. 동기 비동기

• 예를들어, 빨래를 돌리는 사이에 청소를 하고 밥을 먹고 빨래가 다 된 후에, 빨래를 널어둔다. 결국 오늘의 할 일을 효율적으로 다 했다. => 비동기
• 빨래를 돌리는 사이에 아무것도 하지 않고 기다리다 빨래가 다 되면 빨래를 널고, 청소를 하고 밥을 먹었다. 이미 내일일 것이다. => 동기
• 즉, 꼭 모든 코드가 직선적으로 실행되는 것은 아니라는 이야기. 효율을 위해 다른 코드들이 중간에 실행될 수 있다. 멀티태스킹! Wa!
• 위에서의 예시에서 빨래가 다 돌아가면 알려주는 알람이 '콜백 함수'가 되는 것이다! 다 되면 빨래를 널태니 말이다.

1. React

• 요즘은 '웹' 도 좋지만 스마트폰의 활발한 보급과 함께, 기다림도 없고, 움직임 있는 웹과 스마트폰에서 둘 다 깔끔하게 사용할 수 있는 홈페이지를 원한다.
• 그때, React를 쓴다! 선언형, 컴포넌트 기반, 범용성 때문에 사용한다. (유지 보수도 좋고 쓰기 좋다 뭐 이런 이야기...)

2. JSX

• React 에서 사용하는 문법이다. 자바스크립트의 확장판이고, 여러가지 확장자 파일을 연결시켜서 사용한다.
• DOM 과 비교하면 엄청 간단하다. 일단 코드가 눈에 보기 편하다.
• HTML과 Javascript의 문법을 동시에 사용하여 코드를 만들기 때문이다. 이 기능과 구조가 어우러진 코드셋을 '컴포넌트' 라고 한다.

3. JSX를 자세히 알아 보자

1. 두개 이상의 앨리먼트는 무조건 하나의 앨리먼트로 감싸줘야 한다.
   • div 태그들이 엘리먼트를 포함하고 있다.
   • 꼭! 태그를 닫아 줘야 한다. 마지막에 /> 를 쓰면 짧게 닫을 수 있다.
   • 굳이, div를 또 써서 닫아주는게 싫다면 Fragment를 쓰면 된다. 굳이...? 그냥 div 또 쓰자.
2. <div> <div> <h1>Hello</h1> </div> <div> <h2>World</h2> </div> </div> // 이 줄이 없다면, 저 Hello, World를 한번에 감싸주지 못 했을 것이다. 그럼 오류난다!
3. 엘리먼트 클래스를 사용할때는 항상 className을 쓴다.
   • 그냥 class 아니다. 요즘버전은 똑바로 읽어준다고 카더라... 하지만 className 으로 똑바로 쓰자.
   • import 로 다른 파일에서 가지고 오는게 깔끔하다.
4. <div className="Hello">World</div>
5. 자바스크립트 문법을 사용할때는 { } (중괄호)를 쓴다.
   • 계속 쓴다. 사용법은 아주 다양하다.
6. 조건문은 '삼항연산자'를 사용한다.
   • 삼항연산자 : if 문의 작동과 같다. 하지만 생김새가 다르다. 맞을때가 (조건) ? (true의 결과) : (false의 결과) 라고 간단하게 생각할 수 있다.
   • 중괄호 뒤에 자바스크립트 문법 쓴다고 {if...} 이런 짓은 안되니까 하지말자. 창의력 대장이다.
   • <div> { (1+1 === 2) ? (<p>맞을때</p>) : (<p>아닐때</p>) } </div>
7. 배열 메소드들 다 사용가능!
   • map(주로 사용, 여러개의 HTML 엘리먼트를 표현할 수 있다, key 속성을 꼭 넣어주자.)
8. CSS를 React 에서 써보자.
   • 새로운 객체를 만든다, (const 같은걸로 하나 만들어 준다.)
   • 객체 안에 CSS 문법을 적는다.
   • 적용은 꼭 { } 중괄호를 넣는다..
   • 하지만 그래도 파일로 나눠서 따로 적는게 낫겠지?
9. 주석달기
   • 주석도 다르게 단다.
   • 무조건 멀티라인 (/*) 으로 만들면서, 중괄호로 감싸준다.

4. Component

• 일명, 기능을 위한 하나의 코드 뭉치. 트리구조로 이루어 져있다.
• 맨위에 improt 로 이것저것 연결해 주고, 클레스들이 있고 그런 형태의 파일이다.
• 이런 컴포넌트를이 모이고 모여 프로그램이 된다. 와!
• 이렇게 연결로 다른 컴포넌트에서 사용하는 것을 '렌더링'이라고 합니다.

5. props

• 부모가 자식한태 주는 값. 값을 직접 할당해주면 된다.
• 만약 this 를 사용할때 부모의 값를 똑바로 받지 못 할경우, 오류가 뜨는데, props로 부모의 값을 다시 되돌려 명시해 준다.

6. State

• 이미 컴포넌트 자체에서 가지고 있는 값
• 컴포넌트 내부에서 바꿀 수 있고, setState 로 만 값을 바꿔줄 수 있다
• 변수를 쓰지 왜 쓰냐? : 리액트를 웹 앱처럼 사용하고 싶다면 중요 데이터를 state에 보관해야 한다. 데이터가 바뀔 경우,
  　그냥 변수로 만드면 HTML 이 '재렌더링' 되기 때문!!! 새로고침을 하지 않아도 된다!!!! Wa!
• 버튼을 누르면 값이 증가하는 conter 을 보면 이해가 쉽다.
• let [원하는 요소, 요소에 변화를 줄 함수] = useState(원하는 요소) 를 사용하면 'Destructuring' 이라는 기술로 useState 가 길이 2 짜리 배열을 반환한다는 것에 착안하여, state 에 원하는 요소를 주고 바로 변화를 줄 수 있다!
  • 이때 '원하는요소' 를 직접 변경하지 말자. 참조형 타입이라서 주소만 가져가 버린다.
    　진짜로 변경 할 때는, 새로운 변수를 하나 선언하고 그것에 할당하여 변경 해야 한다.([...원하는요소]) 로 rest 써서
    　배열에서 뽑은 다음에 다시 배열에 넣어주는 일종의 '테크닉'을 사용할 수 있다!

state = { //state 는 항상 객체로 만든다. 딴거면 못 읽지롱
  number : 0 // 이렇게 0 이라는 시작점 값을 하나 고정시켰다. 
}

handleIncrease = () => { //화살표 함수를 안 쓰면 함수들 내부에서 this를 사용할 수 없게 된다.
    this.setState({
        number: this.state.number + 1
    })
} //아래에 버튼과 함께 onClick 이벤트를 넣고 {this.handleIncrease} 로 호출해 사용한다.

node 버전 때문에 시간을 한참 날렸다...결국 이런일이 발생했다. 너무 당황해서 인가, 하루종일 똑바로 공부하지 못 한 느낌이다. 어쩔수 없다.
모르면 맞아야지...흑흑
React 는 하루만에 끝낼 양은 아니다. 그리고 이론을 알아도 못 쓰겠다. 실습 연습이 많이많이많이 필요해 보인다.