DOM, CSSOM 생성 → Render Tree생성 → Layout 단계 → Paint 단계 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용하는데, 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP 라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. 서버로부터 받은 HTML, CSS를 다운받은 후 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML과 CSS를 파싱 후 DOM 트리, CSSOM트리를구축함 2. Javascript를 실행 *HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됨 -> DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립..

👀타입스크립트 + 리액트로 프로젝트를 진행하던 도중 만난 에러 Property 'name' does not exist on type 'EventTarget'. ''EventTarget' 형식에 name 속성이 없습니다.' event 타입으로 MouseEvent가 지정된 경우 브라우저마다 MouseEvent가 가지고 있는 속성이 달라서 TS에서 공통적으로 만들어놓기 어렵기 때문에 MouseEvent의 경우에는 속성을 지정하면 타입 에러가 난다. 해결방법 1. instanceof 를 사용하여 event.target이 태그(Element)의 자식이라고 명시해주기 if (event.target instanceof Element) if (event.target instanceof HTMLDivElement) 1...

👀웹 포트폴리오 완성 후 배포과정에서 겪은 문제 style-components 의 createglobalstyle 을 사용하여 font-face, cursor을 지정 했다. public 폴더에 해당 폰트, 이미지를 넣어두고 src 폴더의 globalstyle 에서 위와 같은 코드로 경로 설정을 하고.. 로컬에서는 잘 적용이 되었지만 gitgub 배포시 해당 폰트와 커서 이미지를 불러올 수 없다는 404 에러가 나타났다. 깃헙 페이지 배포를 하며 homepage url 경로를 설정하는데 , 웹펙에서 해당 처리가 되지 않았기 때문이였다. 구글링 구글링.. public폴더에 파일을 넣으면 웹팩에서 처리 되지 않습니다. 대신 빌드 폴더에 그대로 복사됩니다. 폴더의 자산을 참조하려면 public이라는 환경 변수 ..

🚀 썸네일 메이커 링크 : https://young-yoii.github.io/thumbnail-maker/ ✅ 개발 기간 기본 기능 구현: 3일 리팩토링(ref - reducer - redux-toolkit) : 5일 ✅ 개발 계기 미X캔버스, 온라인 포토샵, 어도비 포토샵.. 블로그 썸네일 하나 만들기 위해서 소요되는 시간이 아까웠다!!! 토이프로젝트로 뭘 해볼까 하다가 썸네일을 간단하게 만들어주는 앱을 제작하게 되었다. 본 게시물의 썸네일도 해당 앱으로 만들었는데 아주 간편하고 좋다^-^ 또, 타입스크립트와 리덕스 툴킷을 사용해서 개발을 진행해보고 싶어서 해당 프로젝트에 모두 적용해보았다. ✅ 주요기능 랜덤 그라디언트 배경 이미지 첨부 기능 완성된 썸네일 다운로드 ✅ 제작 후기 제작을 시작하고 구글..

마이페이지 정보 수정 시 인풋의 내용을 수정 중 취소를 누르면 원래 데이터를 나타내고, 확인을 눌렀을 때 수정 된 데이터를 보이게 하고 싶었음. (아래 이미지 참고) - 처음에는 input에 value로 받아온 값을 지정해주고, 버튼에 onChange 이벤트를 사용하여 내용을 수정 할 수 있도록 함. 그러나, onChange는 인풋의 내용이 변경될 때 마다 리렌더링 되므로 중간에 취소 버튼을 누르더라도 수정된 내용이 반영되게됨. - input에 value, onChange 대신에 defalutValue 사용 -> 취소 시 원래의 데이터가 보이지만, 리렌더링이 되지 않으므로 확인을 눌렀을 때에도 수정내용이 반영되지 않음. - useRef 를 사용 => input의 내용이 저장될 useState를 만들고 처..

모달창에서 버튼을 통해 다른 페이지로 navigate를 해주거나, link를 사용하여 페이지 이동을 할 때 해당 에러메세지가 나타남. *모달은 react-redux-toolkit 을 사용하여 전역적으로 관리되고 있었고, 구글링을 해보니 보통 리덕스에서 해당 에러가 나타난다고 .. 근데 분명 리덕스를 사용한 로직에는 문제가 없었다. - 모달을 사용하는 페이지로 이동 했을 때에 해당 에러가 나타나고, 모달이 없는 페이지는 에러가 없이 잘 이동됨. - 모달이 열려있는 채로 다른 페이지에 이동하면 해당페이지에 있는 모달이 열린채로 렌더링 되어서 에러가 나타남. - map 함수를 통해 api로 받은 데이터들을 렌더링 해주고 해당 데이터를 자세히 보기 위해 '더보기' 버튼을 클릭 하면 모달창이 열리면서 해당 데이터..