DEV ENJOY🌊

최근에 토이 프로젝트에 로그인 기능을 구현했는데, 로그인을 구현하고 나니까 유저에게 맞춰서 이런 저런 더 멋진 기능들을 추가하고 싶어졌다. 그러다 예전부터 해야지 해야지 생각했던 타입스크립트와 테스트 코드 작성이 생각났고, 사이트 규모가 더 커지기 전에 적용해봐야겠다는 생각을 하게되었다.

그래서 수강하기 시작한 Fastcampus의 김민태의 프론트엔드 아카데미 : 제 1 강 JavaScript & TypeScript Essential! (길~다)

회사 패캠 계정으로 수강하기 시작했다. 1~2장 내용은 수강하였으나 기록은 생략하였고, 3장부터 시작한다.

3장은 typescript 로 이관하기 전에 먼저 javascript로 앱을 개발하는 단계로, 나의 목적은 typescript를 배우는 것이기 때문에 빠르게 훑어보면서 기록하고 싶은 내용만 아주 러프하게 기록했다.

TIL은 처음인데, 공이 많이 들어가서 부담스러웠던 이전 포스팅들과 달리 해방감이 느껴져서 좋다! 🤸‍♀️

---

3-1. Hacker News 클라이언트 앱

• 어플리케이션이란, 근본적으로 입력된 데이터(인풋)을 가지고 출력 데이터(아웃풋)으로 변환하는 과정.
• 입력 - 처리 - 출력을 다루는 것.
• 외국 개발자들의 생각도 많이 참고해봤으면 좋겠다는 생각으로 해커뉴스 클라이언트 앱을 예제로 선정하게 되었다.
• 또 해커뉴스에서 데이터를 손쉽게 가져올 수 있도록 API 제공하고 있다.
• css는 tailwindcss를 사용할 예정.
• 비동기 매커니즘은 일부러 제외하고 예제를 만들었다. 비동기 매커니즘은 복잡하기 때문에 강의 내용의 난이도와 설명이 너무 복잡해질 수 있기 때문이다.

3-2. 12줄의 코드로 시작하기

node js 개발 환경 시작

npm init

parcel 설치

npm i -D parcel

parcel 커맨드 추가

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "parcel": "parcel index.html" // add
},

2017년 여름에 등장한 Parcel.js는 새로운 웹 애플리케이션 번들러 입니다. 기존에 많이 사용하던 Webpack이나 Gulp와 다르게 별도 설정 없어도 빠르게 빌드가 가능합니다. 빌드를 위해 번들러를 학습하는 시간을 많이 줄일 수 있습니다.

📌 출처 - Parcel - 쉽고 빠르고 강력한 웹앱 번들러 - SASS / PostCSS / Babel / Production

3-3. 두 개의 화면을 가진 웹앱

패스

3-4. 문자열을 활용한 HTML 다루기

DOM API를 이용해서 UI의 구조가 잘 드러나지 않는 문제점을 해결해본다.

(나도 vanilla javascript로만 개발해볼때 고민이였는데 잘됐다.)

innerHTML 타겟으로 사용할 임시 DOM API 사용

해결방법은 DOM API를 최대한 사용하지 않고 문자열을 사용하는것이다.

문자열로 작성 후 해당 문자열을 담을 DOM API가 필요한데, 이럴 때 임시로 쓰고 버릴 DOM API를 사용하면된다.

const div = document.createElement('div')
div.innerHTML = `
    <li>${data}</li>
`
ul.appendChild(div.firstElementChild)

for문은 생략된 채 내부 로직만 작성함.

위 예제를 보면, 임시로 사용할 div를 생성하고, 그 임시 div에 innerHTML로 li를 넣어 li를 DOM으로 만든 후에, 원하는 위치인 ul에 appendChild 해준다. 이때도 임시 div가 역할을 톡톡히 한다.

3-5 라우터 ? 화면 처리기 만들기

url 해시 값에따라 렌더링 될 수 있도록 라우터 구현

3-6 페이징 구현하기

store라는 객체를 함수 외부에 만들어서 객체에 currentPage 값을 지정. 해당 값을 hash로 지정해서 hash 값에따라 해당 페이지에 해당하는 리스트를 뿌려줌

3-7 복잡한 UI구현을 위한 준비 작업 - 템플릿

양이 늘어난다고 복잡도가 증가하면 좋은코드라고 하기 어렵다.

그래서 이번에 마크업만 늘어나고 복잡도가 증가하지 않도록 template 방식을 구현해본다.

기존에는 마크업이 분산되어있기 때문에, DOM API보다는 낫지만 여전히 파악하기 어렵다.

모형틀에 쇳물을 붓는 느낌으로다가 바꿔보자. 쇳물은 데이터.

데이터가 들어가는 영역에 마킹을 하는데, 약속하기 나름이지만 흔히 쓰이는 brace를 사용했다.

let template = `
  <ul>
    {{__data_list__}}
  </ul>
`

그리고 마킹한 영역을 이후에 데이터로 교체해준다.

template = template.replace('{{__data_list__}}', dataList.join(''))

UI와 기능이 성격이 다르기 때문에 분리시켜주면 복잡도가 훨씬 줄어든다.

하지만 여기서도 단점이 있는데, 마킹된 부분이 많을수록 replace구문이 계속해서 추가되어야 한다는 것.

직접 완성도를 높여보는것도 재밌겠으나, template을 다루는데 유용한 라이브러리가 많이 있다. 나중에 개인적으로 적용해보는 것을 추천한다.

3-8. 댓글 목록이 표시되는 아름다운 UI 만들기

패스

3-9. 상태를 가져보자. 읽은 글 표시하기

상태를 만들어서, 읽은 글 표시하기.

---

후기

• 말씀을 너무 잘하시고, 목소리도 너무 좋아서 강의 내용이 정말 쏙쏙 잘 들린다.

• UI를 구현할때 createElement와 innerHTML을 적절히 잘 사용하면서 어떻게 가독성 좋고 응집도 높은 코드를 작성할 수 있을까에 대한 고민을 이전에 많이 했었는데, 데이터가 삽입될 부분을 마킹하는 것은 새롭게 알게되어서 매우 흥미롭게 들었다.

• parcel도 처음 써봤는데 신세계. 환경 세팅하다가 녹초되기 일쑤인데 일단 빨리 시작하고 싶을때 정말 좋을 것 같다.

• 나는 css는 직접 작성해야 제맛이지!라고 생각하는 경향이 있어서, css 라이브러리나 프레임워크를 사용해본적이 없었는데, 이번 강의 수강하면서 Tailwind를 사용해보고 생각이 좀 달라졌다. 내 토이프로젝트에 적용해봐도 좋겠는걸 하는 생각이 ㅎ