Front-End32 [HTTP/네트워크] REST API 앞선 포스팅을 통해 우리는 웹 브라우저의 작동 원리와 HTTP 프로토콜에 대해 배웠다. 여기서 한 가지 의문이 든다. 웹 페이지 구성 시 필요한 리소스를 가져올 수 있는 더 간단한 방법이 없을까? 이에 대한 해답으로 API가 있다. API와 REST API API (Application Programming Interface)란 "응용 프로그램 프로그래밍 인터페이스"로, 클라이언트에게 리소스를 잘 활용할 수 있도록 서버에서 제공하는 인터페이스다. 좀 더 은유적으로 표현하자면 고객(사용자)이 식당(서버)에서 음식(리소스)을 주문하기 위해 필요한 메뉴판과 같다. 하지만 만약 메뉴판이 위와 같다면 어떨까? 사용자가 메뉴판을 읽을 수 없으니 주문을 할 수 없을 것이다. 물론 인내심이 많은 고객은 위 메뉴판을 천.. 2022. 11. 5. [Web] UI와 UX 가끔 웹 서핑을 하다 보면 우리는 '불편한 경험'을 하곤 한다. 예를 들어 온라인 쇼핑몰에서 장바구니에 물건이 담기지 않는다거나, 상품에 대한 정보를 자세히 알 수 없다거나, 재고가 없음에도 있다고 표시가 되는 등의 상황을 겪었다고 가정해보자. 많은 사람들은 이 '불편한 경험'으로 인해 더 이상 해당 웹 페이지를 방문하지 않을 것이다. 우리는 인터넷의 방대함과 신속한 처리 속도에 익숙해져 있기 때문에 웹 페이지를 사용하면서 조금의 불편함이라도 느낀다면 현실에서 느끼는 불편함보다 더 강렬하게 와 닿는다. 그렇다면 어떻게 해야 사용자가 '불편한 경험'을 하지 않을 수 있을까? UI와 UX 좋은 웹 페이지를 디자인하기 위해서 우리는 사용자 인터페이스(UI)와 사용자 경험(UX)이 무엇인지 명확히 알 필요가 .. 2022. 11. 3. [HTTP/네트워크] HTTP와 브라우저 작동 원리 처음 프론트엔드 개발에 대한 것을 배우고자 한다면 우선 가장 기본이 되는 HTML/CSS/JavaScript를 접하고 배우게 된다. 그리고 우리는 이 과정을 통해 웹 페이지의 뼈대가 HTML을 기반으로 한 하이퍼텍스트로 구성되어 있다는 것을 알 수 있었다. 이전 포스팅에서 언급 했듯, 웹 브라우저는 HTML과 같은 문서를 전송하기 위해 HTTP(HyperText Transfer Protocol)라는 프로토콜을 사용한다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었으며, HTTP를 이용해 주고받는 메세지를 HTTP 메세지라고 한다. 그렇다면 HTTP라는 통신 규약을 통해 우리는 어떻게 웹 페이지를 구성하고 작동시키는 걸까? 브라우저 작동 원리 웹 브라우저는 앞서 언급됐던 TCP/IP, HTT.. 2022. 10. 19. [HTTP/네트워크] 웹 애플리케이션 구조 프론트엔드 개발자가 된다고 결심했을 때, 혹은 그보다 먼 옛날 처음 "인터넷"이란 걸 썼을 때부터 궁금했던 것이 있었다. 위키백과에 따르면 인터넷은 "컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이요해 정보를 주고받는 컴퓨터 네트워크"라고 정의하고 있다. 통신 프로토콜,컴퓨터 네트워크...다소 생소한 개념들이다. 무엇을 의미하는걸까? 웹 애플리케이션 구조(아키텍쳐) 많은 사람들이 인터넷은 "통신"을 통해 내가 요구한 어떤 "데이터"를 받아오는 것이라는 걸 알고 있다. 그렇다면 이 데이터를 받아오는 통신은 구체적으로 어디로, 그리고 어떤 식으로 보내는 걸까? 간단한 예시를 통해 생각해보자. 아침으로 빵을 먹기 위해.. 2022. 10. 17. [자바스크립트] 프로토타입 (Prototype) 웹 개발의 표준 문서와 다름이 없는 MDN에서 배열이나 객체 등의 내장 메서드를 검색하다 보면 항상 나오는 단어가 있다. 배열 또는 객체의 내장 메서드를 검색했을 때 항상 .prototype이 나온다. 무엇을 의미하는 걸까? 프로토타입(Prototype)이란? 자바스크립트에서 프로토타입은 객체의 원형 객체를 의미한다. 더 자세한 설명을 위해 이전 포스팅을 떠올려보자. 앞서 배웠듯 자바스크립트에서는 클래스라는 틀을 통해 인스턴스 객체를 생성할 수 있고, 또한 생성했던 클래스를 상속해 새로운 자식 클래스를 생성해 부모의 속성과 기능을 활용하고 추가할 수 있다. 그런데 우리가 인스턴스 객체를 생성하기도 전에 자바스크립트에서는 이미 부모 클래스를 상속하고 활용하고 있다. 대표적으로 우리가 사용하고 있던 문자열S.. 2022. 9. 26. [자바스크립트] 객체 지향 프로그래밍(OOP): 클래스와 인스턴스 개발을 하다보니 개인 프로젝트임에도 규모가 점점 커져가는 것이 느껴진다. 자연스럽게 '팀 프로젝트는 함께 작업하는 파일과 폴더가 얼마나 많을까'라는 의문과 함께 한 가지 생각이 들었다. "어떻게 해야 같은 개발자가 봤을 때 이해하기 쉽고 효율적이면서 합리적인 구조를 갖춘 코드를 구성할 수 있을까?" 아마 다양한 프로그래밍 지식을 활용할 줄 알아야 할 것이다. 그리고 질문에 대한 해답을 구하고자 할 때, 흔히 볼 수 있는 단어가 있다. 바로 객체 지향 프로그래밍Object Oriented Programming이다. 객체 지향 프로그래밍(OOP)이란? 객체 지향 프로그래밍이란 컴퓨터 프로그래밍 패러다임의 하나로 소프트웨어 디자인에 있어 컴퓨터 프로그램을 "객체Object"들의 모임으로 파악하고자 하는 것이다.. 2022. 9. 21. 이전 1 2 3 4 5 6 다음
