React42 [optimization]최적화 불필요한 css 제거해보기 보통 초보 개발자들은 성능 최적화를 고려하지 않고 무작정 코딩을한다.(나 같은 사람) 이런 불상사를 막기위해 성능 최적화를 알아보자 ! 개인 프로젝트 같이 자그마한 프로젝트를 진행하는 경우에는 크게 신경을 쓰지 않아도 된다. 하지만 수 많은 사용자들이 몰리는 사이트라면 ...? 당연히 속도가 빨라야한다. 그렇게 하기 위해 발버둥쳐서라도 메모리 사이즈를 줄이고 불필요한 코드를 줄이고 이미지 사이즈도 줄이고.. 역시 날씬한게 짱인가? 아무튼 이번에는 코드단에서 불필요한 Css를 제거할 것이다 ! 위의 이미지는 Lighthouse를 통한 사이트 성능 검증인데 굉장히 구리다. 어느정도 개선 시켜봐야겠다. * Lighthouse 보는 방법은 Chrome인 경우 F12 mac : command + option + .. 2021. 11. 22. [Nextjs] getInitialProps should resolve to an object오류 진짜 한참을 삽질하다가 알아낸 오류 "getInitialProps should resolve to an object" 라는 오류 메시지인데 nextjs로 개발중에 getInitialProps 로 query 내용을 출력해보고 싶었다 단지 출력만 !!!! 근데 왜 날 괴롭히냐고,, 해결 방법은 엄청 간단했다 단지 return {} 을 적어주면 된다는 거... object를 return을 안 해줘서 발생하는 오류,,, 나중에 또 까먹을 수 있으니 여기에 기록하고 남겨둬서 검색하면 내 블로그가 나오겠지? 2021. 9. 8. [Webpack]webpack-bundle-analyzer 배포 준비 안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는.. 2021. 8. 27. [React] soket.io version2 리액트 소켓IO 사용기 | React Soket IO socket.io란 websocket기반으로 client와 server간 양방향 통신을 가능하게 해주는 모듈입니다. 기본적인 socket의 연결, 해제기능들을 자바스크립트로 가능하게 만든 모듈이라 생각하시면 편할 것 같습니다. 기본적인 socket의 실행흐름에 대해 알고 사용하는 것이 더 의미가 있을 것 같습니다. Soket IO 특징 단점 - 한 번 연결해 놓으면 전역적인 특징을 갖고 있기 때문에 리액트에서 하나의 components에 연결을 했다가 다른 compoentns에 연결을 하면 연결이 끊어져버린다. 해결 - 위와 같은 이슈를 해결하기 위해서 하나의 components 즉, common compoennts에 기능 구현을 하면 된다. ( 예전에는 HOC(High o.. 2021. 8. 22. [Next.js]getInitalProps를 사용하여 css 깨짐을 방지해보자! 리액트와 next를 사용하여 SSR 적용 중 className 오류가 났다. 원인은 nextjs 사용시 css 마찬가지로 SSR 렌더링도 먹여줘야 하는것이었다. "styled components는 따로 SSR 세팅(_document.js)을 안 하면 서버사이드 렌더링이 안 되므로 동적으로 스타일 태그를 생성하기 때문입니다. 기본적으로 next의 pages는 서버사이드 렌더링이 된다. getServerSideProps는 추가적으로 데이터까지 가져오는 것이고, ssr을 제외한 상황에서는 모두 styled-components가 동작한다" 그럼 SSR을 적용해 보자! 주의할 점은 getInitialProps는 주로 사용 안 하고 Document에서만 사용한다는 점 꼭 이억하자. _document.js 기본 형태.. 2021. 4. 22. 리액트의 Switch는 언제 사용할까? 기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews .. 2021. 3. 17. 이전 1 2 3 4 5 ··· 7 다음
