0517 TIL

김형석·2022년 5월 17일
1

wanted-POB

목록 보기
12/26

✅ 할 일

  • 검색 영역 클론 코딩
  • 개인과제 리팩토링 마무리
  • 개인 과제 개선 사항 및 추가 구현 구상

🗒 메모

  • 손목 건강 챙기기..

💡새로 배운 내용

핵심 키워드

💡 **프론트엔드는 무조건 가독성이 최우선**

1. React svg property 제어

  1. svg에서 바꾸고자 하는 요소를 current로 바꿔줌

    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="current"
      height="current"
      viewBox="0 0 24 24"
    >
      <path fill="current" fill-rule="evenodd" d="...." />
    </svg>
  2. 사용하는 컴포넌트에 props로 current 값 지정하여 내려줌

    import { ReactComponent as Reservation } from "assets/icon-24-reservation.svg";
    
    <Reservation width="10" height="10" fill="blue" />;

2. Layout 처리

react-router-dom의 Outlet을 사용하여 레이아웃 처리

layout/index.tsx

import styles from './layout.module.scss'
import Footer from 'components/layout/footer'
import { Outlet } from 'react-router-dom'
import Header from './header'

const Layout = () => {
  return (
    <div className={styles.wrapper}>
      <Header />
      <main className={styles.main}>
        <Outlet />
      </main>
      <Footer />
    </div>
  )
}

export default Layout

index.tsx

import Layout from 'components/layout'
import { Route, Routes } from 'react-router-dom'
import SearchPage from './SearchPage'
import OtherPage from './OtherPage'

const App = () => {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path='/' element={<SearchPage />} />
				<Route path='other' element={<OtherPage />} />
      </Route>
    </Routes>
  )
}

export default App

이렇게하면 layout 컴포넌트는 그대로 있고 <Outlet /> 부분이 SearchPage와 OtherPage로변하게 된다

작업 내용

3. 라이브러리 추천

  • react-loadable
  • react-helmet
  • react-modal
  • dayjs

라이브러리 팁

star수가 진짜 높은데 오류가 난다 → 99.99% 내 잘못 (2K 정도)

안써도되는 라이브러리

  • dot-env
  • prop-type

4. 프론트엔드 개발시 팁

일일 게스트로 오신 양민열 코치님께서 주신 코멘트이다.

AlpoxDev - Overview

  1. 랜더단에서 map 사용 지양할것
  • useMemo를 사용해서 컴포넌트로 만들어서 랜더링할 것.
  1. 삼항 연산자는 랜더단에서 쓰지 말아야 한다 ⇒ 가독성이 굉장히 떨어짐
    결국 하고싶은 말은 가독성! 가독성!

  2. depth를 깊게 가져가지 마라 → 커스텀 훅 쓰면됨 (useMemo,useCallback)

    useEffect(()=>{
    // ...
    // ...
    },[이 부분이 depth])
  1. 주니어 개발자의 핑계 ⇒ ‘시간이 없어서 이렇게 짰다...’(금지! 말도 안되는 변명이다.)
    처음 짤 때 신경써서 짤 것
  2. ⭐️ Intersection Observer API 쓰기전에 구현을 해보고 적응됐다 싶을때 라이브러리 쓸 것
  3. 프로젝트를 볼 때 눈 여겨 보는것
    1. package.json
      • scripts
      • dependencies
      • devDependencies ⇒ testing, types dev로 내려야함
  4. Pretendard 폰트 추천

최고의 조합

React + Redux

야매코드

  • let으로 배열 만든뒤 map 또는 forEach ⇒ reduce를 사용하면 해결됨
  • setTimeOut() ⇒ 쓰지말것

react portal

Portals - React

💡 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법.

과정

  1. public/index.html에 Modal이 렌더링 될 위치 심어주기

  2. Portal.js(ts) 만들기

    //Portal.js
    
    import reactDom from "react-dom";
    
    const ModalPortal = ({ children }) => {
      const el = document.getElementById("modal");
      return reactDom.createPortal(children, el);
    };
    
    export default ModalPortal;
  3. Modal component 만들기

    //Modal.js
    
    import React from "react";
    import ModalPortal from "./Portal";
    import styled from "styled-components";
    
    const Modal = ({ onClose}) => {
    
      return (
        <ModalPortal>
          <Background>
            <Content>
      //  ... modal 안의 contents 코드 ...
             </ Content>
          </Background>
        </ModalPortal>
      );
    };
    
    export default Modal;
  4. Modal을 띄울 컴포넌트에 Portal,Modal 조건부 렌더링

    //modal을 띄우려는 컴포넌트 파일
    
    import styled from "styled-components";
    import ModalPortal from "../Components/Modal/Portal";
    import Modal from "./Modal/Modal";
    
    const Carousel = props => {
      const [modalOn, setModalOn] = useState(false);
    
      const handleModal = () => {
        setModalOn(!modalOn);
      };
      
      return (
        <>
          <Container>
        	<button onClick={handleModal}/>
    // ... 코드 생략 ...
            <ModalPortal>
              {modalOn && <Modal onClose={handleModal} />}
            </ModalPortal>
          </Container>
        </>
      );
    };
    
    export default Carousel;

IE 사용자 몰아내기

<![if IE]>
	<div id=”ieGuide”>
		<div>돌아가주세요</div>
		<div>크롬다운로드 링크</div>
	</div>
<![endif]>

📝내일 할 일

  • 코드 리팩토링 마무리
  • 추가 기능 구현

🌙 회고

오늘은 기업 과제도 끝냈고 내일 개인 공부를 할 시간이 주어졌다.

redux-toolkit을 사용해 볼 예정이고, react-query도 사용을 해 볼 예정이다.

추가적으로 Intersection Observer API 의 동작 방식을 알고 사용하기 위해 구현 해 볼 예정이고

오늘 강의 때 나왔던 GA에 대해서도 다시 봐바야겠다.

현업에 계시는 분들에게 직접 듣고있으니 꿈도 커지고, 실제로 점점 성장하는게 느껴진다.

profile
코드로 소통하기 위해 힘쓰는 프론트엔드 개발자 입니다.

0개의 댓글