state는 직접 수정하면 안된다. Why? 예기치 못한 버그 발생 가능 (무슨 버그인지는 구글링을 해보자!) 그럼 state 수정 어떻게 하나요? 배열을 복사하면 됩니다!🤗 배열 복사는 []와 spread operator를 기억하자 => 예를 들어, [...상품] ...(spread operator)으로 원래 있던 데이터의 대괄호를 벗기고, []로 다시 감싸준다. 아니면 map이나 filter를 사용해도 된다. 이 아이들도 새로운 배열을 반환해주기 때문에! 예를 들어 data.js 파일에서 채소 데이터 3개를 가져오고, 더보기 버튼을 눌렸을 때 ajax로 다른 채소 3개를 가져온다고 하자! import Product from "./Product"; import Data from "./data.js"; ..

리액트로 만든걸 보기 위해 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. ..

현재 나는 로그인 기능을 구현하고 있다. 이메일로 회원가입과 로그인 기능, 그리고 깃허브, 구글로 로그인 기능. ​ ​ 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..

리액트를 사용하며 직접 만든 component를 직접 import 하기가 상당히 귀찮다 (특히 속한 폴더가 다르다면 더더욱..) ​ 이럴 때 Auto Import를 사용하면 간단히 해결할 수 있다. 비주얼 스튜디오 코드에서 Extensions 탭을 들어가서 검색창에 Auto Import를 검색하면 바로 나온다! 사용 방법 ​ 예시 폴더 - src - components - Router.js가 있고 예시 폴더 - src - routes - Auth.js가 있다. Router.js에서 Auth 컴포넌트를 불러오고 싶을 때 Auth를 입력하면 자동으로 import가 생성된다!! ​ ​ 생성된 경로인데.. 이 익스텐션은 정말 유용한 것 같다. ​

나는 페이스북 로고가 필요했다. 그래서 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..

구글 로그인 기능을 만들고 싶어서 구글링을 열심히 했다.. 하지만 최신 자료는 없었고 리액트 구글 API 연동은 더욱 찾기 힘들었다. 그러다 발견한 영상. React로 하니까 정말 간단하게 되는 것 같다. npm 구글 로그인 설치하고, 컴포넌트 만들고, 생성해둔 client id 값 넣으니 끝이다. 잘 동작한다! 물론 css로 조금 더 다듬어야겠지만 작동하는 게 어디야..ㅠㅠ

참고) 한국어 버전 공식 문서이다. Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이는 단순히 리액트 hook을 공부한 지 얼마 안 된 나의 생각을 정리하고자 쓴 글이다. 틀린 부분이 있을 수도 있으니 항상 공부는 공식 문서로! React hook은 16.8 버전에 새로 추가되었다. 콘퍼런스 영상을 보니 한 2년 전이다. ​ 우선 리액트 훅을 배운지 정말 얼마 안 되었지만 벌써 이렇게 좋아진 이유는 코드가 간단하다. (아주아주 심플해짐) ​ class App extends React.Component에서 드디어 탈출이 가능하다. state는 간단히 useState를 사용하여 나타낼 수 있게 되었다. ​ 말..

For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' }. Keep this in mind, since it's used in several future challenges. 출처: freecodecamp.org ​ JSX는 JavaScript + HTML이다. JSX에서 자바스크립트 코드는 {} (cu..

리액트 컴포넌트를 만드는 두가지 방식이 있다. - 클래스 컴포넌트와 함수 컴포넌트. 생김새 - 클래스 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } - 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 함수형 컴포넌트가 클래스형보다 더 간단하다. 하지만 함수형이 클래스형보다 뒤늦게 나온거라 클래스형으로 작성 된 프로젝트가 많이 존재한다. -> 유지보수를 위해서 클래스 컴포넌트를 알아둬야 한다. 특징 - 클래스 컴포넌트 Component로부터 상속을 받아야한다. class 키워드가 필요하다. render()가 필수적이다. s..