티빙(Tiving) 클론 코딩 프로젝트 회고📑

회고

티빙(Tiving) 클론 코딩 프로젝트 회고📑

나디아 Nadia 2024. 7. 19. 23:30

📑 티빙(Tiving) 클론 코딩 프로젝트 회고

프로젝트 개요
- 배포
- 기간
- 선정 이유
- 목표
기능 구현
- 역할 분담
- 기능 분담
피드백
프로젝트를 통해 알게 된 것들
회고
- 칭찬
- 반성
- 노력
- 느낀점
결론
- 프로젝트 전반적인 성과
- 향후 계획 및 방향

🗂️ 프로젝트 개요

티빙(Tiving) 클론 코딩 프로젝트

티빙(TIVING) 사이트의 주요 기능과 UI를 바닐라 자바스크립트를 사용하여 클론 코딩한 프로젝트

기간

2024. 07. 05 ~ 07. 19

선정 이유

반응형을 중점으로 구현해보길 원했는데 티빙 사이트가 반응형으로 구현하기 가장 좋은 사이트였다.
쉽고 대중적인 OTT 플랫폼을 제작해보면서 컴포넌트 제작, 웹 컴포넌트 사용, 다양한 라이브러리 등을 사용해보고자 티빙(TIVING)을 선정하였다.

목표

완성을 목표로 한다.
수업 때 배운 것을 최대한 활용해본다.
웹 페이지 구조(HTML), 스타일(CSS), 동작(JavaScript)의 기본을 확실히 이해하고 사용한다.
개발 관련 라이브러리(Swiper, GSAP 등) 익힌다.

배포

티빙(Tiving)클론 코딩 프로젝트

문서

프로젝트 github Wiki

Home

멋사 10기 5조 TVING 클론 프로젝트. Contribute to FRONTENDSCHOOL10/5jorago-vanilla-project development by creating an account on GitHub.

github.com

💻 기능 구현

github Wiki - 기능 구현

역할

문서 작업 관리(Notion, Git Wiki)
회고 기록 담당(github)

기능

컴포넌트 제작
- 검색 페이지, 프로필 페이지, 메인 페이지 - 카드1 컴포넌트
마크업 및 스타일링(HTML, CSS)
- 랜딩 페이지
- 프로필 페이지
기능 구현(JavaScript)
- 랜딩 페이지
- 프로필 페이지
웹 컴포넌트 제작

랜딩 페이지

프로필 페이지

🫡 피드백

HTML, CSS

잘한 점
- 문서화가 너무 잘 되어있다. 😊
  - 문서화 작업에 많은 노력을 기울인 점을 칭찬하고 싶다.
- 컴포넌트 단위로 시도한 것이 향후 리액트 사용 시 도움이 될 것이다.
아쉬운 점
- 성능 점수는 좋은 편이지만 더 신경 써서 개선해야 한다.
  - 링크 또는 버튼에 키보드 접근 및 조작 불가능
- 백로그나 이슈의 갯수를 봐도 노력한 흔적이 보이나 이슈 생성 시 일부 레이블이 누락된 점이 아쉽다.
- 반응형보다 특정 브레이크 포인트에 레이아웃이 고정된 형태로 제공되는 것 같다.
  - 모바일/태블릿/데스크탑까지 모두 일정 뷰포트에서만 크기가 조정됨
반성
- 웹 접근성에 신경 쓰기
- 깃허브 이슈 생성 시 레이블 넣기
- 반응형 제작 시 레이아웃 신경 쓰기

Javascript

잘한 점
- 성능을 고려한 throttle 사용한 점
- 모듈 폴더 분리 후 가져와서 사용한 점
- 마이크로 애니메이션 사용한 점
- 비밀번호 변경 기능을 구현한 점
아쉬운 점
- alert창 UI 개선이 필요하다.
- 회원 탈퇴 기능에서 사용자에게 한 번 더 탈퇴 여부를 물어보는 것이 좋다.
- 데이터 요청 아이디가 고정적이면 서버를 사용하는 이유가 없다.
- 함수의 분리가 잘 보이지 않는 페이지가 있다.
- 다른 컴포넌트들도 webComponent를 사용해봤으면 좋았을 것이다.

반성
- 데이터 요청 함수 개선하기
- 브라우저 기본 UI 보다는 제작한 UI 사용하기
- 웹 컴포넌트 사용 범위 늘리기

✏️ 프로젝트를 통해 알게 된 것들

1. 모듈화된 코드를 관리할 때는 CDN 방식보다 import가 좋다.

[기존] ❌
스와이퍼를 불러올 때 해당 페이지의 html에 CDN 방식으로 스와이퍼 연결

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

[수정] ⭕
해당 페이지에 연결된 js파일에서 import문으로 불러와서 연결하는 방식으로 수정

npm i swiper

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

2. 웹 컴포넌트 사용 방식

[기존] ❌

1) 웹 컴포넌트를 모아둔 웹 컴포넌트 파일을 생성

2) fetch로 불러와서 웹 컴포넌트 연결

웹 컴포넌트를 비동기적으로 로드하고, HTML 템플릿과 JavaScript 파일을 따로 처리
코드가 분리되어 있지만, 관리와 유지보수가 어려울 수 있다.
HTML 템플릿을 <template> 태그로 로드하고, cloneNode(true)를 사용해 문서에 추가하는 방식은 스타일과 스크립트의 스코프를 관리하는 데 한계가 있을 수 있다.

// 웹 컴포넌트 불러오기
async function loadTemplate() { // loadTemplate()을 비동기로 정의
  // fetch()로 webcomponents.html 파일을 가져온 후에야(await) 응답으로 온 webcomponents.html 파일을 response에 저장
  const response = await fetch('./components/webcomponents/webcomponents.html');

  // response에 저장된 객체를 text()를 통해 텍스트로 변환한 후에야(await) 그 결과를 text에 저장
  const text = await response.text();

  // <template> 태그를 만듦 
  const template = document.createElement('template');
  // <template> 태그 안을 response 객체(= webcomponents.html에서 만들어놓은 사용자 정의 태그)로 채움
  template.innerHTML = text;

  // <template> 태그의 내용을 노드로 복사해서 <body> 태그의 자식 요소로 넣음
  // cloneNode(true) 메서드는 template.content를 깊은 복사(모든 자식 요소를 포함하여 복사)해서 새로운 Node를 생성함
  document.body.appendChild(template.content.cloneNode(true));

  // 위의 과정이 모두 실행된 후에야(await) webcomponents.js를 가져옴
  await import('./components/webcomponents/webcomponents.js');
}

// 문서가 완전히 로드되고 DOM 트리가 완성되면(= DOMContentLoaded: 문서가 완전히 로드되고 파싱된 후에 발생) loadTemplate()를 실행함
document.addEventListener('DOMContentLoaded', loadTemplate);

[수정] ⭕

1) 해당 기능의 컴포넌트 파일의 js 파일에서 컴포넌트 제작

2) 해당 컴포넌트를 컴포넌트를 사용할 페이지의 js파일에서 import로 가져온 후 사용

웹 컴포넌트를 JavaScript 파일 내에서 정의하고, 필요한 스타일과 자원을 직접 import하여 사용
컴포넌트를 모듈화하여 코드의 재사용성과 유지보수성을 높이고, 컴포넌트 별로 파일을 분리하여 관리
Shadow DOM을 사용하여 스타일과 DOM 구조를 캡슐화
- 웹 컴포넌트의 스타일과 구조가 다른 부분과 격리되게 하여 CSS 충돌이나 DOM 구조 변경을 방지

1) 
import css from '/src/components/header/_header.scss?inline';
import logo from '/public/assets/logo_1.png';

// 랜딩 페이지 컴포넌트
export class Header extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>${css}</style>
      <header class="header" style="background-color: transparent;">
      <nav class="nav">
        <div class="header__nav__logo-menu">
          <a href="/" class="header__logo">
            <img src="${logo}" alt="Logo" class="header__logo" />
          </a>
        </div>
      </nav>
    </header>
    `;
  }
}

customElements.define('c-header', Header);


2) 
import { Header } from '/src/components/header/l-header.js'
import { Footer } from '/src/components/footer/footer.js'

3. DomcontentLoaded의 사용

👉 <script>의 type=”module” 속성을 기본으로 내장하고 있기 때문이다. (또 사용하면 성능 저하가 발생)

Do modules prevent the need to use the DOMContentLoaded listener?

document.addEventListener('DOMContentLoaded', () => { }); I read that this event listener made sure, for regular scripts, that the JS wasn't going to reference nodes that hadn't been loaded y...

stackoverflow.com

📝 회고

👍 칭찬

다양한 라이브러리 사용

Swiper, GSAP 등의 라이브러리를 직접 구현해보니 수업 때 공부했던 것보다 더 재밌고 이해가 잘 갔다.

SCSS 사용

막연히 SCSS는 사용하기 어렵다는 생각이 있었는데 이번 프로젝트를 SCSS로 개발해보니 생각보다 쉽고 편리하다는

것을 느꼈다. 이번 프로젝트에서는 기본적인 변수, 중첩, 믹스인 정도만 사용했는데 다음 프로젝트에서는 더 다양한 기

능들을 사용해보고 싶다.

문서화

이번 프로젝트의 모든 회의와 피드백들을 모두 문서로 정리해서 깃허브에 올렸다.

문서화 하는게 생각보다 머리 아프고 시간이 오래 걸려서 스트레스를 받았지만, 프로젝트에서도 필수적으로 해야 할 일이라고 생각해

서 더 신경썼다.

Git 사용

마음 같아서는 파일로 보내는 짓을 하고 싶었지만 더 이상 git을 외면할 수 없었다.

부딪혔다가 다 날리기보다는 돌아가자는 마음이 컸던 예전과는 달리 git에 (쬐끔) 익숙해지니 너무 편리하고 좋았다.

commit 하는 것도 두려워서 벌벌 거리던 때와는 (쬐끔) 성장한 것 같아서 뿌듯하다.

🙏 반성

자바스크립트 실력이 부족하다

다짜고짜 (내 기준)어려운 문법을 쓰려고 하니 손이 안 움직인다.

단계와 구조를 짜놓고 구현하는게 좋다는 걸 알지만 일단 냅다 짜게 된다.

애써 생각해낸 방법이 머리에서 도망갈 것 같은 마음에 조급해져서 냅다 짜는 것부터 시작한다. (왜 조급해지는지는 모름... 아마 실력 부족이라 그런듯)

생각했던 방식이 안되면 포기하게 된다.

웹 접근성을 놓친다

안 그래도 어려운 접근성이 이미지가 들어가는 순간 더 어려워진다.

특히 반응형 모바일에서 접근성을 대체 어떻게 높여야 하는 지 모르겠다.

사실 이번 프로젝트에서는 접근성을 그렇게 고려하지 못했다.

탭 키 순서와 aria 관련 속성을 최대한 사용하고 싶었는데 기능 구현에 급급해서 뒷전으로 미뤄두고 잊어버렸다. Lighthouse 검사 점수가 내 생각보다는 비교적 높게 나온 것 같아 안도했지만 아직 개선해야 할 점이 많다.

다음부터는 반드시! 접근성 체크리스트를 만들어놓고 목록을 확인해가며 구조를 짜야겠다.

랜딩 페이지 Lighthouse

프로필 페이지 Lighthouse

✊ 노력

토이 프로젝트

간단한 토이 프로젝트들을 만들어보려고 한다.

문법이야 이미 글로 공부해봤으니 이 이상부터는 글이 아니라 직접 코드를 치면서 알아가야 한다고 생각했다.

그렇다고 문제를 풀기에는 안 그래도 두려운 자바스크립트가 더 싫어질 것 같아서 일단 내가 원하는 걸 만들어볼 것이다.

이미 몇 개 만들어보긴 했는데 기초 수준인데도 어려웠다.

그래도 자바스크립트에 대한 장벽을 낮추고 겁부터 먹는 버릇을 고치는 데에는 도움이 많이 될 것 같아서 꾸준히 해보려고 한다.

토이 프로젝트

GitHub - kwonboryong/ToyProjects

Contribute to kwonboryong/ToyProjects development by creating an account on GitHub.

github.com

💁‍♀️ 느낀 점

협업의 중요성

내가 당연하게 생각한 것이 타인에게는 그렇지 않을 수 있다는 것을 항상 고려해야 한다.

내가 A라고 말한 것이 타인은 B라고 받아들일 수 있다.

그래서 소통이 중요하고 협업을 강조하는 것이다.

개발자에게 중요한 것은 '협업'이라는 말이 자주 들려온다.

이전에는 왜 개발 직종에서 유독 협업을 강조하는지 이해가 가지 않았다.

어떤 직종이든, 하물며 직업이 없더라도 인간 사회에서 협업은 당연히 중요한 것인데

왜 코드 만지는 개발자에게 협업의 중요성을 강조할까

프로젝트에서 가장 시간이 많이 소요된 때는

코드를 짤 때가 아니라 팀원들과 소통하고 결정할 때 였다.

이번 프로젝트를 통해 협업의 중요성을 깨닫게 되었다.

💾 결론

프로젝트의 전반적인 성과

프로젝트 기간과 내 실력을 고려했을 때 현실적으로 모든 기능을 구현할 수 있을 것이라고는 처음부터 생각하지 않았다.

컴포넌트 단위로 구현하는 것이 낯설어서 구조가 어설프고, 포켓 베이스에 대한 이해도 낮아서 데이터 관련 코드들은 아마 엉망일 것이다. 그래도 처음에 생각했던 기능들은 대체로 구현한 것 같아서 만족스럽다.

향후 계획 및 방향

자바스크립트에서 이해가 안 가는 문법들은 전체적으로 다시 공부해야겠다.

그리고 글로 공부한 문법들을 토이 프로젝트를 통해 직접 코드로 구현해보며 복습할 생각이다.

이후 리액트를 배우면 바닐라 자바스크립트로 만든 티빙(Tiving) 사이트를 한 페이지 씩 리액트로 다시 리팩토링 해 볼 계획이다.

현재글티빙(Tiving) 클론 코딩 프로젝트 회고📑

나디아 성장 일기

비전공자 개발 일기

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

나디아 성장 일기

티빙(Tiving) 클론 코딩 프로젝트 회고📑

📑 티빙(Tiving) 클론 코딩 프로젝트 회고

🗂️ 프로젝트 개요

티빙(Tiving) 클론 코딩 프로젝트

💻 기능 구현

🫡 피드백

✏️ 프로젝트를 통해 알게 된 것들

📝 회고

👍 칭찬

🙏 반성

✊ 노력

💁‍♀️ 느낀 점

💾 결론

'회고'의 다른글

티스토리툴바