개발 블로깅
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?개발 블로깅/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의 한 분야입니다. 검색 엔진이 완전히 크롤링, 렌더링하고 인덱싱 하기 쉽습니다. 오래된 브라우저를 포함하여 많은 유저들에게 연결합니다. 메타 데이터와 고정된 내부 링크를 유지합니다. 파싱 하고 자바스크립..
-
Next.js Version 11 업데이트 사항 정리개발 블로깅/Next.js 2021. 6. 19. 16:58
21년 6월 16일에 Vercel에서 Next.js의 버전11 업데이트된 사항에 대해 공개했다. perfomance 최적화 이런건 물론이고(?), Conformance랑, Image 최적화 관련, Webpack5 관련 요소들이 새롭게 업데이트 됐다..🙌 Next.js가 갈수록 SEO 전용 프레임워크로 거듭나는 것 같다. 웹 바이탈(Web vital) 개선 요소들을 계속해서 공략해 나아가는 느낌이다. 업데이트 사항 Conformance: 최적의 UX를 제공할 수 있는 최적화된 솔루션을 제공하는 시스템 Improved Performance: Cold Start up Time(Next.js 빌드 및 실행할 때 걸리는 시간?) 최적화. `next/script`: 성능 향상을 위한 third-party 우선순위 ..
-
[2021.06.13] Javascript ECMA 2021 소개개발 블로깅/Javascript 개념 2021. 6. 13. 17:19
replaceAll 기존에는 문자열 내에 특정 문자를 변경하기 위해, String.replace를 이용했었는데, 이것은 문자열 중 가장 앞에 있는 한 자리만 변경해주므로, 모든 문자열을 대상으로 하려면, 'RegExp' 정규식을 통해 처리를 해주었어야 했다. 그러나 이번에 replaceAll() 함수가 추가되면서, 따로 정규식을 통해 처리하지 않아도 되게 되었다. 🙌 'FooBarFoo'.replaceAll('F', 'C'); // 'CooBarCoo' assignment operators 1. ??= 기존에는, 해당 변수가 null 혹은 undefined일 시, 특정 값으로 세팅을 해주기 위해서는 아래와 같이 if문으로 세팅을 해주었었다. if(sense === null || sense === unde..