React
TIL | env파일 자동완성 및 Triple-Slash Directives 정리
env 파일 자동완성 및 에러 해결 const fetchData = async () => { const response = await fetch(process.env.REACT_APP_TEST_ENV) // Type 'undefined' is not assignable to type 'RequestInfo | URL'.ts(2345) const result = response.json() return result } useEffect(() => { fetchData().then(console.log) },[]) 위와 같이 .env 파일의 타입 이슈를 해결하기 위해서는 환경 변수(.env) 타입 설정이 필요하다. CRA 를 ts로 설치하였을때 src 디렉토리에 react-app-env.d.ts 파일이 생기..
TIL | useRef의 3가지 정의와 리턴값의 두가지 타입
useRef의 3가지 정의 및 타입 tsx의 useRef를 사용하면서, 기존에 js에서 사용하지 않던 RefObject 타입과 MutableRefObject 타입의 차이점 및 세가지 사용방법에 대해 자세히 알아보자 useRef useRef는, 인자로 넘어온 초깃값을 useRef의 .current 프로퍼티에 저장한다. 특정 DOM에 직접 접근하여 값을 변경하거나, 컴포넌트가 리렌더링이 되는 동안 유지해야할 일정한 값을 저장할 때 사용하곤 한다. 이러한 useRef의 index.d.ts(@types/react 경로에 존재) 에는 세가지 사용 방법이 나와있다. 1.초깃값 및 제네릭 타입이 주어졌을 경우 function useRef(initialValue: T): MutableRefObject; 초깃값의 타입과..
TIL | 간단한 custom hook 만들어보기 2
간단한 custom hook 만들어보기 2 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useScroll (scroll event를 위한 hook) useScroll.ts import { useState, useEffect } from "react"; export const useScroll = () => { // x축, y축을 초기 상탯값으로 지정 const [scroll, setScroll] = useState({ x: 0, y: 0, }); const handleScroll = () => { // 상탯값을 각각 window.scrollX, window.scrollY값으로 업데이트 (이 부분은 필요에 따라서 수정이 가능한 것으로 보이므로 자유롭게 사용하면 될 ..
TIL | 간단한 custom hook 만들어보기 1
간단한 custom hook 만들어보기 1 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useInput (input을 위한 hook) useInput.ts import { useState } from "react"; const useInput = ( // 초기 상탯값 및 벨리데이터 함수(원하는 조건을 리턴하는 함수) 인자로 받음 initialValue: string, validator: (value: string) => boolean ) => { // 인자로 받은 값을 기준으로 useState 지정 const [value, setValue] = useState(initialValue); // validator 타입이 함수가 아닐시, early return if (..
TIL | CRA 없이 React 세팅하기
CRA 없이 React 개발 환경 구축하기 일반적으로 CRA(Create React App)을 사용하게 되면, 개발환경 세팅 시간을 단축시켜 빠르게 프로젝트를 시작할 수 있다. 하지만 추가적으로 웹팩과 바벨 설정 및 변경하며 커스텀할때 어려움이 발생할 수 있다. 또한 리액트 개발자로서, 관련 툴을 직접 사용하여 CRA 환경을 세팅할 줄 알아야한다고 생각했기에 처음부터 세팅을 직접 해보았다. 초기 세팅 ├── dist ├── public │ └── index.html ├── src └── index.tsx 위와 같이, 폴더 구조를 먼저 만들어준다. (CRA를 통해 프로젝트를 생성할 시 보게 되는 비슷한 구조이다.) dist: 빌드 파일이 위치할 경로 public: static 파일이 위치할 경로 src: ..
TIL | AWS EC2 + NginX로 React app 배포
NginX란? 클라이언트로부터 요청을 받았을 때, 요청에 맞는 정적 파일(html, css 등)을 응답하는 HTTP Web Server를 제공하는 소프트웨어이다. EC2 환경에서 nginx 설치 및 설정 EC2 가상 환경으로 접속 ssh ubuntu@해당 인스턴스 아이피(퍼블릭) nginx 설치 sudo agt-get update sudo apg-get upgrade sudo apt-get install nginx nginx 구동 및 확인 sudo service nginx start: 웹서버 실행 sudo service nginx stop: 웹서버 실행 중지 sudo service nginx status: 웹서버 재시작 nginx 설정 파일 수정 server { listen 80; location / {..