분류 전체보기 (33) 썸네일형 리스트형 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 이 필요하다. (.. localStorage 1. localStorage.setItem('key', 'value') 키와 값으로 localStorage에 저장 2. localStorage.getItem('key') 키로 localStroage에서 값 가져오기 3. localStorage.removeItem('key') 키로 데이터 삭제 4. localStorage.key(0) 0번째 키 가져오기 5. localStorage.length 키가 몇개인지 가져오기 구조분해할당 자바스크립트에서는 배열이나 객체에서 값을 가져올 때, 구조분해할당을 통해서 편하게 가져올 수 있다. 이를 활용해서 react등 다른 SPA 프레임워크에서도 정말 많이 쓰인다. # 01. 배열 const food = ["🍕", "🥓", "🍙"]; const [pizza, bacon, rice] = food; console.log(pizza); // 🍕 console.log(bacon); // 🥓 console.log(rice); // 🍙 const pizza = food[0] 이렇게 하나하나 나열하지 않아도, 음식이라는 배열을 구조분해할당을 통해서 각 음식의 변수를 손쉽게 만들 수 있다. function createApple() { return ["apple", "🍎"]; } const [name, emo.. 노마드코더 파이썬 챌린지 완료 노마드 코더의 파이썬 챌린지를 완료했다 ! 몇달 전 신청했을 때보다 챌린지가 수월하다고 느꼈는데, 아니나다를까 수강생들의 요청으로 난이도를 조금 낮췄다고 한다. 덕분에 Python으로 웹 스크래퍼 만들기도 완강하고, 챌린지까지 무리없이 완료할 수 있었다 ! :) 강의·챌린지 모두 무료로 진행되니, 파이썬에 입문하고 싶은 사람들에게 강력 추천할 수 있겠다. 이전 1 2 3 4 5 다음
