Programing/React

[React] vite 프로젝트 + vercel 배포 후 새로고침 404

에러난 시점의 상황 1) React + Vite 로 프로젝트 생성 2) Vercel 에 프로젝트 배포 3) 배포 후 정상적으로 작동하지만 URL을 직접 입력해서 페이지를 이동하거나 라우터 진입 후 새로고침 시 404에러 해결한 방법 1) package.json과 같은 위치에 vercel.json 생성 후 아래 코드 입력 { "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] } 2) 재배포 후 확인

[React / TypeScript] Debouncing을 활용한 검색기능 구현

디바운싱 이벤트가 연속적으로 발생할 때 마지막으로 발생한 이벤트를 기준으로 일정 시간 후에 마지막 이벤트만 실행되도록 한다. 유사한 개념으로 쓰로틀링이 있으나 검색 기능에 적용하기에 디바운싱이 더 적합한 거 같아 적용해 보았다. 디바운싱 없이 input 값을 인식하는 경우 단순히 input 태그에 들어오는 값을 받을 경우 사용자가 입력하려는 검색어가 들어올 때 매입력마다 불필요한 리랜더링이 일어난다. const Search = () => { const searchHandler: React.ChangeEventHandler = e => { console.log(e.target.value); }; return ( e.preventDefault()}> ) } 이 경우에 디바운싱을 적용시켜 볼 수 있다. 예컨대..

[React] vite 프로젝트 만들기

노드 패키지 매니저(npm)를 사용한 방법이다. 시작하기 호환성 Vite는 버전 14.18+ 또는 16+ 의 Node.js를 요구한다. 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다. //이미 설치되어 있는 Node.js의 버전을 확인하고 싶다면 node -v 프로젝트 생성 1. 기본 명령어 npm create vite@latest 위 명령어로 vite 최신 버전을 설치하면서 프로젝트 이름, 프레임워크, 템플릿을 순서대로 고르면 프로젝트가 생성된다. 2. 옵션 추가 npm create vite@latest project-name -- --template react-ts // npm 7 이상의 버전에서는 꼭 '--'를 붙여줘야한다. // JS를 사용하는 리엑트라면 끝에 react, T..

[React] 소셜웹페이지 - 서버 통신 & 로그인

서버의 도움을 받아 회원가입 - 로그인 - 메인 페이지로 로그인 유저 넘기는 과정까지 진행해보았다. 목데이터가 아닌 실제 서버랑 통신하게 되면서 오류도 많이 봤지만, 이런저런 정보를 받아보면서 재밌었던 것 같다. 회원가입 const navigate = useNavigate(); const [id, setIdValue] = useState(''); const [pw, setPwValue] = useState(''); const onSubmit = (e) => { // email : justpoy@email.com // pasword : 11111 e.preventDefault(); fetch("http://localhost/users/signup", { method: "POST", headers: { "C..

[React] 댓글 입력 오류

댓글을 받으면서 공백인 상태에서도 댓글 입력이 들어가는 문제가 있었다. 처음엔 button에 집중해서 문제를 해결했지만 form에서 해결하는 방법이 더 만족스러웠다. button에서 onClick 게시 form 태그 안에서 input과 button이 있고, button에 onClick으로 클릭 시 input 값을 댓글로 쓰도록 만들었다. const [userName] = useState('codelike'); const [commmentArr, setCommentArr] = useState([]); const [isValid, setIsValid] = useState(true); const [id, setId] = useState(0); const value = useRef(); const post = ..

[React] 소셜웹페이지 - 자바스크립트 ➡️ 리액트 변환

자바스크립트로 구현해놓은 페이지를 리엑트로 옮겨 똑같이 기능하도록 만들어보았다. react-router-dom npm install react-router-dom --save 리액트는 싱글 페이지 어플리케이션(SPA)이다. 즉, 리액트 프로젝트는 index.html으로 하나의 HTML을 사용하며 한 개의 웹에서 여러 개의 페이지를 보여주는 방법에는 라우팅이 있다. 라우팅이란 url 주소에 따라 다른 화면을 보여주는 것이다. 리액트에 내장된 기능이 없으므로 이런 써드파티 라이브러리를 설치해 사용해야 한다. import { BrowserRouter, Routes, Route } from "react-router-dom"; // 컴포넌트로 사용하기 위해 import 해준다. function App() { re..

[React] css 모듈과 proptype

1. CSS 모듈 클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 방법이며, 유지보수가 편리해진다. 사용 방법 .css 확장자 앞에 .module 을 붙여준다. .module.css 파일에 클래스명으로 된 속성을 만들어준다. 파일을 import 해주고, 프로퍼티를 호출하는 것처럼 클래스명을 불러와주면 된다. 여러 개의 속성을 가져오려면 백틱(``)을 사용해 감싸준다. 개발자 도구에서 클래스가 적용된 것을 보면 hash 값이 붙은 고유한 값이 부여된 것을 알 수 있다. 따라서 클래스명이 같더라도 덮어씌워지지 않는다. 2. proptype React에 내장된 타입 검사 기능이다. 타입 선언의 장점은 타입 정보를 정의해 둠으로써 다른 사람이 코드를 봐도 컴포넌트 로..

[React] JSX

1. JSX의 정의 const element = Hello, world!; // String 도 아니고 HTML 도 아닌 애매하게 생겼다 JSX는 Javascript XML의 약어이다. 공식적인 javascript문법이 아닌 확장 문법이지만 javascript의 모든 기능이 함께 제공된다. JSX의 사용이 필수적이진 않지만 React 공식문서에서는 사용을 권장하고 있다. 그 이유로는 개발자가 javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 편하게 해 주며 오류 발생 시 React가 도움이 되는 에러나 오류 메시지를 표시해줄 수 있기 때문이다. function App() { return ( Hello react ); } //////////////////(Babel Compiler)///..