View ES6 공부를 계속하다가 공부만 너무 하는 것 같아서 각잡고 한 번 만들어 봤다. 작업시간은 하루 5시간 씩 4일 정도 걸린 것 같다. (중간중간 일이 있어서 실제 기간은 일주일 정도 걸렸따..) 지뢰찾기를 만들기 위해선 다양한 생각을 했어야 했다. 1. 난이도 설정 2. 타이머 3. 초기화 버튼 4. 지뢰 배치 5. 숫자가 뜨는 로직 6. 깃발 기능 등등.. 세부적으로 들어가면 더 많지만 이러한 기능을 구현하면서 잘못된 지식들을 조금씩 파악하게 되었다. 그리고 아직 공부를 안해서 그런거긴 하지만.. 객체형과 함수형 프로그래밍을 한 번 공부해 봐아겠다. 말 만들었을때는 함수가 객체 아닌가? 라고 생각되어서 무슨차인지 잘 모르겠다. Link Minesweeper JS MINESWEEPER EASY..

View 프론트엔드 개발자을 위한 자바스크립트 책을 11장까지 본 후 연습 삼아 만들어본 작품이다. 노드 삽입과 미디어 쿼리 변화에 집중해서 만들었다. Grid의 내부 구조를 HTML에서 작성하지 않고 자바스크립트를 통해 삽입하려고 시도했다. 창 크기가 변함에 따라 타일 하나하나에 접근해 내부의 SVG를 제거하고 삽입하는 코드를 짜기 위해 고심했는데 matchMedia라는 매서드가 있다는 것을 알게 되곤 깜짝 놀랐다. DOM 조작을 공부하면서 예전엔 알지 못했던 다양한 메소드들을 알게 된 것 같다. 아직 DOM에 대해서 공부할게 더 남았는데 후딱 끝내야 겠다. +여담 타일의 모양은 사실 우리집 화장실 타일모양이다..ㅋㅋ 어릴적 부터 봐왔는데 약간 매직아이 효과가 있는 것 같다. 타일 간의 간격을 준 이유..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.13.에 작성된 글입니다. View 위의 작품들은 전부 Grid를 이용해서 만들어 봤다. 그냥 이런것들을 구현하는데 굳이 jQuery를 사용해야 되나 궁금해서 만들어 봤다. jQuery는 구현을 쉽게 할 수 있도록 도와주지만 나는 개인적으로 Vanilla JS를 지양하기 때문에 조금 거부감이 든다. 그래서 아직 jQuery를 공부함에 있어서 조금 망설임이 있다. 물론 Ajax와 같이 복잡한 기능을 구현하기 위해서는 생산성이 좋은 jQuery가 좋겠지만.. 아직은 잘 모르겠다. Drag N Drop은 drag 이벤트에 대한 지식이 없어서 조금 공부를 했어야 했다. 다음엔 drag 이벤트를 이용해서 옷 입히기 같은걸 만들어 봐도 재밌겠다는 생각이 들었다. l..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.10.에 작성된 글입니다. View 디자인은 흰색바탕에 검은색 테두리를 주면 카툰느낌이 나길래 한 번 해봤다. 이번 작품을 만들어 보면서 자바스크립트로 Canvas를 사용할 때 함수들을 어떻게 관리해야 하는지, 브라우저와의 충돌판정은 어떻게 구현할 수 있는지 등 다양한 방법을 알게 된 것 같다. link Cartoon Bubble jeongwoo903.github.io 알게 된 것 HTML5 Canvas Tutorial for Beginners 필기 HTML5 Canvas Tutorial for Beginners - Chris CoursesYoutube에 있는 HTML5Canvas 강의 인... blog.naver.com ect.

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.5.에 작성된 글입니다. View Canvas를 이용해서 처음으로 게임을 한 번 만들어 봤다. 이번 작품을 만들면서 가장 크게 느낀것은 Canvas는 Javascript의 사용이 뛰어나야 한다는 것이랑 멋진 걸 만들고 싶다면 수학을 잘해야 한다는 것이였따.. (특히 삼각함수) 또 사람들이 ES6가 나왔음에도 ES5 문법을 자주쓰는 이유를 안 것 같다. 바로 this랑 scope chain 때문이 아닐까 싶다. var 유효범위가 함수지만, const랑 let은 블록({ })기준이기 때문에 좀 더 까다로운 맛이 있는거 같다. 빨리 ES6를 연습해야 하는데.. 날잡고 해야겠다. link Snake Game jeongwoo903.github.io 알게 된 것​ ..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다. View HTML5 Canvas 연습작으로 만들어 보았다. 아직 Canvas로 인터렉션을 구현하는건 조금 어려운 것 같다..;; 아직은 어떻게 사용해야 할지 이게 맞게 한건지 잘 모르겠지만 계속 공부해 봐야겠다. PixiJS 라는 신박한 것도 있던데 한 번 공부해 보고 싶다. Link Window jeongwoo903.github.io 알게 된 것 ​ 1. 브라우저의 Width나 Height 값을 알고 싶다면 다음 코드를 이용하자. window.innerWidth; window.innerHeight; 2. Canvas Gradation 사용법 const grd = context.createLinearGradient(startX, ..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.2.29.에 작성된 글입니다. View :before 가상선택자를 잘몰라서 못만들었던 toggle.. 한 번 만들어 보고 싶어서 간단하게 만들어 봤다. 근데 SCSS로 한 번 만들어 봤는데 코드 재활용성이 정말 킹갓인것 같다.. Mixin이 정말 편하다.. 앞으로는 Vue나 React 같은 공부보다 ES6, SCSS, DOM조작 같은 것들을 더 공부해서 인터렉션을 좀 더 살려봐야겠다. Link Toggle jeongwoo903.github.io 알게 된 것 ​1. +선택자를 이용하면 바로 뒤의 지정 요소를 선택할 수 있다. ​ 2. grid-template-columns와 rows (헷갈리지 말자) · column는 세로 (기둥이라는 뜻) · row는 가로 ..

※ 이 글은 예전 블로그에서 퍼왔으며 2020.2.21. 에 작성된 글입니다. View node js를 약간 공부 해보고 간단한 개인 블로그를 만들어 보려고 했다. 근데 너무 디자인에 신경을 쓰다 보니까 한 페이지를 만들 때 마다 시간이 너무 소요된다. 그러다 보니 node js는 구현하기도 전에 지쳐버리게 된다..;; 앞으로는 디자인에 얽메이는 것 보단 계속 공부를 하면서 간단한 기능을 만들어 보는 것 위주로 해봐야겠다. ​ 그리고 CSS도 평소에 webkit, moz, ms 같은 것을 별로 신경 쓰지 않았었는데 이젠 조금씩 신경써서 해야 할 것 같다;;ㅎㅎ (사실 SCSS써서 컴파일 하니까 알아서 해주더라) 알게 된 것 1. Scroll Snapping에 대해 CSS Scroll snap points..