이누의 개발성장기

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

미들웨어 미들웨어의 원래 뜻은 '클라이언트와 서버 간의 통신을 담당하는 시스템 소프트웨어 또는 컴퓨터와 컴퓨터의 연결을 담당하는 시스템 소프트웨어'이지만, 적용되는 서비스마다 그 의미가 달라진다. Node.js express에서 미들웨어는 '최종 요청 핸들러 이전의 Express 라우팅 계층에 의해 호출되는 함수로써, 따라서 원시 요청과 의도된 최종 라우트 사이의 미들웨어에 위치함'으로 정의된다. 아래와 같이 라우팅시 처리되는 함수도 모두 미들웨어 함수이다. 라우팅을 작성하는데 어떤 URL은 꼭 로그인을 요구하고 싶다고 하자. 로그인이 안되어있으면 로그인 페이지로 강제 이동한다. 특정 URL로 들어가기 전에 로그인을 체크한다. 미들웨어는 이러한 일련의 과정을 좀 더 쉽게해주는 것이라고 할 수 있다. 즉,..

view engine view engine이란 DB의 내용 등을 자연스럽게 HTML에 보여줄 수 있도록 하는 엔진이다. html 내부에서 해당 엔진을 활용해 반복문, 조건문 등을 사용할 수 있다. 다양한 패키지가 존재하는데 우리는 그 중 Nunjucks를 사용할 것이다. npm install nunjucks 명령어를 통해 패키지를 설치한다. npm install nunjucks nunjucks nunjucks.configure('template', { autoescape: true, express: app }); // template를 인식하고 사용하겠다 // autoescape는 보안상 true // express : app는 사용할 주체 nunjucks.configure를 통해 적용할 html 페이지..

Routing 새로운 주소가 추가될 때마다 하나의 파일에서 계속 코드를 추가해준다면 코드가 굉장히 복잡하고 관리가 어려워질 것이다. 따라서 Router라는 모듈을 이용해 특정 주소 패턴별로 파일을 따로 만들도록 한다. 우리는 /admin과 /admin/products 주소에 대한 요청을 만들것이고, admin으로 통하는 URI를 관리하는 파일을 따로 만들어 볼 것이다. 프로젝트 폴더 최상위에 routes 폴더를 만든다. 그리고 admin.js 파일을 생성해 해당 파일에 관련 정보를 작성한다. const express = require('express') const router = express.Router() // express 패키지의 Router를 가져온다. router.get('/', (req, r..