프론트앤드

    [React 공부노트 #4] 컨테이너 프리젠터 (Container-Presenter) 디자인 패턴

    Container-Presenter pattern only container 기존의 개발방법은 클래스컴포넌트와 스테이트를 만들고, api서버에서 필요한 데이터를 가져오는데,모두 한곳에서 구현한다. 이것은 비교적 작은 프로젝트에서 사용할때 주로 쓰인다. 이유는, 비지니스로직과 뷰가 한곳에 존재하게 되면 코드가 여러가지 기능이 섞여있기에 프로젝트가 커지게 되면 점점 유지보수하기가 힘들어진다. 그렇기에 유지보수를 위하여 뷰와 비지니스로직을 분리해서 따로 관리를할 필요성이 있는데, 그래서 사용하는것이 컨테이너 프리젠터(container-presenter) 디자인 패턴이다. 개인적으로 비지니스 로직과 뷰를 분리한다는 점에서 백앤드에서 자주쓰이는 MVC패턴과 유사함을 느꼈다. 컨테이너 프리젠터(container-p..

    [React 공부노트 #3] react에서 axios 사용해서 api와 통신하기

    Networking api.js 이라는 파일을 만들어서 api와 통신하는 코드를 몰아 넣을것이다. 그래야지 API 요청에 대한 비지니스 로직이 분산되지 않고 한곳에서 컨트롤이 되기에 유지보수성이 더욱 좋아진다. 나는 API서버와 axios를 사용해서 통신을 할것다 axios axios Promise based HTTP client for the browser and node.js www.npmjs.com 이 모듈은 HTTP통신을 보내게 할수 있는데, 이 모듈을 통해서 api서버에 원하는 요청을 보낸뒤에 받아오는 결과값을 사용할것이다. const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "----", ..

    [React 공부노트 #1] react의 구조

    react의 구조 public public directory 내부의 index.html의 부분이 있다. react는 저 id가 root인 div 내부에 내용을 바꿔가면서 보여주는데 이것을 가상DOM (virtual DOM) 이라고 한다 index.js 가장 상위의 react 파일 실제 랜더링 되는 components를 import해서 사용한다 App.js 이 파일에서 개발에 사용하는 component를 import해준다 이때 import되는 GlobalStyles, Header와 같이 상위개념의 component를 가져온다 민들어둔 헤더를 import 하면 router 밖에 있기 때문에 항상 노출이 된다 여러개의 리턴을 위하여 flagment를 쓴다 router.js URL의 router가 바뀔떄다르게 ..