[Front End] mini project

 문법 외우고 태그들 외우기만 하는 것은 재미가 없으니까.. 프로젝트라고 부르기는 조금 창피하지만 나만의 토이 프로젝트를 하나 해봤다. 처음에는 웹사이트를 하나 만드려 했으나 주제 정하기가 어려웠다. 아니 아무생각도 떠오르지않았다. 그러다 느닷없이 떠오른 tmi퀴즈 이유는 모르겠다 그냥 떠올랐다. 주제가 무겁지않아서 이후에는 아이디어에 대한 어려움은 별로 없었다. 기본 레이아웃만 잡아놓으면 안에 질문만 바꾸면되니까 나름 잘 진행되는듯 했다. 여기까지 너무 단조로운것 같아서 좀 멋나는것을 만들고 싶어서 괜히 쓸데없이 로그인 창을 하나 만들었다.

로그인 창

 

왼쪽처럼 만들었는데 대만족. 시크함의 black&white.. 좋았다. (배포하고 나서 알게된건데 저렇게 하니까 입력창에 치고 모바일 키보드에 엔터키로만 입력이 받아졌다. 그래서 혼란이 좀 있었다. submit 용 버튼을 하나 만들었으면 좋았을 듯..) 여기까지 하고 나서부터 자신감 뿜뿜 이여서 뭐야 금방 끝내겠는데 라는 엄청난 착각을 시작했었다.. 그래서 설레발로 캡쳐도 따놓고 몇 친구들한테 보여주기까지 하면서 좋아했었다.ㅋㅋ..

 

 

 

 

 

 

 그 다음 본격적으로 레이아웃을 잡기 시작했다. 오른쪽 사진은 완성본이고 처음에는 빨강, 파랑으로 구분을 해놨었는데 본 사람들이 엄청나게 뭐라했다.. 태극기냐, 대한민국 사람인거 티내냐, 진심으로 이뻐서 해놓은거냐 등등... 그냥 구별하기 위해서 해놓은거다 나중에 지울거다 해명 엄청했던 기억이ㅋㅋㅋ 레이아웃을 대충 잡고 다음날 다시 시작하면서 css 코드를 한번 봤는데 position:absolute가 정말 마구잡이로 난무하는 코드를 보았다. 전날 빨리 하려는 욕심에 absolute잡고 마구잡이로 요소들을 우겨넣었던 것이다. 다시 침착함을 되찾고 코드를 뜯어 고쳤다.

 margin, padding 등으로 적절히 조절해주었다. 이어서 두번째 난관에 부딪힌다.

 생각해보니 이것을 다른 사람들이 사용한다면 거의 모바일을 사용할거같았다. 그래서 개발자 도구를 키고 핸드폰 크기로 보니................. 와르르 모든게 무너졌다ㅋㅋㅋㅋ 한숨 몇번 쉬고 수정에 들어갔다. 어떻게 꾸역꾸역했는데 아이폰 se/ 5 크기로 확인하니까.... 다시 무너졌다. 여기서 기가막힌 방법을 찾는다. 바로 크기를 px을 사용하지않고 vh, vw를 사용하는 것이다. 스크린의 넓이와 높이를 기준으로 하다보니 적절하게 요소들이 조절이 되었다. 이것을 찾지 못했다면 아마 플젝을 포기했을 수도...

 그 다음엔 문제를 적고 짜잘짜잘한 수정을 해가며 html, css는 거의 마무리했다. 그 이후 세번째 난관이 찾아온다.

 javascript는 어떻게 짤지 어느정도 머릿속으로 생각을 해놔서 금방할 수 있을줄 알았다. 문제는 카운팅에서 시작됐다. 한문제 한문제 풀때마다 count를 증가시켜서 10이되면 다음 실행은 엔딩 화면을 나오게 하려했다.  그런데 디버깅을 해보니 문제가 무한으로 나오고있었다. count가 계속 0으로 초기화 되는것이였다. 왜이러는지 디버깅을 계속 처음부터 돌려서 문제를 찾았다. 다음 문제로 넘어갈 때마다 페이지가 새로고침 되면서 js파일 역시 처음부터 읽혀지는것이었다.. 그러니 let count = 0; 이 문제를 풀때마다 실행되는것이였다. 이 부분이 아마 이 프로젝트에서 가장 큰 위기였던것 같다. 구글링에 수많은 검색어를 입력하면서 알아낸 session storage. 살아나갈 구멍은 있었다.. 덕분에 local storage도 알게 되었다. 아주 유용한 기술이였다. 덕분에 수월하게 프로젝트를 마무리 할수 있었다. 지금 와서 생각해보니 문제들도 배열에 저장해서 session storage에 넣어놨다면 html페이지 수를 확실히 줄였을 것 같다. 그러면 유지보수도 훨씬 수월했을 것 같다. 플젝을 하면서 느낀점 2가지는 구글은 위대했고 유지 보수에 용이한 방법을 코드를 짜야한다는 것이다. 이런 조그만 말도안되는 프로젝트에서도 몇개의 실수로 유지보수하는데 엄청 오래걸렸는데 실제 개발이였다면 .... 앞으로 신경쓰면서 해봐야겠다. 이상 front end 배위~~