이누의 개발성장기

Service nest.js는 controller와 비즈니스 로직을 분리한다. 따라서 실제적인 기능인 비즈니스 로직은 모두 Service에서 정의하게 된다. controller와 마찬가지로 app.service.ts만으로는 모든 기능을 구성하기 어렵다. 따라서 새로운 service를 생성해야 할 경우가 많다. nest g s 위 명령어로 새로운 service를 만들 수 있다. @Injectable() export class MoviesService { getAll(): Movie[] { return this.movies; } getOne(id: number): Movie { const movie = this.movies.find(movie => movie.id === id); if (!movie) { t..

REST API의 단점과 GraphQL REST API는 URL을 계속해서 입력해야한다는 단점이 있다. 여러 엔드포인트에 대해 여러 형태의 쿼리로 데이터를 얻어와야한다. URL이 세밀하게 짜여있지 않은 이상 자신이 원하는 데이터 이상의 데이터를 불러와야할 수도 있고, 여러번의 URL에 여러번의 요청을 보내야 할 수도있다. (Over-fetching, Under-fetching) 하지만 GraphQL은 이러한 단점을 극복해 단일 엔드 포인트에 단일 쿼리로 모든 데이터를 원하는 만큼 불러올 수 있다. movies query 로 여러 영화의 정보를 받아올 수 있다고 하자. 이 때 우리는 영화들의 제목만 필요할 뿐, 다른 것은 필요하지 않다. 이 때 REST API는 어쩔 수없이 모든 정보를 불러오고 이를 수정..

Nest.js Node.js의 express를 기반으로 처리되는 백엔드 구성 프레임워크 typescript를 기본적으로 지원한다. (javascript로도 작성은 가능) node.js 특유의 구조와 순서, 룰을 잘 이용하면 엔터프라이즈 규모의 백엔드를 쉽게 제작할 수 있다. npm i -g @nestjs/cli 위 커맨드로 설치한다. (node.js는 기본적으로 설치되어있어야 한다.) nest new project 위 커맨드로 nest 프로젝트를 시작할 수 있다. 기본적으로 필요한 각종 패키지들이 설치되어 있다. (타입스크립트 등) Nest.js 파일구조 살펴보기 프로젝트를 생성하고 나면 위와같은 구조의 파일들이 생성된다. 핵심이 되는 파일들만 간단하게 살펴보자. src폴더의 main.ts에서 기본적인 ..

React Hooks API Class Component를 사용하지 않고도 state를 사용할 수 있도록 해준다. 즉, functional component에서 state를 가질 수 있도록 한다. 이런 기능이 유용한 이유는, class를 사용하지 않고 functional programming style 적용이 가능하도록 해주기 때문이다. hook의 종류에는 useState, useEffect이 있고 이들을 활용해 다양한 hook을 만들어 활용할 수 있다. 리액트 hooks 공식 페이지 (https://ko.reactjs.org/docs/hooks-intro.html) 사용예시 : useState import React, { useState } from "react"; const App = () => { ..

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에 명령어 구성이 되어 있기..