리액트 및 클라이언트의 실체

최근에 클라이언트 기술에 대한 이해를 잘못하고 있었던 바람에 몇주간을 삽질하고 고생했었던 경험이 있어서 이를 글로 정리해보고자 한다. 

웹 개발에서 클라이언트라 함은 무엇인가? 주로 웹 브라우저에서 동작하는 사이트, 프론트엔드 웹페이지를 의미한다.

근데 내가 지금까지 헤매고 있었던 개념이 있었다. 바로 클라이언트 프로그램의 실체이다. (리액트 등등)

웹브라우저에서 동작하는 사이트는 예를들어 네이버닷컴, 구글 등등과 같은 사이트는 결국 html, css, javascript로 구성된 파일이다. 

웹 브라우저는 그 파일들을 해설하고 보여주는 프로그램이고, 우리가 사용하는 pc에 깔려있다. 

리액트같은 기술은 결국 html, css, javascript로 브라우저에서 동작하는 웹페이지을 만들기 위한 기술인데, 더 빠르고 쉽게 만들수 있도록 향첨가?를 한 기술이다. 

결국엔 결과물은 html, css, javascript로 구성된 파일들이다. 

내가 제일 이해가 안되었던게 리액트가 결국 정적파일을 만든다는 부분이었다. 

서버개발쪽으로 개발 커리어를 시작했었고, Node.js로 서버개발을 하면 로컬호스트에서 서버 하나 띄워놓고 그쪽으로 REST API 요청하는 방식으로 개발하고 필요하면, 필요한 패키지들 설치하고..

리액트도 굉장히 유사하게, 별도로 서버를 띄워야하고 Node.js 가 필요하고, NPM으로 패키지 관리하니까 

노드랑 비슷하게 동작하는줄 착각하고 있었다. 

근데 그건 아니었고, 리액트는 결국 정적 웹페이지를 만드는 도구이다.

결국에는 브라우저에서 html, css, Js로 구성된 파일로 변환되어 구동된다.

구동되는 방식은, 웹사이트에 접속하면, 관련 파일을 다운로드에서 브라우저에서 예쁘게 보여준다. 

실체는 번들된 정적인 파일이기 때문에, 서버프로그램들과는 다르게, S3 같은 스토리지에 올려서 서비스 할 수 있다. 

그래서 배포시에 build 파일을 만드는거고, 웹사이트에서 구동가능하게 만들어진 최종본이기 때문에 그 파일만 올리면 되는 것 이었다. 

정적인 파일들이 배포되고, 그안에 우리가 개발한 모든 내용(코드)를 볼 수 있기 때문에 클라이언트에는 secret과 같은 민감한 정보가 포함되면 안되는 것 이었다. 

개발은 그냥 다른 코드 보며 비스무리? 하게 하니까 어찌저찌 돌아가긴 했는데, 이런 근본적인 이해가 부족하다 보니 결국 헤매고 삽질하는 순간이 오는것 같다.