우테코 9주차 기록

April 3, 2021 • ☕️ 5 min read

woowacourse

우테코 9주차 기록

페어 프로그래밍

정말 짜잘한 JavaScript와 CSS들을 알아간다.
setAttribute와 removeAttribute와의 전쟁.. 🤯
form reset과의 전쟁 2차전
select input에도 required를 걸 수 있다니! 시야가 좁아질 땐, ‘삽질!’을 외치자
리팩토링 천재
마지막 등교날에도 과외 간 서니 😢 3주라는 가장 긴 시간 동안 함께 했는데, 동갑내기 친구로서 같이 제대로 못 논게 아쉽다!
정말 똑똑하고 꼼꼼하고, 항상 한 발 앞서서 생각하는 훌륭한 페어였다. 주변 크루들과 떠드는 데 정신 팔려 종종 산만했던 태도를 보인 게 미안하다.

공수타

이번주는 방학식이 진행돼서 포수타/로수타가 없었다. 대신 새로 들어오신 프론트엔드 코치 공원의 공수타 ☘️ 동글동글 작고 귀여우신 분이었다. 나이도 어리고 아직 학생이시라는데 👀 N사☘️까지 거쳐서 이곳 우테코 코치로 오신 게 너무 대단하다. 다시 등교가 시작되면 먼저 다가가서 같이 카페 가자고 해야겠다 🤓

테코톡

주모의 SPA 테코톡! 사실 내가 하고 싶었던 주제여서 기대가 됐다. 군더더기 없이 깔끔했던 발표였다.

MPA (Multi-Page Application)

2개 이상의 페이지로 구성
앱이 새로고침되는 전통적인 방식

SSR (Server Side Rendering)

모든 것들을 서버로부터 계속 다시 받아옴
사용자 동작에 따라 앱이 다시 실행된다. 화면 깜박이게 된다.
장점 - SEO에 유리하다. 초기 로딩 속도가 빠르다.
단점 - 매번 새로 고침이 발생하여 사용자 경험을 해칠 수 있다. 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 구성에서 응답하므로 서버의 부하가 증가한다.

SPA (Single-Page Application)

말 그대로, 1개의 페이지로 구성되어 앱의 새로고침 없이 필요한 화면을 전환시킨다.

CSR

사용자의 요청에 따라 필요한 부분만 렌더링한다.
모든 JS 파일을 다운 받아야 해서 초기 로딩 시간은 오래 걸린다.
화면이 깜박이지 않고 바로 수정된 데이터를 표시한다.
속도가 빠르며, 서버의 부하가 감소한다.
사용자 친화적이다. (페이지 내에서 클릭하여 다음 단계로 넘어가는 과정에서 깜박임 없이 부드러운 화면 전환이 이루어진다.)
SEO에 불리하다. 웹 크롤러가 페이지를 색인화하면 SPA를 빈 페이지로 인식하기 때문이다.
초기에 모든 JS를 받아와야 하기 때문에 초기 로딩 속도가 느리다.

SPA에서 SSR 사용하기? 전부를 SSR로 하기는 불가하다. 모든 것을 SSR로 하면 MPA나 다름 없다.

⇒ 👩‍🏫 Content 중심의 개발하기! 단순 렌더링은 SSR로, 클라이언트 반응이 필요한 경우 CSR을 활용할 수 있다!

👨‍🏫 강의

유튜브 미션 셀프 코드 리뷰

내가 생각했을 때 바보 같지만 나눠보고 싶은 질문

util성 함수는 어디까지 분리해야 할까요? 2개 이상의 모듈에서 사용하면 util로 분리하는 게 맞을까요? 모듈(많은 경우 class)의 메소드에서 그냥 직접 써야 할지 고민 🤔 ex) lazyLoading, throttle을 일단은 util 파일로 구분하였는데, 사실상 둘 모두 한 군데서만 사용 중. util로 빼는 게 옳은 방식일까? (한 달 전에는 리뷰어님이 분리하라고 하셔서 그렇게 했던 기억)

그때는 몰랐지만 지금은 알게된 것

object destructuring을 유용하게 잘 쓰고 있다
아래와 같은 방식으로, object의 key값에 대괄호 붙여 변수명을 사용하기

Copy
```
this.store.update({ [STORE_KEYS.LIKED_VIDEO_IDS]: videoId });
```

그때도 몰랐고 아직도 잘 모르겠는 것

throttle 파일에서 사용하고 있는 .apply() 메소드. 연습하자.

반복하고 있는 실수 및 습관이 있다면?

예외처리를 조금 그때그때 필요에 따라 아무데서나 사용하는 느낌이 있다.
id, class 선택자를 기준 없이 혼용해서 사용하고 있는 점 😵

기존에 작성하던 방식에서 코드를 단순히 가져와서 사용한 경우는 없는지

‘본 영상’, ‘볼 영상’, ‘좋아요 누른 영상’ 갈수록 점점 탭이 많아졌지만 기존의 코드 틀을 벗어나지 못하고 그대로 가져다 쓴 부분이 많았다. 중복을 줄여보려고 애썼지만 모두 줄여지지 않았고, 처음부터 확장성을 고려하지 못하고 문제해결에 급급하여 navigation tab들 간에 이동하는 코드가 지저분해졌다.

확실하게 말할 수 있는 발전한 1가지

아직도 완벽하진 않지만, store에 앱의 데이터를 저장하고 유저의 동작에 따라 update시킨 후 controller에 notify하는 법에 익숙해졌다.
CustomEvent의 등록과 dispatch를 기존의 코드를 따라하지 않고, 원래의 목적에 맞게 스스로 생각해서 작성하는 법

다시 유튜브 강의실 미션 코드를 작성한다면 어떻게 작성할 것인가?

nav tab들 간의 이동에서 router를 시도하다가 실패하긴 했지만, 지하철 노선도 미션을 수행하며 history에 대한 이해도가 조금 는 만큼 router를 시도해보고 싶다.
예외처리를 조금 더 일관성 있게 하자!

나의 과거 기록을 보며 사색하며 떠오르는 생각은?

미션 시작 초반에는 새로운 것을 많이 시도해보고자 애썼다. 하지만 시간이 지날수록 기력도 딸리고(?) 미션을 끝내기에 급급해서, 기존에 설계된 코드들에서 크게 벗어나지 않고 기능을 되는 대로 구현하기 바빴던 것 같다. 그래도 미션을 함께했던 페어와 그래도 시시때때로 토론하고, 코치의 도움을 받아가가면서 몸으로 체화한 코드들이 많아서 뿌듯한 느낌이다. ☺️ 아직도 많이 부족하지만 점차 나아져보자.

기타

😎 마무리

이번주는 코치와의 면담도 하고, 카페에서 죽치고 코딩하는 백엔드 크루들과도 몇몇 알게 됐다. 살면서 제일 재밌었던 방학식도 하고, 두 달 전 보이는 라디오에서 함께 했던 백엔드 크루들을 보니 또 반갑고 즐거웠다! 모든 크루들이 두 달이라는 짧은 시간, 그것도 실제로 본 건 한 달 밖에 안되는 시간 동안에도 정말 많이 친해지고 끈끈해진 것 같다. 다시한번 우리 프론트 크루들과 술파티도 하고, (4인끼리…) 포코조 랜선 회식도 하고 정말 다른 의미로 정신없었던 Lv1의 마지막 주 😵

잘 쉬고, 가득 충전하고 이제 본격적으로 리액트를 배울 Lv2를 또 씩씩하게 준비해보자! 😎 놀러가자 놀러가자 오예

Relative Posts: