포토샵 같은 그림판? 말 그대로다. 별도의 레이어로 관리 될 수 있는 캔버스 그림판을 만들어보자. 일단 포토샵은 도형을 실제로 그리거나 할 때 해당 도형이 실제로 어떻게 나올지 미리 보여주고, 마우스를 놓을 때 실제 도형이 나타나게 된다. 소스코드 실선 사각형 지우개 파란색 빨간색 분홍색 주황색 5px 10px 15px 20px 원리 원리는 간단하다. 캔버스를 누른 뒤, 마우스를 움직이게 되면 마우스가 이동한 경로를 currentRect의 coordinates 배열에 저장한다. coordinates에 저장 된 좌표 값을 바탕으로 현재 그리는 도형이 무엇인지에 따라 각기 다른 방식으로 캔버스에 그림을 그린다. 그렇게 그려진 도형은 currentRect 변수를 통해 rects 배열에 저장 되며, 추후에 캔버..
왜 갑자기 이런걸 신경쓰나? 갑작스레 신경쓰이게 된 건 아니고, 예전부터 상용 프로그램과 내가 만든 프로그램의 차이가 무엇이길래 이렇게 크게 사용감이 다른가 의아했었다. 사실 퍼포먼스에 대해서는 많은 프론트엔드 개발자들이 마음에 담아두는 부분일 것이다. 웹앱으로 유명한 노션을 보면 그렇게 좋을 수가 없는데 왜 내가 만든건 사용감이 이 모양일까. 버튼을 누르면 0.5초 정도 느리게 움직이는 것 같고, 로딩은 또 왜이렇게 긴지... 이 부분은 내가 다니는 회사에서도 고질적인 문제였다. 실력자들은 많았지만 작은 규모의 회사다보니 하나부터 열 까지 선임 개발자가 챙겨줄 수 없었다는 점. 그래서 내가 만든 앱이 왜 이렇게 구린지 나름대로 원인을 분석해 보고, 사내 행사 때 프레젠테이션을 했던 내용을 토대로 여기에..
본문에서 말하려는 이슈는 위와 같은 이슈를 말하는 것이다. eslint에 대해서는 다음 기회에 상세히 서술할 예정이니 오늘은 eslint를 알고 있다는 전제 하에 글을 이어 간다. eslint는 간략하게 말하자면, 자칫 잘못하면 중구난방으로 작성될 수 있는 자유분방한 언어인 Javascript를 조금 더 엄격하게 관리하기 위한 문법적 규칙을 얘기한다. 위 이슈는 문서에 작성 된 코드의 개행 문자가 CRLF 방식으로 작성 되었기에 뱉는 에러인데, 왜 CRLF를 에러로 다룰까? 운영 체제별로 파일을 다루는 방식이 다르듯, 개행 문자도 서로 다르게 취급되는데, 리눅스, Mac OS 등의 운영체제는 LF 방식을 지원하며, Windows는 CRLF를 기본으로, LF도 지원한다. 그렇기 때문에 맥, 리눅스, 윈도우..
- Total
- Today
- Yesterday
- 산업기능요원
- NUXT
- eslint
- jest
- 기능대회
- 정보처리산업기사 요약
- 산업기능요원 재배정
- 2021년 산업기능요원 재배정
- 2020정보처리산업기사
- 대학생 현역 산업기능요원
- 캔버스 그림판 javascript
- 산업기능요원 재배정 확정
- 기능경기대회
- 전국기능경기대회
- kakaocdn
- 현역 산업기능요원
- IT산업기능요원
- 초성검색
- 산업기능요원 현역
- 검색
- 대학생 산업기능요원
- 산업기능요원 인센티브T.O
- React Native
- 정보처리 산업기능요원
- 21년 산업기능요원
- JavaScript
- 2021년 산업기능요원
- React-Native
- 산업기능요원 폐지
- 초성
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |