๐Ÿ’ป TIL 23.03.16

๊น€์˜์šฐ(Yeongwoo Kim)ยท2023๋…„ 3์›” 16์ผ
0
post-thumbnail

๐Ÿ’ช MainPage Refactoring

์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€์—์„œ ๋งํ–ˆ๋“ฏ์ด ์šฐ๋ฆฌ๋Š” NextJs์—์„œ ReactJs๋กœ migration์„ ์ง„ํ–‰ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.

์ฒ˜์Œ์œผ๋กœ ์ง„ํ–‰ํ•ด๋ณด๋Š” migration์ด๋ผ์„œ ์–ด๋–ป๊ฒŒ ์‹œ์ž‘ํ• ์ง€ ๋ง‰๋ง‰ํ•ด์„œ ๊ณ„ํš์„ ์„ธ์›Œ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

๐Ÿ“„ ํ˜„์žฌ ์ฒ˜ํ•œ ์ƒํ™ฉ

  1. ํ˜„์žฌ ์šฐ๋ฆฌ ํŽ˜์ด์ง€๋Š” auth.xxx.com, learn.xxx.com, main.xxx.com, admin.xxx.com 4๊ฐœ๋กœ ์ด๋ค„์ ธ์žˆ๋‹ค.

  2. ๊ฐ™์€ NavBar๋ฅผ ์‚ฌ์šฉํ•˜๋Š” learn page์™€ main page๋ฅผ ํ•ฉ์น˜๋ ค๊ณ  ํ•œ๋‹ค.

  3. ํ•˜์ง€๋งŒ ํ˜„์žฌ learn page๋Š” MUI๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์„ธํŒ…์ด์ง€๋งŒ main page๋Š” ์ดˆ๊ธฐ์— MUI๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ•˜์ง€ ์•Š์•„์„œ theme.ts๊ฐ€ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— MUI๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ์ƒํƒœ์ด๋‹ค.

  4. ์ด๋ฒˆ์— ํŒ€์›๊ณผ code Review๋ฅผ ํ•˜๋ฉฐ ๊นจ๋‹ฌ์€ ๊ฒƒ์ด ์žˆ๋Š”๋ฐ, ํ•ด๋‹น ๋ถ€๋ถ„์ด main page์˜ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์•„์˜ˆ ์ ์šฉ๋˜์ง€ ์•Š์•˜๋˜ ๊ฒƒ ๊ฐ™์•„์„œ ์ ์šฉํ•˜๋ คํ•œ๋‹ค

    • "ํ•จ์ˆ˜ ํ•˜๋‚˜์— ํ•˜๋‚˜์˜ ๋™์ž‘์ด ์ด๋ค„์งˆ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š”๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์š”" ๋ผ๋Š” review๊ฐ€ ์žˆ์—ˆ๋‹ค.

    • ํ•ด๋‹น review๋ฅผ ๋ณด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ refactoring์„ ์ง„ํ–‰ํ•ด ๋ดค๋Š”๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ์•„์ฃผ ๋งŒ์กฑ์Šค๋Ÿฌ์› ๋‹ค.

    • before

      const Detail_Study = () => {
         const [curTapId, setCurTapId] = useState(0);
         const handleClickTap = (id: number) => {
           if (id === 1 || id === 0) setCurTapId(id);
         };
      return (
        <>
          <Layout>
            <DetailHeadContainer>
              <StudyImg />
              <HeadRightBox>
                <SeperateHeartBtn>
                  <StudyName>...</StudyName>
                  <HeartBtn />
                </SeperateHeartBtn>
                <TeacherName>...</TeacherName>
                <StudyTag study_tag={study_detail_tag} />
                <SummaryStudy>...</SummaryStudy>
                <StudyDeadLine>...</StudyDeadLine>
      
                <Link href="/apply_math">
                  <HeadBottomBtn disabled>...</HeadBottomBtn>
                </Link>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                  }}
                >
                  <a
                    href="http://pf.kakao.com/_yKHxnxj/chat"
                    target="_blank"
                    rel="noreferrer"
                  >
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <KakaotalkContent>...</KakaotalkContent>
                      <Image/>
                    </div>
                  </a>
                </div>
              </HeadRightBox>
            </DetailHeadContainer>
            <TabContainer>
              <TabTitleContainer>
                {TAB_INFO.map((item) => {
                  return (
                    <TabTitleBox
                      active={curTapId === item.id}
                      first_tab={item.id === 0}
                      key={item.id}
                      onClick={() => handleClickTap(item.id)}
                    >
                      {item.title}
                    </TabTitleBox>
                  );
                })}
              </TabTitleContainer>
              <TapContentsContainer>
                {TAB_INFO.map((item) => {
                  if (curTapId === item.id) {
                    return item.contents;
                  }
                })}
              </TapContentsContainer>
            </TabContainer>
          </Layout>
        </>
      );
    • after

      const Detail_Study = ({ study }: DetailProps) => {
       return (
         <Layout>
           <DetailHeadContainer>
             <StudyImg imageSrc={study.img} />
             <Head study={study} />
           </DetailHeadContainer>
           <DetailStudyTab study={study} />
         </Layout>
       );
      };
      function Head({ study }: DetailProps) {
       return (
         <HeadRightBox>...</HeadRightBox>
       );
      }
      function DetailStudyTab({ study }: DetailProps) {
       ...
       return (
         <TabContainer>...</TabContainer>
       );
      }

      before ์ฝ”๋“œ๋Š” Detail_Study component์— ๋ชจ๋“  ๋กœ์ง์ด ๋“ค์–ด๊ฐ€ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ Detail_Study ์•ˆ์— ์žˆ๋Š” ๋กœ์ง์„ ๋‚˜๋ˆ ๋ณด๋ฉด Head์™€ Tab์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ Head์™€ DetailStudyTab์„ ๋”ฐ๋กœ ํ•จ์ˆ˜๋กœ ๋งŒ๋“  ๋’ค Detail_Study component์—์„œ ๋ถ„๋ฆฌ์‹œ์ผฐ๋‹ค.

      ์ด๋ ‡๊ฒŒ ํ–ˆ์„ ๋•Œ, ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•ด๋‹น component๋ฅผ ๋ดค์„๋•Œ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ํ•˜๋Š”์ง€ ํ™•์‹คํ•˜๊ฒŒ ์•Œ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋˜ํ•œ detail_study์—์„œ ์ˆ˜์ •์‚ฌํ•ญ์ด ๋ฐœ์ƒํ–ˆ์„ ๋•Œ, Head๋ฅผ ๊ณ ์ณ์•ผํ•˜๋ฉด Head ํ•จ์ˆ˜์— ๊ฐ€๊ณ , Tab์„ ์ˆ˜์ •ํ•ด์•ผํ•˜๋ฉด DetailStudyTab์— ๊ฐ€์„œ ์ˆ˜์ •ํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— refactoring์  ๋ฉด์—์„œ๋„ ๋งค์šฐ ์ข‹์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค.

      ๋˜ํ•œ component์™€ ํ•จ์ˆ˜์˜ ๊ตฌ๋ถ„์„ ์œ„ํ•ด์„œ component๋Š” arrow function์œผ๋กœ ์ž‘์„ฑํ–ˆ๊ณ , ํ•จ์ˆ˜๋Š” ์ผ๋ฐ˜ function์„ ํ†ตํ•ด ์ •์˜๋ฅผ ๋‚ด๋ ธ๋‹ค.

