React (5) 썸네일형 리스트형 React Context 사용하기 변수를 어느 페이지에서든 쉽게 사용할 수 있는 context 기능이 있다. recoil 라이브러리를 자주 사용하지만 context는 리액트에서 기본적으로 제공한다. context를 사용하기 위해서는 변수(1개)와 함수(2개)를 만들면 편하게 사용할 수 있다. 00. createContext, useContext createContext, useContext 이 두 함수는 react에서 가져와서 사용하는 함수다. 01. 변수 만들기 createContext 를 이용해 새로운 context 변수를 만든다. const MyContext = createContext(); 02. 함수1 만들기 useContext 에 생성한 context변수를 전달한다. 그리고 useContext의 return 값을 받는 함수를 .. React에서 firebase 사용하기 01. firebase 가입 후 firebaseConfig 얻기 firebase에 가입하고 새 프로젝트를 만들고 설정에 들어가면 "Your web app's Firebase configuration" 이라는 웹 앱의 Firebase 구성 소스가 제공된다. 내 프로젝트에서 api라는 폴더를 만들고 그 안의 firebase.js 파일에 해당 구성 소스를 복사했다. // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; // TODO: Add SDKs for Firebase products th.. React 에서 .env 파일이란? React 작업을 할 때 api 통신을 많이 하게 되는데, 네트워크 통신 관련 key는 보안상의 이유로 깃허브에 올라가면 안된다. 그럴 때, 키 값을 변수로 만들어 개발할 때 .env 파일을 사용한다. ( 혹은 .env.local ) .gitignore 파일에 .env 를 추가한 후, 깃허브에 올리면 된다. 키 값 설정하기 .env 파일에서 키를 변수로 설정할 땐 REACT_APP_변수이름 으로 지정하면 된다. REACT_APP_MY_API_KEY = abcd1234 키 값 사용하기 설정한 키는 process.env.REACT_APP_변수이름 으로 접근하여 사용할 수 있다. const apiConfig = { key: process.env.REACT_APP_MY_API_KEY, } React에서 Tailwindcss 시작하기 공식문서를 읽고 차근차근 따라해보았다. 01. Install Tailwind CSS npm으로 tailwindcss를 설치한다. 그리고 tailwindcss init을 하면 tailwind.config.js 파일이 생성된다. npm install -D tailwindcss npx tailwindcss init 02. Configure your template paths 생성된 tailwind.config.js 파일에서 어떤 파일들이 tailwindcss 적용될 건지 설정한다. /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }.. 노마드코더 강의 : React 시작하기 (고전 방법) 리액트를 복습하며 노마드코더의 ReactJS로 영화 웹 서비스 만들기 강의 내용을 포스팅 하기로 했다. 01. React 탄생 메타(구 페이스북)는 javascript의 불편한 점을 개선하기 위해 ReactJS를 만들었다. 리액트는 바닐라 자바스크립트를 사용하는 것보다 빠르고 쉽게 인터랙티브한 요소를 만들 수 있게 도와준다. document.querySelector, addEventListener 등 지루한 코드를 반복해서 쓰지 않아도 되기 때문에 코드가 깔끔해진다. 02. HTML 파일에서 React 기본 설정 요즘은 쉽고 빠르게 ReactJS를 시작할 수 있지만, html 파일에서 고전 방법으로 React를 시작하는 법도 알면 좋다. 1. CDN 사용하기 React와 ReactDOM 이 필요하다. (.. 이전 1 다음
