머리글
프론트엔드(FE)의 꽃이라 할 수 있는 'React'에 관한 '실무 기초' 강의를 본격적으로 수강하기에 앞서, 서버와 클라이언트라는 큰 줄기를 통해 몇 가지 기초 지식을 살펴보았다.
서버와 클라이언트
인터넷이 동작하기 위해서는 컴퓨터가 최소 2대 있어야 한다. 1대는 인터넷이라 할 수 없고, 3대는 본질적이지 않다. 2대의 컴퓨터가 '요청'과 '응답'이라는 매커니즘을 통해 작동한다는 점이 핵심이다.
'Client'가 'Sever'에 무엇을 '요청'하고, 'Sever'는 'Client'에게 무엇을 '제공(=응답)'하게 되는지를 아는 것도 중요하다.
웹 환경에서 클라이언트와 서버가 주고 받는 자원은 크게 '정적 자원'과 '동적 자원' 두 가지로 구분된다.
'정적 자원'은 'HTML', 'CSS', 'JS'처럼, 정말 가끔 업데이트 되는 경우가 아니라면 늘 고정적인 상태로 '요청'과 '응답'의 터널을 다니게 되는, 말 그대로 static한 자원을 의미한다.
이에 반해 '동적 자원'은 과거 네이버의 '실시간 검색어 순위'와 같이 실시간으로 바뀌는 데이터 자원을 의미한다. 순위에 변동이 있을 때마다 웹 화면이 '새로고침' 된다면 여러모로 불편할 것이다. 따라서 이러한 '동적 자원'을 받을 때에는 데이터만 갈아 끼우게 된다.
그렇다면 'client와 server의 자원 교류의 장'인 웹에서 FE가 해야 하고, 할 수 있는 일은 무엇일까? FE개발자는 화면을 그리고, 데이터를 끼얹는 일을 하게 된다.
추가적으로 '서버리스(Serverless)'의 개념을 살펴보았다. serverless의 핵심은 'serverless가 back-endless가 아니라는 점'에 있다.
severless를 서버가 필요하지 않다는 뜻으로 오해할 수 있는데, sever가 없다는 것은 요청에 대한 '응답'을 해 줄 존재가 없다는 사실을 뜻하고, 이는 논리적으로 성립될 수 없는 말이다.
serverless는 서버는 당연히 필요하지만, sever에 관한 인프라 작업을 굳이 내가 할 필요는 없다는 것을 의미한다. 서버의 사양 또는 네트워크 설정과 같은 인프라 작업이 이미 완료된 서버를 빌려쓰는 것이 바로 'Severless'이다.
HTML
HTML은 Hypertext Markup Language의 두문자를 딴 단어이다. 'Hypertext'란 말 그대로 text를 초월한 무언가일텐데, 웹의 근본적인 속성인 '링크'를 의미한다고 해석해도 무방할 듯 하다. 'Markup'은 문자 그대로 표시한다는 것을 의미한다.
요컨대 '링크'라는 웹의 근본적인 속성을 한 손에 들고, 다른 손에는 웹에서 표시되는 text 또는 image를 '표시'해주는 능력을 쥐고 작동하는 언어가 바로 'HTML'이라고 할 수 있다.(엄밀히 따지자면 HTML은 logic을 가질 수 없기 때문에 '프로그래밍 언어'라고는 할 수 없다.)
HTML을 통해 간단한 'TODO List'를 만드는 실습을 진행했다.
실습에 이어서 'DOM(Document Object Model)'의 개념을 살펴보았다. 'DOM'은 '문서객체모델'으로서 html 단위 하나하나를 객체로 생각하는 모델이다.
위 코드에서는 div 요소가 h, p, button 등의 요소를 포함하고 있다. 더 큰 구조로 보면 div 요소는 body 요소 내부에 위치하고 있다. 이른바 '부모자식' 관계로 이루어진 코드라고 할 수 있는데, 이처럼 객체 안에 또 다른 하위의 어떤 값이 있는 구조를 '트리구조'라고 한다. 따라서 "DOM은 트리구조이다."라는 결론에 도달하게 된다.
각각의 트리구조에 바로 접근하는 방식을 배워봤다. 개발자도구 콘솔 창에서 'document'를 입력하면 전체 트리구조를 확인할 수 있고 'document'에 '.'과 하위 구조를 추가해서 입력해주면 원하는 위치의 트리 구조를 바로 확인할 수 있다.
div 태그에 관한 요소들만 가져오도록 콘솔에 입력해봤다.
'.body.'에 이어서 'div'를 입력하면 'undefined'가 현출된다. '.'을 입력하면 body태그 안에 있는 자식요소에 접근할 수 있는 여러 방식들이 제시된다. 'getElements~'를 사용하여 'div' 태그만을 확인할 수 있었다. body를 확인할 때와의 차이는 그저 기본적인 약속에서 비롯된 것이다.
회고
역사상 최고의 수학 천재 중 한 명으로 평가받는 '존 폰 노이만'은 "수학은 이해하는 것이 아니다. 그저 익숙해지는 것이다."라고 말한 바 있다. "나는 천재니까 이해 따위는 필요 없어"라는 식으로 한 말은 분명히 아닐 것이다. (근데 그럴 수도 있는 게 너무 천재다...)
프로그래밍이 됐든 아니면 다른 무엇이든, 공부의 최종적인 목표는 '익숙함'에 있다고 생각한다. 익숙함에 도달하기 위한 도구 중에 하나로서 '이해'가 있을 뿐이다.
이해가 되니 안 되니 따위의 감정에 무너지지 않고, '익숙함'을 향해 달리는 태도가 더욱 요구되는 시점이라고 판단한다. 어차피 하루가 다르게 바뀌는 요즘 세상에서는 '완벽한 이해', '상식' 등은 허상일 수도 있다. 그저 새로움에 익숙해질 뿐이다.
"당신의 상식은 여전히 상식적인가요?"라는 바이브컴퍼니 송길영 부사장의 질문이 뇌리를 스친다.
