[TIL] 220201-02

회고

1. 오늘의 도전과 배움
   팀프로젝트 왕창, 스토리북 ch1-1 번역!

2. 궁금하거나 어려웠던 점
   개발 용어가 다 같은 맥락으로? 쓰이는지 몰라서 번역 돌려가면서 최대한 자연스럽게 표현하고 싶었는데 이게 번역기가 돌린 거랑 다른 게 뭔지 혼란스러웟다 내가 영어를 잘 몰라서 더 그렇게 느끼는 것도 있고,, build란 단어가 많이 등장했는데 build process 어찌구 이런 문장이면 구축 프로세스를 설정한다는 걸 어떻게 풀어써야 하지..? 근데 또 개발문서를 읽는 사람이라면 이 정도는 알거고 그냥 내가 바보인듯 😂

3. 내일 해보고 싶은 것들
   일찍 일어나서 하드 트레이닝! storybook ch1-2 번역, 팀프로젝트 react-query 적용, 검색 기능 등 구현 등등등등

스토리북 번역 파트 나누기
백준 자바스크립트로 풀기

---

팀프로젝트

TOAST UI

복붙이지만,, 어쨌든 적용!
TOAST UI Viewer 적용 (+ Editor)
TOAST UI markdown Editor 사용하기
TOAST UI EDITOR를 붙이면서 배운것들

react html parsing

정리하지말고 외우기 ^^

// 앱상태(폼, 다크모드, user preference) <-> 서버와 동기화 되는 상태
// 서버상태를 쉽게 관리하게 해주는 것이 react-query

// react-query로 만든 custom hook
// 파일을 따로 분리!
// 컴포넌트 쪼개기, custom hook - 모든걸 커스텀훅 로직으로 만들어야함
// 역할을 잘 나누기 위해서!
// react query에게 적절한 캐시키와 api 함수를 넣어주는 것!
// 로직을 작게 쪼개기 위해서... 보너스로 좋은 점 중 하나임
// 중복의 제거?... 보너스로 좋은 점 중 하나임

// 서버에서 데이터를 가져와서 캐시 상태에 넣어두는 로직
// 상태 로직 / state, redux => 상태 로직
// react-query : 서버와 동기화 되는 상태를 캐시로 관리하는 라이브러리
// api 요청 함수 파일 <-> 요청한 것을 리액트 쿼리라는 상태관리 라이브러리에 넣은 것.
function useNotice(userId) {
  return useQuery('Notice', () =>
    memberApi.getNoticeCounts(userId).then((res) => res.data)
  );
}

// 화면을 보여주는 로직 view
function TopUser({ user }) {
  // 유저가있을때 로그인했을때
  const { data } = useNotice(user?.id);

  return (
    <Link
      className="topUser"
      to={{
        pathname: `/user/info/${user.id}`,
        state: { memberId: user.id },
      }}
    >
      <div className="username">{user.data.name}</div>
      <div className="bot">
        <MdNotifications />
        {data?.count > 0 && <div className="noticeCircle"></div>}
      </div>
    </Link>
  );
}

토끼님 감사요 🐰😭

---

02-02
오늘은 어제 탐토님에게 키보드 접근성에 대해 들어서 history.push -> Link(a)로 변경하고, 어제 전역에 적용된 styled-reset을 없애서 망가진 css를 전체적으로 수정하는 등등.. 빨리 끝내고 스토리북 번역했어야 했는데 벌써 9시가 다 되어간다ㅜㅜ

근데 에디터의 문제인지 마크다운 parser의 문제인지..!

<span style="color: #ab4642">ㅇㄹㅇㄹㅇ</span>
| 가나 | 다라 |
| --- | --- |
| 마바 | 사아 |

에디터 옆에 잘 나오는 거 확인하고 글 등록하면

span이 p태그로 변해서 그려진다

blockquote는 velog랑 비슷하게 css를 수정했는데 (맞겠지?!) 저건 아예 태그자체가 변형?이 돼서..

const Content = styled.div`
  ol,
  ul {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 30px;
  }
  img {
    width: 100%;
  }
  /* 요기 */
  blockquote {
    margin: 1.2rem 0px;
    border-left: 4px solid #ffe066;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgb(249, 249, 250);
    padding: 5px 5px 5px 15px;
    color: var(--text1);
  }
...

내가 markdown editor을 첨 써봐서 모르는 것도 있고 전체적인 과정을 모르니 일단 후퇴ㅜ 오늘 react-query pagenation도 해보고 싶었는데,, 검색어랑 자동 로그인 찍먹도,, 젠즈앙

내일! react markdown code highlight 적용?

https://github.com/remarkjs/react-markdown