Front-End, CS 스터디/항해99 - React 스터디11 [React] .env(환경 변수 관리) 정리 * 퉁이리 자료 출처 하단 기재, 좋은 자료가 많다! ✅ env env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다. 1️⃣ env 주의사항 👌 root 폴더에 생성해야 한다. root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다. 👌 변수명은 반드시 "REACT_APP_"으로 시작해야 한다. REACT_APP_변수명 = ㅇㅇㅇ "REACT_APP_변수명" 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다. 🔹process.env.REACT_APP_ : 예약어 👌 .gitignore 에 env를 등록해야 한다. .gitignore에 등록해주어야 git에 등록할 때 파일이 올라가지 않는다. * 기본적으로 세팅은 되어 있으나.. 2022. 8. 6. [리액트 React] 심화 학습 자료 정리 🔹 Redux-Toolkit-Todolist 최종 완료 깃헙 주소 : https://github.com/jennywoon/Redux-Toolkit-Todolist.git ✅ Redux Toolkit 1️⃣ 리덕스툴킷이란? 👌 리덕스툴킷 리덕스툴킷은 이전에 배운 리덕스를 개량한 것으로 생각하면 된다. 리덕스럴 사용하기 위해 작성했던 duck 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스 툴킷이다. 줄여서 RTK 라고도 한다. 👌 새로운 것이 아니다 리덕스 툴킷은 배웠던 리덕스의 구조나 패러다임이 모두 똑같다. 즉, 새로운 것이 아니다. 리덕스의 전체.. 2022. 8. 5. [리액트 React] 심화반 강의 1주차 정리 ✅ Javascript Re-start! (1) - 기본 1️⃣ 변수와 상수 🔹 변수 생성의 3단계 ▶️ 선언 -> 초기화 -> 할당 - 선언 : 실행 컨텍스트에 변수 객체를 등록(스코프가 참조하는 대상이 되도록) - 초기화 : 변수 객체에 등록된 변수를 위헤 메모리에 공간을 확보(여기서 변수는 보통 undefined로 초기화) - 할당 : undefined로 초기화된 변수에 실제 값을 할당 👌 var var는 가급적 사용하지 않는 것이 좋다. - var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다. - var는 선언과 초기화를 한번에 한다. - 재선언이 가능하다. - 선언하기 전에도 사용할 수 있다. // var는 이런 식의 사용도 가능하다. // var name은 선언! name .. 2022. 8. 4. [리액트 React] 기초반 강의 5주차 정리 🔹 내 Git Hub 주소 : https://github.com/jennywoon/bucket_list 완료한 Git Hub 주소 올려놓았다. css 중간에 수정하지 않은 것들이 있어 색이나 디자인은 완벽하지 않지만 기능 구현을 해두었다. ✅ 리덕스에서 FireStore 데이터 가지고 놀기 👌 firestore 데이터를 리덕스 스토어에 넣으려면 : 미들웨어 설치! firestore에서 데이터를 가져올 때 비동기 통신을 한다. 리덕스에서 비동기 통신을 할 때 필요한 것은 미들웨어! 🔹 미들웨어란? 리덕스 데이터를 수정 : 액션이 디스패치 -> 리듀서에서 처리 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리이다. 미들웨어 : 액션이 일어나고 -> 미들웨어가 할 일 하기 -> 리듀서.. 2022. 8. 3. [리액트 React] 숙련 학습 자료 정리 ✅ 컴포넌트 꾸미기(CSS-in-JS) 1️⃣ CSS-in-JS란? 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 새로운 패키지를 사용한다. 2️⃣ styled-components란? 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 👌 yarn add styled-components 👌 기본적인 사용법 SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고 그 안에 스타일 코드를 작성하는 방식으로 진행된다. * App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import 한다. import styled from "styled-component.. 2022. 7. 29. [리액트 React] 입문 학습 자료 정리 ✅ React란 무엇일까? 1️⃣ React.js React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리이다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 프론트엔드 개발자사이에서는 앵귤러, 뷰와 더불어 가장 많은 인기를 얻고 있다. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있다. 2️⃣ 주요 특징 🔹 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만든다. 그리고 이를 조합해 복잡한 UI를 만들어본다. 컴포넌트 로직은 템플릿이 아닌 JavaScri.. 2022. 7. 28. 이전 1 2 다음