๐Ÿ—“๏ธ ๊ณ„ํš

  1. ์œ„์˜ ์™„๋ฃŒ๋œ ์˜ˆ์‹œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•จ์ˆ˜ ํ•˜๋‚˜์— ๊ธฐ๋Šฅ ํ•˜๋‚˜๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค.
  2. ํ˜„์žฌ ๋ชจ๋“  component์—๋Š” ๊ธฐ๋Šฅ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ style ๋˜ํ•œ ํ•จ๊ป˜ ์žˆ๋Š”๋ฐ, ์ด๋ฅผ ๋ถ„๋ฆฌ ์‹œํ‚ฌ์˜ˆ์ •์ด๋‹ค. ๋˜ํ•œ ๊ณต๋™ ์ปดํฌ๋„ŒํŠธ์™€ ํ•œ ํŽ˜์ด์ง€์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋˜ํ•œ ๋ถ„๋ฆฌํ•  ์˜ˆ์ •์ด๋‹ค.
    • ์˜ˆ์‹œ
     // before
     โ”œโ”€โ”€ components
     โ”‚   โ”œโ”€โ”€ Header.tsx
     โ”‚   โ”œโ”€โ”€ Footer.tsx
     โ”‚   โ”œโ”€โ”€ TabStudyIntroduce.tsx
     โ”‚   โ”œโ”€โ”€ TabBookIntroduce.tsx
     โ”‚   โ””โ”€โ”€ Tag.tsx
     โ”œโ”€โ”€ page
     โ”‚   โ”œโ”€โ”€ mainPage.tsx
     โ”‚   โ””โ”€โ”€ detailStudyPage.tsx
     โ””โ”€โ”€ run
     
     
     // after
     โ”œโ”€โ”€ components
     โ”‚   โ”œโ”€โ”€ Header.tsx
     โ”‚   โ”œโ”€โ”€ Footer.tsx
     โ”‚   โ””โ”€โ”€ Tag.tsx
     โ”œโ”€โ”€ page
     โ”‚   โ”œโ”€โ”€ mainPage
     โ”‚   โ”‚   โ””โ”€โ”€ index.tsx
     โ”‚   โ””โ”€โ”€ detailStudyPage
     โ”‚       โ”œโ”€โ”€ index.tsx
     โ”‚       โ”œโ”€โ”€ TabStudyIntroduce.tsx
     |       โ””โ”€โ”€ TabBookIntroduce.tsx
     โ”œโ”€โ”€ style
     โ”‚   โ”œโ”€โ”€ components
     โ”‚   โ”‚   โ”œโ”€โ”€ HeaderStyled.tsx
     โ”‚   โ”‚   โ”œโ”€โ”€ FooterStyled.tsx
     โ”‚   โ”‚   โ””โ”€โ”€ TagStyled.tsx
     โ”‚   โ””โ”€โ”€ page
     โ”‚       โ”œโ”€โ”€ mainPage
     โ”‚       โ”‚   โ””โ”€โ”€ MainPageStyled.tsx
     โ”‚       โ””โ”€โ”€ detailStudyPage
     โ”‚           โ”œโ”€โ”€ DetailStudyPageStyled.tsx
     โ”‚           โ”œโ”€โ”€ TabStudyIntroduceStyled.tsx
     |           โ””โ”€โ”€ TabBookIntroduceStyled.tsx
     โ””โ”€โ”€ run

