제로베이스의 'JavaScript 완전정복' 중 Mini Project 1. To-do List의 결과물에 대한 회고입니다.
리액트 없이 JS, HTML, CSS 파일 각 한개씩만으로 간단히 CRUD 가능한 투두리스트를 구현해 본 개인 학습 및 프로젝트에 대한 회고를 정리했습니다.
리액트 등 외부 라이브러리 혹은 프레임워크 없이, 프론트엔드의 기반이 되는 JS로 웹을 구현하는 데 익숙해져야 빠른 성장이 가능하다고 판단했습니다.
저는 Bottom-up
방식의 학습자입니다. 기반이 되는 지식을 견고하게 다지기 전까지는 다음 과정으로 넘어가기를 지양합니다. 이러한 학습 방식은 일정이나 요구사항에 영향을 받지 않고 마음껏 공부할 수 있는 이 시기에만 가능하다고 생각하기에, 순수한 JavaScript로 웹페이지에 각종 기능을 구현해볼 수 있는 제로베이스의 JavaScript 완전정복 강의 학습을 먼저 시작했습니다.
strict mode
npm install -g json-server
json-server --watch db.json
API?
- 클라이언트와 서버가 대화하는 규칙
- 데이터를 주고 받기 위한 방법과 그 규격
> 📌 흔히 API를 레스토랑에 빗대어 표현하기도 한다.<br/>`손님(내가 만드는 프로그램)`이 자리에 앉아 `웨이터(API)`에게 주문을 한다. 그럼 웨이터는 내 주문 내역을 `주방(API 제공자. 기상청, 공공포탈 등)`에 갖다준다. 주방에서 요리를 해 웨이터에게 주면 웨이터가 다시 나에게 음식을 가져다준다. 웨이터가 손님의 주문을 주방으로 전달하는 매개체 역할을 하는 것이다. <br/> 여기서 `손님`은 **주방에서 무슨 일이 일어나는지 잘 모른다.** 대개는 관심도 없으며 관심을 가질 필요도 딱히 없다. 이것이 API의 장점이다. **내가 가져다쓰려는 API의 기능을 어떻게 구현하는지 몰라도 되고 난 그저 API가 갖다주는 걸 사용만 하면 된다는 것이다.** 시간과 노력을 동시에 아낄 수 있다. 이처럼 API는 처음부터 개발하거나 유지 보수할 필요가 없는 외부 데이터와 기능에 접속할 수 있게 해준다.
Representational State Transfer API
- 자원(RESOURCE)
- URI
- 행위(Verb)
- HTTP Method(GET, POST, PUT, DELETE 등)
- 표현(Representations)
- 응답, 결과
- 간단히 말하면 HTTP를 활용하여 CRUD를 실행하는 API
DOMContentLoaded
초기 HTML 문서를 완전히 불러오고 분석했을 때 발생하는 이벤트
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
getTodos()
함수로 할 일 목록 데이터가 불러와지도록 사용함let promise = fetch(url, [options])
url
: 접근하고자 하는 URL
options
: 선택 매개변수, method나 header 등을 지정할 수 있음
- options
에 아무것도 넘기지 않으면 요청은 GET
메서드로 진행되어 url로부터 콘텐츠가 다운로드 된다.
fetch api의 response는 실제 json 이 아니다.
따라서 fetch api에서는 추가 메서드를 호출해 응답 본문을 받을 필요가 있다. (.json()
)
body 데이터 타입은 헤더의 content-type 헤더와 일치해야 한다.
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
var article = document.getElementById('electriccars');
article.dataset.columns = 3
article.dataset.indexNumber = "12314"
회고를 작성 중인 지금 시점에서는 리액트 프로젝트를 해보고 있지만, 여전히 자바스크립트의 중요성을 체감하고 있습니다.
간편하다는 것은 어찌 보면 더 높은 추상화를 의미합니다. 현재 프론트엔드 개발을 더 용이하게 만들어주는 여러 라이브러리와 프레임워크들이 활발하게 사용되고 있지만, 실무자가 아닌 학습자로서 본 프로젝트에서는 간편함을 추구할 단계가 아니라고 생각했습니다. 그보다는 직접 구현해보며 원리를 이해하고 스스로 개념을 올바르게 정리할 수 있을 때까지 학습하고자 했습니다.
'어떤 지식에 해박한 사람은, 누구보다 쉽게 설명할 줄 아는 사람이다' 라는 말이 있습니다. 사용이 쉽거나 간편한 도구일수록, 개발을 위해 더 많은 지식과 역량이 필요했을 것이라고 생각합니다. 따라서 저 역시 프론트엔드 기술들의 원리와 개념을 먼저 충분히 이해하며, 응용할 수 있을만큼 능숙해지는 것을 학습의 첫 단계라 믿고 실천하고 있습니다.
그러한 관점에서, 본 프로젝트를 통해 직접 HTML상의 요소를 지정하여 사용자의 입력에 맞게 변화시키고 데이터를 업데이트하는 과정을 구현해 본 것은 어떤 단계를 거쳐 사용자와 웹페이지가 상호작용하는지 보다 명확히 이해해볼 수 있는 기회였습니다.