React) Movie App

<Web>

 

 

<App>

 

 

 

- 학습 내용

• React
• useState
• useEffect
• Link
• 삼항 연산자
• className

 

 

- 회 고

 

: 노마드 코더에서 '실전형 React Hooks'와 'React JS로 영화 웹서비스 만들기' 2개의 강의를 들으며 React를 공부했다. useState와 useEffect에 먼저 익숙해져야 한다고 해서 코드를 따라 치며 익숙해지려 노력했다(덕분에 계산기 기능 구현을 할 수 있었다). 

Hooks 강의 수장 후 메인 페이지에서 useState와 useEffect를 사용하여 데이터 정보를 받아오고 이를 사용하는 방법을 익혔다. 이후 스타일링과 디테일 페이지는 강의 없이 각자 알아서 만들라고 했다. 그리고 여러 문제에 부딪혔다. 

먼저, 포스터에 마우스를 두면 영화의 간략한 설명(왼쪽에서 두 번째 그림)이 나오길 바랐다. 그래서 hover효과를 넣었더니 포스터와 간략 설명이 불안정하게 겹치는 결과가 나왔다. 그래서 한참을 고민했는데, 이럴 때는 useState와 onMouseEnter/onMouseLeave, 삼항 연산자를 사용해 다른 스타일을 적용하라는 조언을 받았다. 그래서 문제를 해결할 수 있었다. 

detatil page를 따로 만들지 않고, 영화의 제목을 클릭했을 때 해당 영화의 url로 연결하고 싶었는데, 해당 사이트에서 허용하지 않아 불가능했다. 그래서 따로 detail page를 만들었고 데이터를 얻기 위해 useState를 사용했다. 

반응형 웹을 만들고 싶어 media query를 사용해 스타일을 넣었다. 스타일링을 하면서, home과 detail 페이지 모두에  p element가 있었는데 둘 중 한 페이지에 p에 대한 스타일 적용 시, 두 페이지 모두에 스타일이 적용이 되는 에러가 있었다. 결국 한 페이지의 p element를 div로 바꾸긴 했는데, 왜 그런 건지는 잘 모르겠다. 

처음으로 배포도 해 보았고, git에서 merge도 해보았다. 사실 클론 코딩으로 시작했기에 포트폴리오로 쓸 수 없다는 생각이 들어 스타일을 넣고 detail 페이지를 넣는, 강의 이외의 작업은 할 생각이 없었다. 하지만 막상 해보니 이런저런 문제에도 부딪히고 마주한 문제를 하나하나 해결해 나가려고 고민했던 시간이 즐거웠다. 이전에 다른 공부할 때도 느꼈지만, 결국 익숙함의 정도가 중요한 것 같다. 코딩에서는 해당 언어를 얼마나 많이 사용해 보고 어떤 문제들을 마주하고 해결해 왔는가겠지.

 

React App