프로그래밍
-
[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 ..
-
[제로초 Slack 클론 코딩] 백엔드 준비 + 초기설정 (Day-1)프로그래밍/React 2023. 9. 29. 15:09
백엔드 준비과정과 관련되어서는 안되면 다시 한번 영상을 보는 것이 좋을 것 같다. 처음 초기설정 및 세팅을 수동으로함으로써 어떠한 부분이 어떠한 역할을 하는지 알 수 있었다. 아래 내용은 그 중 궁금한 사항 및 새롭게 알게 된 내용을 간단히 정리해보았다. 1. package.json vs package.lock.json package.json은 라이브러리를 설치하게 되면 dependencies에 추가되게 되는데 이와 관련되어서 dependencies에 추가 된 라이브러리가 사용하고 있는 또 다른 라이브러리에 대해서 package.lock.json에 나타나게 된다 => 부모와 자식같다고 생각함 될 것 같다. 연관성 많고 package.lock.json 없으면 안되겠다는 생각이 들고 이거는 엄청 길어질것 같..
-
[드림코딩엘리] Next.js 환경설정프로그래밍/Next.js 2023. 8. 1. 11:25
개발환경 Set Up 리액트 개발 환경과 동일하다 vscode(코드에디터) + node.js + git + yarn or npm 공식사이트도 한번보고 꼭 북마크 해야할 페이지를 봅시다 공식사이트 가서 홍보하고 있는 글도 한번 읽어보면서 메리트가 뭔지 알아보고 어떻게 접근하면 좋을지 알아보자 리액트를 기반으로 풀스택 웹앱을 만들기 위해 사용할 수 있는 프레임워크임 강력한 라우팅과 레이아웃고 제공해주고 복잡한 인터페이스를 만들어도 사용자에게 전달하는 자바스크립트의 양은 최소화 할 수 있고 폰트와 이미지에 대한 최적화 지원 리액트 최신버전에 추가된 서버컴포넌트를 이용해서 서버위주로 만들 수 있고 동적으로 html을 스트리밍할 수도 있다?? 어쨋든 풀스택하는데 간편하다 빠르게 강력한 웹을 만들 수 있고 사용자가..