전체 아티클136 getComputedStyle과 parseFloat, parseInt의 조합 목차· 기존 방식의 문제점· 효율적이고 더 나은 방식잠깐 정리를 먼저 해보겠습니다 🫨· getComputedStyle로 도출된 크기 값을 split을 통해 가공하지마세요기존 방식의 문제점getComputedStyle에서 출력되는 값들의 경우 px 단위를 붙여 나오거나, pt 단위 등 다양한 단위들과 함께 출력되는 것을 확인할 수 있습니다. 문자열 형태로 제공되기 때문에 split을 통해 단위에 대한 분기 처리로 가공을 한다면, 매우 비효율적인 로직을 제공할 수 있기 때문에 평소 split 형태로 임시 방편의 로직을 작성했던 부분에 있어 해답을 얻고자 포스팅을 진행하였습니다. 평소 비효율적이라고 생각되었던 코드는 아래와 같습니다.const element = document.body.querySelecto.. 2024. 6. 26. React의 커밋 페이즈, 렌더 페이즈 단계 목차· 트리거 단계 (Trigger Phase)· 렌더 단계 (Render Phase)· 커밋 단계 (Commit Phase)리액트 라이프 사이클에 대한 부분을 대강 알고있지만, 누군가 설명을 해보라고 했을 때 설명을 진행하긴 하지만 버벅이곤 합니다. 이런 버벅이는 증상이 아직 익숙하지 않다는 증거라는 생각에 오늘은 커밋 페이즈, 렌더 페이즈에 대한 부분들을 포스팅해보려고 합니다. 리액트 렌더링 단계에는 렌더 단계(Render Phase)와 커밋 단계(Commit Phase)가 있는데 렌더 단계에서는 화면에 그릴 것들을 파악하고, 커밋 단계에서는 직전에 파악한 것들을 화면에 적용합니다. 리액트가 초기 렌더링 동작과, 리렌더링시에 각 단계에서 어떤 것들을 수행하는지 살펴봅니다.잠깐 정리를 먼저 해보겠습니.. 2024. 6. 24. Vite 환경에서 구글 애널리틱스 3분만에 적용하기 목차· 패키지 설치하기· vite.config.js에 설정 추가하기· vite.config.js 환경 변수 설정어쩌다보니 3분 카레같은 글들만 작성을 하게 되는데, 오늘은 구글 애널리틱스를 Vite 플러그인을 통해 쉽게 적용을 할 수 있는 방법에 대해 알아보려고 해요. 다른 블로그에는 리액트에서 구글 애널리틱스를 연동하는 방법을 다양하게 잘 알려주고 있지만, 해당 플러그인의 경우 비교적 애널리틱스 적용을 빠르게 해줄 수 있어요.패키지 설치하기자신의 패키지 매니저에 맞는 방식으로 vite-plugin-radar 를 설치합니다. 뒤에 수식을 붙여 의존성으로 설치하는 것을 추천해요.npm i --save-dev vite-plugin-radaryarn add -D vite-plugin-radarpnpm add .. 2024. 6. 12. JSDoc를 통한 자바스크립트 타입 힌트 제공하기 목차· JSDoc이란?· 변수타입· 함수 타입· 타입 정의· CallBack· DOM시작하기 전에 잠깐의 팁을 가지고 왔는데요, VS Code IDE를 사용하고 있다면, 상단에 @ts-check를 주석으로 추가하면 TypeScript처럼 타입 및 에러 체크를 할 수 있어요 👀JSDoc이란?JSDoc은 자바스크립트 API 문서 생성기입니다. 자바스크립트 소스코드에 JSDoc 형식의 주석을 추가하면 API를 설명하는 HTML 문서를 생성할 수 있어요. JSDoc 주석은 일반적인 주석과 다르게 /** */ 로 기술할 수 있어요. 사용 예제를 한번 살펴볼까요? 보통은 JSDoc을 사용할 때 함수 위에 많이 사용을 하고 있지만, 타입스크립트를 아직 도입하지 않은 기업의 경우 타입에 대한 사전적인 정보 제공을 위.. 2024. 6. 11. 타입스크립트 딥다이브 해당 내용은 타입스크립트 딥다이브를 보고, 내용을 요약하고 정리합니다.아는 내용이 섞일 수 있지만 복습차 테크블로그에 정리를 진행하고 있습니다.2024.05.31 자로 업데이트 되었으며, 학습한 내용이 계속 업데이트 될 예정입니다. 원시 데이터에서 동등 연산자와 일치 연산자 차이자바스크립트에서 동등 연산자(==), 일치 연산자(===)가 존재합니다.이때 동등 연산자는 탄력적으로 string을 number로 변환합니다.console.log(5 == '5') // trueconsole.log(5 === '5') // falseconsole.log('' == '0') // falseconsole.log(0 == '') // trueconsole.log('' === '0') // falseconsole.log(.. 2024. 5. 31. Next 13에 Vanila Extract 적용하기 보호되어 있는 글 입니다. 2024. 5. 31. 이전 1 2 3 4 5 6 7 ··· 23 다음
