들어가며 이전 글에서는 화면을 그릴 수 있는 간략한 사용법을 설명해 드렸었는데요, 이번 글에서는 프로토타이핑 작업 시 사용하는 기능(메뉴)들에 대해 설명하겠습니다. 피그마 맛보기는 총 2편의 시리즈로 구성되어 있습니다. 피그마 맛보기 #1 피그마 맛보기 #2 (현재글) Prototype 대메뉴 설명 프로토타입을 만들기 위해서는 우측 상단에 있는 Prototype 탭을 선택해 줍니다. Device 항목을 선택하지 않으면 추후 프로토타입 진행 시 PC 기준으로 설정되기 때문에 모바일로 작업하시려면 해당 디바이스를 선택 후 진행하시는 것이 좋습니다. Background 항목은 기본 #000000(Black)으로 설정되어있으나 변경할 수 있습니다. 디바이스 선택 후 상단 # 메뉴를 선택하여 프레임을 생성해 줍니..

들어가며 오늘은 [프로그래머, 열정을 말하다]라는 책에 대해서 이야기해보고자 합니다. 또한 굉장히 주관적인 견해가 많이 포함된 포스팅이라는 점을 미리 말씀드립니다. 이 책을 읽게 된 계기 최근, 주변의 상황이 급격한 변화를 맞이하게 되면서 나 스스로도 개발자로서의 나의 위치와 상황에 대해서 개인적으로 되돌아보는 시간이 많아졌습니다. 적지 않은 시간을 개발자로서 살아왔지만 그동안 뿌듯함이나 성취감보다는 항상 부족하고 만족스럽지 못한 시간을 보내왔다고 느껴졌어요. 스스로 경쟁력 없는 사람이라고 여기고 나 자신을 하찮게 포장하는 데에만 급급했습니다. 큰 변화를 잘 맞이하기 위해서는 나 자신부터 마음을 잘 잡아야 한다고 생각했어요. 그래서 무작정 이 책을 읽었습니다. 책을 추천받아서 빌린 지는 꽤 되었지만 몸으..

들어가며 처음 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 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발..

들어가며 업무를 진행하다 보면 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 전화번호를 입력하는 키보드가 나타나요..