본문 바로가기

Web Study124

React 프로젝트 Netlify 에 배포하기 Netlify 란... 구축한 서버가 없이도 간단하게 프론트 프로젝트를 깃헙과 연동하여 간단하게 배포가 가능한 사이트이다. 전에 만들었던 사이트도 여기에 배포했었다. 깃헙 레포와 연동시켜놓으면 push 할 때마다 자동으로 갱신돼서 편했다. 예전에 다뤄본 AWS 는 다 좋은데... 설정이 복잡스러웠음..^^ 할때마다 이거저거 보느라 바빴지만 넷틀리는 그냥 올리면 끝..! 이지만 그래도 처음 리액트 프로젝트를 배포할 때 해야하는 것들을 수 많은 에러 끝에 작성해본다. 여러 방법을 시도해서 순서가 맞을지 모르겠는데... npm install netlify-cli -g netlify deploy 일단 설치부터 해준다. 그리고 배포의 기본인 npm run build 로 build 파일을 만들어준다. 나는 이것도 .. 2023. 5. 16.
Recoil 알아보기 왜 Recoil 인가? 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고 계산된 selector 를 선언할 수 있으며 비동기 데이터 흐름을 위한 내장 솔루션도 존재한다. 동적 키로 atom 을 만들고, selector 에 인자를 보내는 등 간단하게 가능하다. Recoil 시작하기 npm install recoil 어플리케이션을 RecoilRoot 로 감싸고 데이터를 atom 단위로 선언해준다. useState 는 useRecoilState 로 대체해주면 된다. atom atom은 하나의 상태이다. 컴포넌트가 구독할 수 있는 리액트 state와 유사하다. 즉, atom의 값을 변경하면 그것을 구독하고 있는 모든 컴포넌트들이 모두 리렌더링 된다. 먼저 atom을 생성하기 위해 어플리케이션에서 고유한 키 값과.. 2023. 5. 8.
리액트로 꾸미기 - CSS Modules, TailWind CSS CSS Modules Styled Components Emotion ... React 관련 CSS 툴에는 위처럼 여러 툴이 존재 그중에서도 CSS Modules 를 가장 많이 사용한다고 함 CSS Modules? 기존의 css 파일의 이름을 파일명.module.css 형태로 변경해준다! 그런다음 해당 css 파일을 사용해주는 컴포넌트에 import styles from '../styles/Section.module.css'; 해당 형식으로 style을 객체형태로 import 해준다. export default function Section() { return ( Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat eaque harum ne.. 2023. 5. 1.
리액트와 타입스크립트 useState useState(초기값) 형태로 사용 import React, { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0); return ( {count} setCount((cur :number) => cur + 1)}>+ setCount((cur :number) => cur - 1)}>- ) } useRef HTML DOM 요소를 컨트롤할 때 컴포넌트가 리렌더링 되더라도 값을 유지하는 변수로 사용할 때 HTML DOM 요소를 컨트롤하려면 HTML태그명Element 의 타입으로 접근 const inputRef = useRef(null); ... import React, {.. 2023. 4. 30.

티스토리툴바