꿈꾸는 개발자

로이 필딩이 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST(Representational State Transfer)를 소개함 → 웹이 HTTP의 장점을 최대로 살리고 있지 못 했음 → HTTP 프로토콜을 의도에 맞게 디자인하도록 유도함 REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라 표현함! REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한 것 44.1. REST API의 구성 REST API는 자원, 행위, 표현 (3가지)로 구성됨 REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음 페이로드에 대한 추가적 정보: ..

웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 → 효율적인 자바스크립트 프로그래밍을 위해 브라우저 환경을 고려해야 함! 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱해서 브라우저에 렌더링할까? 💡 파싱: 구문 분석 💡 렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저의 렌더링 수행 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음 브라우저의 렌더링 엔진은 서버로부터 응답 받은 HTML & CSS를 파싱하여 DOM과 CSSOM을 생성 → 이들을 결합하여 렌더 트리를 생성 CSSOM(CSS ..

REST 성숙도 모델 - 0단계 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 됨 => but, REST API라 할 수 없음(restful 하지 않음?) REST 성숙도 모델 - 1단계 개별 리소스(Resource)와의 통신을 준수해야 함 => 웹에서 사용되는 모든 데이터나 자원(Resource)을 HTTP URI로 표현! => 모든 자원은 개별 리소스에 맞는 endpoint을 사용해야 함 => 요청 및 받는 자원에 대한 정보를 응답으로 전달해야 한다는 것이 1단계의 핵심! endpoint: 컴퓨터 네트워크에 연결 => 컴퓨터 네트워크와 정보를 교환하는 물리적 디바이스 (ex: 모바일, 서버 등등) ' https://www.microsoft.com/ko-kr/security/business/s..

Fragment는 DOM에 별도의 노드를 추가하지 않고, 여러 자식을 그룹화할 수 있다. class Table extends React.Component { render() { return ( ); } } 코드가 위와 같이 작성됐을 때 component는 무조건 만 반환해야 한다! class Columns extends React.Component { render() { return ( Hello World ); } } 코드가 위와 같이 작성됐을 경우 html은 유효하지 않을 것이다 => 태그가 끼어있기 때문에! Fragment은 위와 같은 상황에서 발생하는 문제를 해결해준다! 사용법: class Columns extends React.Component { render() { return ( Hello ..

사용 목적: component를 사용하지 않고 페이지 이동을 할 때 사용하는 Hook이다 const goBack = () => { // 이전 페이지로 이동 // -2를 넣을 경우 뒤로 두 번 이동을 한다! navigate(-1); }; const goArticles = () => { // articles 경로로 이동 navigate('/articles'); }; 이벤트 핸들러에 위 함수를 할당 할 경우 주석으로 처리된 기능으로 작동하게 된다! 사용법: Hook의 첫 번째 인자로 이동하기 원하는 path를 주는 것(두 번째(replace) 인자의 경우 optional) const goArticles = () => { navigate('/articles', { replace: true }); } replac..

리액트 16.8 이전에는 함수형 컴포넌트에서 상태 관리가 불가능했다 => react 16.8에서 Hooks이란 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리가 가능해졌다! (useState도 Hooks 중 하나!) 이벤트 설정: import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 ); } export default Counter; react에선 이벤트를 설정할 때 on이벤트이름={실행하고싶은함수} 형태로 사용해야 한다! => 단 함수호출이 아닌, 함수명만 입력을 해야 한..

버블링(bubbling) 정의: 버블링은 한 요소의 이벤트가 발생하면 해당 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작하는 형식을 말한다. 해당 과정은 가장 최상단의 요소(document 객체)를 만날 때까지 반복된다. 위 사진에서 태그 영역을 클릭하게 되면 p 태그에 할당된 헨들러만 동작되는 것이 아닌, div, form에 있는 핸들러들까지 순차적으로 작동하게 된다! => 이처럼, p는 가된 element에서 가장 최상단 요소까지 핸들러가 동작하게 되는 것이다. 거의 모든 이벤트는 버블링 된다(즉 예외는 존재함!) => ex) focus이벤트는 버블링X Event.target event.targe로 이번트가 발생한 target요소에 접근 가능! event.target vs thi..

Upstream/Donwstream 단어 뜻 그대로 생각하면 상류와 하류이다. 이와 마찬가지로 물은 상류에서 하류로 흐듯이 pull하는 쪽이 downstream, pull 당하는 쪽이 upstream이라고 생각하면 된다. 즉 upstream과 downstream은 상대적인 개념이다! upstream과 origin 오픈소스에 기여하기 위해 fork하는 맥락에서 upstream과 origin을 파악해야 한다! => upstream과 donwstream은 항상 상대적인 개념이기 때문에=> fork에서도 상대의 remote repository와 나의 remote repository도 donwstream과 upstream의 관계가 형성된다! 다른 사람의 github 저장소를 fork한 경우 본인의 github이 ..