macjjuni / devlog_legacy Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 203.34 MB

꾸생의 DevLog(lagacy)

Home Page: https://macjjuni.com

JavaScript 2.06% TypeScript 53.21% CSS 43.25% SCSS 1.48%

devlog_legacy's Introduction

"꾸준함이 생명"이라는 인생 모토를 가진 프론트엔드 개발자입니다.

🌲 블로그: 🔗 방문하기
📫 이메일 : [email protected]
🤾🏻‍♂️ 취미/관심사: 블로깅 📝, 피아노 🎹, 인테리어 🪑, 청소 🧹, ₿

🌳 Experience

2023.3 ~ current 스트라토 - FE Developer
2022.3 ~ 2023.3 인프라큐브 - FE Developer

💜 Like

devlog_legacy's People

Contributors

Stargazers

devlog_legacy's Issues

모바일 환경에서 페이지 이동 시 흔들림 현상 발생

스크롤을 아래로 내려도 헤더가 고정되도록 position: sticky; 속성을 줘야했는데 부모 태그에 overflow: hidden; 속성이 없어야 sticky 속성이 적용된다.

부모 태그인 layout과 body태그에 overflow: hidden; 속성이 없어야 흔들림 현상이 해결되는데, 진퇴양난! 딜레마에 빠지게 됐다..

현재 생각해본 해결방안

CSS속성으로 해결방법을 찾아본다
자바스크립트로 sticky가 아닌 일정 스크롤 이동 시 fixed 속성으로 위치시킨다.

스타일 오류

Window11 Chrome
카테고리 컴포넌트 스타일(정렬) 오류

수정사항

utterances 댓글 다크모드 적용해야함(커스텀 필요)
폰트 바꾸고나서 검색 인풋 커서 이상함(window에서는 이상했고 mac은 확인 필요)

Blog 컴포넌트 UX 개선

좌우 스크롤이 가능한데, 맥북의 트랙패드는 사용하기 쉬우나 윈도우 환경이나 별도의 마우스를 사용하는 경우 스크롤 하는데 사용자 경험이 안좋음.

상하 스크롤로 움직일 수 있게 기능개발 필요

useLayoutEffect를 useEffect로 변경해야함

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes

SSR 환경에서는 useLayoutEffect가 아닌 useEffect를 사용해야함

https://kku.dev/blog/b5034e2e-9848-4cde-8558-1856b72ab939

프로그래머스 - 공백으로 구분하기 공백으로 구분하기 2 | 꾸생 블로그

📌 문제 설명 단어가 공백 한 개 이상으로 구분되어 있는 문자열 my_string이 매개변수로 주어질 때, my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을

https://kku.dev/blog/b5034e2e-9848-4cde-8558-1856b72ab939

페이지 이동 시 router.events 중첩 문제

  useEffect(() => {
    router.events.on('routeChangeStart', handleStart)
  }, [router.pathname]) // <-

/src/layout/main/index.tsx
https://github.com/macjjuni/macjjuni.portfolio/blob/main/src/layout/main/index.tsx

상세페이지 상단 이미지 개인업로드 시 엑박 & TOC 사라짐

CORS 정책으로 인한 이미지 엑박표시.
https://shlee0882.tistory.com/289

base64로 변환해서 표시해줘야함.

TOC 사라짐
역시 상세페이지고 Table Of Contents 갑자기 사라짐

Footer SNS 아이콘 사이즈 다름

하단 SNS Icon 크기 다름 tistory 아이콘이 좀 더 작음

<NavList/> 컴포넌트 스타일 적용 방식이 복잡함

src/layout/header/components/navList

<nav className="header-nav">
  <ul className="nav-list">
    {pages.map((page) => (
      <li key={page.id} className="nav-link">
        <Link href={page.path} className={pathname === page.path ? 'active' : ''}>
          {page.title}
        </Link>
      </li>
    ))}
    <ToggleButton />
  </ul>
</nav>

View 단에는 html 코드를 사용했고 스타일 적용은 src/layout/header/style.ts 에서 Sass 방식으로

태그를 기준으로 적용해놨다. 나중에 스타일 변경이나 Html 구조를 변경할 경우 관리가 힘들어 질 것으로 보아 리팩토링이 필요해보임.