React (24) Today I am [React] 다크모드, 라이트모드 만들기 | useContext ⏩ 포트폴리오를 제작하면서 예전부터 구현해보고 싶었던 다크 모드/라이트 모드를 구현해보려 한다. 찾다보니 이미 npm dark mode 라이브러리가 있었지만, 직접 구현해보고 싶어서 해당 라이브러리는 사용하지 않았다. 가장 먼저 toggle button이 필요해서 material-ui 에서 이미 제작된 toggle 액션이 가능한 버튼을 가져왔고 색상이나 크기는 커스텀하여 작성해뒀다. //기능 구현 전 / Toggle component import React, { useState } from "react"; import { withStyles } from "@material-ui/core/styles"; import FormControlLabel from "@material-ui/core/FormContr.. Netlify로 react 프로젝트 배포하기 여태 github page로 배포했는데 이번에는 다른 방법으로 배포해보려고 여러 웹호스팅 서비스를 알아보다가 무료 웹 호스팅 서비스 Netlify를 알게 되었다. aws, heroku, github pages 등 어떤 서비스로 배포해볼까 고민이 있었는데, 그중에서 Netlify를 선택한 이유는 1. github pages는 몇번 사용해봐서 다른 서비스를 사용해보고 싶었고 2. aws 서비스는 단순한 정적 웹사이트 배포에 좀 과한 것 같아서 (개인적인 내 생각..) 3. heroku는 무료버전에서는 30분간 서비스 트래픽이 없다면 sleep 모드로 들어가고 다시 서버 실행할 때 응답이 느리다 하여 결론은, - 무료이고 - 깃허브 연동으로 간단하게 빌드 및 배포할 수 있어서 Netlify를 선택했다. - N.. react 프로젝트, 크로스브라우징 대응하기 react 프로젝트를 진행하면서 처음으로 다양한 브라우저에서 모두 대응이 되나 확인을 해보던 중, 역시나 IE에서는 호환이 되지 않았다. (처음에 흰 화면만 보여서 서버가 안 열렸나 했는데, 보통 호환이 안 된 경우 흰 화면만 나온다고 한다..) 그래서! 이번에 이론으로만 공부했던 polyfill을 설치하여 사용해보려 한다. 설치하기 전에 잠깐, 'babel'과 'polyfill'의 차이 babel은 크로스브라우징을 위해 es6 구문들을 es5 구문으로 이해할 수 있도록 해 주고, polyfill은 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메서드 (Map, Set, Promise)등을 사용 가능하게 하는 역할을 한다. 1. react-app-polyfil.. Controlled components와 Uncontrolled components Controlled components (useState) import React, { useState } from "react"; export default function App() { const [inputValue, setInputValue] = useState(""); const handleInputChange = (e) => { setInputValue(e.target.value) } const handleSubmitButton = () => { alert(inputValue); }; return ( ); } Uncontrolled components (useRef) import React, { useRef } from "react"; export default function App() { .. React 프로젝트 진행시 API_key 숨기기 1. src 폴더 외부에 .env 파일을 만든다. 2. .env 파일 내부에 API key를 넣는다. 반드시 'REACT_APP'를 붙여서 변수명을 설정해야 함. REACT_APP_API_KEY=[key] 3. gitignore 파일에 .env 파일을 추가한다. + 사용 예시 const url = `https://...${process.env.REACT_APP_API_KEY}` [React 강의노트] react router SPA - 라우팅을 클라이언트가 담당 - 라우팅이란? 어떤 주소에 어떤 UI를 보여줄지? react-router - 컴포넌트 기반으로 라우팅 리액트 라우터에서 사용되는 주요 컴포넌트 BrowserRouter - HTML5 History API 사용 - 주소만 바꾸고 페이지는 다시 불러오진 않음 HashRouter - example.com/#/path/to/route - #을 사용함. 못생김, 옛날 브라우저 전용 MemoryRouter - 브라우저의 주소와 무관, 일체 건들이지 않음 - 테스트 환경, 임베디드 웹앱, 리액트 네이티브 등에서 사용 StaticRouter - 서버사이드 렌더링에서 사용하는 용도 Route - 라우트를 정의할 때 사용하는 컴포넌트 Link - 사용한 Router의 주소를 바꿈, .. API 연동하기 (useState, useEffect, useReducer) 컴포넌트에서 api 요청하는 가장 기본적인 방법은 - useState와 useEffect로 데이터 로딩하기 or - useReducer로 데이터 로딩하기 사용 라이브러리 - axios 아래 상태를 관리하게 된다. 1. 요청의 결과 2. 로딩상태 3. 에러 1. useState로 데이터 받아오기 import React, { useState, useEffect } from "react"; import axios from "axios"; function Users() { //결과물, 1. 요청의 결과 const [users, setUsers] = useState(null); // API가 요청 중인지 아닌지, 2. 로딩상태 const [loading, setLoading] = useState(false); /.. [React 강의 노트(5)] class형 component react강의 노트 | Byte Degree [4주차] 1. class형 컴포넌트 //class형 컴포넌트 class Hello extends Component { //default props 설정하기 static defaultProps = { name: "이름없음", }; render() { const { color, isSpecial, name } = this.props; return ( {isSpecial && *}안녕{name} ); } } //함수형 컴포넌트 function Hello({ color, name, isSpecial }) { return ( {isSpecial ? * : null} 안녕하세요{name} ); } Hello.defaultProps = { name: "이름없음", }; .. 이전 1 2 3 다음
