기술 블로그

React 릴리즈 버전이 16.4.x 버전까지 올랐다는 걸 React 공식페이지나 여러 기술블로그를 통해 알고 있었다. 하지만, 변경 된 사항들에 대해 글을 읽기만 했을 뿐 간단한 예를 만들어서 해보지는 않았다. 최근 이직 준비로 인한 시간이 생겨 변경 된 사항들을 직접 해보고 있다.  오늘은 React v16.0 에 새로 추가 된 componentDidCatch() 함수에 대해 알아보고  이 함수를 어떠한 경우 사용하면 좋을지에 대해 알아보려한다.   React 프로젝트는 수 많은 UI 컴포넌트 트리로 구성되어 있다.  화면 렌더링이 시작되면 수 많은 UI 컴포넌트 들이 각자 역할에 맞게 수행되며 가장 마지막에 위치한 컴포넌트의 역할이 끝나면 페이지 렌더링이 완료된다. 만약 렌더링 도중 어떠한 컴포넌트..

1. 브라우저 주소창에 접속 할 URL 을 입력 2. 브라우저는 현재 PC에 연결된 네트워크의 DNS 에 접속 할 URL 의 IP 주소를 요청3. DNS 로 부터 IP 확인이 완료되면 브라우저는 서버에 요청 할 HTTP 메시지를 작성 4. 작성이 완료 된 HTTP 메시지를 패킷으로 나누어 서버측으로 전송 (TCP 이므로 3-handshaking 기법을 통해 서버를 찾음)5. 서버측에서는 도착한 패킷을 조합하여 원래의 HTTP 메시지로 만듦6. 서버(Web server + WAS) 는 클라이언트에 보낼 리소스(HTTP 메시지)를 패킷으로 나누어 클라이언트측으로 전달7. 브라우저(클라이언트) 는 서버로부터 전달받은 패킷을 조합하여 화면에 띄움

javascript가 최초 나왔을 당시, 웹 페이지의 규모는 지금과 같이 크지 않았다.  그러나 컴퓨터의 성능이 향상되고, 네트워크 속도가 빨라지며 웹 페이지 규모도 점차 커지게 되었다.  웹 페이지 규모가 커지다보니 javascript 코드 규모 또한 커지게 되었고, 중복되는 기능도 많았다.  그러다보니 중복되는 기능들을 하나의 모듈로 만들어 소스 코드의 규모를 줄이고, 재사용성을 좋게 하였다.  하지만, 이 당시 javascript 모듈 사용을 위한 방법에는 정해진 표준이 없었다.  표준 없이 뒤죽박죽 개발을 하면 개발자들간에 혼선이 생기게 되고, 언어 사용성이 떨어지게 된다.  이를 막기위해 CommonJS 와 AMD (Asynchronous Module Definition) 방식의 모듈 사용이 등..

express 로 REST API를 만들던 도중 난관에 봉착했다. DB table에 데이터를 INSERT 하기 위해 unit test를 만들고 테스트를 하는데 request 객체에 body가 자꾸 undefined 가 뜨는 것이었다. 처음에는 express router 를 잘못 써서 발생하는 문제인줄 알았다. 허나, router 를 사용하지 않고 테스트를 해봤는데 여전히 증상은 동일했다. router 사용에는 문제가 없었다. 이리저리 해결방법을 찾기위해 express 공식페이지에서 부터 stackoverflow 등 돌아다녔다. 그러던 도중 body-parser 를 알게되었고 설정에 추가했다. 이제는 해결되는가 싶었다. 결과는 기대와는 달리 참담했다. 몇시간 째 붙잡고 있어 머리가 아파 일단 노트북을 덮었..

API 란?API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. (위키백과)Interface는 우리말로 번역하면 접속, 규격, 연결부분  이라는 의미를 가진다.  API가 없다면? 위 구조에서 미세먼지 정보 DB 쪽에 API 가 없을 경우, A / B / C 어플리케이션 각각에서 DB 접속정보를 알고 있어야 한다.만약, 미세먼지 정보 DB 접속정보가 바뀌게 된다면, A / B / C 어플리케이션 각각에서도 DB 접속정보를 바꿔줘야 한다.어플..

