프론트엔드

CRA에서 craco이용해 @components 절대경로 설정

오랜만에 react로 개발하면서 tsconfig에서 절대경로를 설정을 하는데 안되서 알아보니 cra로 세팅한 경우에는 craco 사용해서 또다른 설정을 해줘야한다. 검색을 조금 해보니 react 버전 18에서는 잘 안된다고 하던데 아래 참고 블로그 따라서 해보니 정상적으로 설정됐다. 며칠동안 설정이 안되서 끙끙 앓았는데 깔끔하게 해결-! Error [Craco-Alias Error] Cannot parse tsconfig.paths.json. Please validate it on https://jsonformatter.curiousconcept.com. 위와 같은 에러 발생 시 tsconfig.paths.json파일 마지막 항목에 ","를 붙엿는지 확인해보자. 지우고 실행하면 해결! json이기 때문에..

[TIL] 브라우저 타임존 테스트

프로젝트를 하다가 timezone 관련 이슈를 겪어보고 나니 신경이 더 쓰이게 됐다. 최근 접속한 브라우저마다 접속한 타임존에 맞는 시간이 출력되길 원해서 테스트하는 방법을 알아보다가 개발자 도구에 그런 기능이 있는 걸 알고 기록하려고 한다. 크롬에서 [F12] - 케밥메뉴 - [More tools] - [Sensors] - Location 에서 드롭다운 아래로 눌러 원하는 타임존 선택!

[TIL] 브라우저 렌더링

사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 렌더링 엔진 : HTML 과 CSS를 파싱해 요청한 웹 페이지를 표시하는 렌더링 엔진 통신 : 각종 네트워크 요청을 수행하는 네트워킹 자바스크립트 해석기 : 자바스크립트 코드를 실행하는 인터프리터 ex) 크롬-v8 UI 백엔드 : 기본적인 위젯을 그려주는 UI백엔드 파트 ex) 버튼, 체크박스 자료 저장소 : 보조 기억장치에 데이터를 저장하는 파트 ex) localStorage, cookie Critical Rendering Path : 렌더링 경로 DOM Tree생성 & CSSOM Tree 생성 → Render Tree 생성 → Render Tree..