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

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

※ 이 글은 예전 블로그에서 퍼왔으며 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.3.에 작성된 글입니다. VIEW 이제 이런건 초단위로 만들 수 있는게 참 신기하다. SASS(SCSS)를 배운겸 한번 간단하게 만들어 봤다. 개인적으론 SASS 문법보단 SCSS가 더 익숙하고 직관적이라 SCSS를 주로 사용할 것 같다. 근데 SASS(SCSS)는 vscode live server로 작동시키기 위해선 CSS파일로 만들어 줘야 한다는 점이 조금 아쉽다. 그래서 지금은 SCSS파일을 HTML에 걸어둔 다음 Parcel로 서버를 열어서 사용한다. 아직 문법이 익숙하진 않지만 앞으론 CSS 보다 SCSS로 작성하는 습관을 길러야 겠다. Link SCSS Button jeongwoo903.github.io