4.0 Fetching Movies from API fetch axios : fetch위에 있는 작은 layer axios 설치 npm i axios 더보기 사용할 API : YTS-proxy API (by nomad coder) yts.mx/api/v2/list_movies.json JsonView - json파일을 예쁘게 보여주는 크롬 확장프로그램 : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related axios로 가져온 data를 변수에 저장 axios가 우리에게 data를 주지만, 우리는 그 데이터를 잡아야 한다. 그래야 state에 사용 가능. componentDidMount(){ c..

3.0 Class Components and State State 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 조재하지 않는 데이터 생겨나고선 사라지고 변경되는 데이터, 하나에서 2개 또는 0이 되는 그런 종류의 데이터들 -> state가 필요하다. function component VS class component function component : function/ 무언가 return/ screen에 표시O class component : class/ react component로부터 확장/ screen에 표시O - render method 내부에 넣어야만 ㅎ나다. 📌 react는 자동적으로 모든 class component의 render method를 실행한다. - cl..

2.0 Creating your first React Component Component : HTML을 반환하는 함수이다. ex) react는 component를 사용하여 HTML처럼 작성하려는 경우에 필요하다. javascript와 HTML 사이의 이러한 조합을 JSX라고 한다. 새로운 component Potato를 만들어보자 index.js에서 한 번에 둘 이상의 component를 rendering하려하면, 오류가 발생한다. ⛔ react application은 하나의 component만을 rendering해야 한다. -> 올바르게 사용한 예시 react는 Component를 가져와 Browser가 이해할 수 있는 평범한 일반 HTML로 만든다. 📌 react application은 하나의 com..

💡 #0 Introduction에 Requirements가 포함되어 있으니 꼭 읽고 넘어오세요. 1.0 Creating your first React App npx create-react-app movie_app_2020 VSCode로 해당 폴더를 Open한다. code movei_app_2020 package.json scripts 원래는 test, eject도 있지만 remove 나머지 config들은 신경 안 써도 된다. 파일들 중 yarn.lock은 default로 생성된다. 노마드코더에서는 필요없기 때문에 Delete yarn은 npm과 같은 역할을 한다. VSCode의 terminal에서 npm start를 입력한다. (본인 기준 시간이 좀 걸렸음) server starting 메시지가 뜨고 ..

노마드코더 영상을 보면서 React를 공부해보자!nomadcoders.co/react-fundamentals ReactJS로 영화 웹 서비스 만들기 - 노마드 코더 Nomad CodersReact Fundamentalsnomadcoders.co Requirements1. Node.js2. npm3. npx4. git CMD에서..Node.js + npm설치node -vnpm -v(node.js 는 npm이랑 같이 옴 -> 따로 설치 안 해도 됨) npx 설치(npm instal npx -g)npx -v  git --version없으면 설치 VSCode 설치(다른 코드 에디터도 가능)  HTML, CSS, Jnode.js, package.json 도 알면 좋지만 몰라도 강의에서 설명해줌Why React?거..

문제 ( www.acmicpc.net/problem/1316 ) 그룹 단어란 단어에 존재하는 모든 문자에 대해서, 각 문자가 연속해서 나타나는 경우만을 말한다. 예를 들면, ccazzzzbb는 c, a, z, b가 모두 연속해서 나타나고, kin도 k, i, n이 연속해서 나타나기 때문에 그룹 단어이지만, aabbbccb는 b가 떨어져서 나타나기 때문에 그룹 단어가 아니다. 단어 N개를 입력으로 받아 그룹 단어의 개수를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 단어의 개수 N이 들어온다. N은 100보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 단어가 들어온다. 단어는 알파벳 소문자로만 되어있고 중복되지 않으며, 길이는 최대 100이다. 출력 첫째 줄에 그룹 단어의 개수를 출력한다. 예제..