개발몰입과정 개념스터디/3차 (9) 썸네일형 리스트형 Redux란? 필요한 이유 만약 A 컴포넌트가 B 컴포넌트에, B 컴포넌트는 C 컴포넌트에.. 이렇게 D, E, F, G 컴포넌트 까지 이어진 루트가 있다고 가정했을 때 A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야한다. = 이는 매우 비효율적인 행위. 이 때 하나의 스토어 ( Store ) 라는 매체를 두면 위의 순서가 아니라, A ▶ Store ▶ G 식의 효율적인 접근이 가능하게 해준다. 이 Store 는 Redux 를 통해 사용할 수 있다. 리덕스 ( Redux ) 란? Redux는 상태 관리 도구이다. 주로 React와 함께 사용되며 다른 JavaScript 프레.. React Router란? React는 SPA(Single Page Applicatoin)이다. SPA : 페이지(Page)가 하나(Single)인 어플리케이션(Application) React Router란? 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA( React Hooks란? React Hooks란? 함수형 컴포넌트에서 상태와 생명주기 관리를 쉽게 할 수 있다. 기존 react와 호환되기 때문에 이전 코드를 고칠 필요가 없다. class형 컴포넌트에서는 작동하지 않는다. react에서 제공하는 내장 Hooks : useState, useEffect… 1. useState state 값을 관리한다. import React, { useState } from 'react'; const AddSub = () => { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}>더하기 setCount(count - 1)}>빼기 ); }; export default AddSub;.. Class Component vs Functional Component Functional Component import React from 'react'; function App() { return Hello, World!; } 함수형 컴포넌트는 기본적으로 클래스형 컴포넌트의 render함수이다. Props에 접근하고 사용할 수 있지만, state를 가질 수는 없다. → [Hook을 통해 해결 ] lifecycle method를 사용할 수 없다. 따라서 UI에 집중하게 되고 app의 행동에는 크게 관여하지 않는다. this 키워드를 사용할 수 없다. 메모리 자원을 함수 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. Class Component import React from 'react'; class App extends React.Component { render(.. React Virtual Dom란? [가상 돔] : 리액트, Vue js 웹 브라우저가 네트워크를 통해 HTML을 전달 받으면 브라우저의 렌더링 엔진은 HTML을 파싱하고 돔 노드(DOM Node)로 이루어진 트리를 만듭니다. 또한 CSS 파일과 HTML의 요소들(Element)의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 트리도 생성합니다. HTML & CSS 렌더링 과정 이렇게 렌더 트리가 완성되면 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산합니다. 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있는데, 이 Attachment라는 과정에서 이 메소드들이 호출되게 되며, 해당 메소드는 스타일 정보를 계산하고 결과값을 객체 형태로 반환하게 됩니다. ⇒ 렌더 트리로 생성된 모든 노드들은 att.. JWT란? JWT란? Json Web Token의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다. token 구성요소 Encoded Header + "." + Encoded Payload + "." + Verify Signature Header : 위 3가지 정보를 암호화할 방식(alg), 타입(type) 등이 들어갑니다. Payload : 서버에서 보낼 데이터가 들어갑니다. 일반적으로 유저의 고유 ID값, 유효기간이 들어갑니다. Verify Signature : Base64 방식으로 인코딩한 Header, payload, SECRET KEY를 더한 후 서명된다. 사용자가 로그인을 한다. 서버에서는 계정정보를 읽어 사용자를 확인 후, 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 .. CORS란? CORS란? 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록하는 매커니즘. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용한다. url구조 도메인(domain): naver.com 오리진(origin): https://www.naver.com/PORT URL 구조에서 살펴본 Protocal, Host, Port를 합친 것:origin 예를 들어 beomy.github.io라는 도메인 주소를 사용하는 웹페이.. JavaScript의 비동기 기술 동기와 비동기란?(작업 완료 여부를 누가 신경쓰느냐) 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다. 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다. blocking/non-blocking(바로 return하느냐 마느냐) 호출된 함수가 바로 return해서 호출한 함수에게 제어권을 넘겨주고호출한 함수가 다른 일을 할 수 있는 기회를 줄 수 있으면 non-blocking이다. 호출된 함수가 자신의 작업을 모두 마칠 때까지호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다면 bloc.. 이전 1 2 다음
