Enjoy Programming

-- 기록용 --- tailwind css를 사용하며 input number에 화살표를 없애고 사용하는 것을 default로 설정하고 싶어졌다. 알아보던 중 tailwind Css에서 사용자 정의 Css 규칙을 추가하는 경우 가장 쉬운 방법은 존역 css에 style을 추가하는 것이다. @layer라는 지시문을 이용해서 tailwind의 base, components, utilities 계층에 스타일을 추가할 수 있다. 이런식으로

드디어 다음 포스팅을 한다..;; 이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면. 이번에는 props를 전달해보자. 이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아 이를 출력하는 코드를 짜보면 먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter props를 전달해준다. 이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로 props의 타입을 정해준다. prop-types에서 정해주는것처럼 그리고서 Number: React.FunctionComponent 로 명명해서 이 컴포넌트가 react의 fu..

detail 컨테이너 작업을 해주는데 아직 detail page에 대한 route가 없다. 라우터로 가서 route를 만들어주자 detail 페이지는 해당 영상의 id가 필요하다. id를 변수로 :id를 지정해주고 라우트를 만들어줬다. 잊지말고 컴포넌트는 임포트해주자. 그리고 :id를 URL로부터 어떻게 가져오는지 movie에 해당 id를 보여줄지 tv의 해당 id를 보여줄지 선택할 수 있게 작업해야한다. 먼저 header 라우터에서 withRouter를 사용했는데 이때는 라우터에 의해 호출된 컴포넌트가 아닌 항상 보여지는 컴포넌트이기에 location값을 얻기위해 사용했다. 하지만 router설정이 되어있는 detail의 경우 withRouter없이 링크를 클릭해 라우터에 접속함으로 인해 history..

앞서 기본 파일들을 만들었고 이제 홈컨테이너를 작성한다. 컴포넌트가 마운트 되면 nowPlaying, upcoming, popualr를 찾고 그게 끝나면 state값을 설정해준다. 에러가 있으면 loading을 false로 변경하게된다. try,catch,finally구문으로 finally에서는 error가 생기든 성공적으로 데이터를 받아오든 loading은 false로 바꿔준다. 그리고 catch에서는 error가 발생시 출력할 문구를 만들어줬고 try구문에서는 moviesApi를 import해주고 moviesApi에 nowplaying을 async await을 활용해 받아오고 콘솔창에 찍어주면 성공적으로 data가 온다. async await을 안쓰면 언제나 그랬듯 promise pending상태가..

이제 할 일은 만들어 놓은 api들의 데이터를 화면에 뿌려줘야 한다. 이번에 접근 방식은 리액트 컴포넌트 코딩패턴인데... container presenter pattern이라고 불린다. 앞서 배운 class컴포넌트와 state방식은 작은 데이터의 경우 잘 되지만 data의 양이 많아지면 힘들다고 한다. 이 방식은 컨테이너는 데이터를 가지고, state를 갖고 api를 불러온다. 모든 로직을 처리후 프레젠터는 데이터들을 보여주는 역할을 한다. 프레젠터는 state도 없고 api에 대해 모르고 클래스도 없는 just function component이다. 프레젠터는 스타일이고 컨테이너는 data! 이제 모든 컨테이너와 프레젠터를 생성하자. 각 라우터에 맞게 먼저 Routes 폴더에 각 라우터명의 폴더를 생..

앞서 글로벌 css작성도 했고 약간의 헤더 수정도 진행했다. 이제 header가 어떤 route에 있는지 확인 하는 방법을 강구해보자. 무슨말이냐~ 그냥 네비게이션에서 마우스 커서가 올라가면 어떤 곳에 올라가있고 어떤 곳을 클릭하게 될지 그냥 보여주는거다 이런식으로~ 아래쪽에 줄 것이기 때문에 border-bottom을 5px solid로 주고~ 색상을 주는데 li의 stylecomponent인 Item에 current={true}로 flag를 설정해주고 border-bottom의 색상값을 주는 곳에 함수를 작성해주는데 props.current가 true이면 지정한 색을주고 아니면 transparent로 투명하게 해준다 그리고 이를 하기 위해 react-router-dom에서 withRouter를 imp..