스파르타코딩클럽 내일배움캠프 19주차 회고

최종 프로젝트 마무리

 길었던 최종 프로젝트의 끝이 보인다. 뒤늦게 발견한 버그도 있었고, 최적화를 하기도 하고 유저 피드백을 토대로 변경하기도 하면서 마무리도 역시나 바빴던 주간이었다.

 

 

 

 

 

 

기능 추가 - 이메일/비밀번호 재설정 기능, 탈퇴 기능

 내가 맡은 역할이 그리 크지는 않아서 자체적으로 기능을 좀 더 추가했다. firebase의 편리한 점은 auth 관련 부분이 간편하다는 것이다. 그래서 간단한 메서드만으로도 충분히 하루 안에 기능을 추가할 수 있었다.

 

자세한 건 월요일자 TIL에 나와있다. 뭔가 소셜 로그인을 제대로 구현하지 못한 것 같아서 그게 마음에 가장 걸렸는데 그 대신에 다른 기능이라도 넣어서 다행이다. 로그인만 있으면 제대로 된 커뮤니티가 아니니까. 마음대로 사용자 정보도 수정할 수 있도록 추가해서 다행이었다.

 

자세한 내용은 아래 링크에.

https://daydream-sy.tistory.com/212

스파르타코딩클럽 내일배움캠프 88일차

 

 

 

 

 

 

 

 

UI 수정

 생각도 안하고 있었던 Not Found 페이지의 UI를 추가하고 1주차에 만들어 두고 수정하지 않았던 footer의 UI도 완전히 수정했다. 이전 footer는 header와 거의 비슷하고 반응형도 추가하지 않아서 반응형도 추가해주었다. 마무리 단계이다보니 UI를 조금씩 수정해야 할 부분이 많아서 그걸 수정하느라 시간이 좀 걸렸다.

 

 중간 발표 이후에는 반응형 구현을 하기 위해서 계속 UI를 수정했었는데, 확실히 이번 프로젝트가 반응형을 상세히 추가하는 기분이다. 아무래도 핸드폰으로 많이 웹페이지에 들어가기 때문에 핸드폰으로 보기 쉽게 구현했어야 했는데, tailwind가 그래도 반응형 구현에 편해서 다행이었다. 근데 어려워...솔직히 css가 제일 어려운 것 같다 ㅋㅋ

 

 

 

 

 

 

 

발표자료 / 브로셔 준비

 수요일까지가 1차 발표 영상 제출이라 당일 날 발표 자료 만드느라 오전 시간을 전부 다 썼다. 중간 발표 당시의 서비스 아케틱처와 지금은 다른 부분이 있었고 트러블 슈팅 역시 좀 더 많아져 어떤 트러블 슈팅을 발표에 넣어야 할지, 그리고 어떤 식으로 발표를 구상해야 할지 다같이 회의하는 시간이 길었었다.

 

 당일에는 너무 바빴었는데 지금 생각해보니 그래도 이전부터 꾸준히 노션에 기록해둔 게 있어서 다행이었다는 생각이 든다. 뭔가 오류가 났다던지, 라이브러리 등을 추가할 때마다 노션에 기록했었다. 물론 오전/오후 스크럼도 계속 했었고 회의록도 잘 기록해두어서 발표 자료를 작성할 때 그걸 토대로 해서 이전에 발표 자료 준비할 때보다는 수월했었다.

 

 그리고 브로셔 역시 처음 해봤는데 발표 자료와 비슷했었다. 대신 목업 이미지를 만들기 위해서 시윤님이 고생하셨다.

 

 

 

 

 

 

 

