Jinsi | Tech Jinsi | Tech

React 개발자로서 성능 최적화는 항상 제 고민의 중심이었습니다. useMemo와 useCallback이 의존성 배열 처리와 메모리 할당이 필요하다는 걸 알면서도, 저는 리렌더링 최적화에 굉장한 공을 들였습니다. 솔직히 말하면 babel-traverse 사용법도 완벽히 이해하지 못한 채, AI의 도움을 받아가며 리렌더링 최적화를 위한 eslint-plugin-react-hooks-optimization 플러그인까지 만들어 배포했습니다.  그런데 최근 두 개의 블로그 글을 읽고 제 관점이 크게 바뀌었습니다:React Training의 "React Inline Functions and Performance"Fix the slow render before you fix the re-render이 글들을 읽으..

웹 개발을 하면서 성능 최적화에 신경 쓰다 보면 requestIdleCallback에 대해 들어보셨을 겁니다. 하지만 모든 브라우저에서 지원하지 않아 직접 구현해야 하는 상황도 발생하죠. 오늘은 requestIdleCallback이 무엇인지부터 직접 구현하는 방법까지, 그리고 React에서 사용할 때 주의할 점까지 함께 알아보겠습니다.🧐 requestIdleCallback이 뭐예요?간단히 말해, requestIdleCallback은 브라우저가 할 일이 없을 때 우리의 코드를 실행시켜주는 함수예요. 브라우저가 바쁠 땐 중요한 작업을 먼저 하고, 남는 시간에 덜 중요한 작업을 처리할 수 있게 도와주죠.requestIdleCallback(callback, options);callback: 브라우저가 한가할 ..

웹 개발을 하다 보면 예상치 못한 문제들이 종종 발생합니다.최근에는 기존 홈페이지 도메인에 새로운 페이지를 추가하고 이를 다른 도메인으로 프록시 설정하는 작업을 진행하면서,애플 사파리에서 북마크가 잘못 저장되는 문제를 겪었습니다.이번 포스팅에서는 이 문제를 어떻게 해결했는지, 그리고 왜 Canonical URL 설정이 중요한지에 다뤄보겠습니다. 문제 상황 및 분석: 사파리 북마크가 엉뚱한 URL로 설정되는 이유프로젝트에서는 기존 홈페이지 도메인에 새로운 페이지를 추가하면서, Nginx의 Proxy_pass 기능을 사용해 이 페이지를 다른 도메인으로 프록시 설정했습니다. 그러나 Canonical URL이 기존 홈페이지에만 설정되어 있어, 애플 사파리에서 새로운 페이지를 북마크할 때 잘못된 기본 URL이 저..

회사 업무 중 nginx proxy 처리중에 블로그에 nginx 내장변수 정리를 하면 좋을 것 같아 남겨봅니다. Nginx 내장 변수란?Nginx 내장 변수는 Nginx가 요청을 처리하는 동안 자동으로 설정되는 값들로, 클라이언트의 요청, 서버의 응답, 또는 환경 설정에 대한 다양한 정보를 담고 있습니다. 이러한 변수들은 Nginx 설정 파일에서 직접 사용할 수 있으며, 프록시 설정, 리다이렉션, 로깅 등의 다양한 목적에 활용될 수 있습니다.  1. $host설명: 클라이언트 요청의 Host 헤더 값. 클라이언트가 접속한 도메인 이름을 포함예시:클라이언트가 http://example.com/page1에 접속하면, $host 변수는 example.com이 됩니다.설정 예시: server { ..

안녕하세요!최근 프로젝트에서는 웹폰트 최적화에 대한 중요한 문제를 해결해야 했는데그 과정을 블로그에 공유하고자 합니다.프로젝트 개요현재 진행 중인 프로젝트는 일본어 채용 정보를 제공하는 홈페이지입니다.기획 팀에서는 페이지 내에 들어가는 폰트의 저작권 상 TypeSquare의 웹폰트를 사용하는게 안전하다고 판단하여이를 사용하기로 결정했습니다.문제 발견: font-face 방식의 부재처음 TypeSquare를 사용하면서 @font-face 방식을 사용할 수 없다는 것을 알게 되었습니다.이는 TypeSquare의 폰트 로딩 방식이 @font-face 대신에 자체적으로 제공하는 JavaScript API를 통해 이루어지기 때문입니다.그 이유를 찾아보니 TypeSquare가 폰트 전달 및 사용 추적을 직접 처리하..

입사 후 프로젝트에 바로 투입 되었습니다. 프로젝트 완수 기간 - 3개월, 현 시점 - 기획 진행 중,프론트엔드 1인 도메인 - 클라이언트, 직원 저를 제외한 플랫폼 개발 협업 처음 (기획 1, 프론트엔드 1, 백엔드 2) 그렇기에 이전 회사에서 협업 경험을 가진 2년차 개발자인 제가 리더가 되어 버렸습니다. 속으로 외쳤습니다. 이야.. 아찔한데!! 그런데 사실은 어떡하지라는 기분은 들지 않았어요. 인생사 언제 무슨 일이 일어날지 모르는 것 아니겠습니까!! 어쩌다 리더가 된김에 이전에 여러 팀들과 소통하며 어깨너머로 보던 것을 적용하기로 했습니다! 이왕이면 공부하여 더 나은 환경을 구축하고 싶었지만 거기에 자원을 쏟기엔 시간 초침소리가 귀를 때렸네요! 우선은 기록을 통해 반복적인 업무를 지양하기로 했습니..

이전 해상드론 프로젝트에 미니 컴퓨터 Jetson Xavier를 사용 하였습니다. 그 과정 중 개발환경을 구축하기 위한 최소한 Setting에 대한 내용입니다. Enviment Ubuntu 18.04 zed sdk 3.5 Python 3.7.9 Opencv 4.5.4 Cython 0.28 Numpy 1.21.5 Cuda 10.2 Xavier Linux on 젯슨 자비에 전원 켜기 (작업 시) 배럴잭 (동그란잭) 연결 HDMI 연결로 모니터에 띄우기 필수사항 - 랜선, 키보드 JetPack Install (종단 간 가속 AI 애플리케이션을 구축하기 위한 가장 포괄적인 솔루션입니다. 모든 Jetson 모듈 및 개발자 키트는 JetPack SDK에서 지원) 딥 러닝, 컴퓨터 비전, 가속 컴퓨팅 및 멀티미디어용..

Overfetching 딱 필요한 정보들만 받아올 수는 없을까? 각 팀의 매니저와 오피스 호수만 필요할 때 Underfetching 필요한 정보들을 요청 한 번에 받아올 수는 없을까? 특정 팀의 매니저와 팀원들 명단이 필요할 때