JavaScript
-
React Compiler 파헤치기개발 블로깅/React 개념 2024. 7. 24. 02:20
우리는 리액트에서 렌더링 최적화를 위해, 변화되지 않는 부분들을 리렌더링 되지 않도록 useMemo, React.memo, useCallback Hook을 사용한다. 그러나 이러한 함수들을 사용할 때, 정확하게 필요한 곳에 적용하여 완전히 렌더링 최적화를 시킬 수 있다면 아주 좋겠지만, 사실상 Deep하게 이러한 위치를 찾는 것과 리렌더링 최적화 분석을 하는 것이 굉장히 까다롭고 시간이 들어간다.적절한 곳에 사용하지 못하면 해당 Hook에 대해 큰 이점을 챙길 수 없을 뿐더러 그렇다고 모든 곳에 메모제이션 처리를 해버리면, 그만큼 메모리에 저장되는 메모제이션 상태가 많아지기 때문에 성능에 악영향을 끼칠 수 있게 된다.그만큼 React 내에서 메모제이션 기능을 통한 렌더링 최적화를 적용하는게 마냥 쉽지 않..
-
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는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아..
-
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에서..
-
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의 한 분야입니다. 검색 엔진이 완전히 크롤링, 렌더링하고 인덱싱 하기 쉽습니다. 오래된 브라우저를 포함하여 많은 유저들에게 연결합니다. 메타 데이터와 고정된 내부 링크를 유지합니다. 파싱 하고 자바스크립..
-
[2021.06.11] Production Environment에서 SourceMap 보안 이슈 해결개발 블로깅/오늘의 TIL 2021. 6. 11. 19:07
내가 직접 작업하는 프로젝트에 Build 후 Production 환경에 업로드 시 Source map File이 함께 올라가는 이슈가 있었다. 원래 Production 환경에 소스코드를 배포할 때, Webpack Build를 통해 기존 코드를 Uglify하게 만들어 업로드를 한다. 그러나 Source Map 파일이 Production 환경에 같이 올라가면, Source Map 파일을 통해 Uglify JS 파일들이 기존에 어떻게 작성되어있는지 트래킹이 가능하게 되어버리는 보안 이슈가 발생한다. 이러한 기존 코드를 파악하지 못하도록 일반적으로는 Source Map을 따로 업로드를 하지 않는 것이 권장된다. Next.js 환경에서는 Production Build 시에는 Source Map File을 생성하지..
-
[21.06.05] 비동기 처리? 그래도 싱글 스레드인 것이 함정인 자바스크립트개발 블로깅/Javascript 개념 2021. 6. 5. 14:44
자바스크립트를 다루는 개발자라면 웹 서비스에서 필수로 쓰이고 있는 Javascript가 싱글 스레드(Single Thread) 기반으로 동작한다는 것을 알고 있을 것이다. 그리고 이러한 싱글 스레드의 한계를 넘고자, 비동기(asynchronous) 동작을 제어할 수 있는 Event Loop라는 개념이 등장하면서 AJax, 그 뒤로 Promise, async/await 등 비동기 동작에 대한 제어를 쉽게 할 수 있는 키워드가 속속히 등장하기 시작했다. 그만큼 싱글 스레드 기반임에도, 멀티 스레드 못지않은 Task 동작을 시키고 이를 더 쉽게 제어하기 위해 계속해서 발전되어 왔다. 하지만, 자바스크립트는 여전히 싱글 스레드이다. 더 Row Level 단으로 따지고 보면, 비동기적으로 동작하는 Task들도, ..