목록기술개념정리(in Javascript) (94)
개발하고 싶은 초심자
220111 D+49 클라이언트 빌드와 배포
1. SSR / CSR - 앞에서 한 번 언급된 적이 있음 ① SSR(Server Side Rendering) : 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링하는 것. → 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송하고, 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. → 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우 서버는 데이터베이스의 데이터를 불러와 웹 페이지를 완전히 렌더링 된 페이지로 변환하고 브라우저에 응답으로 보낸다. → 웹 페이지를 살펴보던 사용자가 브라우저의 다른 경로로 이동하면 이동할 때마다 서버는 이 작업을 다시 수행한다. ex) 네이버 블로그, 뉴욕 타임즈 홈페이지 ‣ SSR을 쓰는 경..
보호되어 있는 글입니다.
220106(07, 10) D+46(47, 48) React 상태 관리, Redux
1. 프론트엔드 개발에서의 상태 관리(State Management) ① state(상태): 동적인(변하는) 데이터. UI에서 동적으로 표현될 데이터. ⇒ class component 내에서 관리함 ② Side Effect: 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인. 대표적으로 네트워크 요청, API 호출이 있다. ⇒ side effect를 최대한 배제하고 컴포넌트를 구성하더라도, 불가피한 경우가 있다. ⇒ 로딩 중을 나타낼 것인지 아닌지에 대한 여부는 데이터 전송 여부에 따라 다르다. 앱을 만들고, UI를 구성할 때에는 항상 이러한 로딩 중 상태를 고려한다. ③ 상태의 적절한 위치 ‣ 상태의 두 가지 구분 → 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태. 컴포넌트 내에서만 영향을 끼..
220103(04,05) D+43(44, 45) React Component Design(Storybook, CSS-in-JS, useRef, UI Component)
1. Component-Driven Development(CDD) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발. UI 컴포넌트 제작 방식. ✷ UI = User Interface ex) BBC, UN 사이트 등 ① Storybook : CDD를 하기 위한 UI 개발 도구의 일종. Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했는데, 그 안의 많은 UI 개발도구 중 하나. ② Storybook을 사용하는 이유(Storybook의 장점) → Storybook은 기본적으로 독립적인 개발환경에서 실행되기 때문에 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집..
211229(30, 31) D+40(41, 42) Web Server 기초, Express, Middleware
1. CORS(Cross-Origin Resource Sharing) : 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 기본적으로는 제한하지만, (요청을 열어 놓으면 서버에 어떤 리소스를 생성할지 확인할 수 없기 때문에 보안적인 이유가 있음) 웹 애플리케이션 고도화를 위해 개선을 요청한다. ⇒ 서버가 허용(allow)한 범위 내에서의 cross origin 요청을 허용한다. cross-origin 요청을 하려면 서버의 동의가 필요, 동의한다면 브라우저에서 요청 허락, 비동의 시 브라우저에서 거절. 이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데 이를 CORS라고 부른다. ⇒ 브라우저에서 cross-origin 요청을 안전하게 할 수 있도록 하는 ..
211227(28) D+38(39) React 데이터 흐름, Effect Hook
1. React에서의 데이터 흐름 (앞에서 배운 내용들이 들어가있음 - 자세한 것은 여기서) ✷ React 개발 방식의 큰 특징: 컴포넌트 단위로 시작한다는 점. ① React는 상향식(bottom-up)으로 앱을 만든다 → 페이지를 만들기 전에 컴포넌트를 먼저 만들고 조립한다. → 테스트가 쉽고 확장성이 좋다(디자인을 받으면 컴포넌트 계층 구조로 나누어야 한다). ② 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 인자(arguments) / 속성(attributes)처럼 전달받을 수 있다. → 데이터를 전달하는 주체는 부모 컴포넌트가 된다. === 데이터 흐름이 하향식(top-down)이다. ⇒ React는 단방향 데이터 흐름(One-way data flow)을 따른다 → 컴포넌트는 prop..
211223(24) D+36(37) HTTP / 네트워크 기초, REST API
1. 클라이언트 서버-아키텍쳐(2 Tier Architecture / 2티어 아키텍쳐) : 리소스가 존재하는 곳과, 리소스를 사용하는 앱을 분리시킨 것. ① 클라이언트: 리소스를 사용하는 앱 ② 서버: 리소스를 제공하는 주체(serve + r). 리소스를 전달하는 역할(이지만 단순히 전달만 하는 것은 아님). ⇒ 클라이언트와 서버는 요청과 응답을 주고 받는 관계이다. 클라이언트-서버 아키텍처에서는 요청이 선행되고, 그 후에 응답이 온다(요청 없는 응답은 없다). ③ 데이터베이스: 리소스를 저장하는 공간. ⇒ 기존 2티어 아키텍쳐에 데이터베이스가 추가된 것을 3티어 아키텍쳐라고 한다. 1-1. 클라이언트와 서버의 종류 ① 클라이언트: 보통 플랫폼에 따라 구분된다. ‣ 웹사이트 / 웹 앱: 브라우저를 통해 ..
211221(22) D+34(35) 비동기(비동기 호출, 비동기 자바스크립트, 콜백, promise, async, await, 타이머API), Node.js 모듈 사용법, fetch API, Event Loop
1. 동기(synchronous)와 비동기(asynchronous) ① blocking: 하나의 작업이 끝날 때까지 이어지는 작업을 막는 것. 요청에 대한 결과가 동시에 일어난다. ⇒ 동기(synchronous)적이다(시작 시점과 완료 시점이 같은 상황). ✷ 클라이언트(client)와 서버(server) (일단은 간단하게 정리해놓은 것. 자세한 것은 뒤에) ‣ 클라이언트: 서버로 접속하는 컴퓨터. 보통 우리가 사용하는 컴퓨터라고 생각할 수 있음. ‣ 서버: 무언가(서비스, 리소스 등)를 제공하는 컴퓨터. 웹 서버나 게임 서버 등. ✷ 동기적이다(synchronous) 클라이언트는 어떠한 요청을 서버에 보내고, 서버가 그 요청을 받아 일처리를 위해 데이터베이스에서 데이터를 꺼내오기도 하고, 꺼내온 데이터..