위코드 멘토님 송은우님의 강연을 바탕으로 쓴 포스팅입니다 :)
웹서비스
그냥 개발공부를 시작하는 것보다는 한번쯤은 짚고 넘어가면 좋을 부분이 바로 웹의 역사! 뭐든 역사와 의미를 알고가면 좀 더 재밌게 공부할 수 있으니깐~!ㅋㅋ
먼저 인터넷이라는 개념은 1960년대에 처음 나왔는데,군사목적으로 문서를 빨리 빨리 전송하려고 나온것! 그 당시에는 물리적으로 떨어져있는 컴퓨터와 컴퓨터와의 연결을 뜻하는게 바로 인터넷이었음. 지금과는 완전히 다른 개념쓰~ 우리와 좀 더 친숙한 의미의 인터넷은 1960년대에 나왔져! World Wide Web. 줄여서 WWW. 10년만에 상용화가 될 정도로 빠른 발전이 있었지요~
저의 초등학교 시절 과제는 이 디스켓과 함께 했었는데.. 지금은 사용하지 않는 비운의 디스켓…☆ 여튼.. 그당시만 해도 CD를 굽는다거나 플로피 디스크에 문서를 저장했었는데, 요즘은 다운로드만 하면 끝! 해외에 기술을 수출하려고 해도 배타고 비행기타고 난리난리 했지만 요즘은 인터넷만 연결하면 되지요. 개이득!!
인터넷이 가져온 가장 큰 혁신이 바로 이렇게 공간적인 제약을 없앤 것!
초창기 Web Service Architecture
이걸 짚고 넘어가기 전에, 요즘의 야후와 어린시절의 야후를 비교해보자..!
2000년대의 Yahoo는 거의 신문인줄… 야후 꾸러기 들어가서 플래시게임 하고 놀았었는데 그 당시엔 별로 촌스럽다고 생각을 안 했지만 지금 보니 ㅋㅋㅋㅋㅋㅋㅋㅋ
웹의 발달과 함께 닷컴붐 혹은 닷컴버블현상이 일어났음. 이 당시에 너도 나도 IT사업을 하다 보니 망한곳도 많고 ㅠㅠ 여튼 이 과정 속에서 UI가 중요해졌음! html만으론 한계쓰~
- Hyper Text Markup Language HTML이 뭐의 줄임말인줄은 알았으나 마크업과 마크다운의 차이를 잘 몰랐다. 근데 마크업은 태그를 통해 표시(Mark up)하는 것. 글만 보면 이게 div인지 p인지 몰라.. 어떻게 랜더링해야 하는지 고민쓰..! 근데 내가 쓰고 있는 이 개츠비 블로그는 마크다운 형식이라 ’## 이것은 큰글씨’ 이런식으로 직관적으로 효과를 줘서 딱 알아볼 수 있음!! 제일 앞에 붙은 hyper는 html이 link 위주의 글이라는 걸 알려준다.(하이퍼링크 소곤소곤…)
- Cascading Stytle Sheet html과 마찬가지로 css로도 로직을 구현할 수 없음. 얘는 그저 꾸며주기만 할 뿐…!
그래서 우리는 다양한 로직을 구현하기 위해 Javascript가 필요한거다!
네이버 실시간 검색순위를 생각해보자!
실검의 네모박스는 한번 랜더링되면 바뀌지 않지만(정적) 실검의 키워드는 실시간으로 바뀌고 있다(동적) 크롬 개발자도구 툴을 이용해보면 우리 눈에 보이지 않는 투명 실검영역이 점차 위로 올라가고 있음을 확인할수 있다~
그렇다면
왜
다른 언어를 웹사이트에 쓰지 못했을까? 우리가 가진 프로그래밍 언어는 많은데.. 못생겨서? 컴파일이 안되서? 전부 아니다. 웹 브라우저가 C언어 같은 애들을 실행하지 못했기 때문에 걔네가 실행할 수 있는 언어가 필요했던 것!
자바스크립트는 넷스케이프라는 회사의 브렌던 아이크(Brendan Eich)씨가 만들었는데, 넷스케이프는 그당시 최초로 상용화된 웹 브라우저였고 인기도 퍽발! 그럼 왜 자바 스크립트일까? java랑 대체 무슨 관련이 있길래… 사실 직접적인 관련은 없다 ㅎ
원래 java는 Sun Microsystems라는 회사가 개발했는데 망… 그래서 Oracle이 인수했음!ㅠㅠ java랑 비슷한데 웹적으로, 동적으로 구현할 수 있는 언어를 만들자 그게 javascript인 것! java인데 script 기능이 되는 것이죠~
이후, java는 applet이라는걸 따로 만듬. 약간 flash 같은거!? 근데 얘는 망한듯.. 약간 무겁다네요
2세대 Web : 동적인 요소가 가미됨
html로 정적인 부분을 구현하고 script 태그에 있는 부분을 랜더링해서 동적이게 만든 것. 하나의 웹서버가 브라우저에 html,js,xml 다 전송쓰~
요즘은 SPA 무조건 동적쓰! 주객전도쓰~
주객전도쓰~ 이제는 html이 아닌 javascript 위주로 돌아간다네~~ => django 같이 한 서버에서 다 처리하는 애들은 api에 적합하지 않음. 너무 헤비해! 그래서 우리는 Single Page Application을 쓰는데, React가 이 처리를 도와줌.
- Single Page Application 하나의 페이지로 전체 애플리케이션을 구현할수 있음. html마저도 js를 통해서 생성하는것..! js가 그때그때 필요한 태그들을 생성해버린다…! 예를 들어, file 하나에 html 페이지에서 body태그는 div 하나정도만 잡고, link라는 태그에 js 파일 링크 걸고, 그 본체인 js 에서 다 구현쓰~ 이열! (사실 SPA에 대해선 아직 자세히 알지 못하므로 시간날때 다음번 포스팅에서 자세히 다뤄볼것이다)
이 과정에서 브라우저는 서버랑 데이터만 주고받으면 되는것이고, 개발자 세계를 생각해보면..
ui/ux를 담당하는 front와 서버/ 데이터를 담당하는 back의 구분이 명확해짐.
빅데이터가 중요해진 시대..
트위터를 생각해보자. 기능적으론 꽤 구현하기 쉬운 편이다. 그치만 동시에 전세계에서 몇 백만명이 써도 나 혼자 쓰고있는 듯한 속도감이 아주 좋다… 그렇게 만드는게 참 어려운데 대단한 기술이라는 것만 알겠다..! 그래서 페북은 엔지니어가 만명정도 된다고 우와…
데이터 양이 너무 많아지면 데이터를 여러 서버에 분산시켜서 저장한 담에 분석할 때 각자 독립적으로 하고, 분석결과를 하나로 조합해서 데이터베이스에 넣고.. 여튼 빅데이터가 중요해짐!
갑분…
개발팀 구성
늘 궁금했던 건데 이번 은우님 강연을 통해서 개발팀에 역할이 어떻게 나누어져 있는지 알게되서 넘나 뿌듯뿌듯
- front -Product Manager: 어떤 시스템을 만들지 기획. 뭘뭘 먼저 개발할지 순서를 결정하기도 하고, user feedback을 받기도 하고, business와 개발팀의 중간 역할을 함 -designer : ui, ux 디자인 -frontend developer: 말그대로 앞단에서 일하는 개발자. 우리나라는 퍼블리셔라고 html, css 해주는사람 따로 있음
- back -빽의 앞: api 담당 -> 실검순위가 나오는 테이블은 프론트, 실제 실검 데이터는 빽이 담당. 로그인 페이지 꾸미는게 프론트라면 빽은 프론트가 보내준 아이디와 비번을 가지고 맞으면 맞다 아니면 아니다 반응 해주는 알고리즘을 만든다. -빽의 뒤 :데이터 수집, 분석, 관리 등
-devops : 빽 개발자가 system infa 관리도 함. aws같은 클라우드 서비스가 발전하면서 하드웨어를 몰라도 시스템 인프라 관리 가능쓰 -sysops : 서버관리쓰. 하드웨어적 -data scientist : 머신러닝, ai 등 데이터 분석 알고리즘과 데이터 분석 모델링 구현 -data engineer : ds 도와서 데이터 모델링 구현해줌 -tester : QA- 직접 메뉴얼 테스팅쓰. sw enginnerr in test/ test automation 자동테스트 시스템 전문 구현