공부/react (4) 썸네일형 리스트형 react로 만든 웹사이트 렌더링 속도 개선 사이트를 배포하고 나니 페이지 로드 시간이 너무 오래 걸린다는 단점이 있었다. 처음부터 next JS 로 프로젝트를 생성하면 좋았겠지만, creat-react-App으로 만들어진 프로젝트를 개선해야하므로 다음과 같은 방법들을 적용해 보았다. 1. 폰트를 html에서 로드하도록 설정 다음과 같이 html style 태그 내로 코드를 옮겨주었다. 웹사이트를 랜더링할 때 html 파일이 가장 먼저 파싱 되기 때문에 css에 폰트 링크를 넣는것 보다 html로 옮겨주는 것이 더 빠르다고 한다. + 한가지 문제가 있었는데, 여러 폰트 중 하나가 css 파일에서 로드해야만 동작했다. 우선은 해결하지 못하여 css 파일에서 적용해주었다..😂 2. 이미지 크기 조정 나의 경우 초기 랜더링 페이지에 메인으로 차지하는 이.. [react] router로 url은 바뀌지만 component가 갱신 안될때 개발하다보면 참 어이없는 이유로 의도와 다르게 작동될 때가 많다. 이것도 그런 사례 중 하나였다. 쇼핑몰 기본 랜딩페이지에서 상품 클릭시 상품 디테일 페이지로 링크를 걸어놨는데 주소창의 url은 바뀌는데 ui가 안바뀌고 랜더링 자체가 실행이 안되는거 같았다. 구글링해보면 스택오버플로우에 hooks를 활용한 해결 방법이있다. 하지만 나의 경우엔 다른 이유였다. 이런식으로 라우터를 구현했는데, 주소를 입력하면 라우터가 "/"로 인식하여 랜딩페이지의 컴포넌트를 불러왔다. 랜딩페이지의 라우터 부분을 제일 아래로 보내주자 간단히 해결되었다. 더보기 처음에 이렇게 라우터를 구현해뒀는데, 첫번째줄의 "/api/product/:id는 :id 부분에 어떤 값이 들어와도 Detail 페이지로 보내주도록 구현되어있다. 따라.. [react] state를 활용하여 로그인 유무에 따라 ui 변경 별로 대단한 기능은 아니지만 구글링하면 구버전 react로 구현된 예시만 있고 최신 프로젝트에서 참고하기는 어려웠다. 보통 웹사이트에서 우리가 로그인하면 로그인 및 회원가입 페이지로 이동되는 ui나 버튼, 링크 등을 안보이게 처리한다. 만들고 있는 쇼핑몰 사이트에 해당 기능을 적용시키기 위해 구현해 보았다. 이보다 더 좋은 방법이 있을 것이라 생각되고, 초급 수준 개발자이니 참고만 하길 바란다. 1. reducer 세팅 우선 내가 만들고 있는 프로젝트는 reducer를 사용하여 상태를 업데이트하는 로직들을 만들어놓았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const initialState = { isLoggedIn:false } export default.. [react] 'zlib' 모듈 오류 발생시 해결 방법 리액트와 mongo db로 웹사이트를 만들던 중에 발생한 에러이다. Module not found: Error: Can't resolve 'zlib' in... 대충 모듈을 찾을 수 없다는 내용의 에러이다. 구글링해보니 webpack에서 해결해야된다고 나와있었는데, 해결이 되지 않았다. 이것 때문에 app.js나 컴포넌트로 구별해놓은 js 파일들 중 axios 통신을 사용하는 js 파일을 수정했다. 상단의 import {response} from 'express'; 를 삭제하니 모듈에러가 해결되었다. 아마 axios 라이브러리에서 제공하는 함수의 response 인자가 아니라 express 프레임워크의 respose 기능을 불러오게되어서 발생한것같다. 이전 1 다음
