본문 바로가기

리액트21

[리액트] state는 직접 수정 금지 state는 직접 수정하면 안된다. Why? 예기치 못한 버그 발생 가능 (무슨 버그인지는 구글링을 해보자!) 그럼 state 수정 어떻게 하나요? 배열을 복사하면 됩니다!🤗 배열 복사는 []와 spread operator를 기억하자 => 예를 들어, [...상품] ...(spread operator)으로 원래 있던 데이터의 대괄호를 벗기고, []로 다시 감싸준다. 아니면 map이나 filter를 사용해도 된다. 이 아이들도 새로운 배열을 반환해주기 때문에! 예를 들어 data.js 파일에서 채소 데이터 3개를 가져오고, 더보기 버튼을 눌렸을 때 ajax로 다른 채소 3개를 가져온다고 하자! import Product from "./Product"; import Data from "./data.js"; .. 2021. 5. 4.
[리액트] yarn/npm start가 너무 느릴 때 해결방안 리액트로 만든걸 보기 위해 yarn start를 입력하고 크롬 창을 띄웠다. 코드를 수정하고 적용된 화면을 보기 위해 새로고침을 눌렸는데 결과물을 보기까지 대략 15초가 걸렸다! 무한정 돌아가는 로딩바.... 너무 답답해서 찾아보니 스택오버플로우에 나와 비슷한 고민의 글이 있었고 yarn의 버전이 문제였다. super slow node npm commands I have node v.4.4 with npm v.2.14.20 (default bundled with windows installer). My OS: Windows 7 64bit. Hardware: Dell laptop, 16GB RAM, SSD, core i7. I'm facing a problem with extremely slow npm. .. 2021. 1. 27.
[리액트] firebase로 로그인 기능 구현하기 현재 나는 로그인 기능을 구현하고 있다. 이메일로 회원가입과 로그인 기능, 그리고 깃허브, 구글로 로그인 기능. ​ ​ firebase를 이용하여 apiKey를 비롯한 항목들을 불러왔다. ​ const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; 그리고 루트 디렉토리에 .env 파일을 생성하여 값들을 붙여 넣었다. REACT_APP_API_KEY="", REACT_APP_AUTH_DOMAIN="", REACT_APP_DATABASE_URL="", REACT_APP_PROJECT_ID="", REACT_APP_ST.. 2021. 1. 14.
[리액트] VSCode 익스텐션/컴포넌트 import 간단하게 하기 (Auto Import) 리액트를 사용하며 직접 만든 component를 직접 import 하기가 상당히 귀찮다 (특히 속한 폴더가 다르다면 더더욱..) ​ 이럴 때 Auto Import를 사용하면 간단히 해결할 수 있다. 비주얼 스튜디오 코드에서 Extensions 탭을 들어가서 검색창에 Auto Import를 검색하면 바로 나온다! 사용 방법 ​ 예시 폴더 - src - components - Router.js가 있고 예시 폴더 - src - routes - Auth.js가 있다. Router.js에서 Auth 컴포넌트를 불러오고 싶을 때 Auth를 입력하면 자동으로 import가 생성된다!! ​ ​ 생성된 경로인데.. 이 익스텐션은 정말 유용한 것 같다. ​ 2021. 1. 13.
[리액트] Font Awesome(폰트 어썸) 사용 방법 나는 페이스북 로고가 필요했다. 그래서 font awesome을 사용하려 했는데 리액트로는 어떻게 해야할지 몰랐지만 구글링하면 역시 다 나온다. (완벽하게 이해하고 적은게 아니라 적으면서 정리한 글이기에 정확한 정보는 공식 페이지를 참고 바람) @fortawesome/react-fontawesome Official React component for Font Awesome 5 www.npmjs.com 1. 우선 npm Installation에 따라 설치를 진행한다. $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fon.. 2021. 1. 13.
[리액트] 구글 로그인 API 구글 로그인 기능을 만들고 싶어서 구글링을 열심히 했다.. 하지만 최신 자료는 없었고 리액트 구글 API 연동은 더욱 찾기 힘들었다. 그러다 발견한 영상. React로 하니까 정말 간단하게 되는 것 같다. npm 구글 로그인 설치하고, 컴포넌트 만들고, 생성해둔 client id 값 넣으니 끝이다. 잘 동작한다! 물론 css로 조금 더 다듬어야겠지만 작동하는 게 어디야..ㅠㅠ 2021. 1. 11.

티스토리툴바