728x90 반응형 Frontend/React5 [React.js ] spinners (로딩 시 대체 효과) 안녕하세요!! 오늘은 제 프로젝트에 적용된 스피너를 소개해 드릴까 합니다. axios를 사용하여 server 쪽으로 비동기 통신을 할 때 딜레이 시간이 생기는데.... 딜레이 시간 동안 유저에게 좀 더 쾌적하게 화면을 보여주기 위해서 적용해 봤어요!! client단코드 styled components를 사용해서 스피너 컴포넌트를 따로 만들었습니다. 로딩 중일 때 띄울 스피너 이미지를 처음에는 아무거나 가져다 썼더니... 사이즈 변경 시 깨져서 알아보다 보니 svg가 안 깨진다고 해서 가져와서 쓰고 있습니다~~ 안 깨지니까 너무 좋아.. 제가 사용한 이미지 스피너 테스트할 때 계속 보다 보니까 멍해져서 "뭐 하고 있었지??" 정신 줄 놓는.... 조심하세요.. 이미지 import 한 뒤에 저 표시만 있으면.. 2023. 6. 17. html tag를 react에서 작업시 자동완성 옵션 vsc settings.json에서 아래의 코드를 추가하면 ok "emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": {"javascript" : "javascriptreact"} 출처 https://bogyum-uncle.tistory.com/142 [ReactJS] react html tag auto complete 아무런 세팅없이는 Visual Studio Code에서 React javascript의 HTML 태그의 자동완성을 지원하지 않고 있음. 따라서 이를 위해 settings.json을 수정할 필요가 있음. 'CTRL + ,' 단축키를 통해 settings.json 편집을 bogyum-uncle.tistory.com 2023. 5. 31. reduxjs-toolkit 사용시 비직렬화 문제.. reduxjs-toolkit을 사용하여 작업 도중 에러 발생.. 작업 코드 다행히도 user정보는 담겨있는데 친숙한... 경고.. 검색을 해보니 외쿸 형님들이 정성스럽게 올려놓은 글을 찾았다.. 휴.. 글을 읽어보니 직렬화 관련 문제?! you should be able to configure the middleare to remove the serilizable check or ignore specific actions '직렬화 가능 검사를 제거하거나 특정 작업을 무시하도록 구성할 수 있어야 합니다' 라고 얘기하시네요.. 1. 비활성화 코드 import { configureStore, getDefaultMiddleware } from 'redux-starter-kit' export const store.. 2023. 5. 30. Firebase 데이터 가져오다가 사고..(해결 Firebase에 데이터를 확인 후.. fetch를 이용해서 데이터를 가져온다.. 쉽네.. 뚜둥.......어언디파인드.... 일단 F12를 누른다... 왜일까.. 곰곰히 생각해본다.. (1순위: 오타, 2순위: Firebase 데이터 전송 느림.. ㅋㅋ, 3순위: re, npm start..., 4순위: 코딩전에 기도 안한 것..) 순위 모두 아니였다... 그러다.. 위에 fetch에 있는 json링크를 들어가서 유심히 보다가 드디어 발견.. ㅠㅠ 큰따옴표로 감싸져 있는 Key값들에게 공백이 있던 것이 아닌가 ㅠㅠ 공백이 생긴 이유를 생각해보니.. Firebase에 데이터를 넣다가 혹시나 오타가 생길까 봐 복사해 붙여 넣었던 것이 이런 문제를 발생시킨거같다.. 아직 개인 프로젝트 초기인데 벌써 고난이... 2023. 5. 3. react - public폴더 이미지 절대경로 사용법 react 작업을 하다가 img를 넣는 와중에 오류가 생겨 찾아보았어요 public폴더의 절대경로를 이용하려면 html 에서는 %PUBLIC_URL% js 에서는 process.env.PUBLIC_URL 저는 상수에 담아서 이런식으로 사용하고 있답니다 const 상수이름 = process.env.PUBLIC_URL; 참조 https://create-react-app.dev/docs/using-the-public-folder Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev 2023. 4. 25. 이전 1 다음 728x90 반응형
