자바스크립트를 활용한 간단한 to-do list

1. 개발 배경

---

 

장고 웹개발을 공부하면서 프론트 단의 작동 원리에 대한 이해가 부족함을 느꼈고,

javasrcipt의 필요성도 느끼게되어, 노마드 아카데미의 바닐라js 강의를 끝까지 완료했다.

 

생활코딩과 같이 쉽게 잘 설명된 곳도 있지만 그래도 어느정도 프로그래밍 언어에 대한 개념을 알고 있기에

간단한 프로젝트라도 만들면서 핵심만 배울 수 있는 강좌를 찾다보니 노마드코더를 선택하게됐다.

강의 초반에 필수 JS문법을 배우고, 이후에 to-do list를 따라서 만드는 과정이다. 

https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners

 

2. 개발 환경

---

• 언어 : html, css, javasrcipt
• 소스 코드 관리 : git, vscode 
• 배포 : firebase hosting

3. 주요 기능

---

강좌에서 구현한 to-do list는 아래 내용들이 주요 기능인데, 나는 꼭 필요하다고 판단되는 세가지(볼드된 항목)만 구현했다. 

• 현재 시간 출력  
• localStorage를 통한 to-do list 생성 및 제거  
• 여러 장의 이미지를 번갈아 가면서 홈페이지 배경 이미지 변경
• 사용자의 이름을 입력 받아 화면에 출력
• 현재 위치의 날씨 정보 출력 

 

to-do 입력 전

to-do 입력 후 : 화면에 내용과 삭제 버튼이 표시됨

강좌에서는 css 내용이 거의 포함되어 있지 않아 가독성이 떨어져서  

콘텐츠의 위치 지정과 색상 관련된 기본적인 속성을 적용하고 firebase 배포까지 진행했다. 

 

 

4. 결과물 

---

• 배포된 웹사이트 : https://simpletodolist-fdd3f.web.app/ 
• 소스코드 git repository : https://github.com/RobertHan96/javaScriptPractice

css 속성도 모르는 부분이 많은데 프로젝트를 진행하면서 필요한 태그 위주로 차츰 배워나가야겠다.

반응형 웹대응은 못한 상태이고, 1920*1080 해상도에만 대응되어 있다. 

 

또한 javasrcpit 문법도 아래의 기본적인 내용들만 배워서 추후 공부가 더 필요하다.

• 변수 선언 : let, const, var
• 출력 : console.log / document.write / alert
• 이벤트 핸들러 사용 
• 배열 : 생성, 값 가져오기 
• 함수의 생성과 호출 
• if 제어문 
• localStorage 조작