const http = require('http'); const hostname = '127.0.0.1'; const port = 1337; http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n'); }).listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); }); 위 코드는 NodeJS에서 제공하는 서버를 만드는 방법이다. 사실 이렇게 간단한 코드로 어플리케이션 서버를 구축한다는 것은 생각보다 굉장한 일이다. 그렇지만 현재에 이르러서는 Node에서 ..

NodeJS에서 무언가를 만들기 위해 처음 시작할 때 우리는 아무것도 없는 상태에서 시작하게 됩니다. 그리고 NodeJS에서 작업한다는 것은 마치 아무것도 없는 상태에서 도구를 가져와 거대한 성을 만드는 과정이라고도 할 수 있습니다. 여기서 도구의 역할을 하는 것이 바로 모듈이라는 개념입니다. 모듈은 어떤것도 모듈이 될 수 있는데 심지어 매우 간단한 것을 하는 것이라도 모듈이 될 수 있습니다. 예를 들어 이러한 모듈이 있다고 가정해보겠습니다. module.js export function module() { console.log('module'); } 단지 module이라는 단어를 콘솔에 출력하는 함수이지만 module.js에서 module함수를 내가 작업하는 환경으로 가져와 import | requir..

우리가 웹사이트에 접속하게 되면 뒤에서 어떠한 과정이 일어나는지 정확히 알지 못하지만 웹사이트를 통해 많은 유저들과 소통을 할 수 있습니다. 인터넷이 등장함에 따라 사람과 사람 즉, 컴퓨터와 컴퓨터 간에 소통을 할 수 있게 된 것입니다. 웹은 크게 2가지 측면으로 바라볼 수 있는데 하나는 정보를 사용하는 쪽에 해당하는 클라이언트 측면과 정보를 제공하는 서버 측면이 존재합니다. 클라이언트가 어떠한 웹사이트를 이용하고 싶다면 보통 상단 URL에 http//a.com이라는 도메인으로 접속하면 그에 해당하는 서버가 클라이언트에게 정보를 제공하는 것입니다. 실제로는 도메인이 정보를 주는 것이 아니고 도메인이 가진 IP주소(52.192.173.151)로 요청하여 정보를 가져오는 것이라고 볼 수 있겠습니다. 실제 I..

ShigatsuFlix Learning React and ES6 by building a Movie Discovery App. Demo ShigatsuFlix with React Preview Tech Stack Frontend Technology Description 01 React CRA 02 Styled Components Replace CSS 03 React Router react-router-dom 04 Container & Presenter Pattern 05 Axios TMDB API No Backend Directory Structure public |-- loading.gif |-- noPosterSmall.png src |-- Components | |-- App.js | |-- Car..

Shigatsuel Movie App Description Get to Know React JS Fundamentals by Creating Movie APP (2019 Update Version!) Demo Movie App Concept List Set Up Create React App How React Does Work JSX & Props Create Component Reusable Components with JSX + Props Dynamic Component Generation React Uniqueness Protection with PropTypes State Class Components and State All I need to know about State Component Li..

Demo Day 30 - Whack A Mole Game HTML 코드 Whack-a-mole! 0 Best Score! 0 Start! CSS 코드 body { padding: 0; margin: 0; font-family: "Amatic SC", cursive; display: flex; flex-direction: column; align-items: center; } h1 { text-align: center; font-size: 10rem; line-height: 1; margin-bottom: 0; } button { margin-top: 20px; width: 100px; height: 30px; } .score { background: rgba(255, 255, 255, 0.2); padd..