🌊 HTTP모듈 서버 만들기 으악 어려워! Node.js 공식문서의 HTTP 트랜잭션 해부를 뜯어보려 한다.. 서버 생성 웹 서버 객체를 생성한다. 이 서버로 오는 HTTP 요청마다 createServer에 전달된 함수가 한 번씩 호출 된다. const http = require('http'); const server = http.createServer((request, response) => { // 여기서 작업이 진행됩니다! }); 메서드, URL, 헤더 Node가 request객체에 유용한 프로퍼티를 넣어두어 우리는 이 프로퍼티를 사용할 수 있다. const { headers, method, url } = request; const userAgent = headers['user-agent']; 헤더..

🌊 CORS, SOP SOP (Same-Origin Policy) : Same-Origin Policy의 줄임말로, 동일 출처 정책을 의미한다. 한 마디로 '같은 출처의 리소스만 공유가 가능하다'라는 정책이다. 출처 : 아래 세 구성요소가 하나라도 다르면 동일한 출처로 보지 않는다. 프로토콜 호스트 포트 SOP (동일 출처 정책)은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주어 해킹 등의 위협에서 더욱 안전해질 수 있다. 만약 동일 출처 정책이 없다면 브라우저에 로그인 정보가 남아있는 채로 해킹 사이트에 방문하게 되면, 해커는 로그인 정보를 악용할 수 있다. SOP가 있다면 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타사이트의 코드에 의해서 새어..

🌊 이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 리액트의 이벤트 주의사항 이벤트 이름은 카멜 표기법으로 작성한다. HTML의 onclick은 리액트에서 onClick으로 작성해야 한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. DOM요소에만 이벤트를 설정할 수 있다. 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Wheel Media Image Animation Transition input이 여러 개 일 때 state에 적용하는 법 1. onChange 관련 함수를 두 개를 만들어서 사용하는 방법. import React, { useState } f..

🌊 REST API(Representational State Transfer) : REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접그하는 방식을 규정한 아키텍쳐. REST API는 자원, 행위, 표현 3가지 요소로 구성된다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드(사용에 있어서 전송되는 데이터) 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신한다. GET : 웹 페이지나 데이터를 요청한다. POST : 새로운 ..

🌊 생성자 함수 Object 생성자 함수 : new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // new Object를 이용하여 빈 객체를 생성한다. const animal = new Object(); // 프로퍼티 추가 animal.name = '오리너구리'; animal.type = '포유류'; console.log(animal); // { name: '오리너구리', type: '포유류' } 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수의 종류 String Number Boolean Function Array Date RegExp..

🌊 컴포넌트 클래스형 컴포넌트과 함수형 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다. 임의의 메서드를 정의할 수 있다. import React, { Component } from 'react'; export default class App extends Component { render() { const name = 'ogu'; return {name}; } } 함수형 컴포넌트 클래스형 컴포넌트보다 선언하기 훨씬 편하다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 결과물의 파일 크기가 더 작다 state와 라이프사이클 API사용이 불가능하다는 단점이 있었으나 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결되었다. import..

🌊 JSX : JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태이 코드로 변환된다. JSX의 장점 가독성이 좋다. 활용도가 높다. JSX 문법 감싸인 요소 리액트에서 JSX를 반환할 땐 하나의 태그만 반환해야한다. 다수의 태그를 반환하고 싶을 땐 부모 태그로 감싸줘야 한다. 스타일링을 해야하는 경우가 아니라면 빈 태그를 부모처럼 사용하여도 괜찮다. 자바스크립트 표현 JSX 내부에서 자바스크립트 표현식을 사용할 수 있으며, JSX 내부에서 코드를 {} 중괄호 로 감싸주면 된다. if문 대신 조건부 연산자 jsx 내부의 JS 표현식에서 if문을 사용할 수 없다. 조건에 따..

🌊 리액트 시작하기 리액트의 이해 : 리액트는 오직 V(view)만 신경 쓰는 라이브러리다. 리액트의 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있고 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다. 리액트 라이브러리는 데이터가 변할 때 마다 새롭게 리렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공한다. 초기 렌더링 : 어떤 UI곤련 프레임워크, 라이브러리를 사용하든 초기 렌더링이 필요하다. 리액트에서는 render 함수에 해당한다. render(){...} 이 함수는 컴포넌트가 어떻게 생겼고, 어떻게 자동하는 지에 대한 정보를 지닌 객체를 반환한다. 렌더링 → HTML 마크업 → DOM에 주입 조화 과정 :..