<div id="readability-page-1" class="page"><div><div><a rel="noopener follow" href="/@totuworld?source=post_page-----82f8d40d264e--------------------------------"><div aria-hidden="false"><p><img alt="송요창" src="https://miro.medium.com/v2/resize:fill:88:88/1*nAMOvHeZTqTZjdz33jQ2Ag.jpeg" width="44" height="44" loading="lazy"></p></div></a></div><p id="4e04">게임 개발, 웹 서비스 개발할 때 정말 다양한 사람들이 모여서 긴밀하게 일한다. 그런데 각 직군별로 쓰는 용어가 낯설어서 이게 무슨 말인가 생각하다보면 회의 흐름을 놓치는 일이 허다하다. 못 알아들으며 고개를 끄덕이다가 자칫 질문이라도 받으면 난감하다.</p><p id="7a5c">지금도 IT 용어때문에 고생하는 나를 위해 천천히 글을 정리해보려고 한다.</p><h2 id="5dc4">HTML과 CSS</h2><p id="61b1">문서를 체계적으로 정리하기 위해 사용하는 언어이다. 문서의 위계를 잡는다고 하면 될까? 아래 왼쪽 이미지를 살펴보자. 우아한형제들 기술블로그에 올라온 글 목록이다. 잘 읽히나?</p><p id="2e59">뭔가 내용은 있는데 한 눈에 잘 안들어온다. 어떤걸 먼저 읽어야할지 몰라서 눈이 이리 저리 움직인다.</p><figure><figcaption>좌우 차이를 살펴보자</figcaption></figure><p id="ca8d">오른쪽 이미지가 정보를 파악하기 좋다. 출판된 서적, 신문, 잡지 등을 살펴보면 위계가 있어서 어딘가는 강조되고 어딘가는 약하게 표현된다. 우리는 이렇게 위계가 있는 문서를 훨씬 더 잘 파악한다. HTML과 CSS를 우리가 인터넷을 통해 접하는 웹 사이트를 출판물처럼 위계를 가질 수 있도록 만들때 쓴다.</p><p id="9582">그중에서 HTML은 문서의 각 영역을 나누는데 쓴다. 예를들어 문서에서 어디가 제목이고, 본문인지 나타낼 수 있도록 해준다. CSS는 각 영역이 어떤 모습으로 표현될지 꾸밀 때 쓴다. 제목이 얼마나 큰 글자로 들어갈지, 색은 어떻게 할지, 이미지가 본문 사이에 있을지 혹은 전체를 꽉 채울지 등등을 상상하면 된다.</p><p id="6287">HTML과 CSS를 활용해서 디자인 산출물을 웹 브라우저에서 살펴볼 수 있도록 변경하는 작업을 하는 직업은 생각보다 많은 시간을 잡아먹는다. 특히나 CSS는 스타일을 다루는 일이지만 원하는대로 움직이지 않아서 많은 밈을 생산하고 있다.</p><figure></figure><h2 id="851c">JavaScript</h2><p id="32e4">날씨를 보여주는 웹 사이트를 상상해보자. 이를 HTML과 CSS로만 작업했다면 속초 날씨를 보다가 종로구 날씨가 보고 싶다면 브라우저 주소창에 각각 다른 주소를 입력해야한다. 실제 세계에서 속초 날씨 문서와 종로구 날씨 문서가 있다고 생각하면 된다. 당연히 문서를 바꿔서 봐야 원하는 곳의 주소를 볼 수 있다. 그러다가 누군가 화면에서 주소지만 입력하거나 선택하면 해당 주소지의 날씨가 바로 표현되면 좋겠다고 생각했다.</p><p id="b54d">이뿐인가? 주식창에서 종목만 변경하면 같은 화면에서 해당 종목의 차트만 나오길 원하기도하고, 해당 창에서 바로 매매를 원하기도 한다.</p><p id="3691">이런 다양한 요구사항은 웹 페이지를 어떻게하면 동적으로 변경할 수 있을지 고민하게 만들었고, 이를 돕기 위해서 JavaScript라는 프로그래밍 언어를 만들게 되었다.</p><p id="43e3">웹으로 뭔가 해보려면 HTML, CSS, JavaScript(js로 축약해서 부르기도 함)를 학습하는게 기본이다.</p><p id="19e8">웹 브라우저 위에서 주로 동작했는데 node.js가 나온 이후로 웹 브라우저 밖에서 동작하기 시작해서 지금은 앱 개발(React Native 활용)이나 데스크탑 앱 개발(Electron 활용) 등 다양한 곳에서 사용되고 있다.</p><figure></figure><h2 id="4b0b">앞에 Java가 붙는데 그럼 Java라는 언어와 비슷한건가?</h2><p id="44e3">이름이 비슷하다고 비슷한 사람이 아니듯 Java와 JavaScript는 <strong>완전히 다른 언어</strong>이다.</p><blockquote><p id="d8b9">The name JavaScript came from Netscape’s support of Java applets within its browser. Many say it was also a marketing tactic to divert some attention from Java, which was the most buzzed-about language at the time.<br>출처: <a href="https://www.springboard.com/blog/data-science/history-of-javascript/" rel="noopener ugc nofollow" target="_blank">https://www.springboard.com/blog/data-science/history-of-javascript/</a></p></blockquote><p id="00d0">JavaScript는 Netscape사에서 일하는 Brandan Eich가 10일만에 만들었는데, 이를 세상에 내놓은 Netscape가 Java 유명세에 편승하려고 Java를 앞에 붙이는 마케팅 전략을 썼다는 평도 있다.</p><h2 id="21a5">API</h2><p id="c28b">API는 Application Programming Interface의 줄임말이다. 쉽게 말해서 각기 다른 프로그램이 서로 소통하기 위한 규칙이라고 생각하면 된다. 소통하기 위한 규약을 적어둔 문서라고 이해해도 된다.</p><p id="218b">예를 들어, 구글에서 검색을 할 때, 구글 검색 서버는 검색어를 받아서 검색 결과를 반환한다. 이때, 구글 검색 서버와 구글 웹 사이트는 소통하기 위한 규칙인 API를 준수하면서 통신한다. 두 개의 프로그램이 API를 사용하여 통신함으로써, 우리는 구글 웹 사이트를 사용하여 구글에서 검색을 할 수 있게 된다.</p><p id="a24b">API는 소프트웨어 개발에서 매우 중요하다. 기존에 만들어둔 소프트웨어를 재사용가능해져, 새로운 기능을 쉽게 추가하고, 소프트웨어를 더 빠르고 쉽게 개발할 수 있게 된다.</p><h2 id="0871">HTTP API</h2><p id="168d">만약 웹 서비스를 만드는 회사에서 API라는 말을 한다면 그건 대게 HTTP API를 뜻한다. HTTP는 Hypertext Transfer Protocol의 줄임말이다. 브라우저를 통해 웹 서버에 요청을 보내고 받을 때 사용한다. 앞서 말한 구글 검색 서버와 구글 웹 사이트가 사용하는게 HTTP API다.</p><h2 id="b862">REST API</h2><p id="71a4">REST는 Representational State Transfer 줄임말이다. REST API는 HTTP API의 한 종류이다. HTTP API는 웹 서버에 자원을 요청하고 응답받는데 사용되는데, REST API는 이를 조금더 쉽게 유지 관리할 수 있도록 HTTP API를 만드는 방식을 정한거라고 생각하면 된다. REST API라고 말하면 HTTP API 얘기하는거라고 생각해도 무방하다.</p><p id="3922">다만 안타깝게도 REST API 규격을 제대로 지키는 경우가 거의 없다. 왜냐하면 REST API를 만드는 제약조건 중 Uniform Interface 를 지키지 못하기 때문이다. 이 제약 조건을 이루는 항목 중 self-descriptive message 라는게 존재한다. 쉽게 말해서 메시지만 봐도 해석이 가능해야 한다는 말이다. 굳이 별도로 문서를 참고하지 않아도 API 응답만 봐서 파악이 가능해야한다는 건데 이게 잘 안된다.</p><h2 id="3b09">혹시 더 알고 싶은 내용이 있나요?</h2><p id="dd8f">다른 내용도 차차 적어보겠지만 이외에 궁금한 내용이 있으면 댓글이나 <a href="https://blahx2.totu.dev/totuworld" rel="noopener ugc nofollow" target="_blank">https://blahx2.totu.dev/totuworld</a>에 흔적 남겨달라.</p></div></div>

