개발의 첫 단추
자바스크립트도 처음 배울때 기본적으로 todolist를 만든다. 누가 처음으로 개발 공부 과정에 todolist를 넣을 생각을 했을까... 종합 선물 세트같은 프로젝트다. 기본적인 데이터 추가, 수정, 삭제부터 연산자같은 기본적인 함수를 다 사용하기 때문이다. 덕분에 나름 수월하게 새로운 언어를 배운다.
1. 자바스크립트 todolist
솔직히 자바스크립트 todolist는 제대로 만들었다고 하기 어렵다. 처음엔 혼자 만들어 봤지만 결국 실패해서 유튜브를 따라 만들었기 때문이다.
부끄럽지만 첫 투두리스트이다.
이렇게보면 멀쩡해보이지만
제 구실을 못하는 프로젝트다.
이런 참담한 결과물을 마주한 나는 강의와 유튜브를 통해 클론 코딩을 진행했다.
이제 이건 ver.2이다.
큰 도약이다. 여러개 추가가 가능하고 삭제까지 가능하다. 나름(?) 제 구실을 하는 프로젝트였다. 하지만 내가 이해를 하고 만들었다고는 못하겠다.
리스트를 추가하는 코드는
function input() {
if(inputValue.value == ""){
alert('내용을 입력하세요.');
}else{
let list = document.createElement("li");
let del = document.createElement('button');
list.innerHTML = inputValue.value;
result.appendChild(list);
list.appendChild(del);
del.innerText = "✔️";
del.style.fontSize = "20px";
del.style.border = "none";
del.style.width = "40px";
del.style.height = "40px";
del.style.cursor = "pointer";
del.style.borderRadius = "10px";
del.style.marginTop = "5px";
del.addEventListener("click", delate);
}새로 추가할때마다 li태그와 버튼을 HTML로 추가하는 방식이였다. 이것도 나름 방법이었겠지만 좋은 방법은 아닌 것은 확실하다.
그래도 초보자인 나에겐 상당한 기쁨이였다.
2. 리액트 todolist
클론 코딩을 하고 멈추면 거기서 끝이지만 활용을 하면 내것이 된다. 그래서 리액트 todolist는 유튜브 및 구글링을 통한 클론 코딩을 안하는 것을 큰 목표로 잡았다. 하지만 베이스는 부족하기 때문에 리액트 입문 문서를 참고해서 만들기로 하였다.
리액트 todolist의 목표는 기본적인 UI는 당연하고 추가적인 기능을 구현하는 것이다.
과제내용
1. 추가,수정,삭제 기능
2. 새로고침해도 남있도록 구현
1번 과제의 경우 이전 포스트에서 언급한 useState와 props를 활용해서 만드는 것으로 결정했고
2번 과제의 경우 지금은 전역변수 라이브러리를 사용해야겠다고 생각하지만 그 당시에는 구글링을 통해 localstorage를 사용하기로 결정했었다.
미리 리액트 todolist프로젝트를 보자면 이런 모습이다.
앞으로 하나씩 기능 구현 방법과 정의들을 포스팅해보겠다.
지난 길을 되돌아보며
깃허브에 프로젝트를 올린지 3달이 넘은 todolist를 다시 열어보았다. 지금보면 왜저렇게 했을까 싶은 것들이지만 내가 그 당시 고민하며 만든 흔적들을 다시금 느낄수 있었다. 저 당시의 내가 지금 만든 프로젝트 물론 지금도 볼품없다;를 보면 언제하나 싶을 것이다. 혼자하느라 상당히 더딘 발전 속도지만 아무것도 시작하지 않은 나보다는 확실히 앞서있다. 초심을 유지하고 더 나은 내가 되기 위해 노력하자. 빠르게 지난날을 돌아보고 추진력을 받아 더욱 성장해보자!
