본문 바로가기

전체 글58

프론트엔드와 백엔드란 무엇일까? 프론트엔드와 백엔드 프론트엔드란 사용자들이 사용하는 모바일, 웹 화면과 같은 앞단을 말하며 이런 화면을 개발하는 사람을 프론트엔드 개발자라고 한다. 백엔드란 눈에 보이지 않는 영역이다. 이전 포스팅에서 봤던 것처럼 API와 같은 뒷단의 영역을 말한다. 이렇게 API 영역을 개발하는 사람을 백엔드 개발자라고 한다. 넓은 의미에서는 프론트엔드를 데이터를 요청하는 클라이언트, 백엔드를 결과를 응답하는 서버라고 한다. 정리하면 프론트엔드의 경우 요청을 하는 앞 단의 영역이며 백엔드는 그 요청에 응답을 하는 뒷단의 영역이다. 예시로 보는 역할 사용자가 접속했을 때 포켓몬의 목록을 보여주는 포켓몬도감 웹사이트를 개발한다고 가정한다. 이때 백엔드 개발자의 경우 프론트엔드에서 포켓몬 목록을 가져갈 수 있는 API를 자.. 2023. 5. 9.
API(Application Programming Interface) 알아보기 인터페이스(Interface) 란? 사람 대 사람, 사람 대 사물, 사물 대 사물 등 두 개 이상의 상호 간에 소통을 위해 만들어진 접점이다. 예시로, 자동차에게 "열려라~~"라고 아무리 말을 해도 잠긴 자동차 문은 열리지 않는다. 스마트키의 열림 버튼을 누르게 되면 잠긴 문이 열린다. 즉, 여기에서 스마트키가 자동차와 사람 사이의 인터페이스가 된다. 또한 컴퓨터에게 아무리 이런저런 명령을 해도 컴퓨터는 아무 반응이 없다. 마우스로 무언가를 클릭하거나 키보드로 내용을 입력하여야 컴퓨터가 실행되고 이런저런 동작이 진행된다. 여기서 키보드나 마우스 등이 사람과 컴퓨터 사이의 인터페이스인 것이다. 배달앱을 켜고 치킨을 주문하는 상황을 가정했을 때 주문 목록이 보이고, 해당 주문 목록에서 하나를 선택해서 주문을.. 2023. 5. 6.
동기와 비동기 정리 동기와 비동기란? 동기(Synchronous)는 답변을 기다리는 것, 비동기(Asynchronous)는 답변을 기다리지 않는 것이다. 2명의 사람이 수박을 트럭에 싣는 일을 한다고 가정한다. 여기서 사람 A는 수박을 들어서 다른 사람 B에게 전달한다. B는 수박을 받아서 트럭에 싣는다. 이때, 동기 방식으로 일은 진행하면 사람 A가 B에게 수박을 전달하고, B가 트럭에 수박을 싣고 난 후 "다 됐어!"라고 답변할 때까지 A는 답변을 기다리며 다음 일을 진행하지 않는 방식이다. 즉, B에게서 답변이 오면 A가 다음 일을 진행하는 것이다. 비동기 방식으로 일을 진행하게 되면 A가 B에게 수박을 전달하고, B가 수박을 전달받았든지 못 받았든지 A는 다시 수박을 전달하는 일을 진행한다. 다른 예로 택배기사가 택.. 2023. 5. 4.
자바스크립트에서의 this란? 자바스크립트에서의 this는 객체를 가리키는 키워드이다. 즉, this는 객체라고 할 수 있고, 호출한 객체가 this가 된다. 만약 호출한 객체가 없을 경우 기본값은 window 객체이다. 자바스크립트에서의 this // 호출한 객체가 this가 되는 경우 let person = { fullname: '짐코딩', age: 20, printThis: function() { console.log(this); // {fullname: '짐코딩', age: 20, printThis: f} console.log(this === person); // true } }; person.printThis(); // this => person // 호출한 객체가 없는 경우 let person = { fullname: '짐.. 2023. 5. 2.