본문 바로가기

전체 글48

그림판만들기 21.12.16 canvas태그를 사용해 마우스로 그림그릴 부분을 만들고 range로 붓의 두께를 조절하기위한 부분 Fill,Save 기능구현을 위한 버튼 두가지 10가지의 컬러를 고를수있도록 준비해두었다. 목업중 깃헙에 잔디심으면 좋을거 같아서 급 init > add > commit 했지만 레포지토리가 없어서 push가 안되었고, 이문제를 해결하기 위해 1시간가량 검색해 해결했다ㅎㅎ 오류사항은 오류해결에 따로 작성할것! 이과정을 통해 얻고 싶은것.. 1. 그림판을 만들며 가장 공부하고 싶은부분은 함수의 사용법과 이벤트 핸들러 사용법에 대한 숙지 레퍼런스 없이 구현해보는 것에 초점을 맞춰야 겠지만... 조금은 참고할예정(캔버스에 그림이 그려지는 과정이 이해가 잘안가서...) 2. HTML의 여러 attribute를 사용.. 2021. 12. 17.

바닐라JS로 그림판만들기(feat.니꼬쌤) 이번 주말에 니꼬쌤 강의 보고 따라만든 그림판 컬러칩을 누르면 해당컬러로 펜이 변하고, Range로 펜의 두께를 조절할수있고, Fill/Paint로 캔버스에 도배하거나 그림을 그릴수있게 했다. 펜을 캔버스내에서 움직일때 X,Y의 좌표를 따라 픽셀에 컬러가 이어지게 하는게 어려웠다. Save 기능은 마우스 오른쪽버튼의 기능을 숨긴뒤 버튼에서 저장하는방법으로 제작했다. HTML의 Canvas 로 제작함. 내 기여도 1% ... 이제 안보고 따라 해야지 2021. 12. 15.

코드 스테이츠36기 Section 1 회고록 [경쾌한 실패] 보호되어 있는 글 입니다. 2021. 12. 9.

4W_JS_React Route 시간이 진짜 왜이렇게 빨리가는지 모르겠다. 메서드 공부하다 갑자기 리액트로 돌아온 블로그.. 그사이에 굉장히 많은 학습이 이루어졌지만, 어제 오늘 리액트 수업듣고 깨달았다. "..아! 여기까지 온것은 다 리액트 배우려고 온거구나!! " 그래서 마음이 편해졌다. 뒤로 구르든 옆으로 구르든 어쨋든 프론트엔드의 꽃, 리액트만 잘해도 반은가겠구나..! (물론 리액트 잘하려면 앞에 배운거 다잘해야함) 여하튼 어제의 기본문법에 이어 오늘은 라우터를 공부했고, 리액트 라우터의 주요 컴포넌트를 배운것 위주로 정리해보려한다. 먼저 라우터를 사용하기 전에 라우터 모듈이 들어있는 리액트 라우터 돔을 설치하여야한다. npm install react-router-dom@5.3.0 우리는 버전 5.3.0을 사용했는데 최신버전 받.. 2021. 12. 3.

3W_JS_Method expect() - 리턴값이 기대값과 같은지 확인하는 함수 expect(테스트하는값).기대하는조건 expect(isEven(3)).to.be.true => 'isEven(3)'의 결과값은 참(true)이어야 한다' expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다' 기대하는 조건에 해당하는 함수를 matcher 라고 함. 프레임워크도 있음 (mocha,chai.등) 테스트를 시행할때 기대하는값은 표현식이거나 함수의 실제 실행 결과 1) 표현식: true || false, 1 + 1, 10 * 3 2) 함수의 실행: isEven(3), sum(1, 2) 하지만 엄격하게 비교하지 못할경우엔 expect('테스트하는값').to.equal('기대하는.. 2021. 11. 25.

3W_JS_스코프와 클로저 -변수 접근 규칙에 따른 유효범위. 스코프의 의미와 적용 범위를 이해할 수 있다 스코프의 주요 규칙을 이해할 수 있다 중첩 규칙 block scope와 function scope 전역 스코프와 지역 스코프 전역 변수와 지역 변수간의 우선 순위 let, const, var 의 차이 전역 객체(window)의 이해 let vscope = 'global'; //여기부터 function fscope() { let vscope = 'local'; let lv = local variables'; alert(lv); } //여기까지 local scope fscope(); alert(lv); 스코프 특징 1. 바깥 스코프(전역 = Global Scope)의 변수는 안쪽에서 사용 가능하다. 2. 안쪽 스코프(지역 = L.. 2021. 11. 25.

이전 1 ··· 4 5 6 7 8 다음

티스토리툴바