들어가며 웹서버와 WAS의 종류들 최근 네트워크에 관련하여 소소하게 책을 읽으며 스터디하는 시간을 가졌는데 그중 관련이 좀 있을법한 주제를 가지고 이번 블로그 포스팅하려고 합니다. 네트워크를 조금 공부해보면서 자연스럽게 관련이 있을 웹서버에 대해서도 좀 알아보게 되었는데 웹서버(Ws)와 웹 어플리케이션 서버(WAS)에 대해 그냥 대략 이렇다~ 할 정도의 지식만 있었지만, 구체적인 차이점과 장단점이라던가 왜 WAS를 쓰면서도 Ws를 따로 두는 것인지 명확한 이유를 알지 못한 채 넘어갔었습니다. 이번 블로그 포스팅을 작성하면서 한 짝 더 학습되면 좋을 것 같아 작성하였습니다. 웹서비스가 어떻게 사용자(client)에 정보를 제공하며 그중 웹서버와 WAS가 하는 역할이 무엇이며 차이점 및 효율성에 대하여 얘기..

들어가며 React는 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다. 이번 포스팅에서는 (저를 포함해) 프론트엔드 개발에 첫발을 내딛고자 하는 분들이라면 가장 처음 찾아보게 되는 기본 입문 지식, 간단한 설치 방법과 구조를 소개해드리도록 하겠습니다. 설치를 위해서 필요한 것 (Node.js, IDE) Node.js React 프로젝트를 만들기 위해서 Node.js와 npm을 설치해야 합니다. Node.js란 브라우저 밖의 javascript. 즉, 브라우저에 내장되어있는 자바스크립트를 웹브라우저 환경이 아닌 곳에서도 사용하여 연산할 수 있게 하는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발..

들어가며 업무를 진행하다 보면 PC 환경이 아닌 모바일 환경의 테스트를 직접 해보고 싶을 때가 많다. 물론 본인이 사용하는 모바일 기기로 테스트를 진행하겠지만 따로 테스트용 모바일 기기를 개인적으로 가지고 있지 않다면 Android/iOS 모두를 확인하기에 어려운 현실이다. 최근 그룹 내 장비를 Mac Book으로 교체 중이라 Mac Book에서 Android와 iOS 에뮬레이터를 쉽게 사용할 수 있게 되어 이런 에뮬레이터를 통한 테스트 방법을 소개하고자 한다. Android Android Studio를 이용하면 Android 에뮬레이터를 실행할 수 있다. Android Studio 설치 당연하겠지만 Android Studio부터 설치해야 한다. 위 링크로 접속하여 설치 파일을 내려받아 설치하도록 하자...

들어가며 이전에 3D 모델을 사용하여 구현된 웹사이트들을 보며 이걸 어떻게 구현하는걸까 하는 호기심을 갖게 되어 WebGL이란 기술을 알게 되었는데요. WebGL을 더 가볍고 쉽게 접근할 수 있도록 도와주는 프레임웍들이 몇 가지 있습니다. 그중에서 제가 직접 경험해본 'Babylonjs'를 소개하고자 합니다. WebGL 이란? WebGL은 Web Graphics Library의 약자입니다. 웹에서 2D와 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API 이며, OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas Element 위에 2D, 3D 그래픽을 그려줍니다. 사실 canvas는 처음부터 3D 그래픽을 렌더링하진 못했다고 합니다. 처음에는 일부 위젯과 ..

들어가며 일을 하면 할수록 커뮤니케이션의 중요성을 느끼게 되는데, 그와 반비례하여 점점 생각을 정리하고 말을 하는 부분이 어렵게 느껴지는 상황이 발생하여 조금이라도 도움을 얻고자 “생각정리스킬”이라는 책을 보게 되었습니다. 책에 대한 회고로 봐주시면 될 것 같습니다. 생각을 정리 못 하는 이유 일을 하다 보면 여러 가지 상황들을 맞닥뜨리게 되는데 그럴 때 많은 경우의 수들을 생각하게 됩니다. 그럴 때마다 이렇게 해야지 저렇게 해야지 생각은 하지만 시간이 조금 지나면 그때 어떠했더라… 하고 잊히는 경우도 간혹 발생하지요. 이 책에서 말하는 것처럼 생각은 눈에 보이지 않기 때문에 머리로만 정리해서는 오히려 더 복잡해지거나 정리가 안 되는 경우가 발생할 수 있습니다. 그렇기 때문에 생각을 시각화하는 연습을 통..

