241104 / readme 표 작성하기(행 맞추기), 페이지 별 브라우저탭 타이틀 설정(react-helmet)

오늘 할 일

1. readme-개발기간과 팀 웨더클로스 파트 작성
2. 페이지 별 브라우저탭 타이틀 변경
3. 애니메이션 구상

---

readme) 개발기간과 팀 웨더클로스 파트 작성

마크다운 테이블이 (표 작성)
문법대로 작성했는데도 표로 안 나오고 그냥 텍스트로 나와서
열심히 구글링을 했는데도 소용이 없어서 지피티한테 물어보니
행을 맞춰야한다는 해답을 주었다 - 정답이였다

ㄴ 뭐임 아까 전에 이렇게 했을 때는 안됐는데 지금은 또 됨...... ;

어쨋든 안 되는 케이스는 다음과 같다

>> (이렇게 나옴)

행 맞추기 (이렇게 작성하는 것을 추천함)

최종 결과물 ~*

tmi. 개발기간 작성할 때 어제 폰트색상과 동일하게 작성하려고 했더니
물결 ~ 표시가 안 나와서 그냥 색상 변경 없이 가기고 결정했다....
그렇구만 까다로운 녀석이야요

---

페이지 별 브라우저탭 타이틀 설정

react-helmet 사용

npm i react-helmet-async

참고) https://www.npmjs.com/package/react-helmet-async

근데 분명 전에 노마드코더 강의에서
로그인 | Weather Claus 식으로 앞 부분만 바뀌고 뒷부분은 고정되는 방식을 배웠는데 해당 강의가 어디에 있는 건지 못 찾겠다 ㅠ..
물론 helmet은 잘 작동함

찾았다. 이거였음 SEO 컴포넌트 만들어서 사용하기 !
참고) https://ungumungum.tistory.com/76

눈물이 나네

SEO 나오는 강의를 찾았는데 gatsby 파트였음
근데 gatsby 기능 중 하나여서 다른 방법 필요 (위 참고)

최종 완료 !
적용한 페이지 : 로그인 / 회원가입 / 마이페이지 / 프로필 수정 / 비밀번호 변경 / 회원 탈퇴

seo 컴포넌트 생성해서
각 페이지에 컴포넌트 import 하는 식으로 작성했다
제일 기본인 메인 페이지는-Weather Claus만 나오는 부분은
App.js 파일에 작성 !

function App() {
  return (
    <>
      <SEO title="" />
      <Routes>

SEO 파일은 다음과 같다

import { Helmet } from "react-helmet-async";

function SEO({ title }) {
  return (
    <Helmet>
      <title>{title ? `${title} | Weather Claus` : "Weather Claus"}</title>
    </Helmet>
  );
}

export default SEO;

오예에에에...

---

readme) 주요기능 파트 작성

여러 팀프로젝트 readme를 서치해봤는데
뭔가 참고할게 마땅치 않아서 그냥 작성했더니 기능을 정리한게 돼.....
나중에 거의 완료되었을 때쯤 이미지나 gif 파일이랑 같이 정리하면 괜찮을 것 같음