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/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/Design

    UI/UX & HCI 디자인이란

    안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다. 이번 포스트에서는 UI/UX 그리고 HCI에 대하여 정리해 보았습니다. UI (User Interface) – 사용자와 마주하다 - UI는 요약하자면 사용자가 앱을 사용할 때 마주하는 디자인, 레이아웃, 기술적인 부분 - 디자인의 구성요소(폰트, 컬러, 줄간격 등) 상세한 요소가 포함 - 기술적인 부분(반응성, 입출력단계, 애니메이션효과 등) 여러 부분을 포함 - UI = 디자인 & 기술 예시) UI는 다양한 사용자가 사용할 수 있도록 보편성을 지녀야 하며 전체적으로 사용에 잇어 큰 불편함이 없어야 한다. 좋은 UI는 대부분의 사용자가 높은 만족도를 가져야 하며 어쩔 수 없이 발생하는 주관적인 불만족을 최소화 시켜야 한다. UX (User Experienc..

  • Web Programming/Design

    Adobe illustrator 활용하기-그래픽 아이콘

    안녕하세요. 씨앤텍시스템즈 이나연 연구원입니다. 이번 글에서는 Adobe illustrator를 활용하여 그래픽 아이콘을 만드는 과정을 간단하게 정리해보았습니다. Adobe illustrator에서 원이나 사각형의 오브젝트를 가지고 원하는 모양을 만들기 위해, 패스파인더와 도형 구성 도구를 사용해볼 수 있습니다. 패스파인더와 도형 구성 도구는 두 개이상의 오브젝트끼리 모양을 빼거나 합쳐서 새로운 형태의 오브젝트를 만들어낼 수 있다는 공통점이 있습니다. 그래픽 아이콘을 만드는 과정과 함께 두 도구를 사용하는 방법을 간단하게 설명해보겠습니다. 이 글의 설명은 Adobe illustrator CC 2019 (한글판)을 기준으로 작성되어있으며, 버전이 달라도 화면 요소들과 작업방식은 크게 다르지 않습니다. Ad..