전체 글
Canvas API
사내 세미나에서 진행한 Canvas api 글인데 블로그에도 올려둡니다~ Canvas api란? Canvas API는 javascript와 Html canvas 엘리먼트를 통해 그래픽을 그릴 수 있는 수단을 제공하는 api로, html5의 구성요소입니다. 애니메이션과 게임 그래픽, 데이터 시각화, 사진 조작 및 비디오 등의 다양한 분야에서 사용되고 있습니다. 주로 2D 그래픽을 다루는 데 사용되고 있으며, 비슷하게 그래픽을 다루는 API 중에선 3D를 주로 다루는 WebGL이 있습니다. WebGL이란? WebGL(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 c..
넷플릭스: 규칙없음
몇 년 전 유행했던 책으로 기억하는데 기회가 되어서 읽게 되었다. 읽고 기억에 남아, 블로그에 글로도 남기고 싶은 구절들을 남겨놓는다. 4+1A 피드백 지침 Aim To Assist: 도움을 주겠다는 마음가짐으로 하라. Actionable: 실질적인 조치를 포함하라. Appreciate: 감사하라. Accept or Discard: 받아들이거나 거부하라. + Adapt: 대상에 맞춰 피드백을 각색하라.
내가 쓰려고 만든 MD editor - Note-for.me
Markdown Editor 기존에 Markdown 편집을 위해 사용하고 있던 md Editor Typora가 12월부터 정식 출시가 되면서 유료화가 되었다. 정말 좋은 에디터이지만, 사용빈도도 적고 에디터의 기능 대부분을 사용하지 않는 나는 굳이 결제까지 해야 하나... 하는 생각이 들었다. 겸사겸사 이번 기회에 온라인에 오픈소스로 풀린 MD editor 들을 활용해서 내가 쓰기 편한 에디터를 하나 만들어야겠다 생각했다. editor는 Toast UI editor를 사용해서 날로 먹을 수 있었다. 관계자분들께 감사를... TOAST UI :: Make Your Web Delicious! The TOAST UI Is Free Open-source JavaScript UI Libraries Maintain..
[React] Test 환경 구축과 테스트 예제
React Testing 💡 Jest, ReactTestingLibrary로 Testing 환경을 구축했던 경험을 공유한다. 도입 취지 TDD(Test Driven Development)가 아니라도 테스트를 통해 비즈니스의 핵심 로직 검증만이라도 가능하다면, 코드의 리팩토링이나 기능의 추가, 수정 시에 더욱 안정성을 가질 수 있다고 생각되었음. 공통적인 테스트 코드 환경 구축 및 컨벤션이 있다면 최소한의 노력으로 최대한의 효과를 볼 수 있을거라 기대됨. 환경 구축 설치 💡 CRA기준으로는 이미 jest가 설치되어 있고, 다른 툴체인에서는 jest를 설치해준다. 그 외 설치 필요한 항목 yarn add@testing-library/react@types/jest ts-jest @testing-library/..
자바스크립트는 왜 프로토타입을 선택했을까
제목과는 달리 왜 선택했는지는 알 수 없었지만, 그 외 모든부분에서 큰 영감을 받은 글. 읽고 또 읽자. 자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. medium.com
비승비속[非僧非俗]
비승비속 : 승려도 아니고 속인도 아니다. 이도저도 아닌 어중간한 상황을 일컫는 사자성어이다. 최근 회사에서 개발 업무가 아닌 관리 위주의 업무를 맡게 되었다. 역할은 개발팀장이었지만, 실질적으로 팀 자체의 팀장 역할을 도맡아 했다. 개발자에서 개발팀장이 되기까지 겪은 다섯가지 큰 실수 Taking a leadership role is a big change and can be very daunting, and when we, as humans, struggle, we turn to our strengths. And while technical ability needs to form the roots of leadership, we need to grow from our other strengths as..
[동적계획법] 가장 긴 바이토닉 부분 수열
가장 긴 증가하는 부분 수열의 응용버전이다. 이전 문제를 풀었다면 어렵지는 않은 문제일 것 같다. 11054번: 가장 긴 바이토닉 부분 수열 첫째 줄에 수열 A의 크기 N이 주어지고, 둘째 줄에는 수열 A를 이루고 있는 Ai가 주어진다. (1 ≤ N ≤ 1,000, 1 ≤ Ai ≤ 1,000) www.acmicpc.net from sys import stdin N, A = int(stdin.readline()), list(map(int, stdin.readline().split(" "))) T_L, T_R = [1] * N, [1] * N def get_table_left(ind: int): m = 0 for i in range(ind, -1, -1): if A[ind] > A[i] and m < T_L..
[TS] Type과 Interface로 테스트용 Mock Data 만들기
Mock Data의 필요성 프론트엔드 개발을 하는 입장에서는 백엔드 API가 이미 다 준비되어 있고, 인터페이스도 공유가 된 상태에서 작업을 시작하는 게 최고의 상황일 것이다. 그러나 세상일이 늘 그렇듯 상황이 원하는 대로 흘러가지는 않는 법. 꽤나 빈번한 상황에서 프론트 개발자는 백엔드의 인터페이스만 공유받거나, 혹은 그마저도 공유받지 못한 상황에서 개발을 시작해야 한다. 필자는 이런 상황에서 미리 Mock API를 만들어 내부적인 테스트를 먼저 진행하고, 추후 백엔드 API가 나오면 Mock API와 교체하는 방식으로 프로젝트에 소요되는 시간을 최대한 아끼려고 노력하였다. 다행히 Typescript를 사용하면서 API의 요청과 응답 값을 미리 Typing 해 놓을 수 있었기 때문에 요청 값과 응답 값..
Shadow Dom
Shadow Dom 이란? > 웹 컴포넌트 캡슐화를 위해, lite 버전의 dom을 생성하는 것 실제로 흔하게 사용되는 shadow dom을 보고 싶다면? 개발자 도구 → Settings → Preferences → Elements → Show user agent shadow DOM 체크 range input이 shadow dom으로 이루어져 있다는 걸 볼 수 있다. 하나의 html element가 자체 스코프를 가진 shadow root을 생성하고, 그 안에서 div들로 구현된 range 가 실제로 구현된다. (shadow dom 자체가 하나의 dom이기 때문에, id="track", id="thumb"는 상위 dom의 id와 무관하게 선언해서 사용이 가능하다) 위 예시는 shadow DOM을 포함하는..