Redux 등장배경facebook에서 react와 함께 소개한 Flux 아키텍쳐를 구현하기 위한 라이브러리컴포넌트 간 state 데이터를 효율적으로 관리하기 위해 등장Flux 와 MVC 패턴의 차이MVC 패턴은 앱의 규모가 커지면 그에따라 Model과 View가 늘어나기에 프로젝트가 복잡해진다.Model과 View가 1:1관계가 아니므로 데이터 관리도 어렵다는 단점이 있다.Flux 특징은 http://2dubbing.tistory.com/26 [flux 아키텍쳐란?]  포스팅 참고Redux는 facebook에서 만든 라이브러리는 아님.Redux는 React에 의존적이지 않음. (React 프로젝트가 아니더라도 Redux 사용이 가능함을 뜻함)React로 개발한 어플리케이션에 새로운 기능을 추가 -> 그만..

function outerFunc() { var foo = "Foo"; return function() { console.log(foo); }}var closure = outerFunc();closure();  위 스크립트가 실행되면 아래 그림 좌측부터 우측 순서로 실행컨텍스트가 생성됩니다.   실행 컨텍스트는 함수가 호출되는 시점에 생성되며, 이 때 실행 컨텍스트 내부의 SCOPE 객체는 함수가 어디에 선언되었는지에 따라 결정되게 됩니다.    그 다음, 호출 스택에 아래와 같은 순서로 실행컨텍스트가 push / pop 됩니다.push 전역 실행컨텍스트push outerFunc 실행컨텍스트pop outerFunc 실행컨텍스트 push anomyFunc 실행컨텍스트pop a..

# Web Server웹 브라우저에서 요청받은 정적 컨텐츠(html, css, js, 이미지 리소스 등) 를 제공하기 위한 서버대표적인 Web Server 플랫폼 구축 소프트웨어에는 Apache, Nginx 와 Windows server OS 용 IIS 가 있습니다. # WAS(Web Application Server)클라이언트 측에서 요청받은 정보를 가지고 연산을 수행한 뒤, 동적인 콘텐츠를 만들어 제공하기 위한 서버 대표적인 WAS 플랫폼 구축 소프트웨어에는 Apache 재단의 Tomcat, Tmax 사의 Jeus, IBM 사의 Web Sphere와 Open source project인 Node.js 등이 있습니다. # 알게된 사항Node.js 플랫폼 기반 Web Application framewor..

오늘 서버구축 담당업무가 주어졌다. 맨날 가상머신에 리눅스 깔고 하던 스킬을 활용할 때가 왔다. + (군 전산병 스킬추가) 는 개풀 뜯는.. 서버 셋팅할 PC를 부팅하니 떡하니 Windows 가 .. 당황하지 않고 CentOS 공식페이지에 들어가 .iso 파일을 받았다. 음... 가상머신에서는 그냥 iso파일을 지정하고 부팅을 하면 바로 설치가 가능하도록 진행됐음에 반해 통짜 PC에 CentOS (이하 리눅스) 설치하려면 부팅 USB 또는 CD가 필요했다. 다행히도 마침 가방에 usb가 있었고 구글링을 하여 usb 부팅이 가능하게 설정하는 프로그램을 설치했다. CentOS minimal 버전이라 그런지 usb 설정하기 까지 약 1분정도 소요됐다. usb를 데스크탑에 꽂은채로 재부팅 + F8 연타타타타닥 ..

예전 Spring을 배울때, Singleton과 MVC 디자인패턴을 기본으로 다루고 사용했었다. 이번엔 react.js 다루며 Flux라는 패턴에 대해 알게되었다. Flux 패턴은 react.js 처럼 데이터 흐름이 단방향으로 전달되는 소프트웨어 개발에서 사용된다. 물론 Flux패턴을 사용하지 않아도 개발은 가능하다.    그림 출처 : https://velopert.com/1225  위 처럼 컴포넌트 구조가 있다고 가정하고 빨간색 컴포넌트(하위) 에서 파란색 컴포넌트(상위) 에 선언 되어있는 객체나 함수를  사용하려한다. react.js에서 하위 컴포넌트로 데이터 전달은 props를 사용하는데  파란색 컴포넌트에서 빨간색 컴포넌트로 바로 접근이 불가능하다. 중간에 있는 컴포넌트에서 받은 뒤, 다시 빨간..