본문 바로가기

분류 전체보기433

[optimization]reselect를 사용하여 최적화를 해보자 이번에는 reselect 라이브러리를 사용하여 코드단을 최적화 해볼 예정입니다 ! 우선 reselect는 리덕스에서 만든 라이브러리입니다. state안에 있는 내용들을 가공하는 경우에 useSelector 안에서 처리할 수 있게 도와줍니다. 리렌더링을 방지해주는 역할이죠. reselect를 사용하지 않을 경우, useSelector에서 가공하곤 하였는데 문제점은 여기서 useSelector안에서 가공하는 경우에는 리렌더링을 방지할 수 없다는 것입니다. 먼저 라이브러리를 설치해줍니다. npm i reselect 여기서 저희는 createSelect 를 이용하여 최적화를 진행할 예정입니다. 라이브러리 링크는 아래와 같습니다. https://github.com/reduxjs/reselect GitHub - r.. 2021. 11. 24.
[optimization]이미지 최적화 Layout shift란? | Layout shift란? UI/UX 경험을 해치고 이미지 로딩이 느리게되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상을 말합니다. Lighthouse에서도 확인이 가능합니다. 그래서 왜 이런일이 일어는거지? 1.사이즈가 정해져 있지 않은 이미지 2.사이즈가 정해져 있지 않은 광고 3.동적으로 삽입된 콘텐츠 4.Web font(FOIT, FOUT) 그럼 어떻게 해결하지? -당연히 이미지에 사이즈를 설정해주면 됩니다. -폰트 문제는 미리 setting을 해주시면 됩니다. 예시를 들어보겠습니다. 아래와 같은 코드가 존재할 때 function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ().. 2021. 11. 23.
[optimization]최적화 불필요한 css 제거해보기 보통 초보 개발자들은 성능 최적화를 고려하지 않고 무작정 코딩을한다.(나 같은 사람) 이런 불상사를 막기위해 성능 최적화를 알아보자 ! 개인 프로젝트 같이 자그마한 프로젝트를 진행하는 경우에는 크게 신경을 쓰지 않아도 된다. 하지만 수 많은 사용자들이 몰리는 사이트라면 ...? 당연히 속도가 빨라야한다. 그렇게 하기 위해 발버둥쳐서라도 메모리 사이즈를 줄이고 불필요한 코드를 줄이고 이미지 사이즈도 줄이고.. 역시 날씬한게 짱인가? 아무튼 이번에는 코드단에서 불필요한 Css를 제거할 것이다 ! 위의 이미지는 Lighthouse를 통한 사이트 성능 검증인데 굉장히 구리다. 어느정도 개선 시켜봐야겠다. * Lighthouse 보는 방법은 Chrome인 경우 F12 mac : command + option + .. 2021. 11. 22.
[webpack]웹팩(webpack) 설정하기(2) ✔️ 속성 entry : 진입점 (기본적으로 webpack config js 파일은 javascript 파일을 기준점으로 함) output: 반환점 (결과물을 내보내는 역할) - path : 결과물들의 저장 위치 (폴더명) (주의 : 상대경로(./dist)와 같은 경로를 입력하면 안 됩니다. 꼭 절대경로를 입력할 것.) - filename : 진입점의 파일 name과 동일하게 적어줍니다. 여기서 만든 filename은 entry의 key 값이 됩니다. (여러개 만들수도 있습니다. 동적으로 file name을 결정할 땐 [filename].js를 입력해주세요. ) clean : 이전에 만들어진 파일들 제거(단,5.20 version 이상만 사용 가능합니다. document에 여러 속성 및 version이 .. 2021. 10. 7.
[webpack]웹팩 시작하기(1) 저번 글에 이어 웹팩 프로젝트를 설정하겠습니다. 먼저 package.json 파일을 만들어 줍니다. 문법 npm init -y webpack 준비에 필요한 패키지들을 다운받아 줍니다. (-D : 개발 영역에 다운로드 받는 의미입니다.) npm i -D webpack webpack-cli webpack-dev-server@next webpack : bundler 번들러가 동작하기 위한 핵심적인 package입니다. (webpack version4 이후는 cli도 설치해야 합니다.) webpack-cli : 터미널 부분에 입력하는 여러가지 명령들을 커맨드라인 interface라고 하는데 이것을 지원해줍니다. (이로인해 webpack-cli를 통하여 command line을 사용할 수 있게 만들어 줍니다 밑에.. 2021. 10. 6.
[webpack]웹팩(webpack) 초기 설정 setting 이번에는 webpack 설정에 대해서 알아봅시다 👀 front-end의 필수 무기라고 할 수 있습니다. 먼저 등장 배경부터 알아보죠! | 웹팩(webpack)이 왜 생겼을까? 꼭 필요할까? - 대규모 project에서는 js 파일안에 많은양의 코드들이 존재합니다. 이 수많은 code line을 관리하려면 장난아니겠죠? 더 나아가 변수명도 만들기 힘들어집니다. 또한, 로딩하는데 속도가 파일이 크면 클 수록 장난 아니게 될겁니다. 결정적인 건, 신규 사이트들은 SPA를 활용한 방식의 사이트들이 많습니다. SPA란 하나의 html page에서 여러개(연관된)의 js 파일들을 포합하는 page입니다. 따라서 흩어져있는 js파일들을 하나의 파일로 번들링해줄뿐더러, 성능 최적화도 도와줍니다. 따라서 webpack을.. 2021. 10. 6.

티스토리툴바