728x90 반응형 프론트엔드5 비디오 업로드 만들기 1 비디오 업로드 부분을 구현할 예정 입니다. view 폴더 아래에 VideoUploadPage 폴더 생성 그안에 VideoUploadPage.js 파일 생성 해주세요 그리고 extension이 설치 되어 있다면 rfce 명령어를 입력하면 자동으로 이렇게 생성이 됩니다. 그리고 라우터를 생성을 해줘야 합니다. 그러기 위해서는 App.js 부분으로 가서 import VideoUploadPage from "./views/VideoUploadPage/VideoUploadPage.js" 이거 추가 true 옵션은 로그인한 사람만 접근 가능하게 하는것 확인해보면 이렇게 된것이 보인다. 성공입니다. 그리고 RightMenu로 들어가서 맨아래 쪽 보면 이부분을 추가해주면 됩니다. 위에처럼요 Video 업로드 부분을 저렇.. 2021. 2. 20. WEB 만들기 23 - Concurrently 지금까지 서버를 켰을 때 두개를 하나씩 켰는데 한번에 켜는 법에 대해서 알아보겠습니다 . npm install concurrently --save 이런식으로 우선 설치를 해줍니다. 우선 설치를 제일 상위 폴더에 해주시면 됩니다. 그리고 나서는 사용 방법은 위와 같습니다. 상위 폴더의 package.json 부분의 scripts 에서 "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" 이렇게 추가를 해주시면 됩니다. --prefix cleint " 이렇게 하는것은 client 쪽에 start를 실행을 해줘야하기 때문입니다. npm run dev를 해주면 한번에 켜집니다. 2021. 1. 22. WEB 만들기 - 16 NPM? NPX? NPM(Node Package Management)은 레지스트리 저장소 역활을한다. 지금까지 우리가 dependencies 쪽에 저장되는 라이브러리가 저장되어있는곳을 말한다. 애플리케이션을 켤때 npm run start나 배포를 할때 빌드를 해서 배포를 해야하는데 이때 npm run build 할때쓴다. 이처럼 이런 이름이 뭐고 스크립트는 뭐고 어떤게 다운되어있는지 나와있다. 그리고 우리가 npm install ``` 하면서 설치를 할때는 로컬로 다운이되는 Locally로 . 로컬에 다운하면 이곳에 다운이되는것이고 npm install ``` -g 를 하면 Grobally 글로벌로 되는데 프로젝트가 아닌 bin/directort인 윈도우는 %AppData%/npm에 저장이 된다고 생각하면되고 맥의 경우는.. 2021. 1. 19. WEB 만들기 15 - Create React App 예전에 리액트 앱을 처음 실행하려면 Babel이나 Webpack을 설정하기 위해서 많은 시간이 걸렸다. 하지만 이제는 create-react-app Command로 바로 시작할 수 있습니다. Babel 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수 있게 해주는것을 말한다. Webpack 이걸을 통해 저런것을 묶어주는 bundle을 시킨다. 이런식으로 폴더로 서버와 클라이언트를 구분해주고 cd client로 해서 client쪽으로 들어간후에 npx create-react-app . 해줍니다. 이렇게 해주고 여기서 지금까지 npm을 했는데 npm은 뭐고 npx는 무엇인지 생각할 수 있다. 다음에 알려드리겠습니다. 2021. 1. 19. 이전 1 2 다음 728x90 반응형
