사과하는 제라스

코드를 Cloud에 올릴 것임. 1) 다음 명령어로 gh-pages를 설치함. gh-pages는 웹사이트를 github의 github page 도메인에 나타나게 해준다. npm i gh-pages 2) package.json에 다음과 같이 homepage를 추가함. "homepage": "https://yoondj98.github.io/movie_app/" 3) build를 run해서 build폴더를 생성하고 우리는 그 폴더를 github에 올릴 것임. 다음과 같이 build를 실행하면 build폴더를 생성할 수 있음. 이것을 deploy의 이전 과정인 predeploy에 설정해줄 것임. package.json의 scripts에 deploy와 predeploy를 추가함. npm run build "scr..

1) JavaScript에서는 주로 data를 fetch하기 위해서 fetch 함수를 사용했지만 React에서는 더욱 좋은 함수인 axios를 사용하면 좋다. axios는 일종의 fetch 위에 있는 작은 layer이다. 일단 axios를 사용하기 위해서 axios를 설치하자. npm i axios 2) axios를 통해서 yts라는 영화 페이지에서 영화에 대한 데이터들을 가져올 것임. yts라는 사이트에서 맨밑에 있는 API라는 란에서 movie list에 대한 주소를 긁어오면 되는데 이 사이트가 URL이 자주 바뀜(불법 다운로드 사이트인가 봄.) 그래서 이러한 변화를 적용해주는 방식으로 만들어둔 주소인 다음 URL을 사용할 것임. https://yts.mx/api/v2/list_movies.json ..

