전체 아티클73 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. 타입스크립트 딥다이브 해당 내용은 타입스크립트 딥다이브를 보고, 내용을 요약하고 정리합니다.아는 내용이 섞일 수 있지만 복습차 테크블로그에 정리를 진행하고 있습니다.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. 다국어를 지원할 때 언어에 따라 다른 CSS를 적용하고 싶을 때 목차· 다국어 설정하기· 다국어 스타일 시트 적용하기사내에서 콘텐츠 허브 서비스를 맡아, 개발을 진행하고 있어요 아무래도 국내 시장에서는 큰 점유율을 보유하고 있어 글로벌 시장 진출을 활발하고 있는데, 서비스 별로 가장 중요한 기능 중 하나가 바로 다국어 기능이에요. 입사를 하고 거의 3~4개월만의 연구소 공식 블로그 서비스를 런칭해야하기 때문에 새로 배우는 점이 참 많아요. 그 중 하나가 다국어에 따라 CSS를 변경하고 싶을 때예요.다국어 설정하기다국어 설정을 위해 주 언어가 일본어라면 아래와 같이 설정을 해줄 수 있어요.그 외의 언어들은 다음과 같이 설정할 수 있답니다./* *//* */위와 같이 HTML lang Attribute를 사용하는 이유는 아래와 같아요.웹 접근성 준수검색엔진 최적화 (.. 2024. 5. 31. 개발자는 내가 만드는 제품에 대한 애정을 가져야한다 왜 이런 버그들을 늦게 발견되었는지 알아? 우리가 제품을 많이 써보지 않았기 때문이야 작년 첫 회사에서 필드로 출시하기 위해 준비 중인 제품에 들어갈 웹 에디터를 개발하면서 버그가 발생했다. 출시 일이 얼마 남지 않았기 때문에, 생각보다 긴급 이슈로 분류가 되었고 위와 같은 말을 들었다. 생각해보니 맞는 말이다, 첫 회사는 규모는 크지만 업무 단위는 스타트업처럼 작은 규모로 조직화되어 움직이고 있었고, 전체 제품을 세분화하여 쪼개놓은 팀은 아니었기 때문에 제품 자체를 전반적으로 이해하고 계속해서 트래킹을 했어야했다. 작년까지는 정말 어린 생각을 하고 있었던 것 같다. 주니어 개발자라면 한번 쯔음 거쳐가는 생각을 했다. 개발자라면, 제품에 오류가 없게 개발만 잘하면 되는거 아닌가? 주어진 일을 잘해내는 것.. 2024. 5. 12. 이전 1 2 3 4 5 ··· 13 다음