Stories by 송요창 on Medium

totuworld

처음 만나는 IT 용어를 위한 안내서 — 01
게임 개발, 웹 서비스 개발할 때 정말 다양한 사람들이 모여서 긴밀하게 일한다. 그런데 각 직군별로 쓰는 용어가 낯설어서 이게 무슨 말인가 생각하다보면 회의 흐름을 놓치는 일이 허다하다. 못 알아들으며 고개를 끄덕이다가 자칫 질문이라도 받으면 난감하다.
지금도 IT 용어때문에 고생하는 나를 위해 천천히 글을 정리해보려고 한다.
HTML과 CSS
문서를 체계적으로 정리하기 위해 사용하는 언어이다. 문서의 위계를 잡는다고 하면 될까? 아래 왼쪽 이미지를 살펴보자. 우아한형제들 기술블로그에 올라온 글 목록이다. 잘 읽히나?
뭔가 내용은 있는데 한 눈에 잘 안들어온다. 어떤걸 먼저 읽어야할지 몰라서 눈이 이리 저리 움직인다.
오른쪽 이미지가 정보를 파악하기 좋다. 출판된 서적, 신문, 잡지 등을 살펴보면 위계가 있어서 어딘가는 강조되고 어딘가는 약하게 표현된다. 우리는 이렇게 위계가 있는 문서를 훨씬 더 잘 파악한다. HTML과 CSS를 우리가 인터넷을 통해 접하는 웹 사이트를 출판물처럼 위계를 가질 수 있도록 만들때 쓴다.
그중에서 HTML은 문서의 각 영역을 나누는데 쓴다. 예를들어 문서에서 어디가 제목이고, 본문인지 나타낼 수 있도록 해준다. CSS는 각 영역이 어떤 모습으로 표현될지 꾸밀 때 쓴다. 제목이 얼마나 큰 글자로 들어갈지, 색은 어떻게 할지, 이미지가 본문 사이에 있을지 혹은 전체를 꽉 채울지 등등을 상상하면 된다.
HTML과 CSS를 활용해서 디자인 산출물을 웹 브라우저에서 살펴볼 수 있도록 변경하는 작업을 하는 직업은 생각보다 많은 시간을 잡아먹는다. 특히나 CSS는 스타일을 다루는 일이지만 원하는대로 움직이지 않아서 많은 밈을 생산하고 있다.
https://medium.com/media/2d8df7d0ee797a93f4bcf61586eaf2fb/href
JavaScript
날씨를 보여주는 웹 사이트를 상상해보자. 이를 HTML과 CSS로만 작업했다면 속초 날씨를 보다가 종로구 날씨가 보고 싶다면 브라우저 주소창에 각각 다른 주소를 입력해야한다. 실제 세계에서 속초 날씨 문서와 종로구 날씨 문서가 있다고 생각하면 된다. 당연히 문서를 바꿔서 봐야 원하는 곳의 주소를 볼 수 있다. 그러다가 누군가 화면에서 주소지만 입력하거나 선택하면 해당 주소지의 날씨가 바로 표현되면 좋겠다고 생각했다.
이뿐인가? 주식창에서 종목만 변경하면 같은 화면에서 해당 종목의 차트만 나오길 원하기도하고, 해당 창에서 바로 매매를 원하기도 한다.
이런 다양한 요구사항은 웹 페이지를 어떻게하면 동적으로 변경할 수 있을지 고민하게 만들었고, 이를 돕기 위해서 JavaScript라는 프로그래밍 언어를 만들게 되었다.
웹으로 뭔가 해보려면 HTML, CSS, JavaScript(js로 축약해서 부르기도 함)를 학습하는게 기본이다.
웹 브라우저 위에서 주로 동작했는데 node.js가 나온 이후로 웹 브라우저 밖에서 동작하기 시작해서 지금은 앱 개발(React Native 활용)이나 데스크탑 앱 개발(Electron 활용) 등 다양한 곳에서 사용되고 있다.
앞에 Java가 붙는데 그럼 Java라는 언어와 비슷한건가?
이름이 비슷하다고 비슷한 사람이 아니듯 Java와 JavaScript는 완전히 다른 언어이다.
The name JavaScript came from Netscape’s support of Java applets within its browser. Many say it was also a marketing tactic to divert some attention from Java, which was the most buzzed-about language at the time.
출처: https://www.springboard.com/blog/data-science/history-of-javascript/
JavaScript는 Netscape사에서 일하는 Brandan Eich가 10일만에 만들었는데, 이를 세상에 내놓은 Netscape가 Java 유명세에 편승하려고 Java를 앞에 붙이는 마케팅 전략을 썼다는 평도 있다.
API
API는 Application Programming Interface의 줄임말이다. 쉽게 말해서 각기 다른 프로그램이 서로 소통하기 위한 규칙이라고 생각하면 된다. 소통하기 위한 규약을 적어둔 문서라고 이해해도 된다.
예를 들어, 구글에서 검색을 할 때, 구글 검색 서버는 검색어를 받아서 검색 결과를 반환한다. 이때, 구글 검색 서버와 구글 웹 사이트는 소통하기 위한 규칙인 API를 준수하면서 통신한다. 두 개의 프로그램이 API를 사용하여 통신함으로써, 우리는 구글 웹 사이트를 사용하여 구글에서 검색을 할 수 있게 된다.
API는 소프트웨어 개발에서 매우 중요하다. 기존에 만들어둔 소프트웨어를 재사용가능해져, 새로운 기능을 쉽게 추가하고, 소프트웨어를 더 빠르고 쉽게 개발할 수 있게 된다.
HTTP API
만약 웹 서비스를 만드는 회사에서 API라는 말을 한다면 그건 대게 HTTP API를 뜻한다. HTTP는 Hypertext Transfer Protocol의 줄임말이다. 브라우저를 통해 웹 서버에 요청을 보내고 받을 때 사용한다. 앞서 말한 구글 검색 서버와 구글 웹 사이트가 사용하는게 HTTP API다.
REST API
REST는 Representational State Transfer 줄임말이다. REST API는 HTTP API의 한 종류이다. HTTP API는 웹 서버에 자원을 요청하고 응답받는데 사용되는데, REST API는 이를 조금더 쉽게 유지 관리할 수 있도록 HTTP API를 만드는 방식을 정한거라고 생각하면 된다. REST API라고 말하면 HTTP API 얘기하는거라고 생각해도 무방하다.
다만 안타깝게도 REST API 규격을 제대로 지키는 경우가 거의 없다. 왜냐하면 REST API를 만드는 제약조건 중 Uniform Interface 를 지키지 못하기 때문이다. 이 제약 조건을 이루는 항목 중 self-descriptive message 라는게 존재한다. 쉽게 말해서 메시지만 봐도 해석이 가능해야 한다는 말이다. 굳이 별도로 문서를 참고하지 않아도 API 응답만 봐서 파악이 가능해야한다는 건데 이게 잘 안된다.
혹시 더 알고 싶은 내용이 있나요?
다른 내용도 차차 적어보겠지만 이외에 궁금한 내용이 있으면 댓글이나 https://blahx2.totu.dev/totuworld에 흔적 남겨달라.
(글쓴이가 직접 작성한 광고)
글쓴이가 직접 만든 강의!
리뷰 1
리뷰 2
스스로 탐색해가면서 학습하고 피드백을 통해 점검하고 싶다면 제 강의가 좋은 선택이 될거라고 생각합니다.
할인된 금액으로 시작해보세요(강의 작성 후기).
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의
60,000원 할인 쿠폰코드
10815-f8283f05a81c
2023년 6월 말까지 유효하며, 선착순 100명에게만 유효합니다.