분류 전체보기
자바스크립트로 HTML5 캔버스에 회전하는 도형 만들기
자바스크립트로 HTML5 캔버스에 회전하는 도형 만들기
2020.11.28index.html app.js import { Polygon } from "./polygon.js" class App { constructor() { this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1; window.addEventListener('resize', this.resize.bind(this), false); this.resize() this.isDown = false; this.moveX = 0; this.offsetX..
DEVIEW 2020 WELCOME 패키지
DEVIEW 2020 WELCOME 패키지
2020.11.22처음으로 온라인으로 진행되는 DEVIEW 2020, WELCOME 패키지를 신청할 수 있다길래 신청했더니 최근에 택배가 와서 간단히 소개해보려한다. 구성품은 다음과 같다. 텀블러 - 말 그대로 텀블러 ...그런데 이제 열에 약한 스티커 - 개발자 노트북의 영원한 친구 줄 - 마스크 줄이나 사원증 줄로 써도 될 것 같다. 양말 - 예전에도 개발자 행사에서 양말을 받은 적 있는 데 왜 로고 박은 양말을 만드는 지는 아직도 이해가 안간다. 티셔츠면 잠옷으로라도 쓰지
Creative Coding 개발환경 설정 및 기본 프로젝트
Creative Coding 개발환경 설정 및 기본 프로젝트
2020.11.22개발 환경 설정 코드 에디터 Visual Studio Code Visual Studio Code 확장 프로그램 ESlint, jslint - JavaScript용 코드 lint 확장 프로그램 Beautify - 코드 포메터 확장 프로그램 Live Server - HTML 파일을 서빙하는 가상의 서버를 띄우는 확장 프로그램 추가 팁 파일이 크지 않기 때문에 로컬영역이 아닌 클라우드에 저장해서 사용하는 것도 좋다. 구글 드라이브 + 드라이브 파일 스트림으로 로컬 드라이브처럼 사용 가능) 기본 프로젝트 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%;..
Next.js의 기본 구조 정리
Next.js의 기본 구조 정리
2020.11.22Next.js 구조 Next.js의 기본 구조는 다음처럼 구성됩니다. |-- pages | |-- _document // HTML Document, Application Container, 각종 페이지 등을 작성한다. | |-- _app // Application Container. 공통의 레이아웃을 작성한다. | |-- _error // Error Page. | |-- hello // Hello Page /hello로 시작되는 경로의 페이지 컴포넌트 _app // import App from 'next/app' function MyApp({ Component, pageProps }) { return } // Only uncomment this method if you have blocking data ..
Creative Coding을 들어가며
Creative Coding을 들어가며
2020.11.14Creative Coding 몇 년전에 김종민님이라는 개발자분의 포트폴리오를 보고 엄청 놀랐던 기억이 난다. 웹에서 예술을 구현했다고 해야할까 웹이라는 접근 편의성과 인터페이스를 이용한 인터렉티브를 정말 제대로 이용하였고, 몇몇 작업물만 보아도 내공이 느껴지는 작품들이였다. 그 당시, FE 개발자를 희망하고 디자인에 관심이 있다보니 저런 작업물을 만들어보고 싶었지만, 현재까지 생업을 핑계삼아(라고 쓰고 귀찮아서라고 읽음) 이런 생각들을 구석에처박아 놨었다. 그러다가 해당 개발자분이 운영하는 채널의 영상이 드문드문 유튜브에서 추천되어서 봤더니 올 해부터 유튜브 영상으로 작품에 대한 스토리 혹은 튜토리얼 등을 올리시는 걸 알게되었다. 이렇게 본격적으로 알려주는데 구석에 쳐박아 놓았던 나의 생각을 이제 꺼내볼..
Next.js에서 Apollo Client 사용하기
Next.js에서 Apollo Client 사용하기
2020.11.14Apollo Client @apollo/client 라이브러리를 이용합니다. Apollo는 GraphQL 서버에서 필요한 정확한 데이터를 쉽게 query할 수 있는 GraplQL 클라이언트입니다. 데이터를 가져오고 변조하는 것 이외에도, Apollo는 query와 그 결과를 분석하여 클라이언트 사이드 캐시를 구성하며 이를 통해 추가 query와 mutation이 실행될 때 최신 상태로 유지되게 합니다. Next.js에서 Apollo Client 사용하기 SSR을 할 수 있는 Next.js 프레임워크에서 Apollo Client를 사용하는 방법이 여러가지 있다. next-with-apollo라는 라이브러리가 유명하지만 아쉽게도 최신 스펙인 getServerSideProps나 getStaticProps를 정..
기획자
기획자
2020.10.17기획자의 종류 서비스 기획자 서비스 기획자는 고객이 느끼는 여러 불편과 필요를 찾아내어 기획자가 의도한 방향대로 고객들이 행동하도록하는 서비스를 기획하는 역할을 합니다. 고객 경험(UX) 개선을 위한 신규 서비스 구축부터 완성 이후에는 서비스의 데이터를 기반으로 지표를 분석하여 구체적인 해결방안을 제시하고, 제안된 해결 방안을 최종적으로 실행하는 등 서비스의 처음부터 끝까지 참여하고 총괄하는 역할을 합니다. 세부적인 분류로는 앱 기획자, 웹 기획자, 모바일 기획자 등이 있습니다. '배달의 민족'이라는 서비스가 없던 시절은 전화로 주문했지만, '배달의 민족' 서비스가 출시된 이후에는 앱으로 주문하는 등 기존에 사용자들이 경험한 '전화 주문의 번거로움'이라는 기존 사용자 경험에서의 불편을 개선시켜주는 아디이..
Express와 Koa를 비교해보자
Express와 Koa를 비교해보자
2020.09.15비교 기준 인기(GitHub 스타 수, npm 다운로드 수) 설치 기초 Hello World 앱 장점 단점 성능 보안 커뮤니티 참여 Express GitHub 스타 수: +50,100 npm 주간 다운로드 수: +12MM Express는 최소한의 유연한 웹과 모바일 애플리케이션을 위한 탄탄한 특징들을 제공하는 Node.js 웹 애플리케이션 프레임워크로 서버와 라우트를 다루는 걸 도와주는 미들웨어처럼 작동합니다. 설치 express를 설치하기 위해서 Node.js가 설치되어있어야 합니다. 만약 express를 특정 위치에 설치하고자한다면 $ npm install express --save 잠깐 설치하고 dependencies 목록에 추가하기를 원하지 않는다면 $ npm install express --no..
create-react-app 와 next.js 어떤 걸 써야 할까?
create-react-app 와 next.js 어떤 걸 써야 할까?
2020.09.15CRA(eject X) vs CRA(eject O) vs Next.js CRA without eject CRA에서 eject를 하지 않고 사용하는 방법 React를 이용하여 프로젝트를 만들 때 사용하는 가장 기본적인 방법 장점 신경써야 할 코드량이 적음 webpack 설정을 신경쓰지 않을 수 있음 단점 react-scripts로 인한 추상화로 설정 flow 이해가 힘듬 추상화 정도가 높아서 라이브러리 적용시 webpack등 코어한 부분을 건드려야할 경우, 결국 eject를 해야 함 (CRA 공통) webpack-dev-server를 이용한 개발 모드를 위한 서버만 제공, build된 파일로 프로덕션 서버(BFF) 실행을 위해서는 CRA와 동떨어진 새로운 서버를 만들어야함 (CRA 공통) SSR을 자체적으..
Monorepo와 lerna
Monorepo와 lerna
2020.06.05Monorepo vs Polyrepo ☝️ Monorepo Monorepo는 여러 프로젝트의 소스 코드를 관리하는 데에 하나의 저장소(repository)만 사용하는 것을 의미합니다. 예를 들어 Monorepo를 이용하면 웹 앱 프로젝트, 모바일 앱 프로젝트, 서버 프로젝트가 한 저장소에 있게 됩니다. Monorepo와 대비되는 개념으로는 Polyrepo(혹은 Multirepo)가 있습니다. 🖐 Polyrepo Polyrepo는 여러 프로젝트의 소스 코드를 관리하는 데에 여러 개의 저장소를 사용하는 것을 의미합니다. Monorepo와 달리 Polyrepo에서는 웹 앱 프로젝트, 모바일 앱 프로젝트, 서버 프로젝트가 각각의 저장소를 갖게 됩니다. 👍 Monorepo의 장점 통합적인 test, build, ..
tsconfig.json 컴파일 옵션 정리
tsconfig.json 컴파일 옵션 정리
2020.05.28tsconfig.json Typescript는 동적 타입언어인 JavaScript를 타입이 있는 형태로 코딩할 수 있게 해주는 언어입니다. 따라서 TypeScript로 짜여진 코드를 JavaScript로 변환해 줄 트랜스파일러(컴파일러)가 필요합니다. 컴파일은 다음과 같은 커맨드로 사용 가능합니다. tsc foo.ts 해당 컴파일 과정에 여러 옵션을 정할 수 있는데 이 옵션을 작성하는 파일이 tsconfig.json입니다. tsconfig.json의 기본 형태는 다음 커맨드를 통해 생성할 수 있습니다. npx tsc --init 해당 커맨드로 생성되는 기본 형태의 tsconfig.json 및 옵션들은 다음과 같습니다. tsconfig.json의 컴파일 옵션 정리 { "compilerOptions": { ..
20.05.13
20.05.13
2020.05.13코로나 시국이 끝나길 기다리며