๋Š๋‚€์ 

  • ์Œ... ๊ธฐ์กด learn page๋ฅผ ์ œ์ž‘ํ•˜๋ฉด์„œ Main page๋„ learn page ์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด์•ผํ•˜๋Š”๋ฐ...ํ•ด์•ผํ•˜๋Š”๋ฐ...๋ผ๊ณ  ์ƒ๊ฐ๋งŒํ•˜๊ณ  ์‹ค์ฒœํ•˜๊ธฐ ๋‘๋ ค์› ์—ˆ๋‹ค...(๋„ˆ๋ฌด ์–‘์ด ๋งŽ์•„์„œ..) ํ•˜์ง€๋งŒ ์–ด๋–ป๊ฒŒ ๋ณด๋ฉด ์ง€๊ธˆ์ด ๊ณ ์ณ์•ผํ•  ๋ถ„๋Ÿ‰์ด ์ ์„ ๋•Œ๊ฐ€ ์•„๋‹Œ๊ฐ€๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๊ณ . ์ด๋ฒˆ ๊ธฐํšŒ์— ์‹น๋‹ค ๊ณ ์น˜๊ณ  ๋ฏธ๋ž˜๋ฅผ ๊ธฐ์•ฝํ•˜์ž๋Š” ๋งˆ์Œ์œผ๋กœ Refactoring์„ ์‹œ์ž‘ํ•˜๋ คํ•œ๋‹ค.
  • ๋‚˜์—๊ฒŒ ๋‚˜๋Š” ๋ฐ๋“œ๋ผ์ธ์„ ์ฃผ๊ณ  ๋นก์„ธ๊ฒŒ ํ•ด๋ณด๋ คํ•œ๋‹ค. ๋‹ค์Œ์ฃผ๊นŒ์ง€ ๋งˆ๋ฌด๋ฆฌ ํ•ด๋ณด๋„๋ก ํ•  ๊ฒƒ์ด๋‹ค! ํ™”์ดํŒ…ใ…Ž..
profile
์ฐจ๊ทผ์ฐจ๊ทผ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€