미뤄뒀던 any 타입지정하기 / 최적화

 솔직 고백. 아직 any가 많기는 하다 ㅋㅋㅋㅋㅋㅋㅋㅋ 그래도 지정할 수 있는 건 지정했으니까...ㅎ 그리고 카카오는 타입을 지정할 수 없어서 그건 예외이다.

 

 아무튼 하루 날 잡고 최대한 any를 타입 지정해주는 시간을 가졌다. 타입스크립트가 타입 지정이 되기 때문에 사용한 것인데 any로 쓰면 자바스크립트랑 다를게 없지 않은가. 그래서 금요일에는 아예 타입 지정을 해주는데 시간이 상당히 오래 걸렸다. 처음부터 지정했어야 했나, 싶은데 그래도 날 잡고 하니까 이게 이런 타입을 가졌구나,하면서 복습하는 계기도 되었다 ㅋㅋㅋㅋ

 

 그리고 최적화. 솔직히 최적화가 가장 어려웠다. 배포하고 나니 메인 페이지에서 이미지가 많아서 그런지 로딩이 오래 걸리고 모바일에는 속도가 확연히 낮았다. 그래서 금요일에 튜터님이 알려주신 대로 코드 분할도 해보고, 여러 이미지 최적화 작업을 통해 지금은 좀 빨라졌다. (알고 보니 firebase를 사용하면 느린 게 필연적이라고 한다.백엔드와 협업했으면 어땠을까 싶다.)

 

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

 

이게 코드 분할 관련 공식 문서인데, 코드 분할을 이용해서 일부 페이지가 lazy loading되도록 리팩토링 했더니 확실히 성능이 많이 개선되었다.

 

import { lazy } from "react";

const Post = lazy(() => import("./Post"));
const User = lazy(() => import("./User"));
const Course = lazy(() => import("./Course"));
const Search = lazy(() => import("./Search"));
const EditCourse = lazy(() => import("./EditCourse"));

 

이런 식으로 lazy loading할 부분에 lazy를 추가하여 주고, Router.tsx 파일을 아래처럼 수정했다.

 

import React, { Suspense } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header from "../components/header/Header";
import Footer from "../components/footer/Footer";
import {
  Main,
  NotFound,
  Login,
  Register,
  AuthForgot,
  Post,
  User,
  Course,
  EditCourse,
  Search,
} from "../pages";
import { SyncLoader } from "react-spinners";

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Suspense
        fallback={
          <div className="h-screen flex justify-center items-center">
            <SyncLoader color="#A0A4A8" margin={10} size={18} />
          </div>
        }
      >
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/post" element={<Post />} />
          <Route path="/user/:id" element={<User />} />
          <Route path="/course/:id" element={<Course />} />
          <Route path="/edit/:id" element={<EditCourse />} />
          <Route path="/search" element={<Search />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/authforgot" element={<AuthForgot />} />
          <Route path="/*" element={<NotFound />} />
        </Routes>
      </Suspense>
      <Footer />
    </BrowserRouter>
  );
};

export default Router;

 

 Suspense 컴포넌트는 lazy 컴포넌트가 로드 되길 기다리는 동안 예비 컨텐츠(fallback)를 보여줄 수 있도록 하는 컴포넌트로 하위 컴포넌트로 lazy 컴포넌트를 여러 개 가질 수 있다. 사실 이 부분을 희현님이 해주셔서 그 이후에 공부해본 것인데 좀 신기하다. 이렇게 해서 최적화를 할 수 있다니...역시 공부할 게 너무 많다...!

 

 그리고 이미지 최적화 관련해서 시윤님이 해주셨는데, 그부분도 역시 설명만 들었고 다시 한번 라이브러리를 공부해봐야겠다. 몰랐었는데 핸드폰으로 이미지 추가할 때 이미지 확장자가 달라서 업로드가 안되고 있었다. 그걸 금요일에 발견해서 주말 안에 해결해주셨는데, heic2any라는 라이브러리를 이용해서 수정해주셨다. 대박이다...역시 대단하신 시윤님...

 

 또 browser-image-compression 라이브러리를 이용해서 사용자가 이미지를 업로드 했을때, 자동으로 이미지 사이즈를 압축하는 것도 추가해주셨다. 그리고 다른 이미지 최적화를 위해 코드를 수정해주셨더니 확실히 이미지를 업로드할 때 편해졌다. 이미지 용량 때문인지 로딩이 오래걸렸는데, 최적화를 하고 나니 확실히 더 편해졌다.

 

 lighthouse를 이용해서 웹페이지 성능 테스트를 하는데 그것도 이번에 처음 해봐서 그런지 신기했다. 확실히 느낀 건 최적화가 중요하다는 점이다. 이전 모든 프로젝트는 기능 완성에 급급해서 반응형, 최적화 등을 전혀 신경쓰지 못했는데 이번에 세심하게 해보면서 최적화는 필수라는 걸 느꼈다. 로딩이 느리면 유저들이 불편해하고, 그 불편함이 우리 웹페이지의 이용량을 줄이게 되니까...ㅋㅋㅋ

 

 

 

 

 

 

 

