[FE] MVC / gitignore / react에서의 네트워크통신 Class

Model

View

Controller

 

V: 뷰컨트롤러는 멍청해야한다!

 

iluvdadong/youtubeClonePJ

 

• 네트워크 통신은 따로 youtube.js에서 class로 만들어서 해줌
• class로 만들어준 것은 다른 데서 instance로 만들어서 사용해야함

const youtube = new Youtube('sdf');

• 그리고 위의 것은 딱 1번만 호출하는 곳에 코드를 심어야한다.
  • 그렇지 않으면, 예를 들어 app.jsx의 컴포넌트 안에 심으면 리렌더링 될 때마다 instance가 만들어진다.
  • 그래서 index.js에서 불렀음. 그리고 이렇게 만들어진 인스턴스 youtube를 필요한 컴포넌트에 전달해준다.

ReactDom.render(
<React.StritcMode>
	<App youtube={youtube} />
<React.SrictMode>,
document.getElementById('root')
);

• js든, jsx던 해당 페이지를 export를 해줘야 다른 페이지에서 Import가 가능하다

 

.env

 

DB Connection 정보나 API Key 를 숨기기 위해!

• .env로 저장하고
• gitignore를 통해 네트워크키 라던지 공개되어서는 안되는 것들 까지 깃에 올라가지 않도록 한다.  
• =>git ignore에 .env를 추가해서 깃허브에서 추적되지 않도록 한다.

.env 환경 변수

 

결론

 

리액트 컴포넌트는 최대한 멍청하게 만든다!

네트워크 처리 / 스토리지 쓰는 것은 개별적 클래스를 만들고 API를 이곳에 제공하도록 만든다.