1. 클론 시작

자바스크립트로 만들었던 코드를 리액트로 가져와 재구성해봤다.

2. 알게된 점

2-1) 리액트 설치 오류

다른 분들은 막힘 없이 설치를 끝내시고 작업을 시작하셨는데
나 혼자 sass 설치를 못해서 전전긍긍하다 멘토님에게 여쭙고
그 이유를 알 수 있었다.

Node.js와 SASS 버전 차이로 인한 Error

기존에 설치했던 16.11.1 버전을 삭제 후 14.18.1 버전으로 재설치했다.
이후 node-sass 4.14.1 버전을 설치해봤더니 정상 설치되었다.

신버전은 안정화가 됐다고 말이 나올 때 까지는 사용하지 않는 것이
좋다는 멘토님의 말씀을 듣고 알게 된 사실이었다.

2-2) React 코드 재구성

기존에 작성했던 HTML, CSS, JS 코드를 REACT로 가져오며
JSX 코드로 전부 변환해줘야 했다. 이후 라우터를 이용한
컴포넌트를 생성해 로그인 페이지와 메인 페이지를 분리해줬다.

로그인 버튼을 클릭하면 메인 페이지로, 메인페이지의
로고를 클릭하면 로그인 페이지로 넘어가도록 설정을 해줬다.

코드를 보면 link 대신 this.props.history.push를 사용해줬는데,
link를 사용하게 되면 HTML에서 a 태그를 사용한 것 처럼
밑줄이 생겨 보기 좋지 않았다.
이러한 이유로 this.props.history.push를 사용해주었다.

어느 정도 정리를 해주고 나서 놓치는 부분이 있을까 하고
콘솔창을 켜봤다. 그러자 기다렸다는 듯이 빨간 창이 나를 반겨줬다.

2-3) 오류 발생 및 해결

(이건 뭐람...)

인풋에서 최종적으로 나온 오류라는 걸 확인하고선 오류의 원인을
찾아내고자 1시간 정도 소모했다. 그리고 밝혀진 사실..

리액트의 특징 중 하나는 camelCase를 좋아한다는 거다.
이리 저리 아무리 뒤져봐도 모두 camelCase를 적용해줬다고
확신했는데, 단 한 곳. 저 input에서 maxlength로 작성하는 바람에
오류가 발생했던 거다.
(이런 오류에 함께 시간 투자를 해주신 동료분께 너무 죄송했다...)
바로 maxLengh로 적용해주자 오류는 사라졌다.

3. SASS 작성

리액트의 css.
Nesting 기능을 이용해 상위요소와 하위요소의 css를 묶어주며
오늘 리액트 작업을 마무리했다.