[JavaScript] TIL : Client와 Server연결, React와 CSS (20/11.30)

Personal Portfolio 스프린트를 진행하고 있다.
완전 백지상태에서부터 직접 빌드해야하는 스프린트여서, 세팅 단계에서부터 배운 것이 많아 TIL을 작성한다.

1. React로 Client를 만들고, Express로 Server를 만들었다.

1-1. 이 두 개를 연결하는데 꽤 애를 먹었다. 생각보다 많은 시간을 서치하는데 보냈다.
1-2. React의 npm run build 기능을 이용해서 build파일을 만들어내야하는 이유는 확실히 알 수 있었다.
1-2-1. 앞서 React 블로깅에서 babel, webpack에 대해서 다뤘는데, React로 만든 파일들을 브라우저에 보내기위해 패키징해주는 것이 build기능이다.
이렇게 만들어진 build파일을 서버쪽 파일에 그대로 복사해서, Server를 구축할 때 get요청으로 이 build파일을 뿌리는 되는 것이다.
1-3. 또한 우리는 이미지나 CSS, JavaScript파일을 정적파일이라고 하는데, 이런 정적파일을 제공하려면 express의 기본내장 미들웨어 함수인 express.static()을 사용할 수 있다.
1-3-1. 정적파일(자원)이란, 내용이 고정되어 응답을 할 때 별도의 처리 없이 파일 내용을 그대로 보내주면 되는 파일을 의미한다. 웹서버에서 처리한다.
1-3-2. 동적파일(자원)이란, 실시간으로 바뀌는 데이터들을 구성하는 파일이며, WAS(Web Application Server)에서 처리한다. 웹서버와 WAS의 가장 큰 차이점은 DB에 접근하여 데이터를 처리할 수 있느냐 없느냐이다.

2. React에서의 CSS적용

2-1. 요놈. 기존 html에서와는 조금 다른 방식으로 CSS를 적용할 수 있었다.
2-2. 일단! 기본적으로 html과 비슷하게 CSS는 두 가지 방식을 쓸 수 있다.
2-2-1. 1) css파일을 작성해서 불러오기.
css를 작성하고, js파일에서 최상단에 import './파일이름' 구문으로 불러온다.
JSX 태그 안에서 className="<클래스이름>" 으로 지정해준다. 적용완료!
2-2-2. 2) JSX 태그에서 style속성으로 직접 css적용하기.
태그안에서 직접 적용시킬때는 객체형식을 이용해야한다.
style={{ cursor: "pointer" }}
혹은 숫자를 사용해야할 때는 연산으로 해준다. style={{ height: 75 + 'px' }}이런식으로!

덧붙여서, 백지에서부터 앱을 어떻게 설계할 건지 그려보는데 정성을 꽤 들여야한다는 걸 알 수 있었다. 청사진을 직접 이미지로 그려보면서, 어느 컴포넌트에서 state를 적용시킬건지, 함수를 내려줘야하는지, 어디서 state를 끌어올려야하는지를 최대한으로 결정을 해야 컴포넌트와 파일들을 만들어내는게 쉬워진다.
대충 모델링하고 넘어갈 단계가 아니었다.
팀 프로젝트 시작하게 되면, 이를 잊지말고 청사진 설계를 꼼꼼하고 정성스럽게 제작하고 넘어가야 할 것!!!