들어가며 현재 진행 중인 프로젝트에서 차트를 라이브러리를 사용하지 않고 구현할 일이 생겼습니다. 처음으로 svg를 활용해서 두 종류 차트를 구현하게 되었는데 나중에도 간단한 차트일 경우 활용하면 좋을 듯하여 메모를 빙자한 포스팅을 해봅니다. 라인 차트 디자인을 받고 이걸 라이브러리 안 쓰고 어떻게 구현해야 할까 고민했는데, 라인 부분이 떠오르는 게 svg 밖에 없어서 svg polyline을 이용해 라인을 그리게 되었습니다. polyline을 그리는 방식은 points 값에 x,y x,y x,y … 식으로 값을 나열하기만 하면 됩니다. polyline의 스타일은 코드에 직접 입력해도 되지만, 후에 컨트롤이 쉽게 하려면 css에서 컨트롤하는 것이 좋습니다. svg { fill: none; stroke: r..

들어가며 실용주의 프로그래머를 읽기 시작한 지 2달 정도 지났습니다. 약 50개 팁 중에 11개의 팁을 읽고 짧게 공유하고 싶은 내용 하나 지식 포트폴리오에 관해 적어볼까 합니다. 소진되는 자산 지식에 대한 투자가 언제나 최고의 이윤을 낸다. - 벤자민 프랭클린 벤자민 프랭클린의 명언을 시작으로 서문에서는 개발 업무의 특성으로 지식과 경험이 가장 중요한 전문적인 자산이라고 말합니다. 하지만 이 지식과 경험은 소진하는 자산이기 때문에 5년, 10년 후에는 쓸모없는 지식이 될 수 있다고 합니다. (맞는 예 인지는 모르겠지만, 불과 5년 전만 해도 jquery를 안 쓰는 곳이 없었지만 요즘 프로젝트는 jquery 쓰는 곳 찾기가 힘들게 되었죠) 또한 우리의 지식이 구식이 될수록 우리의 가치 역시 떨어진다고 합..

들어가며 혹시 모바일에서 서비스에 회원가입을 한다던가, 무언가 내용을 입력할 때에 특수문자 키보드로 바꾸었다가, 다시 영문으로 바꾸었다가.. 상황에 맞지 않는 키보드가 나와서 번거로운 적 있으신가요? 의미 있는 HTML을 사용하여 사용자에게 더욱 편리한 UX를 제공할 수 있어요. 입력과 관련하여 어떻게 하면 좋을지 알아볼까요? none 가상 키보드를 사용하지 않아요. 키보드를 직접 구현할 때에 사용해요. text (default) 기본값으로 제공되고, type 속성에 따라 제공되는 가상 키보드가 표시돼요. decimal 소수점(.)을 제공하는 숫자형 키보드를 보여줘요. numeric 숫자형 키보드를 보여줘요. decimal 모드의 키보드와 약간 차이가 있어요. tel 전화번호를 입력하는 키보드가 나타나요..

Vue3는 현재 총 7편의 시리즈로 구성되어 있습니다. Vue3 #0 [Vue3를 만나다] Vue3 #1 [변경된 기능 1 - 전역 API] Vue3 #2 [변경된 기능 2 - v-model] Vue3 #3 [변경된 기능 3 - v-for와 v-if] Vue3 #4 [새로운 기능 1 - Composition API] Vue3 #5 [새로운 기능 2 - Teleport와 Fragments] Vue3 #6 [제거된 기능들] - (현재 글) 들어가며 안녕하세요. 이번에는 2.x 버전과 비교하여 제거된 기능은 무엇이 있는지 알아보려고 합니다. 기억해두어야 할 것 같다고 생각되는 3가지 내용을 추려왔습니다. 키보드 이벤트를 위한 키코드 키 입력 수식어에 키코드 사용이 불가능해졌습니다. 3 버전부터는 별칭만 사용할..

들어가며 지난번 기본적인 컴포넌트 생성에 대해 알려드렸는데요. 이번 글에서는 스토리북에서 생성한 컴포넌트를 조금 더 효율적으로 활용할 수 있도록 도와주는 addons(애드온)에 대해 알아보고자 합니다. Addons addon에 대해 알아볼까요? 스토리북을 설치하면 package.json 파일에 기본적으로 @storybook/addon-actions와 @storybook/addon-essentials 가 설치되어있는 것을 보실 수 있는데요. @storybook/addon-actions를 먼저 설명드리겠습니다. action을 통해 이벤트 핸들러가 수신한 데이터를 확인할 수 있습니다. import React from 'react'; import { Button } from './Button'; export d..

들어가며 예전 RPA 프로젝트에서 PL님이 사용하셔서 한번 사용해보고 편하다고 생각했었던 스토리북을 다음 프로젝트에서 사용한다는 이야기를 듣고 스터디 겸 모르시는 분들께도 간단하게나마 공유드리면 어떨까 하여 해당 주제를 선정하여 소개하고자 합니다. 스토리북이란? 스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경입니다. 처음 리액트를 기반으로 개발되었고, 이후 Vue, Angular, Web Components, Svelte 등 다양한 프레임워크를 지원하고 있습니다. 스토리북은 컴포넌트를 목록화하여 보고 싶은 컴포넌트를 언제든 확인 가능하도록 만들어줍니다. 하나의 디자인 시스템이라고 생각하시면 편하실 것 같네요. 스토리북의 컴포넌트는 Mockup 상태 값을 넣어줄 수 있도록 되어있어 각종 상태..

들어가며 지난 프로젝트에서 XAML이라는 언어를 사용했습니다. 프로젝트가 XAML로 개발된다고 들었을 때 (XAML..?) 동공지진😮을 일으키며 새로 나온 언어인가? 뭐지.. 하면서 바로 구글에 XML로 검색했던 기억이 나는데요. 😹 그만큼 저한테는 굉장히 생소하고 자믈, 제므얼, 제믈 여러 가지 이름으로 불리는 이 언어, 여러분들은 들어보신 적이 있으신가요? 프로젝트를 시작하지 않았다면 평생 몰랐을 수도 있는 이 낯선 언어 XAML을 같이 알아봅시다. 내용이 많아서 시리즈로 진행될 예정입니다. 이번 편에서는 XAML을 알아보고, 사용하기 전까지의 환경 구성을 해봅시다. XAML? XAML을 위키백과에서는 아래와 같이 설명하고 있습니다. 닷넷 프레임워크 3.0 기술, 특히 윈도 프레젠테이션 파운데이션(W..