분류 전체보기
-
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.개발 블로깅/기타 개념 2021. 12. 18. 20:43
ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그냥 생각없이 Prettier extension 설치해라, eslintrc 이렇게 세팅해라, 등등.. 따라 하니까 꼬이기도 하고, 저장을 시도하면 자동 수정은 안되고.. 그럴 때마다 속이 터졌는데, 이참에 아예 작정하고 시간 내서 제대로 파악 좀 해봤다. 아마 나처럼 하라는 대로 했는데도 왜 안되는지 궁금할 개발자들이 있지 않을까 싶다.(나만 그런걸까...) 직접 그 원인을 상세히 파악하고 알아보도록 하자. VSCode가 코드의 Lint Error를 잡는 것부터, 저장 시 자동 수정하는 설정까지....
-
Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자)개발 블로깅/Improving Performance 2021. 12. 2. 12:24
Next.js의 Hydrate개념을 아직 모르신다면,이전에 작성했던 Next.js의 Hydrate 글을 먼저 참고하시는 것을 추천드립니다. Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거치게 된다. 💡 Hydrate란? 화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다. 그러나 이러한 Hydrate 방식은 아직 약간의 아쉬운 점이 존재하는데, 그것은 'PreRendering 된 DOM 요소의 모든 Script는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아..
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?개발 블로깅/Improving Performance 2021. 10. 30. 01:00
💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은..
-
Next.js 12 업데이트 사항 정리개발 블로깅/Next.js 2021. 10. 28. 22:13
너무나 빠른 Next.js의 업데이트.. 저번에 Next.11이 발표된 지 2,3달 정도밖에 안 된 것 같은데, 벌써 12가 발표라니.. 거두절미하고 새롭게 업데이트된 사항에 대해 빠르게 알아가 보도록 하자. 목차 프레임워크에서 사용하던 컴파일러를 Rust 컴파일러로 대체함 : 프로젝트 빌드 속도 증가, 새로고침 속도 증가. 미들웨어 : 서버 단에서 미들웨어 처리가 가능한 기능 추가. React 18 지원 : React 18 버전을 지원. AVIF 지원 : webP보다 20% 압출률이 더 좋은 AVIF 포맷 지원. 봇 인식 ISR 폴백 : Google Bot 등의 웹 크롤러에 최적화된 SEO 동작 관련 내용. 네이티브 ES 모듈 지원 : 표준화된 모듈 시스템과의 연계. URL 가져오기 : 모든 URL에서..
-
Preload의 개념, 그리고 올바른 사용법개발 블로깅/기타 개념 2021. 9. 5. 00:54
웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다. Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. 한번 해당 기능이 어떻게 동작하는지 확인해보자. const JenkinsLogo= () => { return ( ); }; export default JenkinsLogo; 간단하게 Next.js 환경에서 jenkins.png 파일을 img 태그를 통해 화면에 띄우는 코드를 돌려보았다. 적용 전 ..
-
Next.js Hydrate를 최적화 시킬 수 있을까 (Partial Hydration)개발 블로깅/Next.js 2021. 8. 12. 21:46
요즘 SEO 향상을 위해서 웹 성능 개선을 계속해서 연구 중이다. (흔히 웹 성능 최적화시킬 수 있는 요소들은 거의 다 진행한 것 같으면서도, 신기하게도 할 것이 계속 나온다...) 요즘에는 프론트엔드 단에서 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 어떻게 더 개선시킬 수 있을지 연구 중인데, 며칠 전 Performance 탭에서 흥미로운 요소를 발견했다. 위 이미지의 하단 쪽을 보면, FP(First Paint)가 일어나기 전까지 Next.js Hytration 작업이 Long Task로 보여지는 것이다. (정확히는 Next.js-before-Hydration이니까, 실제 Hydration 하기 전의 특정 작업으로 볼 수 있다.) 우선 Hyd..
-
Next.js의 Hydrate란?개발 블로깅/Next.js 2021. 8. 8. 23:00
Next.js 프레임워크의 동작원리를 제대로 파악하고 있는 개발자라면 Hydrate에 대해선 이미 익숙한 용어일 것이다. 그러나 Next.js의 주요 동작 방식 중 하나임에도, 눈에 잘 띄지 않아 놓치기도 쉬운 개념인 만큼, 한번 제대로 정리를 하고 넘어가보려고 한다. Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다. 이 과정이 왜 필요한지 간략하게 설명하기 위해, 우선 React에 대해 잠깐 얘기해보자. React의 웹 페이지 구성 원리 React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있다. 그래서 실제 HTML 코드는 안에 내용..
-
자바스크립트 검색엔진 최적화(SEO) 가이드 총 정리개발 블로깅/기타 개념 2021. 7. 20. 23:37
해당 글은 www.onely.com/blog/ultimate-guide-javascript-seo 아티클을 번역한 포스트입니다. 빠른 요약 자바스크립트는 정적 HTML 마크업 언어로 빌드된 웹 사이트 요소들을, 동적으로 동작시키도록 하는 언어입니다. 이 가이드는 자바스크립트 사용으로 인해 사이트의 랭킹이나 사용자 경험이 손상되지 않도록 하기 위해, 필수적으로 알아야 할 모든 것을 다룹니다. What is Javascript SEO? '자바스크립트 SEO'는 JS 기반의 웹사이트로 만들어진 테크니컬 SEO의 한 분야입니다. 검색 엔진이 완전히 크롤링, 렌더링하고 인덱싱 하기 쉽습니다. 오래된 브라우저를 포함하여 많은 유저들에게 연결합니다. 메타 데이터와 고정된 내부 링크를 유지합니다. 파싱 하고 자바스크립..