hahagarden의 블로그

SOP(Same Origin Policy) 동일 출처 정책. 같은 출처의 리소스만 공유가 가능하다는 정책이다. http://naver.com 은 https://naver.com 과 프로토콜이 다르기 때문에 출처가 다르다. https://hahagarden.github.io 는 https://github.io 와 호스트가 다르기 때문에 출처가 다르다. http://hello.world:81 은 http://hello.world 와 포트번호가 다르기 때문에 출처가 다르다.(http 프로토콜의 기본 포트번호는 :80이다) SOP에 따라 다른 출처의 리소스는 기본적으로 공유를 제한하기 때문에 정보가 다른 곳으로 새어나가는 것을 방지할 수 있다. 방지책이 없다면 사용자가 깜빡하고 로그아웃을 안하거나 공유 기기를 ..

REST API? 웹 애플리케이션은 HTTP 메서드를 이용해서 서버와 통신한다. 이러한 HTTP 메서드를 이용해서 데이터를 주고 받을 수 있도록 서버 개발자가 API를 만들텐데 이 때 Restful한 API를 만드는 것이 좋다. 요청과 응답을 제대로 보내고 받을 수 있도록 일종의 규약이 정해져 있다. REST API의 REST는 Representational State Transfer의 약자로, 로이 필딩(Roy Fielding)의 박사학위 논문에서 소개된 아키텍처이다. 웹에서 사용되는 데이터나 자원(resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. REST 성숙도 모델 어떻게 RESTful API를 만들 수 있을까? 레오나르드 리차드슨(Le..

URL과 URI 브라우저의 주소창에 입력한 URL은 인터넷에서 웹페이지, 이미지, 비디오 등 리소스가 존재하는 위치를 나타낸 문자열이다. URL는 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분한다. scheme은 통신방식(프로토콜)을 결정하고 hosts는 웹 서버의 이름이나 도메인, IP 등의 주소가 온다. url-path는 CLI에서 파일에 접근하는 것처럼 웹 서버에서 지정한 루트 디렉토리부터 시작하여 파일의 경로와 파일명을 나타낸다. URI는 Uniform Resource Identifier의 줄임말로, URL의 기본 요소에 더해 query와 frag..

클라이언트 서버 아키텍처 쇼핑몰 어플리케이션을 인터넷 없이 이용하려고 한다면? 어플리케이션을 이용할 수 없다. 인터넷 어딘가에 존재하는 서버로부터 정보를 받아와야 하기 때문이다. 만약, 서버가 존재하지 않고, 어플리케이션 내부에 모든 정보를 저장하고 있다면, 쇼핑몰 상품의 가격 하나만 변동이 되어도 모든 정보를 앱 안에 담고있는 앱 자체를 전부 업데이트 해주어야 한다. 빈번한 업데이트가 필요한 경우 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시키는 것이 유리하다. 이러한 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2-Tier 아키텍처, 다른 말로 클라이언트-서버 아키텍처라고 부른다. 용어 뜻 그대로, 클라이언트(client, 손님)와 서버(server, 서빙하는 사람)의 역할을 ..

MPA(Multi Page Application)와 SSR(Server Side Rendering) 전통적인 웹사이트는 모두 MPA(Multi Page Application)이었다. 어떤 페이지에 접속하려면 서버에서 그 페이지의 html을 보내준다. 페이지마다 각각의 html이 있고 서버에서 렌더링 연산을 담당하고 페이지가 완성이 되면 응답한다. 따라서 페이지를 새로고침하거나 이동하면 페이지 전체가 렌더링된다. MPA는 멀티 html을 서버에서 제공해주는 SSR방식이다. SSR방식의 MPA의 장점은, 초기 로딩이 매우 짧다는 것이다. 서버에서 렌더링이 완료된 상태로 파일을 주고, 자바스크립트 파일 다운로드가 완료되지 않았어도 html이 보여지기 때문에 사용자가 대기하는 시간이 줄어든다. 또한 검색 엔진 ..

React 리액트는 프론트엔드 개발을 위한 자바스크립트 라이브러리이다. 다른 프로그래밍 언어이거나 자바스크립트로부터 독립적인 프로그램이 아니다. 리액트는 JSX문법을 이용해서 개발자가 간편하고 직관적인 코드를 작성할 수 있지만, 이것은 결국 오래된 버전의 자바스크립트로 변환된다. 리액트는 컴포넌트 기반으로 개발한다. 컴포넌트는 한 기능 단위로 만드는데, 기능에 집중하여 만들 수 있고 컴포넌트 사이에 의존성이 없어져서 독립적으로 작동한다. 클래스처럼 컴포넌트를 여러 곳에서 재사용할 수 있다. 또한 독립적인 한 묶음이기 때문에 테스트하기에 좋고 유지보수에도 좋다. 리액트는 선언형이다. 페이지에 어떻게 렌더할지가 아니라, 무엇이 페이지에 렌더링될지를 작성하는 것이다. 이는 프로그램을 예측 가능하게 하고, 덜 ..

Fetch API const promise = fetch(url[, options]); 자바스크립트에서 서버에 네트워크 요청을 보내고 데이터를 받아올 수 있다. 그 방법 중 하나는 브라우저에서 제공하는 fetch API이다. options를 주지 않으면 기본적으로 GET 메서드가 진행된다. (먼저 동기와 비동기, 자바스크립트의 비동기 처리에 대해서 다음 포스팅을 참고하자) JS 동기와 비동기, Callback, Promise, async/await 동기와 비동기 커피숍에서 커피를 시킬 때, 한명이 주문하고 그 주문이 완료되면, 다음 사람이 주문하고 그 주문을 완료하고, 그리고 또 다음 사람이 주문하고 완료시킨다면 대기 줄이 굉장히 hahagarden.tistory.com 프로미스 체이닝 fetch()를 ..

오늘 부트캠프 선배님이 선배적 참견 시점에서 주옥같은 조언들을 많이 해주셨다. 오늘은 이것을 기록해볼까 한다. 내가 가장 인상깊었고 새기고 싶은 말들이다. 1. 준비, 공부보다 많이 해야 할 것은 직접 써보는 것 이것은 정말 정말 중요한 조언이었다. 나도 개발자가 될 준비가 아니라, '공부'를 하고 있었다. 요즈음 코드스테이츠 학습 컨텐츠들의 양이 많아져서 이해하고 과제하는데 시간이 다 간다. 그래서 블로그 정리도 매일 하기에 조금씩 버거워져 갔고, 프로그래밍 이론 공부에만 집중했던 지난 5주였다. 하지만 개발자는 코드를 작성하고, 프로그램을 유지보수하고, 문제를 해결하는 일을 한다. 더 좋은 코드를 작성하기 위해 이론공부를 열심히 하고 있지만, 처음부터 작성할 줄을 모르면 효율좋은 방법을 알아봤자 어떻..

문제 Github Pages를 통해 배포에 성공을 했다. 그리고 git push를 통해 자동으로 재배포도 성공했다. 그런데 배포 페이지를 들어가면 내용이 업데이트가 안된다. 배포 히스토리를 보면 최근에 업데이트한 것이 Active가 되어있는데 배포 페이지를 들어가면 계속 처음 배포했던 버전이 뜬다. 아직 반영이 안되었나 싶어 일주일이 지나서 시도해도 그대로이다. 그런데 시크릿모드로 들어가면 배포 페이지가 잘 업데이트가 되어 있었다. 모바일로 들어가보아도 배포 페이지가 잘 업데이트가 되어 있다. 처음 버전의 배포 페이지를 들어갔었던 데스크탑과 맥북은 업데이트가 되지 않고 처음 버전이 떴다. 수정 결과를 확인하기가 어려웠다. 캐시 문제인 것 같아서 크롬의 사이트 데이터를 삭제해 주었다. 해결 크롬 설정 > ..

동기와 비동기 커피숍에서 커피를 시킬 때, 한명이 주문하고 그 주문이 완료되면, 다음 사람이 주문하고 그 주문을 완료하고, 그리고 또 다음 사람이 주문하고 완료시킨다면 대기 줄이 굉장히 길 것이다. 전체 주문을 완수하기에도 굉장히 오래 걸릴 것이다. 이것이 동기(synchronous)이다. 이 때 이전 주문이 진행되고 있기 때문에 다음 주문을 막는 것은 블로킹(blocking)이라고 한다. 하나의 작업이 완료될 때까지 다음 작업을 막는 것이다. 현실의 커피숍에서는 이렇게 진행되지 않는다. 주문을 받고, 주문이 들어가고, 그 음료를 제조하는 동안 또 다른 주문을 받고, 그 주문을 처리하는 방식이다. 블로킹되지 않고 비동기적으로 진행된다. 웹 개발에서 자바스크립트의 비동기적 실행은 유용하다. 다음과 같은 작..

프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. C++나 자바같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스와 상속, 캡슐화를 위한 키워드인 public, private, protected 등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우가 있다.(나도 그랬다) 하지만 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 프로토타입 객체(프로토타입)란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 ..

일급 객체 비행기의 퍼스트클래스는 특별대우를 받는다. 자바스크립트에도 특별한 대우를 받는 '일급 객체'가 있다. 일급 객체 중 대표적으로 함수가 있다. 일급 객체인 함수는 다음과 같은 특별한 대우를 받는다. 함수를 변수에 할당할 수 있다. 함수는 다른 함수의 전달인자가 될 수 있다. 함수는 다른 함수의 결과로서 반환될 수 있다. 고차함수 고차함수는 함수를 전달인자로 받을 수 있거나, 함수를 반환할 수 있는 함수이다. 이 때 어떤 함수(caller)에 전달인자로 전달되는 함수를 콜백 함수(callback function)라고 한다. 어떤 함수(caller)가 완료되었을 때 호출되는 경우가 많아서 '답신 전화'를 의미하는 콜백 함수라는 이름이 붙었다. 이 때 어떤 함수(caller)는 콜백함수를 호출(inv..