이누의 개발성장기

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을 통해 이벤트를 발생시킬 수 ..

7월부터 11월, 광주 인공지능 사관학교 5개월의 과정이 모두 끝났다. 운 좋게도 최종 성적우수 대상까지 수상했다. 꾸준히 열심히했던 것에 대한 보상인 것 같아 기쁘다. '프로그램 과정'부터 '전체적인 평가', '내가 배운 것들', 그리고 '결론'까지 차례로 정리해보며 5개월의 마무리를 지어보려한다. 목차는 다음과 같다. 개인적인 기록에 가까운 게시글이라 가독성이 좋지 않을 수 있는 점 양해 부탁드립니다. 프로그램 과정 프로그램에 대한 전체적인 평가 내가 배운 것들 결론 1. 프로그램 과정 프로그램 과정들을 전반적으로 되돌아보자면 아래와 같다. 온라인 수업 : 온라인으로만 9시부터 6시까지 구글 밋으로 라이브 강의를 수강했다. 머신러닝, 확률과 통계, 알고리즘, 자연어 처리, 웹, 딥러닝 6개로 주제를 ..