들어가며 처음 React + typescript 조합을 사용했을 때 컴포넌트를 만들기 위해 아래와 같은 코드를 많이 사용했습니다. // Parent type Props = { count: number; }; const Parent: React.FC = ({ count }) => { return Parent {count}; }; export default Parent; // App import Parent from "./Parent"; function App() { return ( ); } export default App; 강의나 여러 예제에서 React.FC를 많이 사용했기 때문에 “함수형 컴포넌트를 만들 때 React.FC를 사용해야 되는구나”라는 생각을 갖게 되었는데요 최근에 React.FC 사용을..

들어가며 규모가 큰 프로젝트를 진행할수록 하나의 파일로 관리하기보다는 여러 개의 파일로 분리하여 작업을 하는데요. scss에서는 기존에 스타일시트를 @import 속성을 이용하여 파일을 연결해서 사용하고 있습니다. 대체로 변수, 자주 사용되는 코드를 각각의 성격에 따라 전체 공통 _variables, _mixin, 혹은 페이지 공통을 추가로 작성하여 연결합니다. 하지만, scss에서 @import 사용을 지양하는 추세로 @use를 새롭게 도입하면서 권장한다는 글을 읽고 사이드 프로젝트에 적용하면서 소개하는 글을 작성하게 되었습니다. @import 여러 scss 혹은 css 파일을 분리하여 관리하여 불러올 때 사용되는 기능으로 파일 최상단에 선언합니다. scss에서는 @import 하는 파일 이름 앞에 ’..

들어가며 Web 3.0(Web3)라는 용어가 여기저기서 심심찮게 눈에 띄고 있어요. 저는 그냥 마케팅 용어겠거니 하고 처음엔 그다지 관심을 두지 않았었는데 지금은 “그래서 웹 3.0이 뭔데?” 하고 궁금해졌어요. 그래서 Web 3.0이 뭔지 한번 알아보았어요. Web3가 뭐죠..? 우선 위키를 검색해 보았습니다. 웹3.0 이란 컴퓨터가 시맨틱 웹 기술을 이용하여 웹페이지에 담긴 내용을 이해하고 개인 맞춤형 정보를 제공할 수 있는 지능형 웹 기술을 말한다. 지능화, 개인화된 맞춤형 웹이다. 웹 3.0은 기본적으로 웹 2.0의 핵심인 읽기와 쓰기를 넘어 ‘소유’의 개념이 더해진 것이다. 세계 곳곳에 흩어진 네트워크 참여자들의 컴퓨터 자원을 활용하는 블록체인 기술 덕분에 자료가 분산 저장되고, 이더리움 같은 ..

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

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

어느 날, 피드에 “칭찬은 꼬마 날라리도 직장인으로 만든다"라는 글이 추천되어 읽고 갑자기 옛 기억이 떠올라서 블로그에 일기를 써 보려고 합니다. 여러분은 떠올리면 언제나 웃음 짓게 되는 기억나는 칭찬이 있으세요? 나도 힘들고 그도 힘들었던 첫 직장 생활 저는 대학원을 마치고 25살에 첫 직장 생활을 시작했어요. 외국계 IT 컨설팅 기업의 첫 웹 디자이너로 입사를 했는데요, 웹 디자이너로서의 스킬도 없었고 업무의 감을 못 잡아 1-2년 정말 고생을 많이 했답니다. 대기업과의 프로젝트에 디자인을 전담하는 인력으로 투입됐지만 클라이언트 분으로부터 모진 말에 상처도 많이 받았고, IT 컨설턴트 동료들의 전문 용어를 이해하는 게 너무 힘들기도 했고요, 부족한 업무를 나름 보완하느라 몸을 혹사시켜 병이 나기도 했..

들어가며 업무를 진행하다 보면 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 그래픽을 렌더링하진 못했다고 합니다. 처음에는 일부 위젯과 ..

들어가며 어떤 사건이 일어나면 뉴스에서는 관련 분야의 전문가를 초대해 제각기 생각하는 또는 주장하는 의견을 이야기합니다. 2년 전 코로나 바이러스로 모든 국민이 어떻게 대처해야 할지 어려워할 때, 각종 미디어에서 다양한 분야의 전문가들을 모셔 의견을 나누는 것을 기억하실 것입니다. 예컨대 바이러스 전문가, 의료계 전문가, 방역 체계 전문가, 학교 선생님 등 인터뷰를 나누고 각자의 전문 지식을 바탕으로 왜 이런 현상이 일어나는지, 지금 우리에게 중요한 것은 무엇인지, 어떻게 해결해 나가야 할 것인지에 대해서 이야기를 나눴고, 미디어를 시청하는 사람들은 인터뷰 내용을 보고 지식을 쌓고 각자의 대응 전략을 세워 나갔었습니다. [전문가 인터뷰] 코로나19 세계 곳곳 확산세…대응방식은 제각각, KBS 뉴스9 20..

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

들어가며 블록체인의 시초는 Bitcoin: A Peer-to-Peer Electronic Cash System(개인 간 전자화폐 시스템)의 논문으로 블록체인은 기존 중앙 집권화된 금융서비스가 가진 한계 및 문제점을 해결하기 위해 시작된 기술이라고 볼 수 있습니다. 웹 3.0 시대의 금융서비스는 DeFi(Decentralised Finance)로, 중앙화 된 조직이 관리하는 서비스가 아니라, 거래원장을 블록체인 위에서 거래자들이 공유하고 이를 기록하여 기존 금융서비스보다 높은 투명성, 보안성 및 접근성을 가진다고 볼 수 있습니다. 이글에서는 이러한 배경을 기반으로 발전해오고 있는 DeFi서비스는 어떤 것들이 있는지, 그리고 우리가 알아야 하는 것은 무엇이 있을지에 대해서 이야기하고자 합니다. 시작하기 전에..

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