Enjoy Programming

이번엔.. 그동안 계속 알아봐야지 하던 useContext를 조금 알아보자. 먼저 프론트엔드 개발을 하며 상태관리는 필연적인 요소이다. 어떻게 하면 더 직관적으로 상태를 소실하지 않고 여러 컴포넌트에서 잘 사용 할 수 있을까.. 필자는 현재 apollo 를 사용하다 보니 redux를 사용하지않고 캐싱을 주된 store로 이용하고 있다. 그런데 이게 좀 어렵긴 하다. fragment를 해주고 cache를 modify하는 작업들이 뭔가 쉽진 않다. 이게 backend에서 어떻게 schema를 구성해주느냐에 따라서도 영향을 미치기 때문에.. 일단 현재 필자가 사용하는 apollo caching을 한번보면 먼저 graphql서버로부터 유저의 프로필을 받아오는 hook을 하나 만들어서 통신을 한다. fetchPo..

https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org react를 공부하며 redux redux 하길래 뭔가 싶었는데 이제 시작했다. redux는 뭘까? redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 상태 state를 담은 뭔가라는 소린가? 일단 상태를 관리하는 라이브러리라고 한다. 컴포넌트들의 상태 관련 로직을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 그리고 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 자 한가지 생각해보자. 리액트에서 상위 ..

니코의 리액트 과정에서 번외로 타입스크립트와 react를 함께 하는 것을 알려주는 섹션이 있어서 섹션이 그리 길지않아 한번 해보고 넘어가기로 했다~ 먼저 npx create-react-app {reposit name} --typescript이렇게 해주면 typescript를 사용할 react앱을 만들 수 있다. 아 ... 수정되었다. npx create-react-app {reposit name} --template typescript라고 써주자. 그리고 vscode 를 실행해보면 기존 js파일이 아닌 tsx파일이 떡하니 자리잡고있다. 그리고 타입스크립트를 설정할 수 있는 tsconfig파일도 있다. 여기서 하나 추가해줬는데 noImplicitAny:false 이부분이다. 이부부은 앞서 살펴본 타입스크립..

이제 fetch API를 이용해 movie data를 가져와보자. 그런데~ 니코쌤은 fetch보단 Axios를 더 좋은 방법이라고 한다. axios는 fetch위에 작은 layer가 올라가 있는거라고 생각하면 된다. 간단히 짚고 넘어가면 Axios는 node.js로부터 HTTP request를 만들거나 , ES6 Promise API를 지원하는 브라우저로 부터 XMLHttpRequest를 만들기 위해 사용하는 javascript 라이브러리이다. fetch()는 JSON데이터를 처리할 때 2단계를 거친다. 초기에 request를 보내고, 실제 data 오브젝트를 받으려면 response를 받는 측에서 .json()메소드를 사용해야 한다. 그리고 fetch()를 사용해서 response error가 발생했다..

component 의 life cycle까지 알아보았고. 이제 movie app을 만들기 위해 movie component를 구성해본다. state를 만들어주고 기본적으로 컴포넌트가 마운트 되면 라이프 사이클이 시작된다. 라이프 사이클은 마운트 되는 순간 시작되었으니 isLoading은 당연히 true이다. render에서 isLoading이 true이면 Loading을 아니라면~ Ready라고 알려준다. 자 이제 로딩이 끝나면 ready로 변경이 되어야 하는데~ 컴포넌트의 render를 하면 호출되는 life cycle method인 componentDidMount함수를 통해 setTimeout함수로 5초뒤 setState를 이용해 isLoading을 false로 바꿔준다. 6초뒤 브라우저는 Loadi..

react의 Components에는 function conmponent와 class component가 있다. 앞서 포스팅한 내용은 function component들이고 이제 movie app을 만들 텐데 지금부터는 class component를 사용하겠다. class를 이용해 react class component(react에 이미 내장되어 있는 class component)로 부터 App class component에 extends했다. 현재는 App은 react.Component와 같은 역할을 한다. 기본적으로 Class react component는 return을 가지고 있지 않다. 무슨 말일까. 클레스 리액트 컴포넌트는 function이 아니기 때문에 return이 없다. 대신 render m..