728x90 반응형 React14 2023-02-05-StoryBook-Adjust title: StoryBook Adjust date: 2023-02-05 15:31:00 +0900 category: react draft: false 설치 및 setup # js 버전 설치 npm create vite@latest project -- --template react # ts 버전 설치 npm create vite@latest project -- --template react-ts # 해당 프로젝트로 이동 cd project # 해당 프로젝트에 storybook 설치 npx sb init --builder @storybook/builder-vite # storybook 실행 npm run storybook npm -v 8.1.2 npx storybook@next upgrade.. 2023. 2. 6. 비디오 디테일 페이지 만들기 client 안의 views 폴더안에 VideoDetailPage 폴더생성을 하시고 VideoDetailPage.js 그리고 저 파일 생성 하시면됩니다. rfce를 해주면 자동으로 functional 들어가고 import React from 'react' function VideoDetailPage() { return ( VideoDetailPage ) } export default VideoDetailPage 이렇게 코딩을 해주시고 라우터 생성을 해줍시다. client/src/components/App.js 부분으로 가서 방금 만든 페이지 import import VideoDetailPage from "./views/VideoDetailPage/VideoDetailPage.js" 추가해주고, 라우터 처.. 2021. 3. 10. 비디오 업로드 만들기 2 state를 만들건데 현재 VideoUploadPage를 보게 되면 onChage나 value 이런 것이 있는데 이를 state로 만들고 한번에 서버로 보낼 것이다. const [VideoTitle, setTitle] = useState("") 이렇게 선언을 해주고 const [Description, setDescription] = useState("") 선언하고 const [Private, setPrivate] = useState(0) const [Category, setCategory] = useState("Film & Animation") 이렇게 두개 선언해주고 option에 대해서 key value 이렇게 있을때 key value 두번 선언해서 해도 되지만 map을 이용해서 할 것입니다. 그걸 하.. 2021. 2. 25. WEB 만들기 26 - Redux UP 리덕스를 설치하는 과정을 시작 하겠습니다. Dependency들을 설치를 해야합니다. 1. redux 2. react-redux 3. redux-promis (리덕스 미들웨어) 4. redux-thunk (리덕스 미들웨어) 이렇게 4가지를 설치를 진행 할것입니다. client 쪽으로 와서 npm install redux react-redux redux-promise redux-thunk --save 한번에 4개를 설치를 해주시구요. 기본설정을 하기전에 간단히 알아봅시다. Redux Hooks 랑 Redux의 차이 3,4의 리덕스 미들웨어가 필요한 이유는 간단히 말하자면 리덕스를 잘 쓸수 있게 도와주는 역활이다. 리덕스에는 리덕스 store가 있는데 모든 state를 관리하는데 store의 state를 변.. 2021. 1. 24. 이전 1 2 3 4 다음 728x90 반응형
