분류 전체보기
-
자바스크립트 검색엔진 최적화(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..
-
[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들도, ..
-
[2021.05.02] 웹 성능 최적화를 위한 Webpack Bundle Size 줄이기개발 블로깅/Improving Performance 2021. 5. 2. 13:14
요즘 웹 페이지의 Build 최적화를 위해서 Bundle 사이즈를 줄이는 작업을 하는 중인데, 새롭게 알게 된 내용에 대해 정리해 보려고 한다. # Webpack Bundle Analizer Webpack Bundle Analizer를 이용하면 Build된 Bundle 파일의 상태를 아래처럼 시각화 하여 볼 수 있다. 우선 Chunk 파일을 어떻게 분리할지 Webpack에서 설정을 해주지 않으면, 기본 설정인 페이지 별로 Chunk 파일이 분리 되도록 되어있다. 하지만 이러한 방식은, 각 페이지에서 동일하게 사용되는 코드가 중복으로 들어가게 된다. 현재 내가 작업 중인 프로젝트의 Chunk를 확인해보면, 각 페이지 별로 Sentry 라이브러리를 사용하는데, 각 페이지의 Chunk 파일마다 Sentry 관..
-
Next.js Pre-Rendering(Server-Side-Rendering) 함수 정리개발 블로깅/Next.js 2021. 4. 2. 15:05
업무 시간에 시간이 붕 떠서,... Next.js Document를 정독했다.. 그래서 Doc 보면서 공부한 내용들을 블로그에 정리해보려고 한다. Hydration Next.js에서는 기본적으로 Page 별로 라우팅 처리가 되어 있다보니, 페이지 별로 데이터를 주고받는 등에 대한 association하기가 힘들수도 있으나, 이러한 점을 최소한의 자바스크립트 코드로 서로 연결을 해서 association이 가능하도록 한다. 그리고 브라우저에 의해 해당 페이지가 로드되면 이 연결되어있는 코드가 동작하면서 인터랙션이 가능하다. SPA에서 상태관리 라이브러리를 설정하는 것은 쉬우나, Next.js와 같은 환경에서는 추가 설정이 필요로 한데 이게 Hydration이 가능하도록 하기 위한 작업인 듯 하다. Pre-..
-
웹 성능 최적화를 위한 Tree Shaking 소개개발 블로깅/Improving Performance 2021. 3. 27. 16:36
최근 웹 성능 최적화 관련해서 계속해서 공부 중인데, Tree Shaking이라는 새로운 개념에 대해 알게 되어서 블로그로 정리해 보려고 한다. 한 줄 소개 나무를 흔들어서 죽은 나뭇잎들을 떨어뜨리듯, 코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 뜻으로 Tree Shaking이란 이름이 붙여졌다고 한다. 개념 소개 자바스크립트에서 주로 작업할 때, 여러 코드를 모듈 형식으로 파일 별로 관리하며 ES6 문법을 통해 export, import 해서 사용하게 된다. import * as util from '../utilFile'; 위 코드를 보면, utilFile이라는 파일에 있는 모듈을 import 해서 가져오게 된다. 여기서 궁금한건, 저 utilFile 내에 얼마나 많은 모듈 코드가 있을 것..