emoji-minesweeper 코드 분석 일지 day 1

어떻게 공부해야 할까?

<인사이드 자바스크립트> 책도 거의 다 읽어 가고, 구상하고 있는 토이 프로젝트의 개발을 시작하고 싶은데,

내가 지금 배운 것만으로 충분한가? 라는 의문이 들었다.

 

그래서 다른 사람들은 어떻게 공부하는지 찾아보았다.

신입 개발자의 개발력을 높이는 방법은?

어쩌다보니 오픈 소스 컨트리뷰터가 되었습니다?

 

오픈소스 컨트리뷰터? 말만 들어봤지 내가 과연 할 수 있을까 라는 생각이었다.

일단 자신감이 없었다. 저렇게 크고 거대한 소스코드들에 내가 기여할 수 있을까?

저 소스코드들을 이해할 자신도 없는데?

 

그렇지만 얼마전부터 바꾸기로 한 사소한 것이 있다.

일단 가 보자.

 

그래서 어떻게 갈 것인지에 대한 조언을 얻었다.

 

1. 일단 잘 쓰여진 간단하고 작은 코드를 읽어보고 분석한다.

2. 분석한 코드를 다른 언어로 포팅하면서 제대로 이해했는지 확인한다.

3. 코드의 성능 및 구조를 개선한다.

4. 이러한 작지만 꾸준한 일들을 많이 한다.

5. 그 일들을 조합하면서 내가 만들고 싶은 프로그램을 만든다.

 

그래서 emoji-minesweeper를 선택한 이유?

우선 내가 만들어보고 싶은 프로그램은 IT 구직자 (나) 를 위해 IT 기업들의 신입 채용 공고 / 교육 공고 / 인턴 공고 등등을 모아서 한눈에, 예쁘게 보여주는 웹 어플리케이션이다. 리스트 형식으로 보여줬으면 좋겠고, 캘린더가 있어서 월별 일정도 한눈에 볼 수 있었으면 좋겠다. 무엇을 사용해서 개발할지는 결정해 놓은 상태다. 백엔드는 장고로, 프론트엔드는 리액트로 하고 싶다. 장고는 빠른 개발이 가능하고 나에게 익숙한 언어 (python) 이기 때문에. 그리고 리액트는 예쁘고 상호작용이 잘 되는 웹 페이지를 만들고 싶은데 (진행 상황을 저장하는 private한 캘린더 페이지도 있었으면 한다.) 그런 점에서 virtual-dom을 통해 동적으로 바뀌는 컴포넌트들을 빠르고 자동적으로 반영해주어 생산성을 높이는(높인다고 하는) React는 전부터 배워보고 싶기도 했고, 괜찮은 것 같았다.

 

그런데 자바스크립트에 대한 자신감이 아직 부족했다. 그래서 기초적인 자바스크립트 공부를 좀 더 하기 위해서 깃허브에서 간단한 게임 코드를 찾아서 분석해보고자 했다. 지뢰찾기는 어릴 때 많이 하던 게임이기도 하고, 얼마 전에 지뢰찾기 정도면 나도 구현할 수 있지 않을까...하는 생각을 했었다. (오산이었다.) 그 중에서도 예쁘고 깔끔한 코드를 골랐다.

day 1

html의 body 부분의 코드 분석을 끝냈다.

html도 생각보다 어렵구나, 하는 생각이 든다.

새로 알게 된 것 : ARIA, meta 태그 속성들, label-input 중첩하여 사용하기, DOCTYPE html 선언의 이유

DOCTYPE html

분석 코드

--> https://github.com/muan/emoji-minesweeper

muan/emoji-minesweeper