[VanillaJS] TodoApp(1)

❗❗  데브코스 17일차 (08.24)

 

✏️지금까지 배운 VanillaJS을 활용한 TodoApp만들기 실습을 진행했다.

기본적인 구상은 다음과 같다.

초기 화면에 user들의 정보가 담겨져있는 userList가 나타난다. 이후 user를 클릭하면

user에 해당하는 todoList를 불러와 화면에 랜더링 한다.

 

user에는 user추가 기능이 있고, todoList는 추가, 삭제, 토글 기능이 존재한다.

이 모든 기능은 fetch api 통신으로 처리한다.

또한 각 user.name 기준으로 history api를 이용하여 라우팅 처리를 해준다.

 

✏️지금까지 배웠던 것을 모두 써보면서 조금 더 데이터 흐름을 어떻게 구성해야하고,

컴포넌트 구성을 어떻게 해야하는지 조금씩 이해하기 시작했다.

또한 낙관적 업데이트를 통한 api 처리 과정에서 비동기 통신에 대해서도 이해할 수 있었다.

역시 개발은 직접 하면서 배우는 것이 큰 것 같다. 

 

이어서 저녁에 강사님의 특강이 진행되었다.

강사님이 만드신 사이트 중 하나를 소개하면서 어떤 기술 스택을 사용했고, 

왜 선택하신지 이유를 들으면서 현업에서 사용하는 무궁무진한 여러 기술스택들을 알 수 있었다.

와 이런것도 있구나라고 느꼈다..... (갈길이 멀구나....)

 

✅ Static Site Generator(정적 사이트 생성기)

Server Side Rendering, Cilent Side Rendering은 흔히 들어봤어도 SSG는 처음 들어봤다.

정적 사이트 생성기는 말 그대로 정적인 웹사이트를 생성해주는 형식이다.

미리 만들어진 Static HTML을 CDN을 통해 제공되기 때문에 따로 웹 서버가 필요없고, 

속도가 매우 빠르다. 바뀔 염려가 없는 부분을 해당 방식으로 구성하면 된다.

 

✅ JamStack

 

위의 SSG를 활용한 기술이 JamStack이다.

JamStack는 JavaScript, API, Markup으로 구성된 최신 웹 사이트를 구성하는 방법이다.

• JavaScript : Client의 모든 처리는 JavaScript에게 맞긴다.
• API : 모든 기능 및 비즈니스 로직은 재사용 가능한 API로 추상화한다.
• Markup : SSG 등을 이용하여 Markup을 미리 생성한다.

 

✅ Incremental Site Regeneration(증분 정적 재생)

• SSG의 단점을 보완하기 위한 방법으로, 정적 생성을 하는 점은 동일하다.
• 정적 생성 후 일정 캐시 타임 이후 같은 페이지를 방문했을 때,  그때 해당 페이지만 빌드해서 배포하는 방식이다.
• 캐시타임 이후 빌드하는 부분 때문에 Server가 필요하지만, SSR보다는 Server 의존도가 낮다.

 

그 외에 여러가지 기술 스택들을 설명하시면서 이런것들을 이용했다고 하셨다.

 

강사님이 강조하신 것이 어떤 기술 스택을 익힐때는 사용법에 초점을 두는 것이 아니라,

이것이 나온 이유에 중점을 두라고 하셨다. 그래야 어떨때 이러한 기술을 써야할지가 명확해진다고 말씀해주셨다.

 

아직까지 SSG의 원리나 JamStack등 알려주신 기술 스택에 대해서는 아직 잘 모르겠으나 이런 것들도 있구나라고 배울 수 있었다.

 

📖 학습한 내용

• VanillaJS
  • TodoApp실습(1)