Coding Story

Static Pages(정적 페이지) Web server(80)을 사용한다. 과정 1. Client(브라우저, 모바일 앱)가 HTTP라는 프로토콜을 이용해서 페이지를 요청한다.(GET /path/index.html) 이 때 index.html은 누가 요청해도 항상 동일한 정적인 페이지이다. 2. 웹 서버가 요청을 받고 FileSystem에서 읽어 들여 client에 던져준다. => 웹서버가 pathname을 읽고 해당하는 파일을 client에 돌려줌ex) html, img, video Dynamic Pages(동적 페이지) Web Application Server(8080)을 활용한다. 과정 1. uid 인자가 다른 HTTP를 Web Application Server(WAS)에 보낸다. (GET /srv..

Ctrl + Alt + t

터미널에 npm i gh-pages 를 입력하여 gh-pages를 설치한다. gh-pages는 github에 웹페이지를 업로드하는 것을 허가해주는 모듈이다. git remote -v 를 입력하면 현재 깃허브 프로젝트 도메인을 확인할 수 있다. package.JSON으로 가서 맨 밑에 "homepage" : "https://{github username}.github.io/{project name}/" 을 추가한다. 그리고 package.JSON의 "script"에 마지막 두 줄을 추가한다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "reac..

Rendering Movies.data.data.movies로 영화 데이터 목록들을 확인한다. es6를 사용해 이렇게 단축시킬 수 있다. getMovies = async() => { const {data : {data : {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); } 이제 이 movies를 state안에 넣어야 한다. this.setState({movies : movies}); 를 최신버전 자바스크립트를 사용해 이렇게 짧게 표현한다. getMovies = async() => { const {data : {data : {movies}}} = await axios.get("http..

Fetching Movies from API Axios 일반적으로 자바스크립트에서 data를 fetch하는 방식은 fetch()를 사용하는 것이지만 여기선 Axios를 사용한다. npm install axios Axios를 설치한다. API 가져오기 https://yts-proxy.now.sh/list_movies.json API를 가져올 YTS라는 사이트는 불법 토렌트 사이트라 도메인을 수시로 바꾸기 때문에 API URL 이 계속 변경된다. 그래서 니콜라스가 깃허브에 올린 YTS 사이트를 추적하는 주소를 사용한다. JSONView 라는 크롬 확장프로그램을 설치해서 보면 보기 좋게 바꿔준다. import React from "react"; import axios from "axios"; class App..

사전 준비 import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { const { isLoading } = this.state; return {isLoading ? "Loading..." : "Ready"} } } export default App; mount(생겨나는 것) 되자마자 isLoading은 기본적으로 true 값을 갖는다. 삼항연산자를 사용해 isLoading이라면 "Loading" 텍스트를, 그렇지 않을 경우에는 "Ready"를 보여준다. 여기서 처음에 render()를 할 때 호출되는 life cycle 메서드는 componentDidMount()이다. impor..

실행 화면 기능 캔버스로 공, 패들, 벽돌 생성하기 키보드 이벤트 핸들러로 패들 이동시키기 공 이동 애니메이션 구현 벽돌과 공이 부딪혔을 때 벽돌 보이지 않게 하고 score 올리기 공이 바닥과 닿았을 때 live 하나씩 줄기 live가 다 줄었을 때 게임 오버, 게임 다시 시작 코드 const rulesBtn = document.getElementById("rules-btn"); const closeBtn = document.getElementById("close-btn"); const rules = document.getElementById("rules"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext(..

requestAnimationFrame() 자바스크립트로 애니메이션을 구현할 때는 1초에 60프레임을 찍어내면 된다. 사람은 1초에 60개의 프레임을 볼 수 있기 때문이다. 16.6ms(1000ms/60frame)마다 프레임을 찍어내면 된다. setInterval로도 이를 구현할 수 있지만, setInterval이나 setTimeout은 프레임을 신경쓰지 않고 동작하기 때문에 애니메이션 코드를 실행하는데 16.6ms가 넘게 걸린다면 16.6ms동안 프레임을 찍어내지 못했기 때문에 화면이 끊기는 듯한 현상이 발생할 수 있다. 프레임 시작시간에 맞춰 함수가 시작되는 것이 아니라 중간쯤부터 시작해 프레임 시간을 초과해버린다. requestAnimationFrame을 사용하면 프레임 생성 시작시간에 맞춰 애니메..

버전 관리 내가 원하는 시점으로 이동하게 해주는 것이 버전 관리다. 이를 도와주는 툴이 버전 관리 시스템이다. Git, GitHub 내가 원하는 시점마다 깃발을 꽂고 그 시점으로 자유롭게 이동한다면 편안하게 새로운 소스코드를 추가/삭제 할 수 있을것이다. 이를 가능하게 해주는 것이 소스코드 버전 관리 시스템, Git이다. 깃은 개인 컴퓨터 뿐만 아니라 어디서든 사용할 수 있다. 이렇게 깃으로 관리하는 프로젝트를 올려둘 수 있는 깃 호스팅 사이트 중 하나가 바로 GitHub다. 깃허브에 소스코드를 올리면 공간, 시간 제약 없이 협업 할 수 있고 프로젝트를 공개 저장소로 만든다면 누구든지 접근이 가능하다. 이러한 공개저장소 프로젝트를 오픈소스라고 한다. 깃을 통해 버전관리가 이뤄질 내 컴퓨터에 있는 폴더를 ..

스크롤링 window.addEventListener("scroll", () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; if (Math.round(scrollHeight - scrollTop) { loading.classList.remove("show"); setTimeout(() => { page++; showPosts(); }, 300); }, 1000); } setTimeout: 일정시간 후에 함수를 실행한다. 로딩 화면을 띄우고 난 후 setTimeout 함수로 1초 후에 로딩 화면을 지우고, 또다른 setTimeout함수를 실행해 0.3초 후에 다른 포스트들을 띄운다. Post 보여주기 async..