[#4] 바닐라JS로 웹 페이지 구현하기

🌿1. index.html

<form action="https://www.google.com/search" method="get">
	<input type="search" id="search" name="q" placeholder="Search in Google">
</form>

검색창을 넣었는데, 기본 중에 기본이라 추가했다고 말하기도 애매하다.
단순히 구글 검색 엔진과 연결되는 것뿐이라 get 메서드를 이용했고, placeholder를 설정해 주었다.

<form id="todo">
	<input type="text" placeholder="What is your main focus?">
</form>
<div id="focus" class="hidden">
	<p>TODAY</p>
	<span></span>
	<button id="focusBtn">X</button>
</div>

form을 이용해서 투두 기능도 넣어주었다.
강의에서는 몇 단계를 거쳐서 localStorage에 배열을 저장하는 방식으로 투두리스트를 만들었지만, 나는 모멘텀의 main focus 기능을 구현하기 위해 그날 집중하고자 하는 주된 목표 하나만 설정할 수 있게 만들었다.
자바스크립트를 사용해서 X버튼을 누르면 비어 있는 span에 입력한 값이 들어가게끔 했다.

🌿2. todo.js

todo는 login과 같은 방식으로 구현했다.

1. input창에 값 입력
2. 입력값 localStorage에 저장
3. 저장된 값 불러와서 비어 있는 span에 삽입
4. form은 숨기고 입력값을 삽입한 span 표시
5. X버튼 누르면 localStorage에 저장된 값 제거되고 다시 form 등장

5번은 login에도 넣어서 간단하게 logout할 수 있게 만들었다.

🌿3. 완성된 페이지

이렇게 gif로 만드는 거 꼭 해보고 싶어서 한동안 웹캠 녹화 기능을 다 훑고 다녔는데 생각보다 너무 쉬워서 좀... 허탈했지만? 결과적으로는 원하는대로 만들었으니 오케이입니다.

🌿4. KTP 회고

• KEEP
  • 처음으로 결과물다운 결과물을 만들었다.
  • 지금까지 배운 HTML, CSS, JavaScript 지식을 전부 동원해서 완성했다.
  • jQuery나 Bootstrap 등의 도움 없이 기본 기능만 사용했다.
• PROBLEM
  • 라이브러리 적용을 염두에 두지 않았기 때문에 코드가 상당히 읽기 어렵다.
  • HTML로 뼈대를 짤 때 CSS 스타일을 적용할 것을 생각했더라면 조금 더 부드럽고 예쁜 화면을 만들 수 있었을 것 같다.
  • 클론 코딩인만큼 클론의 대상이 된 화면의 디자인에 집중한 것은 좋지만, 독창성을 발휘해도 좋았을 것 같다.
  • 반응형 웹을 구현하지 못했다.
• TRY
  • Bootstrap과 jQuery를 이용해서 처음부터 다시 만들어 보면 좋을 것 같다.
  • 이번 기회에 tailwind를 배워보는 게 좋을지도.
  • 모멘텀이 아닌 다른 브라우저 앱을 처음부터 끝까지 클론해보는 것도 생각해 보자. 반응형 웹을 공부할 수 있는 거면 더 좋을 듯.

아쉽지만 아쉬운만큼 더 발전해서 이 다음에는 더 보기 편하고 창의성도 가미된 무언가를 만들어 봐야지🔥🔥🔥