Less than perfect is sometimes perfect Less than perfect is sometimes perfect

이번엔 유명한 블로거 마크 맨슨이 쓴 신경끄기의 기술이라는 책 리뷰입니다. 이 책은 프롤로그부터 말합니다. 나는 원하는 바를 성취하는 법을 알려줄 생각이 없다. 대신 포기하고 내려놓는 법에 대해 말할 것이다. 가장 중요한 것만 남기고 다 지워버리는 방법, 눈을 감고 뒤로 넘어져도 괜찮다라는 것, 신경을 덜 쓰는 기술, 하지 않는 법을 알려주겠다.자기 계발의 진실자기계발과 성공은 종종 같이 붙어 다니는 말이다. 하지만 그렇다고 두 단어가 같은 의미는 아니다. 오늘날의 세상은 사람들이 앞날을 터무니없이 긍정적으로 바라보도록 몰아간다. 더 행복하게, 더 건강하게, 모두를 뛰어넘어 최고가 되라. 더 똑똑하게. 더 빠르게. 더 풍족하게. 더 섹시하게. 더 인기 있고, 더 생산적이며, 더 부러움을 사고, 더 존경받..

페이지 성능 개선하기 4 (with. Lighthouse) 드디어 마지막 챕터, SEO 관련이다. SEO SEO는 과연 무엇일까? SEO는 검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하는 과정입니다.또한 웹 페이지가 검색 결과 페이지에서 잘 노출 되도록 페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 방법론으로도 정의할 수 있습니다. SEO는 왜 중요할까? SEO는 고객이 원하는 순간에 고객의 질문에 적합한 콘텐츠를 제공해 주는 작업입니다.이를 단순히 검색 결과 페이지 상단에 웹사이트를 노출 시키는 테크닉으로 간과해서는 안됩니다.SEO는 마케터에게 매우 중요한 전략적 의미를 갖고 있습니다.고객 의도에 적합한 콘텐츠를 고객이 원할 때 즉각 제공하는 과..

페이지 성능 개선하기 3 (with. Lighthouse) 이번엔 접근성, 권장사항 파트이다. 접근성 대체로 사이트에 액세스할 수 있다는 것은 말 그대로 누구나 사이트의 콘텐츠를 사용할 수 있고 해당 기능을 운영할 수 있음을 의미 합니다. 접근성은 "일반적인" 사용자의 좁은 범위 밖에 있을 수 있는 사용자의 경험을 의미하며, 사용자는 예상과 다르게 액세스하거나 상호 작용할 수 있습니다. 웹 접근성 콘텐츠 지침 Perceivable (인지 가능) : 사용자가 콘텐츠를 인지할 수 있습니까? 이는 시각과 같은 한 가지 감각으로 무언가를 인지할 수 있다고 해서 모든 사용자가 인지할 수 있는 것은 아니라는 점을 염두에 두는 데 도움이 됩니다. (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이..

페이지 성능 개선하기 2 (with. Lighthouse) 지난번에 이어서 성능개선 후기 외부 스크립트의 상호작용 시점 변경 next의 경우 next/script 사용, afterInteractive 옵션 추가 외부 리소스 미리 연결 혹은 로드 여기서 &display=swap 쿼리를 사용하면 웹폰트 로드 중 기본 폰트 노출 할 수 있습니다. 번들 트리 쉐이킹 lodash의 경우 Full import 하면 69.6K 이지만 실제 사용하는 함수만 import하면 4배 가량 줄어드는 것을 확인 할 수 있습니다. curly braket으로 import해도 사이즈는 동일합니다. ) moment도 굉장히 큽니다. 요것도 대체해야 하는데요.. moment가 더이상의 신규 개발 없이 유지보수만 하는 상태 로 전환되었습..

페이지 성능 개선하기 (with. Lighthouse) 플랫폼 메인에 노출되는 페이지 작업 후에 자체적으로 성능 개선을 시작해보았다. 참고할 수치와 지표는 Pagespeed Insights와 Lighthouse를 참고하여 진행했고, Pagespeed Insights가 점수가 더 낮게 나와서 낮은 점수를 더 끌어올려보자! 해서 Speed Insights를 주로 참고했다. Pagespeed Insights vs Lighthouse 차이점은 크게 없습니다. 다만, Pagespeed Insights는 Lighthouse에서 측정한 값을 토대로 모아서 사이트 성능에 대한 보고서를 제공한다고 합니다. (왜 점수가 그렇게 차이나는지는 아직도 의문) 작업 전 점수 페이지는 서비스별로 1개씩 총 2개를 측정하였다. ) ..

Next js Web worker api 웹툰 번역 툴을 개발하던 중에 psd, psb 파일을 읽어 들이는 시간이 굉장히 오래 걸려서 브라우저가 멈추는 경우가 너무 많았다. 기본적으로 psd, psb 파일은 100MB가 넘는 경우가 많고, 500MB 정도의 크기를 가진 파일도 많았다. 파일을 읽는 동안 메인스레드는 차단되기 때문에, 브라우저가 멈추고 렉이 걸린 것처럼 느껴지는 현상이 있었다. 이 파일 읽기 시간을 어떻게 줄일까 고민을 많이 했고, Web worker를 찾았다. Web worker API ( https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API ) Web worker API는 싱글 쓰레드로 동작하는 자바스크립트의 한계를 좀 넓혀주는데..

Modal 여러개 띄우기 AS IS 기존 모달 사용 방식은 Context안에 children을 보내서 createPortal로 띄우는 방식이었다. 그런데 이 방식은 모달이 하나 뜨면 다른 모달이 꺼져버린다는 것이 문제가 되었다. 모달 위에 확인 모달을 띄워야 할 때가 있는데 이 경우에는 dom 구조 바깥에 뜨는 modal의 z-index를 조정한다고 해결이 되지 않아서 변경하기로 마음을 먹었다. //ModalProvider.js export default function ModalProvider({ children, selector }: Props) { const ref = useRef(null) const [mounted, setMounted] = useState(false) const [modal, ..

Input type이 number일 때 maxLength가 지정이 안돼요 AS IS react hook form 의 Controller에서 인풋과 드랍다운등을 컨트롤 하고 있는데, 이 때 발생한 문제가 인풋에 숫자와 특수기호만 받아야 하고, 최대 길이는 10글자까지 가능해야 하는데, type을 number로 선택해두면 maxLength 옵션이 적용되지 않는 문제였다. ( )} /> TO BE Mui TextField에서 maxLength를 적용하려면 InputProps 안쪽에 정의를 해주어야 한다. type이 text일 때는 inputProps 안쪽에 정의된 maxLength가 잘 적용되지만 type이 number일 경우엔 이 maxLength 옵션이 적용되지 않습니다. 숫자 타입의 경우 문자열에 사용하..