기술 질문 대비하기

 주말동안 조원들과 함께 기술 질문 대비하는 시간도 가졌다. 사실 토요일에 만난게 질문 대비 목적이었는데 그 때까지 최적화가 끝나지 않아서 다같이 최적화 작업을 우선했다. 그래서 토요일은 기술 면접 질문 리스트만 적어두고 일요일에 다시 만나서 질문에 대한 답을 적었다.

 

 이전에 중간 발표 때 받았던 질문도 있었고 나름대로 우리가 생각했던 질문들, 그리고 오늘 슬랙에 안내된 사전 질문 등을 합쳐서 꽤나 질문이 많이 나왔다. 이걸 답변하는 시간을 가지면서 어떤 식으로 대답해야 하나 한번쯤 생각하게 되고...사실은 외우지 못해서 이걸 커닝(?) 하면서 대답할 것 같기는 하다 ㅋㅋㅋ 그래도 질문을 예상하지 않고 마주치는 것보다 미리 대비하는 편이 좋으니까. 이외에도 질문을 할 수 도 있지만, 그래도 사전 질문들을 토대로 준비하는 거니까. 좋은게 좋은 거라고 생각한다.

 

 

 

 

 

 

 

코드 리뷰하기

+ 저녁에 WIL 추가!

 기술 질문 대비하면서 여러 질문들에 대한 답을 작성한 뒤에, 코드리뷰를 한 적이 없다는게 생각이 났다. 원래도 최종 발표 전에 한번 다같이 코드 리뷰를 하겠다고 했었어서 각자 준비한 뒤에 발표하는 시간을 가졌다. 내가 사용한 라이브러리, 로직에 대해서 설명하고 혹시나 질문이 있다면 그거에 대한 대답을 하는 식으로 했는데 시간이 엄청 오래 걸렸지만 정말 유익한 시간이었다.

 사실 내가 맡은 기능이 아니면 아무래도 코드에 대한 이해가 부족하기 마련이다. 그건 나역시도 마찬가지였고. 그래서 다른 분들의 로직을 이해하는 시간이 있어서 정말 좋았다. 평소에 코드만 보고 궁금했던 부분에 대해 질문할 수도 있었고. 특히 rtk query에 대한 설명을 들을 수 있어서 좋았다. 왜냐면 내가 맡은 부분이 query 사용 부분과는 좀 거리가 있어서 매번 PR 때만 코드를 봤었는데 이제야 그래도 이해하는 기분...?ㅋㅋㅋㅋㅋ 코드 리뷰보단든 자기가 쓴 코드 설명에 가깝긴 한데, 그래도 최종 발표 전에 프로젝트 전체 코드에 대해 알수 있어서 정말정말 좋았다!

 

 

 

 

 

 

 

 

이번주 마무리

 마지막 WIL이다. 19주차까지 오다니...믿기지 않네. 사전 캠프 포함해서 거의 반 년을 한 내일배움캠프가 끝난다니 아직 실감은 지 않는다. 마지막으로 내일 발표까지 마무리해야 실감나겠지? 마무리 하는 동안 새로운 것들에 대해 많이 배우기도 하고 아직 배울 게 많아 남아있기도 하다. 최적화 관련해서 키워드 적어놓은 것들도 많고...여튼 프로젝트 하면서 확실히 공부할 게 많아진다. (매번 하는 말)

 

 이번주는 이렇게 마무리 되고, 내일이 마지막이니까 유종의 미를 거뒀으면 좋겠다..!