코드스테이츠 과제인 Twittler를 진행하면서 그 과정에 대해 글을 써보려고 한다. 과제를 하면서 무슨 생각으로 이 코드를 썼었는지 정리해보고 싶고, 정리를 하면서 얻게되는 <새로운 관점으로 보게 되는 역량>을 키우고 싶어서 과제를 글로 정리해보려고 한다.
(1) 전체적인 부분을 우선 container를 class로 하는 <div>태그로 묶었다.
이유 : 전체를 div 태그로 다시 묶은 이유는 나중에 css로 전체를 가운데 정렬하기 쉽도록 하기 위해서였다. 이 <div>태그는 <body>태그의 유일한 자식이고 아래 구성한 모든 컨텐츠의 부모 역할을 한다.
(사실 이 웹에서 유일한 것(?)이기 때문에 id로 지정해도 됬지만 그냥 class로 통일했다, 사실 li를 제외한 모든 부분을 id로 지정해줘도 되지 않을까? 이 목업에서는 하나씩밖에 안쓰이니까..?)
(2) 제일 상단 제목(twittler)부분은 <header>태그로 묶었다.
이유 : 제목부분은 좀 더 직관적으로 어떤 컨텐츠인지 확인할 수 있는 <header>라는 semantic태그를 사용했다. 태그이름 자체만으로도 어떤 부분인지 쉽게 알 수 있다.
(여러 자료를 보긴 했지만 semantic태그를 어떤 영역에 써야 되는지 아직 확실하지 않다. 거의 90% 느낌으로 이 부분이 section영역일 꺼야, main역할을 하는 부분일꺼야 라는 감😅️으로 태그를 사용했다...)
(3) 그 나머지 부분은 모두 <header>태그와 동등한 <section>이라는 태그로 묶었다.
이유 : 이 twittler페이지의 기능이 comment를 입력하면 아래 게시글에 표시되는 형태이다. 즉, 입력하는 부분과 표시되는 부분이 모여 하나의 기능을 이루기 때문에, 하나의 영역으로 보고 <section>태그로 묶었다. 이 역시 semantic태그이다.
그리고 section태그의 자식으로
(4) Username과 Comment 그리고 tweet하는 버튼은 <main>태그로 묶었다,
이유 : 입력하는 부분으로, 나는 이 부분을 전체 페이지의 핵심역할을 하는 부분으로 생각했다. 그래서 <main>이라는 semantic 태그로 묶었다.
(5) check new Tweet이라는 버튼이 있는 부분은 따로 <main>태그와 동등한 <div> 태그로 묶었다.
이유 : 처음에 목업을 보면서 이 부분이 무슨 역할을 하는지 몰랐었다. 그리고 무슨 semantic태그로 묶어야 할지 딱히 생각이 나지 않아 check new Tweet이라는 class를 지정하여 <div> 태그로 설정했다.
(6) 입력했던 결과가 표시되는 제일 하단 부분은 역시 <main>태그와 동등한<article>이라는 태그로 묶었다.
이유 : <main>태그에서 입력한 부분을 표시하는 부분이다. 게시물, 기사처럼 표시되어 있어 '기사'라는 의미를 가진 article태그로 묶었다.
이를 상하관계로 간략히 표현하면
div.container > header = section > main = div= article
그리고 버튼들은 모두 <button>태그로 만들었다(페어분은 <input type="button">으로 하셨다. button태그와 input태그의 차이가 뭔지 궁금하다). 그리고 main과 article의 안쪽 세부 코드들에 대해서는 정리를 안했는데 이는 CSS파트에서 정리해보려고 한다.
'기술들 > javascript' 카테고리의 다른 글
| [Today I Learned] 10월 28일(수) - 객체지향언어 (0) | 2020.10.28 |
|---|---|
| Twittler과제(2) - CSS (0) | 2020.09.07 |
| [공부했던 것 정리] Scope(2) (0) | 2020.08.18 |
| [공부했던 것 정리] Scope(1) (0) | 2020.08.11 |
| [공부했던 것 정리] 배열의 불변성, 가변성[2] (0) | 2020.07.22 |
