코딩 대장

css에 대한 설명이 거의 없어서 따라치는 정도의 수준이었지만 안드로이드 스튜디오에서 xml로 디자인을 해본 경험이 있어서 왠만한건 이런거구나.. 하고 넘어갈 수 있어서 다행!!

(css 파일은 깃허브에서 nomadcoders/movie_app 참고해주세요!)

우선 ...으로 저 긴 문장들 줄이는 패키지가 계속 설치가 안되어서 일단은 그 부분은 생략하고 만들었다.ㅜㅠㅜㅠ 그리고 VSCode에서 지금까지 만들었던 것을 빌드하면 터미널 창에 어떻게 만들어야 하는지 자세하게 뜬다!

movie_app 루트 폴더에서 package.json은 다음과 같이 변경해주면 된다.

우선!

"homepage" : "http://jm1224k.github.io/movie_app",

얘를 먼저 적어주고 npm build를 터미널에서 입력한다. 그러면 지금까지 만든 파일이 최적화되고, 빌드된다!

(여기서 jm1224k / movie_app은 본인 아이디와 깃에서 생성한 레포 이름을 적어주시면 됩니다.)

그러면 터미널 창에서

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

이 두 줄을 script 안에 적으라고 뜬다. 그러면 적어주고 저장한 후 다시 빌드해주고, npm run deploy인가..? 아무튼 또 명령어를 입력하라고 나온다. 근데 난 잘 안되어가지구..

그냥 빌드된 폴더를 깃에 gh-pages라는 이름의 브랜치로 올렸다. 그래도 됨. ㅇㅇ.

그러면 이렇게 우리가 원하는 웹페이지가 나온다!!!

http://jm1224k.github.io/movie_app

올리는게 젤 오래걸림 ㅠㅠ

지금까지 제목과 영화 포스터만 추가했었다면, 이제 DB를 토대로 정보를 추가해 보았다.

우선 app.js에서 renderMovies를 수정해주었다. 확실히 각각의 컴포넌트를 세분화하여 호출하고, 호출하는 방식으로 코드를 구성하는게 수정할 때도 편리하고 가독성도 좋은 것 같다.

각각 받아오는 요소의 이름은 console창에서 요소 검색을 통해 어떤 이름으로 데이터가 저장되어 있는지 확인하고 이와 동일하게 사용하면 된다. 이렇게 수정을 해줬다면 이제 movie.js를 수정해 줄 차례!!

우선 어떤 타입을 받아와서 사용하는지 확인할 수 있는 코드를 수정해주었다. 또, 이미지에 마우스를 올려놓았을 때 영화의 제목을 알 수 있도록 alt도 추가해 주었다.

movie라는 함수를 위와 같이 수정해 주었다. 단순히 props를 통해 데이터를 받아와서 사용하는 함수이므로 class를 사용하지 않고 function을 사용해 주었다. function에서는 class처럼 state를 가지거나 하는 기능은 할 수 없다. 그렇지만 더 간단하게 코딩이 가능하다.

영화 장르 부분은 array로 구성되어 있으므로 간단한 span을 통해 구현해준다.

이미지에 마우스를 가져다 댔을 때, 영화의 제목이 나오게 만드는 부분도 아래와 같이 구현할 수 있다.

이제 css로 예쁘게 꾸며주기만 하면 된다! 내가 제일 좋아하는 부분이라 너무 기대가 된다 ㅎㅎ 얼른 완성하고 다른 프로젝트도 해보고싶다!!

우선 알아야 하는 개념이 몇 가지 있다.

1. AJAX : Asynchronous Javascript And XML(JSON), 비동기적인 웹앱의 개발에 사용된다. 필요한 데이터만을 서버에서 요청하여 받은 후, 클라이언트에서 데이터를 처리한다.

https://ko.wikipedia.org/wiki/Ajax

2. fetch, promise : fetch로 인해 시나리오가 생기게 되고, 이를 관리하게 됨!

https://yts.am/api

여기 사이트에 들어가면 잘 정리된 db가 있다.. 여기서 내가 원하는 것을 꺼내서 사용하면 된다. 내가 사용한 것은 https://yts.am/api/v2/list_movies.json?sort_by=rating 이다.

우선 코드를 한 번에 올려보자면, callApi 함수를 통해 fetch를 해준다. 링크에서 가져온 데이터 베이스를 json으로 바꿔주고 asyncronous type으로 getMovies를 선언해준다. callApi가 실행되는 것을 기다렸다가 state를 바꿔준다. 이후 console창을 살펴보면 poster가 아니라 large_cover_image라고 선언되어 있으므로 이를 변경해주면..!

다음과 같이 영화가 나오는 것을 확인할 수 있다!!!

