본문 바로가기

분류 전체보기307

React component, preload 로 최적화 하기 하려는 것 dynamic import로 적절한 시기에 preload 하여 불필요한 스크립트 로드를 죄소화해보자 적절한 시기란 - 버튼을 클릭 하기 전. 즉 버튼을 hover 했을 때 (로드할 스크립트 커서 생각보다 느리다면 비 추천) - 컴포넌트가 마운트 된 이후 즉, 로딩을 최대한 늦추는 것이 목적 hover 되었을 때 onMouseEnter function 컴포넌트가 마운트 된 이후 useEffect(() => { // 여기서 dynamic import }, []) 2023. 5. 27.
Code splitting using 'Loadable' 요약 code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다. 이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다. 동작 방식 /home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다. 그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다. 적용 위치 해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 .. 2023. 5. 27.
Headless Component 개념 기능은 있지만 스타일이 없는 컴포넌트 도입이 필요한 이유 기능과 스타일이 공존한 컴포넌트는 재사용하기가 어렵다. 기능 추가하려니 스타일이 깨지고, 스타일을 추가하려다보니 기존 UI에 side-effect가 생긴다. 그래서 비슷한 컴포넌트를 계속 만들게 되는데.. 이는 변경이 빈번하는 프로젝트에서는 적합하지 않다. 컴포넌트를 기능만 담당하는 것만 하나 만들어서 각자 다른 스타일을 입혀 재사용이 가능한 컴포넌트를 만드는것이 좋겠다. How 인터페이스 먼저 고민하기 의도가 무엇인가? 이 컴포넌트의 기능은 무엇인가? 어떻게 표현되어야 하는가? 분리하기 복잡도를 낮추는가? 재사용 가능한 컴포넌트가 만들어지는가? 구현 custom hook context Headless UI Library https://hea.. 2023. 5. 27.
결혼식을 준비하는 신랑의 자세 (3) 스냅사진 야외에서 찍는다면, 날씨를 꼭 고려해야한다. 필자는 4월에 진행했는데 너무 추워서 벌벌 떨면서 촬영에 임했다. 제주도 및 해외에서도 찍는 커플들이 있는거 같다. 야외에서 찍을 때에는 꼭 사람 없을 때 찍어야 한다. 사진찍을 때 주변 사람들이 처다봐서 촬영에 집중이 안되기 때문이다. 전날 머리를 다듬었다. 메이크업을 해주는 곳에서도 가능하지만 가격이 너무 부담스러웠기 때문이다. 샾에서 내일 결혼식 촬영이라서 잘 부탁드린다고 말씀드리면 조금더 신경써주신다. 아침 일찍 일어나 메이크업을 받으러 가기전 본인은 어떤 스타일의 해어와 메이크업을 받을지 정하고 방문하는 것이 좋다. 연예인들 해어스타일을 참조하여 갔다. 간식은 한입에 바로 먹을 수 있는 것들로 구성하는 것이 좋다. 초콜릿, 에너지바 등등. 바.. 2023. 5. 25.
결혼식을 준비하는 신랑의 자세 (2) 축가 부탁 신랑 신부 지인 중 노래 제일 잘하는 분에게 부탁하면 되거나 본인이 직접 부르면 됨. 주변에 마땅히 노래 잘 부르는 사람이 없고, 본인이 하기 싫으면 누군가 찾아야 하는데... 이럴 때 너무 어려움 저는 축가 부탁 할 때 소고기를 대접해드렸습니다. 적어도 이 정도 성의는 있어야 한다고 생각합니다. MR도 제가 직접 구했습니다. 사회 부탁 축가보다 더 중요합니다. 이유는 정말 아무나 맡기면 결혼식 전체가 엉망이 될 수 있기 때문이죠. 보통 신랑의 친한 친구가 봐주는데, 발음을 정확하게 못하거나 주변 상황을 보지 않고 리딩하면 망치기 때문에 이런 부분에 걱정이 없는 사람에게 부탁하는게 좋습니다. 신부 / 신랑 지인 중에 정말 봐줄 사람이 없다면 결혼식장에 전화해서 사람을 고용하겠다고 하세요. 이게.. 2023. 5. 24.
엄습하다 엄습하다 개념 뜻하지 않은 사이에 습격하다 감정, 생각, 감각이 갑작스럽게 들이닥치다. 예) 갑자기 돈이 모자랄 수 있겠다는 불안함이 엄습해왔어. 한문풀이 掩襲 掩: 가릴 엄 襲: 엄습할 습 엄습하다를 이용하여 예문을 만들어 댓글로 달아주세요. 직접써보면 기억이 더 오래 남습니다. 2023. 5. 23.

티스토리툴바