Web Programming

  • Web Programming

    CentOS7, Apache를 활용한 HTTPS 환경 구성(자체 서명 SSL/TLS)

    안녕하세요, 씨앤텍시스템즈 황순호 연구원입니다. 이번 포스트는 Apache 웹서버를 활용하여 HTTPS 웹 환경을 구성하는 방법에 대해 작성하도록 하겠습니다. HTTPS는 웹 트래픽을 암호화하는 프로토콜로 클라이언트와 웹 서버 사이에 주고받는 정보를 보호합니다. 개발 환경에서 이러한 HTTPS 구성이 필요한 이유는 타 도메인에 대한 쿠키 전송이나 webRTC와 같은 기술을 적용할 때 HTTP 환경에서는 웹 브라우저 보안 정책 상 제한되는 기능이 많기 때문에 개발 및 테스트 어려움을 겪게 됩니다. 본래 HTTPS 구성을 위해서는 Digicert, GlobalSign, Comodo 등 다양한 인증기관(CA)에 신청하여 인증서를 받는 과정이 필요합니다. 또, 제약사항이 있으나 무료로 인증서를 발급하는 CA도 ..

  • Web Programming/Design

    SVG를 이용하여 Animation 만들기_후속

    안녕하세요 씨앤텍시스템즈입니다. 오늘은 SVG를 이용한 Animation을 생성하기 후속편으로, svg의 속성 대해서 알아보겠습니다. svg태그를 html에서 사용하다보면, 아래와 같이 svg에 preserveAspectRatio 속성이 사용되는 것을 확인할 수 있습니다. --생략-- 이 속성(preserveAspectRatio)을 본격적으로 다루기 전에 viewBox와 viewport에 대해서 먼저 정리하고 넘어가겠습니다. viewBox는 svg가 가지고 있는 도형의 원형 즉, Figma에서 추출한 frame의 크기로써, frame 크기와 동일한 값으로써 초기 형성된다고 정리하면 쉽습니다. viewport는 viewBox를 감싸는 박스로 예를 들어, 사용자가 창문을 통해 viewBox를 보게 될 때 그..

  • Web Programming/Design

    SVG를 이용하여 Animation 만들기

    안녕하세요 씨앤텍시스템즈입니다. 오늘은 SVG를 이용한 Animation을 생성하는 방법에 대해서 정리하겠습니다. 이 글은 https://youtu.be/UTHgr6NLeEw?si=L0r4UHGpoLLN96Ld 자료를 참고하여 작성하였습니다. 이 글의 각 파트별 마지막에는 아래의 두 가지 animation을 완성할 수 있습니다. 목표 1 : animation1 먼저, animation1을 만드는 과정을 살펴보겠습니다. 사용할 색상을 정해줍니다. 그리고 나면, Figma(선택)를 통해 animation을 적용할 도형을 만들어 줍니다. 그래픽의 픽셀이 깨지지 않게 하기 위해서 frame은 최대한 작은 사이즈로 만들어 줍니다. 코드로 뽑을 때 파악하기 쉽도록 layer 별로 이름을 지정해줍니다. 추출할 도형의..

  • Web Programming/Angular

    Angular Router 적용

    안녕하세요, 씨앤텍 시스템즈 임재원 연구원입니다 이번 포스트는 Angular에 기본적인 Router를 사용하는 방법에 대해 작성하려 합니다. * 버전 정보 Node version -20.9.0 Angular CLI -17.0.3 Angular Router 란 ? Angular 애플리케이션에서 내비게이션을 관리하기 위한 라이브러리입니다. 단일 페이지 애플리케이션(SPA)에서 페이지간의 전환 및 라우팅을 담당합니다 SPA는 페이지를 새로 로드하지 않고도 동적으로 내용을 갱신할 수 있는 웹 애플리케이션을 의미합니다. 와 의 차이점 ? *SPA의 장점 중 하나인 동적 로딩을 구현할 수 있습니다 *페이지 전환 시 새로고침이 발생하지 않습니다 *자원소비 감소 *전체 페이지를 다시 로드하게 되어 브라우저가 서버로부터..

  • Web Programming

    Spring Boot에서 MyBatis 적용

    안녕하세요, 씨앤텍시스템즈 육지후 연구원입니다. 이번 포스트에서는 SpringBoot에서 MyBatis를 적용하는 방법에 대해 작성하려 합니다. ※ 사전에 Spring Boot가 설치되어 있어야 합니다. ※ ※ 해당 포스트는 Oracle을 사용하지만 다른 DB도 사용할 수 있습니다. ※ 1. MyBatis란? MyBatis는 간단하게 데이터베이스를 쉽게 다룰 수 있도록 도와주는 프레임워크입니다. 프로그램에 있는 SQL 쿼리들을 한 구성파일에 구성하여 프로그램 코드와 SQL을 분리할 수 있는 장점을 가지고 있고 조회 결과를 사용자 정의 DTO, MAP 등으로 맵핑하여 사용할 수 있어 빠른 개발이 가능하고 생산성이 향상된다는 특징이 있습니다. 2. 환경설정 pom.xml org.mybatis.spring.b..

  • Web Programming

    NodeJS 와 Angular, React 앱 연동

    안녕하세요, 씨앤텍시스템즈 황순호 연구원입니다. 이번 포스트는 Angular와 React로 빌드된 페이지를 NodeJS에서 사용자에게 제공할 수 있는 방법에 대해 작성하도록 하겠습니다. ※ 사전에 NodeJS가 설치되어 있어야 합니다. NodeJS를 설치하면 npm도 같이 설치되며 명령어를 이용한 Angular와 React 프로젝트 생성이 가능해집니다. 1. Angular 또는 React 프로젝트 생성 먼저 Angular 프로젝트부터 생성을 해보겠습니다. 저는 바탕화면에 프로젝트들을 담을 project 폴더를 생성하고 windows cmd창을 이용해 해당 폴더로 이동 후 진행하겠습니다. 프로젝트 생성을 위해 angular-cli 패키지를 설치합니다. npm i -g @angular/cli 다음 명령어를 ..