carrots-day

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와 비슷해보이지..

BMT와 POC 난 실무를 하며 각 BMT와 POC 심사를 끌려간 적이 많았다. 근데 끌려 다니면서도 '누군가 BMT와 POC의 차이가 뭐에요?' 라고 물어보면 대답할 수 없었다. 보통 둘다 제품 판매를 위한 시연 자리였던거 같은데 패트와 매트마냥 뭐가 뭔놈인지 확실히 구분하지 못했다. 그런 참에 간단하게 요약해보겠다. BMT (Bench Marking Test) 일반적인 성능 시험과 달리 실제와 같은 환경에서 여러 개의 제품의 성능에 대해 비교 시험을 반복해 성능을 객관적으로 평가하는 것 한마디로 입찰에 응한 업체 제품의 성능을 비교하는 것이다. 이것 저것 테스트해보고 비교해보는 시연회같은 느낌이다. POC (Proof Of Concept) 새로운 프로젝트가 실제로 실현 가능성이 있는가, 효과와 효용,..

RFP란 직역하면 제안요청서로 발주자가 특정 과제의 수행에 필요한 요구사항을 체계적으로 정리하여 제시함으로써 제안자가 제안서를 작성하는데 도움을 주기 위한 문서 쉽게 말해 '우리 이런 시스템 구축할라 그러는데 너네 이거 돼요?' 하는 항목을 정리한 문서다. 과거, 일을 하다보면 RFP 문서를 받고 제안서를 쓸때가 있다. 과거 내가 일했던 회사에선 기술 영업 파트가 있었지만 사실상 접대 영업 방식이었다. 기술 영업이라면 RFP문서를 확인하고 기존의 기능으로 커버가 가능한지, 추가적으로 개발이 필요한지, 필요하다면 소요가 얼마나걸리는지를 운영/개발팀과 협의해서 진행하는 것이 일반적이라고 생각하는데 처음부터 끝까지 확인해서 넘겨줬다. (내 일이 아니라고 생각하는건 아니지만 어떻게 자사 제품 기능을 몰라서 이걸..