Redux 기초 알아보기 Redux란, Redux는 React 애플리케이션에서 전역 상태 관리를 위한 라이브러리이다. React의 props와 state를 통해 컴포넌트 간에 데이터를 주고 받는 것보다 Redux를 사용하면 데이터의 흐름이 명확하게 구조화된다. 유지보수와 디버깅을 쉽게 만들어줌 FLUX 패턴을 따르고 있다. FLUX 패턴은 React에서 상태 관리를 하기 위한 아키텍처 패턴 중 하나로, 단방향 데이터 흐름을 따른다. Redux 장점 전역 상태를 관리하므로 상태 업데이트가 효율적이다. 상태의 흐름이 명확하게 구조화되어 있어 유지보수와 디버깅이 쉽다. 개발자 도구를 통해 상태 변화를 쉽게 추적할 수 있다. 미들웨어를 통해 비동기 작업을 처리할 수 있다. Redux 단점 초기 설정과 학습 곡선..
와이어프레임(wireframe) 와이어프레임은 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 전환 효과나 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하는 것이 아니라 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다. 와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티로 표현하며 3가지 레벨이 나뉜다. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임이라고 한다. Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-..
UI (User Interface, 사용자 인터페이스)알아보기 UI 란, 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템도 UI를 의미한다. 대부분의 UI는 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)를 의미한다. GUI : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 UI 디자인 패턴 모달 : 화면 위에 오버레이 되는 창 토글 : On/Off를 설정할 때 사용하는 스위치 버튼 탭 : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴 태그 : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할 자동완성 : 말 그대로 사용자가 내용을 입..
SOP / CORS 기본 개념 알아보기 SOP - SOP의 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 생겨났다. - SOP의 동일 출처 정책이란 말은 같은 출처의 리소스만 공유가 가능한 정책이다. 출처는 프로토콜, 호스트, 포트 3가지 조합으로 되어있다. 3가지 조합 중 하나라도 다르면 동일한 출처로 보지 않는다. SOP은 이러한 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고 있는 정책이다. CORS - CORS는 SOP이 다른 출처의 리소스 공유를 막는 것을 CORS를 이용하여 접근 권한을 얻을 수 있기 위해 생겨났다. - CORS는 교차 출처 리소스 공유를 뜻한다. 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여..
Side Effect let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 Side Effect가 있는 함수라고 부른다. React 컴포넌트의 Side Effect 타이머 사용(setTimeout) 데이터 가져오기(fetch API, localStorage) React 애플리케이션을 작성할 때에 AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이는 React 입장에서 보면 전부 Side Effect로 볼 수 있다. Side Effect가 아닌 React의 ..
데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 즉, 상향식으로 앱을 만든다. 이렇게 앱을 만들었을 때 가장 큰 장점은 테스트가 쉽고 확장성이 좋기 때문이다. 위의 사진을 트리 구조로 나타낸 컴포넌트라고 생각해보면, 컴포먼트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성 처럼 전달 받을 수 있다. 또한, 데이터를 전달하는 주체는 부모 컴포넌트된다. 따라서 데이터 흐름이 하향식을 의미하는 것을 알 수 있다. 모든 데이터를 상태로 둘 필요는 없기 때문에 상태는 최소화하는 것이 가장 좋다. 상태가 많아질 수록 애플리케이션은 복잡해지기 때문에 어떤 데이터를 상태로 두어야 하는지의 여부는, 아래 세가지 질문을 통해..
기초 알아보기 3편 1편에서 나온 REST API 핵심 내용 정리 Open API / API Key 내용 다루기 REST API 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST API 성숙도 모델 REST API 작성시, 지켜야 할 규칙들을 잘 적용하기 위한 4단계 모델 2단계까지 적용해도 좋은 API 디자인이라고 할 수 있음 [ 단계별로 보기 ] REST 성숙도 모델 - 0단계 REST API 작성하기 위한 기본 단계 단순히 HTTP 프로토콜을 사용하기만 해도 된다. REST 성숙도 모델 - 1단계 1단계에서는 개별 리소스(Resource)와의 통신을 준수해야 한다. 모든 자원은 개별 리소스에 맞는 엔드포인트(..
네트워크/HTTP 기초 알아보기 2편 HTTP Requests / HTTP Responses 정리 HTTP Requests 클라이언트가 서버에게 보내는 메세지 start line , headers , body 구조로 되어 있다. Start line 수행할 작업, HTTP 메서드를 나타냄 (GET,POST등) 요청 대상 ( URL & URI ) 또는 프로토콜, 포트,도메인의 절대 경로는 요청 컨텍스트에 작성됨 (요청 형식은 HTTP method 마다 다름) HTTP 버전에 따라 HTTP message 구조가 달라지기 때문에 HTTP버전을 같이 입력 HTTP method 요청 형식 origin 형식 : '?'와 쿼리 문자열이 붙는 절대 경로 GET, POST, HEAD, OPTIONS 등의 method와 함..