state는 보통 동적 데이터(변하는 데이터, 존재하지 않는 데이터)를 이용해서 작업할 때 만들어진다. 이번 Chap에선 props가 아닌 state에 중점을 맞춰서 배울 것임. 1) Food 컴포넌트와 관련된 것들은 이젠 지워도 된다. 또한 App 컴포넌트 또한 이제는 function 컴포넌트가 아닌 class 컴포넌트 형태로 쓸 것이다. 1. foodILike 삭제 2. Food 컴포넌트 삭제 3. Food.propTypes 삭제 4. function App을 삭제 후 다음과 같이 class App 작성 class App extends React.Component{ render(){ return Hi, it's a class Component! } } 여기서 React.Component를 extend..

소수를 구하는 문제에서 가장 흔히, 쉽게 찾아낼 수 있는 방법으로는 에라토스테네스의 체가 있다. 에라토스테네스의 체를 코드에서 적용하는 방법을 설명하자면... 1. 먼저, 구하고자 하는 범위의 boolean형 배열을 만든다. (만약 구하고자 하는 범위가 1~150 중의 소수라면 arr[151]) 2. 이 arr 배열을 true나 false로 초기화시켜주고 그것을 소수라고 생각하자. (boolean형 배열은 정의만 해둔다면 내부 element들은 모두 false로 초기화되어 있다. 그러므로 이를 고려해서 false를 소수라고 두면 간편할 수 있다.) 3. 이때, false를 소수로 정의해두고(즉, 모든 수가 소수라고 설정을 해둔 후) arr[1]만 true(소수X)로 변경해준다.(1은 소수가 아니니까) 4..

출처 : https://www.acmicpc.net/problem/2447 2447번: 별 찍기 - 10 재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. 크기 3의 패턴은 가운데에 공백이 있고, 가운데를 제외한 모든 칸에 별이 www.acmicpc.net 1. 문제 재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. 크기 3의 패턴은 가운데에 공백이 있고, 가운데를 제외한 모든 칸에 별이 하나씩 있는 패턴이다. *** * * *** N이 3보다 클 경우, 크기 N의 패턴은 공백으로 채워진 가운데의 (N/3)×(N/3) 정사각..

출처 : https://www.acmicpc.net/problem/1436 1436번: 영화감독 숌 666은 종말을 나타내는 숫자라고 한다. 따라서, 많은 블록버스터 영화에서는 666이 들어간 제목을 많이 사용한다. 영화감독 숌은 세상의 종말 이라는 시리즈 영화의 감독이다. 조지 루카스는 스타 www.acmicpc.net 1. 문제 666은 종말을 나타내는 숫자라고 한다. 따라서, 많은 블록버스터 영화에서는 666이 들어간 제목을 많이 사용한다. 영화감독 숌은 세상의 종말 이라는 시리즈 영화의 감독이다. 조지 루카스는 스타워즈를 만들 때, 스타워즈 1, 스타워즈 2, 스타워즈 3, 스타워즈 4, 스타워즈 5, 스타워즈 6과 같이 이름을 지었고, 피터 잭슨은 반지의 제왕을 만들 때, 반지의 제왕 1, 반지..

출처 : https://www.acmicpc.net/problem/2798 2798번: 블랙잭 첫째 줄에 카드의 개수 N(3 ≤ N ≤ 100)과 M(10 ≤ M ≤ 300,000)이 주어진다. 둘째 줄에는 카드에 쓰여 있는 수가 주어지며, 이 값은 100,000을 넘지 않는 양의 정수이다. 합이 M을 넘지 않는 카드 3장 www.acmicpc.net 1. 문제 카지노에서 제일 인기 있는 게임 블랙잭의 규칙은 상당히 쉽다. 카드의 합이 21을 넘지 않는 한도 내에서, 카드의 합을 최대한 크게 만드는 게임이다. 블랙잭은 카지노마다 다양한 규정이 있다. 한국 최고의 블랙잭 고수 김정인은 새로운 블랙잭 규칙을 만들어 상근, 창영이와 게임하려고 한다. 김정인 버전의 블랙잭에서 각 카드에는 양의 정수가 쓰여 있다..

출처 : https://www.acmicpc.net/problem/1929 1929번: 소수 구하기 첫째 줄에 자연수 M과 N이 빈 칸을 사이에 두고 주어진다. (1 ≤ M ≤ N ≤ 1,000,000) M이상 N이하의 소수가 하나 이상 있는 입력만 주어진다. www.acmicpc.net 1. 문제 M이상 N이하의 소수를 모두 출력하는 프로그램을 작성하시오. 2. 입력 첫째 줄에 자연수 M과 N이 빈 칸을 사이에 두고 주어진다. (1 ≤ M ≤ N ≤ 1,000,000) M이상 N이하의 소수가 하나 이상 있는 입력만 주어진다. 3 16 3. 출력 한 줄에 하나씩, 증가하는 순서대로 소수를 출력한다. 3 5 7 11 13 4. 풀이 해당 문제풀이 시 가장 중요한 것은 에라토스테네스의 체를 사용하는 것이다...

React에서 어떻게 작동을 하는지가 아닌 어떻게 보여주는지에 대해서 알아볼 것임. 에서 다음 부분의 가 HTML처럼 보이지만 사실 HTML이 아니다. 이것이 Component(컴포넌트)이다. ReactDOM.render(, document.getElementById('potato')); ㄴ이때 대신 App을 쓸 수는 없다. React는 컴포넌트가 HTML의 역할을 하게 할때 사용하기 때문이다. 이때 JavaScript와 HTML 사이의 조합을 JSX라고 한다. (ex) function Potato(){......}) 이 개념이 React의 유일한 custom한 기능이다. (나머지는 대부분 Javascript에서 배운걸 쓰는 것이다.) 에서 다음 부분은 App 컴포넌트인데 보이다시피 컴포넌트는 HTML을..

1. npx로 CRA(Create-React-App) 설치 콘솔창에 다음 명령어 입력. npx create-react-app movie_app npx란? 더보기 최근 npm으로 설치하는 모듈들은 자바스크립트 개발시 사용하는 단순한 모듈 라이브러리의 개념을 넘어 Tool 그 자체의 성격도 지니게 된 듯하다. INTRO에서 언급한 CRA나 vue-cli 처럼 프로젝트 생성도구 처럼 말이다. 그리고 사실 실제 개발이나 테스트를 하다보면 global 설치보다는 devDependency에 설치하는 경향이 더 많은 것 같다. 그리고 하루가 멀다하고 개선되고, 업데이트되는 이런 툴이나 의존성 라이브러리들을 한번 전역으로 설치해 PC에 남기고, 변경사항이 있으면 다시 삭제 후 설치하는게 번거로울 수 있다. 그리고 테스..