오블완

들어가며 프로젝트 성능 개선의 일환으로 태그를 이용하여 Kakao Javascript SDK Script를 사용하던 부분을 next/script 컴포넌트를 사용하도록 바꾸고 lazyOnload을 적용하고자 하였습니다.   그리고 해당 스크립트를 깔끔하게 next/head 안에 넣어두고 테스트 서버에 배포하였는데... (사실 next/head 안에 넣은 것은 공식 문서에서 제공하는 형태를 최대한 가져가고자 하였습니다.)   오잉..? 태그 안에 해당 script가 들어가지 않는 모습을 볼 수 있었습니다. next/head가 아닌 다른 곳에 next/script를 위치시키자 바로 문제가 해결 되었습니다.  무엇이 문제일까?(참고: next/script 뿐만 아닌 script 역시 head 태그 안에 들어..

들어가며 브라우저를 위한 스크립팅 언어로 만들어진 자바스크립트의 처음 모습과 지금의 모습은 많이 달라졌습니다.처음 나왔을 당시에는 자바스크립트를 이용하여 수십 줄 이상의 코드를 짜는 일도 많지 않았지만, 점차 유명세를 타게 되며 API를 확장하고 코드 줄 수가 많아짐에 따라 실행 엔진을 최적화하는 작업이 이루어졌습니다.  첫 자바스크립트의 시작은 인터프리터 언어였습니다. 하지만 지금은 컴파일러의 특성도 동시에 갖추고 있습니다. 정확히 무엇을 기점으로 변화하게 된 것일까요? 그것은 바로 V8 엔진입니다.   V8 엔진? V8 엔진은 Google 사의 오픈소스로 대중적으로 많이 사용되는 자바스크립트 엔진입니다. Node JS Runtime과 Chrome Browser 환경에서 사용되고 있습니다. 자바스크립트..

시작하며 React 프로젝트를 하다 보면 특정 동작을 오직 한 번만 실행하거나, 중복 호출을 막아야 하는 상황이 자주 발생합니다. 특히, API 호출이 불필요하게 여러 번 호출될 경우에는 성능에 영향을 줄 뿐만 아니라 더 나아가 데이터베이스 무결성에 영향을 줄 가능성이 있습니다. 오늘은 useEffect를 활용하여 앞선 문제를 간단하고 효율적으로 해결하는 방법을 소개하고자 합니다. 왜 useEffect를 사용할까? React에서 상태 관리를 위한 useState와 달리 useRef는 값이 변경되어도 렌더링에 영향을 주지 않으며 값이 동기적으로 즉시 변경된다는 특징을 가지고 있습니다.  useRef의 주요 특징1. 렌더링과 독립적ref 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.불필요한 렌더링을 방지..

들어가며  요즘 주변 개발자 분들과 이야기를 나누면서 오픈소스 기여에 관심을 가진 분들이 제 생각보다 많다는 것을 느끼게 되었습니다. 오픈소스 기여의 중요성과 그 가치에 대해서는 시간이 지날수록 많은 개발자들이 강조하는 요소 중 하나인 것 같기도 합니다.  학부생 시절에 오픈소스 기여의 중요성에 대한 강연도 몇 차례 있었고 인턴을 경험했던 회사 중 오픈소스 서비스를 제공하는 곳도 있었기에 중요성에 대한 이야기를 특히나 더 많이 들었던 것 같습니다. 오픈소스 기여의 효과 많은 사람들이 오픈소스 기여가 중요하다는 말을 하고 실제 기업에서 오픈소스 기여자를 우대조건으로 두기도 합니다. 그렇다면 오픈소스 기여를 한다면 정확히 무엇에 도움이 될까요? 제 주관적인 견해는 아래와 같습니다.오픈소스 커뮤니티에서 활동하..

시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Request Waterfall을 보며 특별한 문제가 없는지 확인해본 결과 아래와 같았습니다.    원인 script 태그의 위치가 태그 안쪽에 위치한 것이 PARSER-BLOCKING의 원인이었습니다. 해당 코드의 히스토리를 살펴보니 KAKAO JS SDK 탑재 공식 문서에 기재된 컨벤션을 유지하기 위하여 태그 안쪽에 위치하도록 작성된 것으로 보였습니다.  해결 및 처리 방향 진행하는 프로젝트의 경우에는 Next.js를 사용하고 있었기 때문에 script 태그를 next/script 컴포넌트로 교체하는 작업을 진행하였으며, Kakao JS S..

시작하며 시간이 지남에 따라 웹과 웹앱 애플리케이션은 더 많은 데이터 통신, 복잡한 UI 구성, 다양한 애니메이션과 많은 이미지 처리 등 처리하는 태스크들이 많아지게 되었습니다.  사용자에게 다량의 정보를 가공하고 더 보기 좋은 웹 애플리케이션을 제공하는 것은 큰 의미가 있겠지만 많은 것을 제공함에 따른 성능 저하로 인하여 사용자 경험이 떨어지기 쉬워졌습니다.  웹 페이지 성능 개선을 위한 최적화 작업은 웹 서비스를 제공하는 경우, 서비스 고객의 네트워크 전송량, CDN의 비용 등 여러 방면과 밀접한 연관을 가지고 있는 만큼 중요해졌습니다.    Google Chrome에서 제공하는 Lighthouse라는 Dev tool을 이용하게 된다면 웹 페이지의 성능을 쉽고 직관적이게 확인할 수 있습니다. 오늘은 ..