프로그래밍엔 관심이 많았지만, 제가 가야할 길은 막막하기만 했습니다.

게임개발자가 되고싶어서 시작한 c++,c#의 어두컴컴한 콘솔창만 주구장창 보고 있으니 마음마저 우울해지는듯 했습니다.(윈폼은 너무 어려워요!!!)

어두컴컴한 콘솔창같은 제 코딩인생에 한줄기 빛같은 메시아가 나타났고 저는 홀린듯 그 빛을 따라 갔습니다.

지겨운 콘솔창에서 벗어나, 눈에 보이는 웹페이지를 만들 수 있다니! 선생님과 코코아톡 클론코딩을 하고 저는 새 인생을 사는 듯한 기분이었습니다. 웹개발자가 되고싶다는 구체적인 꿈이 생기기 시작했고, 자바스크립트를 배우기 위해, 투두리스트와 그림판 수업을 들었습니다.

그렇게 다음 유투브 클론코딩으로 스무스하게 넘어가나 싶었지만...

모방은 창조의 어머니라지만, 저는 겉만 핥은건지 저에겐 아직 어려운게 많았습니다. 그래서 다시 자바스크립트를 복습하자! 선생님의 코드만 보지 말고, 내가 스스로 무언가를 만들어보자! 라며 투두리스트 때 배운 내용을 활용해, 나만의 투두리스트를 만들어보자! 하며 만들기 시작했습니다.

학교도서관에서 혼자 투두리스트를 만들다, 문뜩 점심시간이 되었습니다.

어제 먹은 학교 앞 라멘집이 참 맛있던데... 오늘도 라멘을 먹을까?

아니아니... 라멘은 어제 먹었으니까 오늘은 밥 종류를 먹어야지! 학식을 먹자!

오늘 서브웨이 할인이래!

제 머리속은 변수명 지을때만큼, 고민에 빠졌습니다. 다크나이트의 투페이스가 부러워지는 순간이었습니다.

그때 문뜩 내가 뭘할지 고민 되는 사람이 있다면, 그걸 골라주는 기능으로 만드는 건 어떨까 하며 만들기 시작한것이 가칭 WhatShouldDO(?)리스트입니다.

대부분의 기능은 투두리스트에서 선생님과 구현한 기능을 기반으로 하고 있습니다.

기본기능:

칠판위에 있는 빈칸에 무언가를 적은후, 엔터를 치고 아래 버튼 맨 왼쪽 (drawing lots)를 누르면,

그중 하나를 뽑아, 화면에 표시해주는 기능이었습니다.

뭔가 여기서 끝내기 싫어서, 여러 기능을 좀 더 추가 해봤습니다.

1. 항목 수정

위에 사진에서 지우개(삭제 버튼) 옆을 누르면, 항목의 값을 가진 박스가 열리게 해놨습니다.

왼쪽 x자를 누르면 취소되고, 수정하기전 원래 값으로 돌아옵니다.

오른쪽에 있는 버튼을 누르면 수정한 내용이 반영됩니다.

여기서 어려웠던 점: 기존에는 아이디를 생성할때, 배열의 길이로 했었습니다. 그러자 아이디가 서로 겹치는 일이 일어나서, 이걸 어떻게 해결할까 고민했었습니다. 그러다 문뜩, 배열이 가지고 있는 아이디를 모두 가져와서, 정렬 한후, 앞뒤 비교해서 빈곳을 찾으면 되지 않을까라는 아이디어가 들어 이 방법으로 구현해보았습니다. (배열의 길이가 0일때는 무조건 1반환, 배열에 1이 없을때도 무조건 1 반환등 다양한 조건을 맞췄습니다.)

2.텍스트 파일

뭐 할지 하는 고민은 대부분 똑같은 패턴이었습니다. 그때마다, 새로 치는 것도 귀찮아서 배운대로 쿠키를 사용하려 했지만, 결국 다른 문제에 대한 선택을 하고자할때, 아직 제 기술로는 그걸 다 지우고 다른 걸 쓸 수 밖에 없었습니다. 그래서 내가 자주하는 고민을 텍스트 파일로 만든 후, 브라우저가 읽게 하면 어떨까? 하는 생각이 들어 그 기능을 구현해봤습니다.

이렇게 미리 작성된 텍스트 파일을 업로드해, 읽을 수 있습니다. 이 상태에서 저 항목을 지우고 수정하거나, 내가 직접 항목을 추가하는 것도 물론 됩니다.

다운로드를 누르면 텍스트 파일로 저장되게도 만들어 봤습니다.

어려웠던 점: onread로 읽어오니까, 그 값을 함수 밖으로 보내면 값이 안읽혔습니다. 해메다가 결국 그 함수에 다른 함수를 또 넣어주는 걸로 해결했습니다 ㅎㅎ;

3.비밀 제비

입력창 옆 체크박스를 클릭하면, 저렇게 화면에 ***** 표시되게 구현해보았습니다.(입력창도 *로만 보입니다.) 길이로 내용을 유추할 수 없게 5개를 고정시켰습니다. 텍스트로 업로드시, 특정 문자를 앞에 붙이면 저렇게 비밀모드로 되는 기능을 구현 중입니다.!

(비밀제비의 정체)

마지막으로...

제가 처음 만들어본 제가 원하는 기능을 가진 웹페이지입니다. 정말 별거아니고, css나 애니메이션이 이쁘지도 않지만 계속 기능을 추가해서 무언가를 만들어주고 싶을 만큼 저에겐 소중한 녀석입니다 ㅎㅎ.

추가된 기능!:

메모장 앞에 secret을 붙으면, 자동으로 비밀모드로 인식하고, 수정할 수 없게 합니다!

한글이 깨지는 걸 고쳤습니다 ㅎㅎ

https://github.com/kurosawaruby0117/rinachanLotsV3 소스코드

https://kurosawaruby0117.github.io/rinachanLotsV3/ 사용보기

(css가 익숙치 못해 제 노트북과, 제 모니터에만 css가 맞춰져 있습니다 ㅜㅜ)

봐주셔서 감사합니다 ㅎㅎ