[스파르타코딩클럽] 웹개발 종합반 - 1주차 (1-2)

웹서비스의 동작 과정에 대하여 배워보기

 

과정에서 프로젝트를 총 4개를 만들수 있게 됨. 배포하는 과정까지 해볼 수 있다.

웹의 동작 개념에 대하여 짚고 넘어가기

 

naver의 아무 항목을 우클릭 -> 검사를 누르면 개발자 도구가 열리게 됨.

여기에서 우측 상단에 있는 ...을 누르게 되면 다음과 같이 나타난다.

도킹 위치에서 가장 왼쪽에 있는 팝업창 형태가 가장 가독성이 좋기 떄문에 그걸 누르면 다음과 같이 창이 나오게 된다.

어... 그리고 솔직히 당황스러운 점이 있었다.

강의에서는 네이버 뉴스를 클릭하라고 했지만 내 네이버에는 

네이버 뉴스 항목이 없었던 것이었다. 그래서 그냥 뉴스 홈을 클릭해 주었다.

그 다음에 배운것은 무척 흥미로운 내용이었다.

으로 바꾸자, 실제 네이버에서 

이렇게 바뀌어져 표현된 것이었다. 솔직히 신기했다.

당연하지만 이 수정 사항은, 내가 보는 이 웹페이지만 마음대로 바꿀 수 있었다.

어떤 원리로 가능한 걸까?

인터넷을 끄면, 끄는 그 순간에 바로 다운되진 않는다. 다른 웹페이지로 이동할 때 연결이 끊김을 표시하게 된다. 내가 보고 있는 페이지는 인터넷과 관련이 없다.

마지막 힌트로 새로 고침을 하게 되면 원래대로 돌아오게 된다.

 

내가 생각한 답은 바로 페이지의 로딩이 끝났을때, 로딩된 페이지의 데이터들 중 일부(실시간 동기화가 필요없는 부분들을) 램과 같은 장치해 저장해두는 것 아닐까였다. 그리고 새로고침이나 다른 페이지로의 이동을 할 때 네트워크를 통하여 페이지에 대한 정보를 받아오는 것 이라고 생각했다.

 

강의에서는 새로고침하면 원상복귀되는 이유는, 뭔가를 서버로부터 새로 받아서 그려주는 것이기 떄문이다.

브라우저의 역할은 서버에게 요청을 하고(주소를 입력하는것을 통하여), 결과물을 받아서 그려주는 것이고, 이것이 웹서비스의 동작원리이다.

 

그림으로 알기 쉽게 표현해주셨는데, 

브라우저가 api와 같은 문을 통하여 서버에 요청을 하면 어떠한 처리를 하여 html, css, JS 코드를 다시 전송합니다. 브라우저는 이 코드를 이용하여 사이트를 표현하게 된다.

HTML은 뼈대이다.(각 항목들의 위치, 뉴스스탠드 옆에 뉴스홈이 있는것과 같은)

CSS는 꾸미는 코드이다.(서식같은 내용)

JS는 사이트에서 동적인 역할이다.(다른 사이트로의 이동, 애니메이션 효과 등)

 

서버는 클라이언트에게 그릴 내용을 보내주는것이다. 이 내용은 뜯어보면 데이터이다.(텍스트 데이터)

특수한 경우에 데이터만 받아오고 싶을 경우가 있다.

ex) 영화 앱을 켜서 콘서트 예매를 할때, 새로고침 없이도 좌석이 없어지기도 하고 생겨나기도 하는데 바로 이 경우가 데이터만 보내는 경우이다.

 

이러한 경우에 JSON 형식이라고 하는데 나중에 배우게 될 것이다.

 

 

배우게 될 순서에 대하여 알려주었는데, 2주차부터 javascript를 가지고 서울시 공공데이터와 같은 것들을 이용하는 방법을 배운다.

3주차는 컴퓨터에 명령을 내릴 수 있는 python, 그리고 파이썬을 이욯하여 크롤링(웹에서 데이터를 긁어오는 행위), 그리고 mogoDB를 다루는 방법을 매운다.

4주차는 직접 웹서비스를 만들어보고 총 3번 프로젝트를 만들면서 그 느낌을 전체적으로 익히고, 만든 결과물을 aws라는 클라우드 환경에 배포를 해서 모든 사람들이 볼 수 있게 한다고 한다.

프로젝트의 예시들을 보여주며 1-2 강의가 끝나게 되었다.