ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹 프로그래밍 맛보기 대작전 1편: 네이버를 해체해보자
    프로그래밍/웹 2019. 9. 18. 01:24
    본 내용은 2019년 2학기에 진행된 세미나 "웹 개발 맛보기 시리즈"의 강의 노트다

     

    1. 본 강의의 목적

    컴공생들, 유사 컴공생들(융합소프트웨어 등), 그리고 웹 프로그래밍에 관심이 있지만 어디서부터 어떻게 시작해야 할지, 혹은 어디까지 해야 할지 분간이 어려운 분들을 위해 "웹 개발을 한 바퀴 쭉 둘러보는 느낌으로 가볍게 여행을 다녀오는 것"이 이 프로젝트의 목적이다. 바꿔 말하면, 매우 얕은 수준으로 이것 저것 건드리면서 느낌만 이해하는 셈이다.

     

    이 강의는 대충 짚어봤을 때, 다음과 같은 질문들에 대한 답을 준다. 위에서도 언급했듯이, 매우 얕은 수준으로 말이다.

    • "웹 페이지는 무엇으로 이루어져 있지?" - HTML, CSS, JS & 프론트엔드의 개념
    • "리액트 리액트하는데 대체 그게 뭐야?" - 웹 개발의 (초간단) 역사 & 최신 트렌드
    • "(웹)서버가 뭐야?" - Node.JS, express & 백엔드와 웹서버의 개념
    • "www.naver.com이 어떻게 '네이버 화면'으로 연결되는걸까?" - 아이피, 라우터, 그리고 도메인의 개념
    • "AWS가 뭐지?" - 클라우드 컴퓨팅의 개념, EC2 사용법
    • (시간이 된다면) "실제 개발 현장은 어떨까?" - 애자일, 3-tier architecture, 도커, 리액트, 깃헙, CI/CD, 페어 코딩 등

     

    구체적으로는 다음과 같은 커리큘럼을 진행한다. 약 6주(6번의 세미나)를 예상하고 있다.

    • 개괄적인 설명
    • HTML, CSS, JS를 이용해 one-page website 만들어보기
    • local에서 서버를 가동해 만든 웹사이트를 배포해보기 (배포라는 표현을 써도 되는지 모르겠네)
    • AWS를 이용해 서버를 가동하기

     

    사실 전체 강의는 '백엔드'에 주로 포커스가 맞춰져있다. 나는 웹개발을 "HTML, CSS, JS"가 전부인 것처럼 (혹은 그렇게 오해하도록) 설명하는게 매우 위험하다고 생각하기 때문에, '잘 보이지 않는 부분들'을 많이 얘기하려고 한다. 그렇게 해야, 나중에 프론트엔드에 집중하더라도 뒤에서 무슨 일이 일어나고 있는지 '느낌'을 잡기 쉬울 것이다.

     

    주의, 또 주의! 어줍잖은 지식으로 느낌만 이해하고 있는 내가 떠드는 모든 '주장'은 반드시 무조건 신뢰하지 말고, 반드시 교차검증하길 바란다. 그렇게 어줍잖게 아는 주제에 왜 세미나를 진행하냐고? 글쎄.. 그래도 이렇게라도 해야 누군가가 지적을 해주지...않을까 하는 생각이었다

     

    2. 오늘(2019/9/21) 세미나 내용

    다음과 같은 내용들을 언급했다. 거의 기분 가는대로 떠든 듯하다. 몇 개 빠진 것 같긴한데 기억은 잘 안난다...

    • HTML, CSS, JS가 각각 무엇인가
    • NodeJS가 무엇인가
    • Django vs NodeJS
    • 웹페이지가 뜨는 원리, 공유기, 방화벽 등 (후에 다시 설명)
    • 리눅스를 쓰자 (멀티부팅)
    • 스프링합시다

    하나씩 얘기해보자.

     

    1) HTML, CSS, JS가 각각 무엇인가

    내가 HTML을 설명할 때 항상 쓰는 예시다.

     

    저 상태에서 키보드의 Delete 키 클릭

    사진으로 때우긴 미안해서 추가로 설명하겠다. 크롬 브라우저로 네이버 메인을 띄워놓고, F12를 눌러 개발자 도구를 열어서 `Elements` 탭에서 `<head>` 부분을 마우스 좌클릭 후 키보드의 `Del` 키로 삭제하면(헥헥), 다음과 같은 화면이 보일 것이다.

     

    띠용

    웹페이지가 매우, `밋밋`해졌다. 이것이 "네이버 메인을 구성하는 HTML 요소들"이다. HTML은 (고리타분한 비유를 들자면) 인간의 `뼈`에 해당한다. 웹페이지를 이루는 기본적인 요소들인 것이다. 1990년대의 인터넷 웹사이트들은 대개 이렇게 생겼을 것이다. 스크롤을 맨 아래로 내려보자.

     

    누가봐도 링크처럼 생긴 애들

    이 부분을 찾았는가? 이 다섯 개의 누가봐도 링크처럼 생긴 링크(..)들은, 누르면 그에 상응하는 페이지로 갈 것이다. 자, 이제 새로고침을 해서 이쁜 네이버를 복구하고, 스크롤을 아래로 내려보자.

     

    오모나 오모나

    아까랑 같은 내용, 그러나 다른 '디자인'의 다섯개 링크가 보인다. 이것은 CSS가 적용된 화면이다. 즉, CSS는 인간의 `살`, 또는 `겉모양`으로 이해할 수 있다. 우리 눈에 들어오는 웹페이지의 모양에 아주 직접적인 영향을 미친다.

     

    그럼 역으로 생각해봤을때, '`<head>`라는 부분이 css인가?' 라고 생각해 볼 수 있다. 흠, 꼭 일대일 매칭되는건 아니다. "<head>라는 부분에 css 설정을 담을 수 있다"고 이해하자.

     

    그럼 JS는 무엇일까? JS는 `Javascript`, 즉 프로그래밍 언어다. 웹의 3요소 중 유일하게 프로그래밍 언어인데, 단순하게 얘기하면 `if 문`이라던가, `변수`를 설정할 수 있다던가, `함수`를 만들 수 있다던가 등등이 가능하다는 것이다. 

     

    티스토리에 게시된 글들의 본문 하단에는 다음과 같은 버튼이 있다.

     

    공감 눌러줭

    여기서 '공감'이라고 써있는 글씨나, 그 옆의 텅 빈 하트를 누르면 어떻게 될까? 하트가 빨간색이 된다. 그게 어떻게 가능할까?

     

    이 부분에 JS가 끼어든다. JS로 작성된 특성 코드가, "'공감'이라는 텍스트 또는 하트 아이콘이 눌러졌을 때, 만약 하트가 비어있다면 (추천 0 ㅠㅠ) 빨간색으로 변환하고, 이미 빨간색이라면 숫자를 +1 한다" 라는 명령을 진행하는 것이다. JS는, 인체의 `근육`에 해당하며, 웹사이트를 동적으로 변하게 하는데, `동적`이라는 말은 `Dynamic`하다는 뜻이고, 다이나믹 하다는 것은 사용자(User)와 웹페이지가 `Interaction`(상호작용) 한다는 소리이고, Interaction이 발생한다는 것은 사용자가 어떤 행동을 하기 전/후에 웹사이트의 보이는 형태가 달라진다는 것이다. (다이나믹이라는 단어는 웹프로그래밍을 하다보면 정말 시도때도 없이 튀어나오기 때문에, 뉘앙스를 잘 잡고 가는 것을 추천한다)

     

    이렇게, HTML, CSS, JS가 무엇인지, 그리고 각각 웹페이지를 어떻게 이루고 있는지 알아보았다.

     

    아, 그리고 보다시피 CSS, JS가 없어도 HTML만 있다면 사이트가 존재할 수는 있다. 단, 네이버의 예시처럼 별로 이쁘지 않을 뿐이다.

     

     

    2) NodeJS가 무엇인가

    JS는 웹사이트를 다이나믹하게 만들어주기 위해 태어났다.

     

    C언어가 컴파일러가 없으면 "컴퓨터가 이해할 수 있는 언어"로 변환되지 못하는 것처럼, JS로 작성된 코드도 컴퓨터가 이해할 수 있게 변환해주는 과정이 필요하다. 그런데 정확히는 컴퓨터가 아니라 브라우저(크롬. 내가 크롬이라고 말하면 대개 브라우저를 의미하는 것이다)만 잘 이해하면 된다. 어차피 웹사이트를 위한 언어니까, 웹사이트를 화면에 표시하는 크롬만 잘 이해하게 해두면 충분한 것이다. 그래서 브라우저들이 자바스크립트를 이해할 수 있는 `엔진`을 브라우저에 장착하기 시작했다.

     

    이 엔진은 각 브라우저 별로 스펙이 많이 다르다. 따라서, Chrome 브라우저에서 작동하는 JS 코드가 Internet explorer 브라우저에서는 작동하지 않을 수도 있다. 참고로 Chrome 브라우저는 V8이라는 엔진을 쓰고 있다. 

     

    이제 JS가 어떻게 작동하는지 이해했는가? 근데 어떤 사람이, JS를 엄청 좋아했던 것 같은데, 이걸 "브라우저 밖에서" 사용하고 싶어했다. 브라우저 속에 있는 엔진이 JS 코드를 해석해주는데, 브라우저 밖으로 나가려면 어떻게 해야하겠는가? 어떤 용감하고 대담한 프로그래머는 V8을 크롬 브라우저 밖으로 빼내는데 성공했다. (자세한건 구글링) 

     

    NodeJS 홈페이지에 써있는 말. "런타임"이라는 표현을 썼다. 하단 레퍼런스 참고

    NodeJS는 그러니까, 특정 브라우저랑 관련 없이 작동하는, `JS 해석기`같은 것이다. 당신 컴퓨터에 NodeJS를 설치한다는 말은, "크롬 브라우저를 안키고도 JS 코드를 실행할 수 있도록 세팅"한다는 말과 같다.

     

    이렇게 JS는 브라우저로부터 떨어져나왔다. 그리고 몇 가지 장점과 특징 때문에 엄청나게 주목을 받았고, 또 몇 가지 이유 덕분에 `생태계`가 급속도로 커졌다. 프로그래밍 세계에서 생태계(ecosystem)가 커졌다는 말은, 수많은 사람들이 관심을 갖고 찾아와서 각종 라이브러리를 만들고, 언어를 발전시키고, 이를 활용한 결과물이 많아졌다는 것이다. 

     

     

    3) Python(Django) vs NodeJS

    "파이썬이랑 자바스크립트 중 어느걸로 웹페이지를 만들어야 할까요? 어느게 더 좋을까요?"

    둘 다 좋다. 그리고 둘 다 나름대로의 "어려운" 부분이 있어서 뭘로 배워도 좋을 것이다. 둘 다 강의도 많다는 것도 꽤 큰 장점이다.

     

    한 가지 짚고 갈 것이 있다. Python 진영에는 웹 프로그래밍을 위해 `django`와 `flask` 두 가지 프레임워크가 있다는 것이다. 이 중 더 유명한 것은(=초급자용 강좌가 많은 것은) 명실상부 django다. 그리고 NodeJS 진영에서 웹 프로그래밍에 사용하는 프레임워크 중 가장 유명한 것은 `express`다. 개인적으로 이 express는 flask와 비교하는 것이 적절하다고 생각한다.

     

    무슨 말이냐면, python의 django와 NodeJS의 express를 비교하면 안된다는 것이다. 만약 django와 express의 초급자용 습득 난이도를 묻는다면 압도적으로 express가 쉽다고 장담할 수 있다. 하지만 두 프레임워크가 지향하는 것이 꽤 달라서, 이런 설명은 별 의미가 없다고 생각한다.

     

    복잡하다고 생각하면, 그냥 NodeJS로 웹페이지 하나 만들어보자. 왜냐면 앞으로 내가 설명할 게 그거니까.

     

     

     

    4) 맥북이나 리눅스를 쓰자

    윈도우 컴퓨터로 개발하면서 느낀 것은, "이상한 자존심 접고 우분투 멀티부팅 해서 개발하는게 압도적으로 유리하겠다"라는 생각이다. 

     

    프로그래밍 자체에서 발생하는 에러 잡는 것도 스트레스인데, "윈도우이기 때문에 발생하는 에러"까지 잡으면, 농담 아니고 지친다. 피곤하다. 초보 개발자에게는 정말 무지막지한 burden으로 느껴지더라. 그때는 윈도우가 유일한 해답인줄 알아서 그냥 있었다만... 멀티부팅은 엄청 쉽다고 말할 수 없지만 강의가 엄청 많으므로, 가급적 추천하는 바이다.

     

     

    5) 스프링합시다

    요즘 꾸준하게 `Java/Spring` 스택을 강추하고 다니는 중이다... 개인적으로 느낀 점 때문도 그렇지만, NodeJS가 `싱글 쓰레드` 기반이라는 이유도 있다. 

     

    쓰레드를 쉽게 설명하자면, 이런 거다. 만 명이 동시에 웹사이트에 접속할 때, `Spring Framework`는 열개의 쓰레드가 천 명씩 처리하도록 일을 '분담'할 수 있다. `Express Framework`는? 엄청 빠르게 만 명을 '순차적으로' 처리한다. 이것은 매우 극단적인 비유라서 사방에서 맷돌을 집어던져도 별로 할 말은 없지만, 대기업이 자바를 선호하는 주된 이유 중 하나임은 확실하다.

     

     

    6) 기타

    그 외에도 페어 코딩(pair coding), meaningful github commit message 등 내가 보고 들은 지식(?)을 짧게 짧게 던졌던 것 같다.

     

     

    3. 숙제

    아래 세 강의 시리즈를 모두 끝낼 것.

     

    https://www.codecademy.com/learn/introduction-to-javascript

    https://www.codecademy.com/learn/learn-html

    https://www.codecademy.com/learn/learn-css

     

    Codecademy는 매우 훌륭한 프로그래밍 교육 플랫폼이다. 유료 플랜은 안써봤지만.

     

    위 강의들은 절대 어렵지 않다는 점을 분명히 강조해두겠다.

     

     

     

     

    reference

    - https://asfirstalways.tistory.com/99

    : 런타임이 뭔지 살짝 더 이해하고 싶은 사람은 이쪽으로. time이 아니라고 이해하는게 마음이 편할 듯.

Designed by Tistory.