목록먹고살자 (48)
carrots-day
React LifeCycle React는 각 컴포넌트마다 고유의 생명주기(LifeCycle)을 가진다. class형 컴포넌트의 render 함수 전후로 각 생명주기 함수를 갖는다. import React, { Component } from "react"; class Banner extends Component { render() { return hello carrots; } } export default Banner; Banner라는 컴포넌트가 있다 가정해보자. DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 React에선 각 생명주기에 대한 컨트롤을 위해 메소드를 제공한다. 각 메소드는 Class형 컴포넌트에서만 사용가능하며 다음과 같은 프로세스를 지닌다. LifeCycle Diagr..
React props, state 둘다 react 데이터 핸들링 javascript 객체로 key, value 형태를 띄며 데이터 원 주인이 누구인가에 따라 구분된다. props는 부모로 부터 전달받은 데이터로 외부에서 주입되는 객체다. 한마디로 위에서 아래로 내려오는 구조며 변경이 불가능하다. state는 각 Component가 소유하는 영역으로 내부에서 사용되는 데이터 객체다. 👽 궁극적으로 함수의 파라미터(props)와 함수 내 지역변수(state) 차이로 이해하면 된다. 그리고 기본적으로 Component의 화면은 함수 내 지역변수로 인해 제어된다. props 부모 Component로 부터 전달받은 데이터 객체 최초 렌더 이후 자동 리렌더링 되지 않음 (생명주기 메소드 사용해야됨) 읽기전용 (데이..
React Component React의 컴포넌트는 앱을 구성하는 화면을 별개의 모듈로 나눈 단위로 Javascript와 JSX로 구성된 모듈을 반환하여 화면을 구축한다. React 앱을 구현하는데 있어 가장 기본적인 단위, 컴포넌트다. 컴포넌트의 핵심은 기능의 모듈화와 재사용성에 있다. 기능을 모듈화하여 관리포인트를 통일화하여 유지보수성을 증대시킬 수 있고, 모듈 형태이기 때문에 필요한 곳에 레고처럼 끼워넣어 사용할 수 있다. 이것이 React 앱을 구현하는 가장 기본적인 방법이다. CRA를 통해 React app을 만들면 App.js가 있다. App.js도 App이라는 컴포넌트를 return하는 형태로 되어있다. App은 모든 Component의 부모 컴포넌트다. Component의 선언방식 Clas..
React 디자인 패턴 React의 Component, 상태관리에 대한 글을 쓰기 전에 Flux 패턴, 즉 단방향 바인딩 디자인 패턴에 대한 내용을 이해해야 할 필요를 느낀다. 데이터 추적이 힘든 MVC 한계를 극복하기 위한 대안으로 제시된 Flux와 MVC 패턴의 문제, Flux 패턴의 필요성에 대해 알아보자 MVC 패턴 먼저 MVC패턴의 아키텍쳐에 대해 알아보자. 먼저 MVC 패턴은 Controller, Model, View로 프로세스를 분리하여 데이터의 CRUD를 제어하는 디자인 패턴이다. 그림에서 보듯 Controller로 요청을 받고, 내부 비즈니스 로직 수행 후 결과 데이터(Model)을 View로 전달한다. 해당 View를 통해 사용자에게 제공되며 View를 통해 데이터를 입력하면 View ..
Vue.js Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. React와 더불어 프론트엔드 개발의 양대 산맥, Vue.js다. React의 후발주자로 공개된 기술로 Google JavaScript 프로그래머인 Evan You가 개발했으며 React, Angular와 같은 PA 개발을 위한 프레임워크다. 특징 MVVM 패턴 (Model View View Model) : Front-end와 Back-end 로직을 분리하여 코드를 구성하는 디자인 패턴이 기반이며 View와 Model을 분리하여 개발 효율성을 극대화한다. 용어 설명 뷰 (View) 사용자에게 보이는 화면 돔 (DOM) HTML 문서에 들어가는 요소(태그, 클래스, 속성..
웹 스토리지 웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 성능 최적화에 있어 우선시되는 것은 서버 리소스 사용율을 낮추는 것이다. 이에 W3C의 HTML5는 웹 스토리지 기능을 추가해 쿠키보다 더 큰 저장공간, 손 쉬운 사용으로 클라이언트 리소스를 적극활용할 수 있는 대안을 제시한다. 웹 스토리지는 로컬 스토리지와 세션 스토리지로 나뉜다. 로컬스토리지 (localStorage) localStorage는 브라우저에 반영구적으로 데이터를 저장한다. 브라우저를 종료해도 데이터가 유지된다는 얘기다. 데이터를 지우고 싶다면 직접 지워줘야한다. 또한 도메인별로 localStorage 접근이 제한된다. 👽 네이버 localStor..
저장소 웹 개발시 가장 비슷하면서 상이한 개념이 세션, 캐시, 쿠키, 토큰이다. 토큰은 저장소가 아니기 때문에 이글에 적기 뭐하긴 한데 그래도 간지나니 같이 쓰겠다. 사실 나도 명확하게 얘기하라고 하면 일부는 어버버될 것 같다. 이 글에서 정홝히 뿌서본다. 와다! HTTP 특성 저장소별 차이를 보러 왔는데 웬 HTTP 특징을 떠드나 싶을 것이다. 해당 저장소를 사용하는 이유에 대해 이해하기 위해 필요로 하다. 가장 대표적인 특징인 무상태성과 비연결성 때문이다. 무상태성 (Stateless) 클라이언트와 데이터를 주고 받아도 다음 연결시 이전 데이터를 유지하지 않음 비연결성 (Connectionless) 요청에 대한 응답 이후 클라이언트와 연결을 끊는 방식을 사용 👽 다음의 특성 때문에 정보가 유지 되지 ..
JSX JSX(Javascirpt XML)는 React에서 사용하는 XML과 Javascript를 혼용하는 문법이다. React에서는 UI와 렌더링 로직을 결합하여 구현할 수 있는 언어를 지원한다. 바로 JSX다. React 입문시 러닝커브에 꼭 거론되는 녀석인데 요약하자면 React 전용 문법이다. 근데 솔직히 HTML, XML, Javascript를 어느정도 다룰 줄 안다면 대충 코드만 봐도 사이즈나온다. 예시 (App.js) 이전 포스팅에서 만든 React App을 열어보면 App.js가 있다. main Component에 해당하는 소스다. CRA를 통해 프로젝트를 생성하면 기본적으로 App.js가 생성된다. 모든 Component의 시작점이 되는 부분이다. 언뜻 보기엔 일반 HTML와 비슷해보이지..