웹페이지를 켰을 때, '로딩중...'과 같은 상태를 구현했다. 우선 state란 현재 상태를 의미하는데, state가 다를 때 마다 render가 발생하게 만들어주는 것이다. 예를 들어 끝까지 스크롤했을 때, 20개의 영화가 더 추가되는 기능 등을 만들어 줄 수 있다.

우선 app.js에서 5sec timer를 만들어, movies 라는 array에 5초 후 movie라는 array가 mapping되도록 만들어준다.

state가 바뀔때는 setState를 사용해 줘야 한다.

이 후, movie list를 출력해주는 함수를 위와 같이 만들어 주었다. 이 후, app class내에 render 함수 내에 다음과 같이 입력해준다.

만약, movies에 movie라는 array가 들어왔다면? -> _renderMovies 출력해주고, 아니라면 loading을 출력해준다.

이렇게, 처음에는 loading이라는 글자가 뜨다가 ...

5초 후 영화 화면이 출력된다!!

내 손으로 하나씩 구현해보면서 보람을 느끼는 중 ㅎㅎ

노마드코더에서 강의를 배우면 뭔가 굉장히 어려운 개념도 쉽게 받아들일 수 있게 되는 느낌이다!

우선 저번에 만들었던 movie.js를 조금 수정해주었다.

자세히 보면 8,9 번째 줄과 18번째 줄이 변경된 것을 알 수 있다. props를 통해 부모에게서 데이터를 받아오는데 이때 부모에서 poster와 title이라는 data를 가져오는 것을 알 수 있다.

app.js에서 movies라는 array를 생성해 주었다.

그리고 app이라는 class 안에서 이 movies라는 array를 movie라는 새로운 array로 mapping하여 사용하는 것이 바로 map이라는 함수이다.

이렇게 만들어 주면 movies라는 array에 저장된 데이터를 특별한 인덱스없이 받아오는 것이 가능하게 되고, 몇개가 저장되어 있는지 몰라도 전체를 출력하는 것이 가능하게 된다. 출력한 모습은 다음과 같다!

 배우면 배울 수록 재밌다. 오늘은 저번에 만들어 두었던 웹페이지에 component를 추가해보았다.

우선! vs code를 실행시키고 movie app을 실행시켜 준 후, src 내에 movie.js와 movie.css를 만들어 준다. css에서는 디자인을 담당하게 된다.

movie.js는 app.js와 비슷한 구성으로 만들어주면 된다. 여기서 "render -> 출력을 담당하는 부분"이라고 생각하면 된다. 

원래 app.js 안에 있던 내용들을 지워주고, app.css도 .App{} 만 남겨주고 다 지워준다.

그러면!!

따란! 이미지와 텍스트가 요소로 들어있는 것을 확인할 수 있다.

(+ 이미지는 구글에서 이미지를 새탭으로 열어준 후, 주소를 입력해주면 넣어줄 수 있다.)

(+ public에서 index.html 안의 title을 수정해주면 저렇게 movie app으로 title을 수정해 줄 수 있다!)

자세한 내용은 영상을 참고해 주세요..!! (노마드코더 영상 처음 배울 때 보면 좋은 것 같다..!!)

https://www.inflearn.com/course/reactjs-web/

실행에 앞서 필요한 것들이 몇가지 있다.

1. vs code

https://code.visualstudio.com/

2. node js 설치

https://nodejs.org/ko/

이제 모든 준비가 끝났다! (강의에서는 macOS에서 실행시키지만 저는 window에서 실행시켰습니다.)

우선 가장 먼저 할 일은 node js command prompt를 실행시키는 것이다.

그리고 아래와 같이 명령어를 입력해준다.

npm install -g create-react-app

create-react-app movie_app

(여기서 movie_app이 내가 만들고자 하는 app의 이름이 된다.)

그리고 다음의 명령어를 입력해준다. movie_app 폴더로 들어간 후 react app을 실행시켜 주면 다음과 같은 창이 뜬다!

cd movie_app

npm start

간단한 수정에 들어가 보자.

vs code를 실행시키고, movie_app 폴더를 열어준다.

여기서 12번째 문장을 수정하고 save해주게 되면 자동으로 컴파일이 시작된다.

생각보다 간단하다. 빨리 더 많은 기능을 배워서 구현해보고 싶다!

최근에 어플리케이션 개발을 공부하면서 react 를 함께 공부하게 되었습니다.

https://facebook.github.io/react-native/

React의 장점

1. java script 기반이다.

2. component별로 작업이 가능하다.

+ 방대한 커뮤니티...

+참고할 강의!

https://www.inflearn.com/course/reactjs-web/

공부하면서 꾸준히 업데이트 하도록 하겠습니다! (>.<) (+강의에서 만든 movie app을 우선 따라 만들어 보도록 하겠습니다.)