React/고민거리들(10)
-
[TIL] React.StrictMode는 두 번 렌더링 한다.
사건의 발단은 이렇다. Three.js를 React에서 다루면서 페인팅이 두 번 되는 느낌이 들었다. (개인 플젝 뿐만 아니라 처음 배우면서 썼던 Next.js에서도 두 번 그려졌다.) useEffect에서 렌더링이랑 카메라랑 오브젝트랑 모든 걸 다루기 때문에 repainting이 되는 순간 조명도 두 배! 오브젝트도 두 배! 가 되버린다. 사실 분명 예전에도 여러 번 타는 걸 본 적이 있는데 별 생각이 없었어서 냅뒀었다. 의존성 문제인가 하고 사이드 이펙트를 다 뒤졌는데 결론은 바로 제목에 써놓은 것처럼 React.StrcitMode가 문제였다. 보통 CRA로 만들어지는 프로젝트는 기본적으로 StrictMode로 나오게되니.. 뭔가 불안하지만 일단 Index.tsx에 있는 React.StrictMode..
2022.11.12 -
[React] github page 그리고 react-router-dom
deeplink를 사용해볼 겸 간단하게 배포를 해봐야했다. static 웹페이지라면 github에 간단하게 배포를 해볼 수 있기 때문에 시도를 해보려고 했으나 뜻밖에 react-router와 github page에 대해서 공부하게 된 내용을 정리해보려고 한다. 프로젝트 별 Github Page 깃헙에서 새로운 레포를 만든 다음, 그 레포 이름을 `${MY_GITHUB_ID}`.github.io 이렇게 만들어주면 배포될 수 있는 페이지를 볼 수 있다고 알고 있다. 라우팅 되는 주소는 당연히 루트 주소! 루트 주소에 만들어도 꽤 유용하지만, 매번 다른 프로젝트를 만들 때 마다 루트를 태워보내는건 무척 비효율적이다. 이번 내 프로젝트 명이 "Mintty" 이니, 나의 경우에는 howdyfrom2019.gith..
2022.10.03 -
[React] 리빙포인트: 주석 간지나게 달기😎
유튜브에서 코딩애플 채널을 참 좋아하는데, 너무 비전공자, 초보자들 위주로 타깃하지도 않고 중급자들이 알기 힘든 너무 전문적이고 지엽적인 지식을 다루지도 않는다. (그리고 그냥 재밌다) 자바스크립트 20년차 개발차처럼 주석 다는법이라는 영상을 보고 너무 신기했다. 방법은 아주 간단하다. /** * @contents: 글자로 nav표현하고 싶을 때 배열로 넘겨주세요. * @children: 맘에 안들면 입맛대로 만들어서 넣어주세요. / 평소처럼 주석 템플릿 안에 *(asterisk)를 하나만 넣지 말고, 두개를 넣으면 된다. 그리고 그 안에서 @를 사용하면 해당 컴포넌트에서 쓰이는 interface props의 간단한 설명을 같이 넘길 수 있다. 이렇게 해두면 interface의 변수명만으로 알 수 없는 ..
2022.09.28 -
[React] 리빙 포인트: Css in JS로는 font-face를 유니코드 별로 다르게 넣을 수 없다.
안녕하세요! 프로젝트를 세팅하다보면 이런 요구 사항을 받는 경우가 종종 있습니다. 한글은 Noto Sans KR로, 영어는 Arial로 가능한가요? 1. @font-face의 기본 당연히 가능하죠! css에서는 @font-face라는 문법을 지원한답니다. @font-face { font-family: Noto Sans KR; font-style: normal; font-weight: normal; // 여기에서 url로 지정해주면 됩니다. src: url("YOUR_FONT_PATHS"); } 기본적으로 이 스타일을 font-family로 지정해주고, style(Italic, oblique 등), weight(bold, bolder 등)도 지정해줄 수 있습니다. 만약 요청사항 처럼 다른 유니코드로 지정해..
2022.09.06