시럽로그

이전에 작업하던 리액트를 타입스크립트로 전환해보자! 1. Typescript 관련 패키치를 설치한다. pnpm install --save-dev typescript @types/react @types/react-dom 2. 명령어로 tsconfig.json 생성 npx tsc --init 난 자동으로 생성된 tsconfig.json이 주석으로 도배되는 등 너무 난잡해서 React + ts 에 적합한 권장 설정을 찾아 넣었다. { "compilerOptions": { "target": "ES2016", "module": "commonjs", "lib": ["DOM", "ESNext"], "jsx": "react-jsx", // React 17 이상일 경우 "moduleReso..

우리 회사는 매우매우 레거시 코드를 사용하고 있고FTP 방식으로 실서버에 적용하고 있어, 마이그레이션은 내 마음 속 숙제였다.입사 이후부터 줄곧 마이그레이션을 주장하고 있지만최소 15년간 누적된 스파게티 코드로 인해 사이트의 복잡도가 높아 그 누구도 선뜻 내 제안을 받아들이지 못했다.입사한 지 2년이 지난 최근에야 부분적 마이그레이션을 적용해서 점차 확대해가는 방식을 승인해주셨는데,이전에 시도했을 땐 '이렇게 복잡하면 안하느니만 못한데...?' 수준이라 포기했었다.그리고 최근 다시 찾아봤는데, vite로 엄청 쉽고 간단하게 할 수 있는 것이었다.! 1. 먼저 로컬에서 vite로 React 프로젝트를 생성한다.pnpm create vite@latest php-to-react --template react..

React 공식 문서를 다시 보기 시작했다.와중에 마주친 익숙하지만 낯선 개념, 클로저  요즘 구글링이나 AI가 워낙 잘 되어있어서 정보성 글을 내가 굳이 정리할 필요가 있을까 싶었는데,내 언어로 내가 이해하면서 정리해보자는 게 뽀인트...  자바스크립트에서 함수 안에 있는 변수는 보통 함수가 끝나면 없어진다. 요걸 가비지 컬렉션이라고 하는데, 사용하지 않는 메모리를 자동으로 정리해주는 로봇청소기라고 생각하면 된다. 클로저 설명하다가 웬 가비지 컬렉션?클로저를 사용하면 함수가 끝난 후에도 그 안의 변수에 접근할 수 있다.로봇청소기(가비지 컬렉터)가 일을 못하게 하는 것! function outer() { let count = 0; // 이 변수는 원래 함수가 끝나면 삭제됨 return func..

최근 자사 사이트에서 이벤트를 하면 서버 지연 시간이 길어져 사이트 최적화에 신경을 많이 쓰고 있다. PageSpeed Insights나 lighthouse를 이용해 개선할 점과 개선이 되었는지 여부를 확인하곤 하는데 그 정확한 의미를 찾고 되짚어보고자 한다. Web Vitals, create-react-app을 하면 default로 들어가있는 성능 측정 파일이다. 웹 바이탈 측정항목은 발전하고 바뀌지만, 현재 3대 지표는 로드(LCP), 상호작용(FID), 시각적 안정성(CLS)로 구성되어 있다. LCP(Largest Contentful Paint : 최대 콘텐츠 렌더링 시간) 사용자가 처음 페이지로 이동한 시점을 기준으로, 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간 이전에는 웹 개발자가..

var를 let으로 일괄 변경했다가 큰 문제가 생겨^^... '아 정말 생각 없이 리팩토링했구나' 반성하며 쓰는 글. 일괄 변경하면 무슨 문제가 있나고요? 저도 알고 싶지 않았습니다... 어떤 문제가 발생하는 지 알기 위해서는 두 가지 방법의 차이점부터 이해해야 한다. 스코프(scope): var는 함수 스코프를 가지고 있어 함수 내에서 선언된 변수는 함수 내에서만 유효하다. let은 블록 스코프를 가지고 있어 블록 내에서 선언된 변수는 해당 블록 내에서만 유효하다. function example() { if (true) { var x = 10; // 함수 스코프 let y = 20; // 블록 스코프 } console.log(x); // 10 console.log(y); // ReferenceError..