본문 바로가기

개발/Web16

JS Prototype, How to work new? 이번 포스팅에서는 JavaScript의 ProtoType에 대해서 다루어 보도록 하겠습니다. JS에서 prototype JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. -mozilla.org- 위에서 말하듯이, JS에서 모든 것은 객체이며, 모.. 2021. 3. 30.
세션과 쿠키, 상태, 로컬 스토리지 웹 사이트를 만들다 보면 DB 외에 정보를 관리할 필요성을 느끼게 됩니다. 예를 들면, 사용자가 로그인 후에 인증 토큰을 받을 때처럼 말이죠. 현재 보편적으로 사용되는, DB가 아닌 정보를 관리하는 웹 기술들을 알아보고자 합니다. Session에 대한 배경 session의 사전적 정의는 특정 활동 기간입니다. (구글 번역 기준) 이러한 정의는 computer science에서의 의미와는 조금 다릅니다. session을 특정 기술의 명칭이라고 생각하는 사람들이 더러 있습니다. 그러나 computer science에서 session은 사실 특정 데이터 저장 기술을 의미하지 않습니다. 하지만 여러 언어(JSP,ASP,PHP..)에서 사용자와의 session을 유지하기 위해서 만든 session token을 부.. 2021. 3. 27.
HTTP method 정리 HTTP method 란? HTTP는 요청 메서드를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도 합니다. -공식 mozilla 문서- 쓰는 이유 즉, 같은 경로(e.g. /api/users)로 request가 들어온다고 해도, method에 따라 다른 행동을 하기 위해 쓴다. 예를 들면, 같은 /api/users로 request가 들어와도, GET 이면 user를 read 하도록 POST 면 user를 create 하도록 ... 처럼 구현할 수 있다. url을 더 난잡하게 /api/users/read, /api/users/create처럼 하지 않아도 된다는 장점이 있다. 자주 쓰이는 method GET : 특정 리소스의 표시를 요청. 데.. 2021. 3. 16.
HTTP status code, RFC 정리 HTTP 상태 코드(status code)에 대해 정리해보겠다. HTTP status code 란? HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고 서버 에러. - 공식 mozlia - 즉, 서버로 온 HTTP request(요청)에 대한 reponse(응답)의 상태를 숫자 코드로 표현하자고 약속한 것이다. 이게 왜 필요하냐? 조금 단적인 예가 될 수도 있겠지만, js로 개발한 프런트나 백을 jest라는 npm 패키지를 통해 testing 한다고 해보자. 이때, 각 경로(e.g. /posting/note_today)에 request를 보내고, 올바른 sta.. 2021. 3. 16.
DOM 은 무엇인가? DOM은 Document Object Model(문서 객체 모델)이다. HTML이나 XML로 이루어진 문서를 프로그래밍적으로 js 코드 상에서 수정 가능하도록 interface를 제공한다. 즉, 각 element에 대한 method를 제공하여 수정할 수 있는 interface를 js 상에서 제공한다는 것이다. HTML과 XML이 중첩 구조(nesting structure)로 이루어지듯, DOM은 tree 구조로 이루어져 있다. W3C(world wide web consortium)에서는 html DOM을 아래와 같이 정의한다. HTML DOM for HTML HTML DOM은 HTML을 위한 객체 모델(Object Model)이며 다음과 같이 정의된다. HTML element들은 모두 객체(object).. 2021. 2. 28.
웹팩과 바벨 개념과 역할 Webpack 웹팩(webpack)은 script, image, asset, style 등을 bundle 시켜주는 오픈소스 자바스크립트 모듈 번들러(여러 파일을 하나의 파일로 묶어주는 프로그램)이다. 의존성 있는 모듈으로부터 정적인 resource들을 생성한다. webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org Babel 최신 JavaScript 코드를 browser.. 2021. 2. 28.