Enjoy Programming

앞서 home과 tv컨테이너의 로직은 거의 같다. tv컨테이너는 따로 작성할 필요가 없으니 search container로 넘어와서 포스팅한다. search컨테이너는 많은 로직이 들어간다. 첫번쨰로는 handleSubmit을 한다. react에서 form다루는 거라고 생각하면 된다. form에서 text를 인풋하고 submit하면 handleSubmit하는 거~~~ 잠시 react.doc을 살펴보면 react에서 html form element는 form element자체가 내부의 state를 가지기 때문에 react의 다른 Dom element와 조금 다르게 동작한다고 한다. 기본적으로 이 폼은 사용자가 submit하면 새로운 페이지로 이동하는 기본 html폼 동작을 수행한다. react에서 동일한 동..

앞서 기본 파일들을 만들었고 이제 홈컨테이너를 작성한다. 컴포넌트가 마운트 되면 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상태가..

이제 사이트에 필요한 영화와 tv show 데이터를 어디서 가져오느냐~~ 인데. 니코의 소개로 알게 된 곳인 https://www.themoviedb.org/?language=ko The Movie Database (TMDb) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 무료로 api를 쓸 수 있다. 가입하자~ 가입후 설정페이지에 보면 API가 있는데 API 키를 얻어야 하는데 먼저 api생성해야한다 각종정보를 입력하고 생성하면 버전3 api key가 뜬다 이걸로~~ doc에 가서 https://developers.themoviedb.org/3 API Docs Hosted API d..

간단하게 Cookie의 property에서 중요한 정보를 좀 짚고 넘어가자 그보다 먼저 express-session에 secret prop에 대해 알아본다. secret은 쿠키에 sign할때 사용하는 string이다. 쿠키에 sign? 이 말은 backend가 쿠키를 발행했다는 것을 보여주는 것이다. 나의 쿠키를 누군가 해킹해 나인척 하는 session hijack에서 보호하기 위해 secret string이 필요하다 이 string은 매우 길고 무작위이며 강력해야 한다. 이 강력한 string으로 쿠키를 sign하고 나의 backend가 만든 것임을 증명한다. . Domain . Domain은 해당 쿠키를 만든 backend가 누구인지 나타낸다. 그리고 쿠키는 해당 Domain에 있는 backend로만..

session을 이용해 데이터베이스에 session data를 저장하는 코드이다. resave, saveUninitialized가 있는데 이에 대해 좀 더 알아보자. 먼저 브라우저에서 쿠키값을 지워가며 refresh해주면 위 코드로는 지속적으로 mongoStore에 저장된다. 만약 로그인 할 유저가 아닌 bot이라던지 의미 없는 사용자가 거쳐가는 것만으로도 저장이 된다면 매우 불필요한 작업일 것이다. 그리고 브라우저에 접근한 사람이 많을 수록 비용도 거대해 질 것이다. 이를 해결하기 위해 모든 방문자에 대해 쿠키를 생성하지 않는 방법을 접근해보자. 모든 유저에게 주지 않고 로그인한 사용자에게만 쿠키를 생성한다. 먼저 resave와 saveUninitialize를 false로 바꿔주자. 그리고 db의 se..

react에서 styling해주는 방법은 css파일을 만들어 한번에 import 해주거나 또는 각 컴포넌트들과 묶어서 css를 import해주는 방법이 있다. react는 각 부분부분을 나누어 쓰는 컴포넌트화 시키는 것에 의미가 있기에 이런식으로 index.js파일을 포함한 폴더를 만들어서 default로 내보내주면 인식이된다. 음 .. index라는게.. 의미가 크구나 싶다. 아직 잘 이해는 안간다 계속 봐야 할듯 하다. 그런데 css를 하다보면 class명을 주기가 참 까다롭다. class명이 중복되지 않도록 코드를 짜는게 상당히 성가시다. 물론 같은 class를 줘서 함께 prop을 주기는 좋지만~ 코드가 방대해지다 보면 다른 부분과 겹칠 가능성도 농후한데 react에서는 css모듈이라는 것을 이용..