React (4) 썸네일형 리스트형 [최적화] React 프로젝트 최적화 - 1. 문제점 인식 (LightHouse) 회사에서 듀얼 모니터가 되지 않던 M1 맥북을 교체해주었다. 무려 M3 맥북 💻 으로!! (본론은 아니지만 자랑) 전에 쓰던 맥북에서 데이터를 옮기고 업무를 하려고 전에 개발하던 리액트 프로젝트 개발 사이트를 딱 열었는데 세상에 렌더링이 너무 느린 것이다... 그래서 네트워크 탭을 열어서 확인해보니 빌드된 파일의 용량이 무려 23MB,, 사진을 빨리 띄우면 뭐하나 메인 빌드 파일이 너무 커서 뜨지를 않는데,,ㅎ 수정이 시급하다고 생각했다. 어디서부터 시작해야할지 몰라 이것저것 찾아보다 LightHouse라는 구글 확장 프로그램을 이용해 사이트 성능을 측정할 수 있다는 것을 알게되었다. 이 프로그램의 좋은 점은 점수를 산출해줄 뿐만 아니라 꽤 구체적으로 개선 방안을 제시해준다는 것이다. 이 LightHou.. [React-bootstrap] 모달창 닫기버튼 스타일이 깨지는 현상 안녕하세요 주갬입니다. 오늘은 react-bootstrap을 이용 중에 모달창 닫기버튼 스타일이 깨지는 현상을 해결한 방법에 대해 말씀드리려고 합니다. 다른 bootstrap 요소들은 잘 나오는데 모달창 안에 있는 닫기 버튼만 스타일이 깨지는 현상이 발생했습니다. 원래는 이렇게 예쁜 닫기버튼이 나와야합니다. 구글링을 해본 결과 이 현상은 bootstrap 버전과 react-bootstrap 버전이 맞지 않을 때 발생한다고 합니다. https://stackoverflow.com/questions/65472384/react-bootstrap-only-close-button-styling-not-working React-Bootstrap ONLY Close Button Styling Not Working Fo.. [React Hooks] useEffect와 useSelector 같이 쓸 때 주의해야 할 렌더링 순서 안녕하세요 주갬입니다. 회사에서 리액트로 프로젝트를 하고 있는데 캐시를 지우고 사이트를 열면 렌더링이 제대로 되지 않는 오류를 발견했습니다. 문제 상황) 렌더링에 문제가 발생한 hook은 다음과 같습니다. const tk = useSelector(state => state.user.tk); const uuid = useSelector(state => state.user.uuid); const ogc = useSelector(state => state.user.ogc); useEffect(() => { var data = JSON.stringify({ "tk" : tk, "uuid" : uuid, "ogc" : ogc }); var config = { method: 'post', url: ~~~~ , he.. [React-Select 라이브러리] 'label' 키 이름 안맞추고 원하는 키 이름으로 지정하는 방법 React로 개발 중 셀렉트박스를 만들 때 유용하게 사용할 수 있는 React-Select 라이브러리가 있습니다. https://react-select.com/home React-Select A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support. jedwatson.github.io 이 라이브러리를 활용하면 CSS로 직접 하나하나 셀렉트 박스를 만들지 않아도 몇 줄의 코드만으로 쉽게 셀렉트 박스를 구현 할 수 있습니다. 위의 공식 사이트에 들어가면 설치 방법과 간단한 사용 방법이 있으니 참고해 주세요. 저는 이 react-select 라이브러리를 사용해 셀렉트 박스를 구현.. 이전 1 다음
