jxxunnn / project-diary-front

📒감성 일기장은 쉽게 빠른 글을 작성하고 그날의 감정을 함께 기록할 수 있는 웹 일기장입니다.

글쓰기를 좋아하는 개발자 이준근입니다.

43만뷰 웹소설과 Front-end 개발 서적 DOM - 잡았다, 요 돔!을 집필하였습니다.
글쓰기/코딩은 보면 볼수록, 쓰면 쓸수록 나아진다고 생각합니다.
한 문장에 하나의 주장을 담아서, 간략한 문장으로 표현하고자 노력합니다.

🎯 최근 집중하는 기술스택은

🔍 최근 관심있는 기술스택은

✏️ 최근 기술 블로그에 이런 글을 공유하였습니다

기술 블로그 구경가기 🏃🏻‍♀️💨

🌞 배포중인 서비스

project-diary-front's Issues

React.memo로 컴포넌트 리렌더링 방지

헤더 컴포넌트 날짜 변경 시 하단의 페이지 컨트롤바 컴포넌트가 리렌더링 되고 있다.

Netlify, Redirection 에러

페이지 이동 후 새로고침시 에러가 발생한다. page not found 는 404 에러로, 현재 url 에서 찾고자 하는 자원을 못찾았을 때 발생한다.

원인
현재 설정에서 리액트가 최초 접속할 때의 url 은 / 이다. 그리고 이 때 index.html 을 읽는다. 즉 해당 url 에 대한 자원은 index.html 로 정해져 있다.

하지만 화면을 넘기면서 라우팅된 url이 /a 혹은 /b 가 됐을 땐, 각 url 에 맞는 자원이 존재하지 않는다. react 는 single page application 이기 때문이다) 즉 /a , /b 라는 url 에서 새로고침을 하면, / 와 달리 곧바로 내려줄 자원이 존재하지 않기 때문에 404 에러가 발생하는 것이다.

paths alias 설정하기

import, export하는 과정에서 상대경로를 사용하다 보니 외관적인 측면에서도 깔끔한 코드로 보이지 않았고 폴더의 depth가 깊어질수록 경로를 작성하는데 ../../(상대경로)를 얼마나 써야하는지 계산하고 있었다.

그래서 타입스크립트에서 paths alias를 설정해서 코드를 깔끔하게 만들어보려 한다.

lighthouse를 활용한 웹페이지 품질 개선

품질 개선 전

브라우저 호환성을 위해 input type="date" 직접 구현하기

다음은 caniuse에서 확인한 input type="date"의 지원 여부이다. 구버전 브라우저와 IE에서 지원하지 않음을 알 수 있다.

이 요소만 커스텀으로 제작한다면 모든 사용자가 사용할 수 있기에 직접 구현해보려한다.

SEO를 위한 메타 데이터 수정

메타태그를 통해 검색엔진에게 홈페이지의 컨텐츠가 무엇에 관한 것인지 쉽게 알려줄 수 있으므로 SEO에 매우 중요하다.

Portal로 Modal 구현하기

브라우저 기능으로 간단하게 대화상자를 적용하였지만, 스타일을 통일해주고 싶어졌다. portal을 사용하여 z-index 등의 번거로운 후처리 없이 모달을 구현하려 한다.

textarea 맞춤법 검사 표시 제거

textarea를 사용하다 보면 위의 이미지처럼 빨간 점선으로 맞춤법 검사 표시가 나타난다.
아무래도 맞춤법을 교정해주는 서비스가 아니다 보니 불필요하고 보기에도 안좋아서 빨간 점선을 없애려 한다.

textarea의 spellcheck 속성을 false로 설정하면 해결된다.