프로젝트

[Flex & Grid] HTML/CSS 에디터 개발기

https://flexngrid.com/ 멋쟁이 사자처럼 프론트엔드 스쿨 1기를 수료한지 3달이 지나고, 멋사 디스코드에 제주코딩베이스캠프의 이호준 대표님께서 CSS flex와 grid를 실습할 수 있는 웹페이지와 e-book을 출간하는 프로젝트에 참여하실 분을 모집하시는 글을 올리셨다. 나는 예전부터 개발 교육용 웹페이지에 관심이 있다. 사실 멋사 기간동안 만들었던 프로젝트 중 하나인 Guten Tag도 초보자를 위한 마크업 교육용 웹을 목표로(목표는 좋았는데, 완성은 못했던..) 만든 것이었다. 이번에는 완성된 페이지를 만들 수 있을 것이란 기대감을 가지고 참여하게 되었다. 첫 회의 때 호준님께서 CSS 각 속성을 설명할 때 필요한 코드 에디터가 필요하다고 하셨다. 나는 에디터가 제일 재미있고 도전적..

우즈베크어 / 카자흐어 키릴-라틴 문자 변환기

우즈베크어 / 카자흐어 키릴-라틴 문자 변환기 https://cyrillic-latin-converter.herokuapp.com/ 이번 프로젝트는 React로 만드는 첫 번째 프로젝트이다. React를 배우기로 마음먹고 공식 문서를 읽으면서 섭씨와 화씨를 변환하는 예제를 보게 되었다. 섭씨 부분과 화씨 부분을 감싸는 공통 조상에 State를 끌어올려서 두 개의 필드를 동기화하여 한 쪽이 변하면 다른 한 쪽도 변하도록 하는 예시였다. 즉, 화씨 부분을 수정하면 즉시 섭씨로 변환된 값이 섭씨 부분에 업데이트 되고, 그 반대도 마찬가지인 것이다. 이 예제를 보고 키릴 - 라틴 문자 변환기도 같은 방식으로 만들어보면 좋겠다는 생각이 들었다. 갑자기 키릴 - 라틴 문자 변환기? 러시아어나 중앙아시아쪽 언어에 대..

VanillaJS로 웹 게임 제작 도전 - 지뢰피하기

나는 자바스크립트를 책으로만 공부했다. 자바스크립트의 문법과 개념 이해에만 주력하고 정작 중요한 프로젝트는 하나도 진행하지 않았었다.『모던 자바스크립트 Deep Dive』라는 책을 N회독하면서 실행 컨텍스트, this바인딩, ES6+의 문법을 나름 잘 이해했다고 생각했고, 그렇게 자신감에 찬 상태로 첫 프로젝트를 시작하게 되었다. 💣 지뢰피하기 https://avoidmine-gvwrc.run.goorm.io/ 지뢰피하기는 키보드로 조작하는 지뢰찾기(MineSweeper)라는 컨셉으로 구상한 게임이다. 기존의 지뢰찾기 게임은 마우스로 지뢰가 있는 칸에 깃발을 꽂고 지뢰가 아닌 모든 칸을 다 열면 승리하는 방식이지만, 이 게임은 시작점과 도착점이 있고 WASD키로 자신의 캐릭터를 움직여 지뢰를 피해 도착점..