Web Study/React 관련16 React 로 Netlify 배포 해보기.. feat.Heroku 저번에 안되었던 문제를 드디어 알게되었다. 바로 프록시 서버는 개발 환경에서만 된다는 것이었다. 서버 구축하기 싫어서 우회하려고 했더니 결국은 서버를 만들게 되었다. CORS 오류가 자꾸나서 홈페이지 배포는 성공했지만 공공API를 읽어오지 못하는 것이었다. (이것 때문에 3시간을 헤매었다) + http 프로토콜로 제공됨.. 그래서 어떻게 해야하나 알아보다가 헤로쿠라는 사이트가 있다고 해서 사용해보기로 하였다. https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli The Heroku CLI | Heroku Dev Center Last updated May 02, 2023 The Heroku Command Line Interface .. 2023. 5. 23. 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. 이전 1 2 3 4 다음
