이누의 개발성장기

Github Pages 깃허브를 이용해 웹 사이트를 무료로 호스팅할 수 있는 서비스 사용자가 깃허브 레포에 자신의 웹 프로젝트 빌드 결과물을 업로드하면 깃허브가 그를 호스팅한다. 일반 사용자는 public 레포에 대해서만 무료 호스팅이 가능하고, private 레포를 호스팅하기 위해선 깃허브 프로 계정이 필요하다. 설치 아래 커맨드를 입력해 본인의 node.js 프로젝트에 gh-pages 패키지를 설치한다. npm i gh-pages 프로젝트의 package.json에 homepage 항목을 추가한다. { "homepage" : "https://(GitHub ID).github.io/(Repository name)/" } 프로젝트 package.json의 script에 predeploy와 deploy를 ..

Class Component 지금까지는 componet를 function으로 정의했지만, class를 활용해 정의할 수도 있다. class App extends React.Component { render() { return ( Hello ); } } React.Component를 상속받아 새로운 Componet를 정의한다. React.Component는 render() 메소드를 가지고 있기 때문에 이를 활용하여 function component와 유사하게 return할 수 있다. react는 모든 class component의 render() 메소드를 자동적으로 실행하여 function component와 동일하게 결과가 나오도록 처리한다. State State는 class component에서 동적으..

father componet로부터 전달받은 props가 올바른 형태의 props가 아닐 수 있다. 유효하지 않은 props를 받고 처리하면 정상적 동작이 어렵다. 따라서 이를 확인할 수 있는 툴이 필요하다. Proptypes Proptypes은 component에서 필요로 하는 props가 무엇인지, 전달받은 props는 무엇인지 체크해준다. npm i prop-types 위 명령어로 프로젝트에 Proptypes를 설치한다. import React from "react"; import PropTypes from "prop-types"; function Food({ name, url, rating }) { return ( I love {name} {rating}/5.0 ); } Food.propTypes ..

function Food({ name, url }) { return ( I love {name} ); } 위와 같은 Componet가 있다고 하자. function App() { return ( ); } 해당 Componet를 활용할 때 위와 같이 복사-붙여넣기의 방식의 작업은 효율적이지 못하다. 우리는 실제 코딩작업을 할 때 특정 데이터를 불러오는 경우가 많다. 즉, 데이터도 동적으로 변화할 수 있다는 것이다. 따라서 복사-붙여넣기 방식을 사용할 수도 없다. 따라서 동적으로 Compnent를 만들 필요가 있다. 동적 Componet 생성 (by. map) const foodILike = [ { name: "Kimchi", image: "https://cdn.imweb.me/thumbnail/202004..

Componet에 value 전달하기 function App() { return ( ); } JSX를 활용해 Component에 prop(Property)를 부여해 그에 해당하는 value를 전달할 수 있다. prop는 여러 개 만들어 활용할 수 있으며(props), string 뿐 아니라 boolean, 배열 등의 전달도 가능하다. 위에서는 number, someting, a가 props이다. function New(props) { return ( I like {props.number} ); } 이를 전달받는 component에서는 props를 파라미터 형태로 확인하고 활용할 수 있다. HTML 문에서는 {}사이에 props.prop의 형태로 기입해 결과를 처리한다. function New({ numb..

Componet란? ReactDOM.render( , document.getElementById('root') ); index.js의 가 Component이다. Component는 React의 기본단위로서 React는 Component와 함께 동작한다. function App() { return ( hello ); } Component는 App.js의 function App()과 같이 HTML을 반환하는 함수가 Componet가 된다. 즉, App.js의 App이라는 Component를 index.js에서 의 형태로 불러와 활용하는 것이다. JSX Javascript 파일인 index.js에서 App을 'App'이라고 표현하지 않고 과 같이 표현했다. 이러한 케이스에서의 Javascript와 HTML의 ..

React App 생성하기 React로 작성된 코드는 바로 브라우저 상에서 이해할 수 없기 때문에 이를 변환하는 과정이 필요하다. 하지만 이를 위해서는 Webpack 생성, Babel 다운로드, 코드 컴파일 등의 복잡한 작업을 해야한다. 따라서 최근엔 이러한 Set up을 한번에 처리해주는 create-react-app 명령어를 사용한다. node.js가 설치되어 있어야 정상적으로 작동한다. npx create-react-app [앱이름] 작업이 완료되면 위와 같이 출력되며 작업폴더에 [앱이름]으로 된 폴더가 생성된다. (본인의 경우 movie_app_2020) React App 시작하기 이제 기본적인 구성이 종료되었기 때문에 이를 실행해볼 수 있다. 이미 pakage.json에 명령어 구성이 되어 있기..

form {% extends "layout/base.html" %} {% block content -%} 제품명 가격 설명 작성하기 {% endblock %} 위와 같은 html 코드가 있다고 하자. 이 때 form 태그는 버튼을 눌렀을 때 특정 요청을 보낼 수 있도록 해준다. 위 코드에서는 form의 method를 'post'로 설정했으므로, POST 요청이 수행된다. action은 해당 요청의 대상을 결정하는데, 해당 부분이 비어있을 경우 현재 주소를 대상으로 한다. 물론 해당 주소의 POST 요청에 대한 설정이 코드 상에 존재해야 정상적으로 작업이 수행된다. cf. base.html에는 코드의 기반으로 부트스크랩이 적용되어 있다. body-parser const bodyParser = require..

http const http = require('http') 가장 기초적인 웹 모듈. http 웹 서버와 관련된 기능을 수행한다. Server 객체 const server = http.createServer() http 모듈의 핵심이 되는 객체 createServer 메소드를 통해 생성가능 const port = process.env.PORT server.listen(port, () => { console.log(`Server running at port ${port}`) }) server.close() listen(port, callback함수) : port를 기준으로 서버실행 후 callback함수 실행하는 메소드 close() : 서버를 종료하는 메소드 cf. process.env.PORT는 내 컴..

Event Emitter const EventEmitter = require('events'); class ChatManager extends EventEmitter {} const chatManager = new ChatManager(); chatManager.on("join", () => { console.log("new user joined"); }) chatManager.emit("join"); node.js의 'events' 내장 모듈을 불러와 활용한다. 해당 객체를 extends하여 새로운 클래스를 만든다. 해당 클래스로 만들어진 객체는 on과 emit을 통해 기본적인 Event 소통이 가능해진다. on으로 특정 이름(join)의 이벤트를 생성한다. 이는 emit을 통해 이벤트를 발생시킬 수 ..