IT191 GIT - Add 개념 working directory 에서 stage area로 변경하여 git이 해당 파일의 변경을 추적한다 명령어 git add ${filnename} 원리 파일이 추가되면, index 폴더에 파일이름과 파일 내용에 대한 hash 값이 추가되어 있다. objects 폴더에 hash 값과 파일 내용이 추가되어 있다. 정리 즉, 다른 파일이 동일한 내용으로 추가된다면, 파일 이름만 추가되고 objects 내에 hash값은 추가되지 않는다. 이렇게 하는 이유는 대용량 파일을 비교 분석에 대한 성능 증가 및 파일 크기 감소에 효율적 Reference https://www.youtube.com/watch?v=IU2ByZ-V26Y 2023. 6. 13. 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. Next.js 3개월 사용 후기 13.0.0 version 기준 페이지간 이동 시 왜 getServerSideProps를 항상 거쳐야 한다. 불필요한 API 호출이 불가피하다. 필요에 따라 skip 할 수 있으면 좋을거 같다. 해당 요청은 몇 년째 계속 있었지만, 아직 해결되지 않았다. dynamic import, preload가 기본적으로 제공되어 너무 편하다. 이러한 로직을 구현하다보면 코드가 더러워지는데... 단, production에 올려야만 preload가 동작한다는걸 명심하자... 왜 local build에서는 안되게 해놨는지 모르겠다. 개발자들이 좋아하는 이유는 알겠다. 귀찮은걸 다 해주기 때문에 비지니스 로직에 집중할 수 있다. 신입이 Next.js만 잘 알고 개발한다면, 왠만한 중상급 개발자만큼 완성도 높은 퀄리티를 보.. 2023. 5. 19. 이전 1 ··· 29 30 31 32 다음
