week4 - CRA

✏️ 구현 내용

AWS

• 한국 서버로 수정
• EC2 보안그룹 인바운드 규칙 추가 (port number 3000)
• putty로 연결 (.pem/private key 저장하기)

create-react-app

• ubuntu/frontend/youtube에 프로젝트 생성
• ftp-simple로 접속

**FileZilla 이용

구조

• public
  • index.css
  • index.html
  • images
• src
  • App.js
  • index.js
  • Component
    • Container
      • Nav
      • Video
    • Header
    • SideNav

👩‍💻 Issue

• ftp-simple workspace 연결이 안됨 ⭕
• → ubuntu 20.04 버전으로 진행 (22버전은 unstable)
• component 이름 정하기, 파일 분류 ⭕
• → 유지보수 향상
• AWS에서 이미지 삽입 ❌
• → process.env.PUBLIC_URL, 직접 경로 설정도 안됨

⛏️ 피드백

1️⃣ FileZilla로 이미지 넣기

nodejs는 path 접근 권한을 막아 css는 src 폴더에 넣으면 안된다. public 폴더는 path 접근 권한을 허용 해준다.

jpeg 파일을 public 폴더에 넣으려면 FileZilla를 사용해야 한다.

process.env.PUBLIC_URL 가 현재 경로

2️⃣ Component 이름 / 부모,자식 구조 수정

• component
  • HeaderHeaderStartContainerComponent.jsHeaderEndContainerComponent.js
  • HeaderMiddleContainerComponent.js
  • HeaderComponent.js
  • Container
    • NavNavItemComponent.js
    • NavComponent.js
    • Video
    ContainerCompoent.jsVideoIemCompoent.js
  • VideoComponent.js
  • SlideMenu
    • SlideMenuContainerSlideMenuHeaderComponent.jsSlideMenuNavItemComponent.js
    • SlideMenuNavContainerComponent.js
    • SlideMenuContainerComponent.js
    SlideMenuPageComponent.js

component 이름 지을 때 container → ? → Item

component의 부모 자식 관계를 폴더로 나누어준다.

🧷 Github

stageus_front-end/youtube_react at main · kknyapple/stageus_front-end