02 - 03 일지

오전 : S.A과제 제출

특이사항

HTML은 정말 나하고 안 맞는 것 같다. 저번 풀스택 미니프로젝트 이후 다시 만나본 HTML과제는 하는 내내 가슴이 아파오고 짜증이 치밀었다. 아무래도 그때 쎄게 데인 것이 풀어지지 않고 가벼운 기피증으로 굳어진 것이 아닌가 싶다. 그래도 문제 자체는 팀원 조언을 한 두 번 받아가며 마무리했다. 사용법을 조금씩 익혀가지만 글쎄, 왠만해선 다시 볼 일이 없길 바란다. 리액트가 있으니깐

 

오후 : 리액트 인강 시청

쓸 거리가 너무나 많다. 뭐 부터 적어야 하지...

 

\...\연산자

스프레드 연산자로, 자세한 것은 코드 예시를 보면 된다.

화살표 함수

이것도 코드 예시를 보자. 리액트에서 줄기차게 쓴다고 한다.

yarn 명령어

--save

패키지.json의 의존하고 있는 패키지 목록을 넣기 위해서 npm은 --save하지만 얀은 add만 하면 save가 내장되어 있다.yarn으로 깔린 폴더의 public 폴더의 index.html 파일을 보면 내용물이 거의 없다. SEO에 약한 이유가 바로 이것이다.

SPA AC

SPA는 하나의 페이지로 애플리케이션을 구성하는 것인데, 리렌더링을 사용하는 MPA하고 반대되는 개념이다. 딱 하나의 페이지로 구성된 웹 앱이라 서버에 리소스 요청을 1번(index.html)만 하며 필요할 때 데이터만 더 받아와서 기존 페이지를 살짝 수정하는 식으로 작동한다. 이러면 사용자 입장에선 화면 깜박임이 없어 피로감이 덜하다.

단점으로는 SEO에 약하다. SEO는 서치 엔진 옵티마이제이션, 쉽게 말해 검색엔진을 말한다. 근데 SEO는 HTML 페이지 전체를 필요로 하는데, SPA 페이지는 구조가 아주 단순해서 검색엔진이 찾아낼 수 없다.

REACT

리액트는 페이스북에서 만들고 유지보수 중인 프레임 워크이다. 리액트는 자신을 소개하길 ‘UI를 위한 자바스크립트 라이브러리’라고 소개하고 있다. 즉 보여지는 부분을 구축하는 기능이다.

CRA(Create React App)

한 줄의 명령어 입력으로 React 필수요소를 자동으로 구성하는 방법이다. 이런 것을 신경쓰지 않아도 되는 것을 보일러 플레이트라고 한다.

사용법은 깃 배쉬에서 원하는 폴더에 들어가 yarn create react-app 뭐시기뭐시기을 입력한다. 그러면 이제 해당 위치에 폴더가 좌르륵 깔린다.

우리는 src 폴더의 app.js가 주무대가 될 것이다.

index.html에서 div를 하나 선언하고 태그를 부여하면, index.js에서 그것을 랜더하고, App.js에서 이걸 바꾸면 리액트 프로젝트가 바뀐다.

상대 경로 임포트에서 절대 경로 임포트로 바꾸기

APP.js를 보면 import from './asdads'로 되어있는데 여기서 ./는 상대 경로를 의미한다. 루트 경로에 jsconfig.json 파일을 하나 생성한다.

root 경로에 jsconfig.json 파일을 생성한다.

컴포넌트

UI를 재사용 가능한 조각으로 쪼개는 것으로 기본 구조는 자바스크립트 함수와 매우 비슷하다. props라는 입력을 받은 후, 어떻게 표시할지 기술하는 React 엘리먼트를 리턴한다. 유니티에 있는 컴포넌트랑 상당히 유사한 것 같다. 불러오는 것은 import로 선언, 내보내는 것은 export로 선언한다. 컴포넌트는 다 들여오거나 내보낸다고 기억하면 된다고 한다.

App.js에 있는 div태그는 html같아보이지만 아닌데, 태그 다음에 클래스를 쓸 때 App.js는 className이란 키워드를 쓰고 있기 때문이다. 이것은 JSX문법이라고 한다. 그래서 이 안에 자바스크립트를 { }로 구분하여 넣으면 작동한다. 다만 컴포넌트의 이름은 무조건 대문자로 해야한다. 이건 약속이다.

부모 자식 컴포넌트

복수의 컴포넌트를 선언하고, 한 컴포넌트가 다른 컴포넌트를 HTML태그 쓰듯이 <asd />로 가져오는 식으로 부모자식 컴포넌트화시킬 수 있다.

JSX

자바스크립트를 확장한 문법, 리액트 element를 생성하기 위한 문법. JSX 문법을 사용해서 리액트 요소를 생성, DOM에 렌더링 시켜서 완성시킨다.

 

삼항 연산자 많이 쓴다는게 JSX 때문이구나....

props

컴포넌트끼리의 정보교환 방식

중요 : props는 반드시 부모에서 자식, 위에서 아래로 흐른다. 반드시 읽기 전용으로 취급. 조부모, 부모, 자식 순으로 props가 드릴링 되는 사태를 피해야한다.