JS에서 HTML 조작하기
지난 번에 만든 Twittler 과제(Tweet의 MVP 모델)의 Mock-up한 HTML 및 CSS를 기반으로 아래 4가지 기본 요구 사항을 만족하는 JS를 만드는 작업을 시작했다.
1. HTML에 트윗게시물을 보는 Reading Section에서 하드코딩한 부분을 제거하고 JS에서 미리 정의해둔 JSON data를 함수실행을 통해 {작성자, 내용, 작성시간} 을 초기 화면으로 셋팅할 것.
2. Writing Section에서 작성자, 내용을 작성해서 Tweet버튼을 누르면 Reading Section으로 맨 윗줄부터 보이게 하고 작성시간은 현재 시간으로 할 것.
3. "Check New Tweets" 버튼을 누르면 미리 정의해둔 data.js파일을 통해 랜덤하게 작성자, 내용을 조합하여 새로운 트윗이 게시되도록 할 것.
4. Reading Section에서 작성자명을 클릭할 시, 해당 작성자만 Reading Section에 표시되도록 필터 기능을 구현할 것.
-
2번까지 작업 마치며 깨달은 것.
1)<head>에서 link시킨 js파일은 일종의 library 파일이구나
2) HTML과 상호작용하기 위한 js파일은<body>의 가장 밑 줄에 link시켜야 그 윗줄에 있는 HTML들을 조작할 수 있구나
3)<input>이나<textarea>에 입력한 값들을 js에서 이용하기 위해서는 textConent가 아니라 value 속성을 이용해야 하는구나! 더디지만 앞으로 계속 나아가고 있다. 내일 4번까지 완료한 후에 시간 남으면 새로고침 후에도 마지막에 작업한 내용이 그대로 유지될 수 있도록 local storage부분은 공부해봐야겠다.
