Web Programming

  • Web Programming/Design

    UI Component

    안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이번 글에서는 웹/앱의 UI 개발에서 Component에 대한 내용을 정리해 보겠습니다. UI에서의 컴포넌트 UI 컴포넌트를 개발하는 다양한 방법들 1. UI에서의 컴포넌트 먼저 '컴포넌트(Component)'는 부품이라는 사전적 의미를 가지고 있습니다. UI 개발에서의 컴포넌트는 특히 사용자와 상호작용하는 기본적인 형태로, 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위를 의미합니다. 재사용이 가능하도록 특정 영역에서만 사용 가능하지 않도록 하고, 기능적으로나 시각적으로나 명확한 용도에 따라 구성합니다. UI 컴포넌트는 사용자가 사용하는 최소 단위로 다른 요소와 구분하고, 행동에 반응하고, 현재 상태에 대한 정보를 전달하기 위해 크게 아래와 같은 5..

  • Web Programming/React

    React 란?

    안녕하세요 씨앤텍시스템즈 박선희 연구원입니다. 이번 포스트는 React 에 대해 알아보는 시간을 가져보고자 합니다. 1. 리액트란? 2. 리액트는 왜 만들여졌을까? 3. 리액트 구성요소 1. 리액트란? 리액트는 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용됩니다. 컴포넌트 기반으로 동적인 UI를 만들 때 사용되며 데이터가 변경됨에 따라 필요한 컴포넌트만 갱신되고 렌더링 됩니다. 페이스북과 개별 개발자 및 공동체에 의해 개발과 유지보수가 되고 있습니다. 요즘 프론트 개발에 많이 사용되는 Vue, Angular와 동일하게 SPA 개발에 사용될 수 있습니다. 언어는 JSX, JS 그리고 HTML을 사용합니다. 리액트는 라우팅, API 통신 등의 기능을 기본적으로 제공하지 않아 추가 라이..

  • Web Programming/Linux CentOS

    [CentOS 7] VirtualBox를 이용한 다른 네트워크 간 게스트 통신

    안녕하세요, 씨앤텍 시스템즈 황순호 연구원입니다. 이번 포스트는 VirtualBox에서 서로 다른 네트워크의 게스트 간 통신이 가능하도록 구현하는 방법에 대해 작성하겠습니다. VirtualBox에서 제공하는 네트워크 설정에서는 게스트끼리 같은 네트워크로 묶여 통신이 직접 이루어집니다. 따라서 라우터를 경유하여 통신이 이루어지는 네트워크를 구현하기 위해서는 추가적인 설정이 필요합니다. 환경 구성을 위해 필요한 준비물은 다음과 같습니다. 1. VirtualBox 2. VirtualBox에 설치 가능한 CentOS 7 이미지 구현하고자 하는 네트워크 구성은 다음과 같습니다. 1. 가상 환경 설정 가상 환경이므로 실제로 그림과 같은 구성은 아니나 그림처럼 Guest1이 Router를 경유하여 Guest2와 통신..

  • Web Programming/Angular

    Angular Ngrx 활용하기 - Part1. Ngrx란?

    안녕하세요 씨앤텍 시스템즈의 김준형 입니다. 이번 포스트는 Ngrx란?에 대해서 정리해 보았습니다. ngrx.io/docs 문서를 참고하여 작성하였습니다. 1. Ngrx 란? Ngrx는 Angular에서 반응형 애플리케이션을 구축하기 위한 프레임 워크입니다. 페이지를 이동할때 변수를 그대로 가져가서 사용하고 싶을때 사용하거나, Java와의 Rest통신 후 결과값을 저장할 때 많이 사용합니다. 예를들어, 밑에 그림과 같이 Store에 값을 저장해 놓고 다른 페이지에서 가져다 쓸 수 있는 편리한 기능입니다. 이러한 과정을 상태관리라고 합니다. Angular 1버전인 AngularJS에서는 State를 이용하여 상태관리를 하였으나, Angular의 버전이 높아지면서 상태관리를 더 편하게 할 수 있는 Ngrx를..

  • Web Programming/Angular

    Angular 기초 이론

    안녕하세요 씨앤텍시스템즈 홍정화 연구원입니다. 이번 포스트에서는 Angular의 이론과 TypeScript에 대하여 정리해 보았습니다. 1. Angular 2. TypeScript 1. Angular Angular는 종합 프레임워크입니다. 하나의 애플리케이션을 구축할 때, 모든 애플리케이션의 공통적인 개발 환경을 제공해주며, 개발에 필요한 화면구성, DB연동과 같은 개발환경들에 공통적인 부분을 제공함으로써 개발 시간 단축과 리소스 비용 절감 등 생산성을 크게 높여주는 역활을 합니다. 프레임워크 : 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 클래스와 라이브러리 Angular는 Google에서 만든 SPA(singule page application) 방식의 프론트엔드 개발을 ..

  • Web Programming/ASP .Net Core 3

    SignalR

    안녕하세요 씨앤텍 시스템즈 최홍준 연구원입니다. 이번 포스트는 SignalR 입니다. SignalR은 웹 개발 진행 시 실시간 처리가 필요할 경우 사용하는 라이브러리 입니다. SignalR을 내용을 알기 전 선행 지식이 필요합니다. 1. TCP/IP Socket 2. WebSocekt TCP/IP, WebSocket에 관련하여 간단하게 정리 후 SignalR에 대해 소개하겠습니다. [ Socket ] Socket이란 네트워크상에서 동작하는 프로그램 간 통신의 종착점(EndPoint)입니다. 프로그램이 네트워크에서 데이터를 통신할 수 있도록 연결해주는 연결부라고 할 수 있습니다. EndPoint : IP Address + Port 번호의 조합을 뜻함, 최종 목적지는 사용자의 디바이스 혹은 Server [ ..