분류 전체보기

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

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

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

JavaScript 모듈 시스템에서 export default와 named export는 모두 모듈을 외부로 내보내는 방식입니다. 본 포스팅에서는 각 export의 차이점과 적절한 사용 방법에 대하여 이야기를 나누어보고자 합니다. 1. export defaultexport default는 모듈에서 기본으로 하나의 값만 내보낼 수 있게 합니다. 다음과 같은 상황에서 많이 사용됩니다.단일 값만 내보낼 때 적합 (예: 하나의 컴포넌트, 클래스, 함수 등).내보낸 모듈을 가져오는 쪽에서 임의의 이름으로 import가 가능.// math.jsexport default function add(a, b) { return a + b; }// 다른 파일에서import sum from './math'; // 임의의 이름으..

Next.js 14 버전 프로젝트에서 favicon(이하 파비콘)을 적용하던 도중 한 가지 에러 상황을 마주치게 되었습니다. 문제 상황로컬 개발 환경(localhost)상용 환경(vercel) 로컬 개발 환경에서는 파비콘이 정상적으로 적용되지만 vercel을 통하여 상용 배포를 진행한 경우에는 파비콘이 노출되지 않고 있음.투명 배경 파비콘을 적용하고자 하였지만 투명 배경이 적용되지 않고 흰색으로 노출되고 있음. 해결 방안 Next.js 14 버전으로 업그레이드 되며 파비콘을 관리하는 방법이 변경된 것으로 추정됩니다.https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons Metadata Files: favicon, icon..

TanStack Query(React Query)를 사용하다보면 stale time과 cache time을 직접 조작할 수 있다는 것을 알 수 있습니다. 하지만 막상 stale time과 cache time을 직접 건드릴 일이 생기면 각각 어떤 차이가 있고 어떤 기능을 수행하는지 잘 와닿지 않는 것도 사실입니다. 오늘은 두 가지를 정리해보고자 합니다.본 포스팅은 아래 TanStack Query의 `useQuery` 관련 공식 문서를 정리한 내용입니다. useQuery | TanStack Query React DocsDoes this replace [Redux, MobX, etc]? reacttanstack.com우리는 stale time과 cache time을 명확하게 이해하기 위해서는 TanStack ..

문제 상황 스크린샷처럼 react hooks이 적용된 컴포넌트에서 ‘Warning: React has detected a change in the order of Hook ~’에러가 발생하는 것을 볼 수 있습니다. 문제 확인 에러 문구 그대로 hooks의 순서가 변경됨에 따른 경고입니다. 위 사진에서는 useContext -> undefined 순서로 호출되던 hooks가 useContext -> useState 순서로 바뀐 것을 볼 수 있습니다. hooks의 순서가 변경되면 안되는 이유? 리액트에서 rooks의 주요 제약은 크게 아래 2가지 입니다. hooks는 함수형 컴포넌트 내부, 최상단에서 호출되어야 한다(조건문, 반복문, 함수 내부 X).hooks는 컴포넌트의 re-render마다 동일한 순서로..

문제 상황- git, github를 이용하면서 원격 저장소(remote repository)에 commit을 잘못 push한 경우- 해당 commit 이전으로 되돌리기 위한 방법 해결 방법 원격 저장소에 올라간 커밋 기록을 제거한 뒤, 이를 원격 저장소에 반영하면 됩니다.commit 삭제는 주로 git reset 명령을 이용하며 자주 사용되는 명령어는 아래와 같습니다. 1. 가장 최근의 commit 제거git reset HEAD^ 2. 특정 개수만큼의 commit 제거# 가장 최근의 commit 기록 N개 제거git reset --hard HEAD~N 3. 특정 commit으로 복구git reset --hard  위 명령어를 통하여 각자 자신에게 맞는 commit으로 되돌린 다음, 원격 저장소에 이를 반..