분류 전체보기
-
[족쇄 2.0] React controlled Form vs uncontrolled Form네트워크/CS Study 2023. 10. 12. 02:06
알아야하는 이유 input을 사용해서 입력을 받을 때 우리가 평소 사용하는 state를 이용한 방식과 vanila 방식이 있다는 것을 알 수 있다. submit을 좀 더 잘 올바르게 사용할 수 있다. state를 사용했을 때 submit이 의미가 없는 이유를 알 수 있다. 어떤 방식이 유리한 경우인지 상황에 맞춰서 2가지 방법 중 골라 쓸 줄 알아야 한다. Controlled Form이란? input의 사용을 더 잘 알 수 있을 것이라고 상단에 이유에 대해서 기술했지만 사실 와 좀 더 깊은 연관이 있다. controlled, 이는 state을 사용해서 input에서 입력받은 값을 어떻게 변경하고 저장해서 우리가 나타내고 사용하는 방식이고 우리가 흔히 알고 있는 방식이다. import React, { us..
-
[React] react-router-dom의 사용프로그래밍/React 2023. 10. 4. 21:45
1. 중첩 라우팅 Outlet & 직접표기 비교 > Router.js > Web.js const Web = () => { return ( This is Web Post #1 // 여기서 Outlet을 통해서 불러오는 곳 ); }; > Router.js > Web.js const Web = () => { return ( This is Web Post #1 // 비교부분 ); }; 결론 : 중첩라우팅을 통해서 Router.js 부분에 Route를 한눈에 볼 수 있게 되었음 2. useLocation && useParams && useNavigate 1) useLocation Hook 경로정보를 담고있는 객체를 return한다. { pathname: '/product/1', search: '', hash: '..
-
[Vite] ESlint 와 Prettier, Package.json 초기설정프로그래밍/React 2023. 10. 2. 22:27
https://velog.io/@navyjeongs/vite%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-1-with.-typescript-eslint-prettier-husky-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C 위 블로그를 참고해서 초기설정을 해보자~ 절대경로 설정 간에 트러블 슈팅 1. eslint의 설치 과정에서 에러 test용 project에서 절대경로 설정이 성공하였다. 차이점: eslint 설정 간에 차이가 있다. 성공작 : eslint를 설정하는 과정에서 npx eslint ..
-
[Why?] CRA => Vite네트워크/CS Study 2023. 10. 2. 20:49
Vite를 사용하면서 우리가 누릴 수 있는 이점 vite란? - 2세대 번들링 툴로써 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. - 기존 webpack에 비해 뛰어난 성능을 자랑한다. 번들링이란? - JS 파일을 하나로 합쳐주는 방식으로써 번들링 툴이랑 같이 사용해야 한다. - 작성한 소스코드나 설치한 라이브러리의 용량이 매우 크므로 묶어주는 작업이라고 생각하면 된다. (압축?) 1세대와 2세대 비교 1세대 : webpack(대표적인 번들링 툴) - 자체의 문제점이 있었다 - 라이브러리가 많아지면 번들링이 매우 오래걸리는 문제점이 있었다 - 번들링이 오래걸리면 미리보기 (개발환경) 에서 불편함이 많다 - 소스코드 수정 or 라이브러리 install시에 새롭게 번들링을..