Engineering_S/W & H/W

/* member.controller.ts 파일 */ // Controller를 구성하기 위한 method // Controller : nest js에서 컨트롤 구현시 필요 // Post : nest js에서 Client의 Post 구현시 필요 // Body : nest js에서 Client의 Body를 추출할때 필요 // Get : nest js에서 Client의 Get 구현시 필요 import { Controller , Post , Body , Get } from '@nestjs/common' ; // MembersService method를 참조 import { MembersService } from './member.service' ; // Controller의 시작부분 // ('members')일시 url은 root/members으로 요청이 와야 // 아래 Controller이 실행된다. @ Controller ( 'members' ) export class MembersController { // MembersService는 현재 class안에서만 사용할수 있다. // 동시에 읽기 전용이다. constructor ( private readonly membersService : MembersService ) { } // GET요청 URL : root/members @ Get () // 모든 members의 정보를 요청한다. getAllMembers (){ return { // Controller에서 membersService의 getMembers method // 에서 해당값을 요청. members : this . membersService . getMembers () } } // POST요청 URL : roo...

 먼저 members.module의 틀을 작성하도록 하겠습니다. /* 회원가입시 유저가 입력해야하는 정보 name : 이름 (string) password : 비밀번호 (string) email : 이메일 (string) age : 나이 (number) 위 members.module을 만드는 방법은 2가지가 있습니다. */ // 1번째 cless를 이용하여 지정 export class Member_ver1 { id : string ; // DB저장시 PR키 name : string ; password : string ; email : string ; age : number ; constructor ( id : string , name : string , password : string , email : string , age : number ) { this . id = id ; this . name = name ; this . password = password ; this . email = email ; this . age = age ; } } // 2번째 public를 이용하여 지정 export class Member_ver2 { // 위쪽 코드와 동일함 constructor ( public id : string , public name : string , public password : string , public email : string , public age : number ) { } } 2가지 경우를 모두 사용하기 위해 class 명칭을 각...

   일단 'nest new [project name]'을 실행하고 생성된 폴더와 파일들이 제대로 동작되는지 확인하기 위해서 'npm start'를 실행합니다. 위 Postman을 이용항여 localhost:3000에 GET요청을 할때 Respone으로 "Hello World!"가 온것을 확인할수 있습니다.  참고로 'Hello World!'문자열의 app.service.ts에서 getHello() method의 'Hello World!'문자열이 return 한 값입니다. 전체적이 구조를 이해할려면 이전 글(nest js -1 Structure) 을 참고해 주시기 바랍니다. 이제 src경로에 'members'폴더를 만든다. 이 폴더는 members의 controller, module, modules, service의 ts파일이 저장된다. 이제 폴더와 파일이 완성되었다. 다음 글서부터는 ts파일 작성법에 대해서 글을 쓰도록 하겠습니다. 

지금까지는 react-redux store에 숫자로만 조작을 하였지만 이번에는 데이터, 즉 객체 데이터를 넣도록 하겠습니다.  먼저 저번과 마찬가지로 Action, Reducer, Types 3개를 resume 폴더안에 말들어줍니다. export const ADD_RESUME = "ADD_RESUME" ; // 이력서를 지원하기 위한 타입 입력 먼저 resumeTypes.js에 위 코드를 작성해 줍니다. import { ADD_RESUME } from './resumeTypes' ; export const addResume = ( resume = { Name : '' , Email : '' }) => { return { type : ADD_RESUME , payload : resume } } 이제 액션부분을 resumeAction.js부분에 코딩을 해줍니다. 여기서 cookie파트와 비슷하면서 다른점이 있습니다. 인자를 받지만 이번에는 객채를 받습니다. 키값이 Name, Email로 구성된 객체를 받습니다. 이것은 payload에 전달되서 reducer에 보내기게 됩니다. // resumeTypes에서 이력서 지원 타입을 받아온다. import { ADD_RESUME } from './resumeTypes' ; // 지원자의 이름과 이메일을 state로 저장한다 const initialState = { resume : { Name : '' , Email : '' } // 초기 이력서는 빈공간 }; // cookieReducer는 이전 toyReducer와 달리 payload에 따라 수량이 변화한다. const resumeReducer = ( state = initialState , action ) => ...

import { React , useState } from 'react' ; import { connect } from 'react-redux' ; // react, redux연결 import { buyCookie , sellCookie } from '../Redux' ; // toy action 연결 // 위 함수는 App.js에 추가할 component function CookiePart ( props ){ // number의 변수를 바꾸기 위한 useState사용 const [ number , setNumber ] = useState ( 1 ); console . log ( 'Cookie(props) : ' , typeof props , props ); console . log ( 'Cookie(props.numberOfCookie) : ' , typeof props . numOfCookie , props . numOfCookie ); // return할 component return ( < div > < h2 > Number of Cookies - { props . numOfCookie } </ h2 > { /* input에 숫자를 입력하여 사고팔때의 쿠기수량을 조절합니다. */ } < input type = 'text' value = { number } onChange = { e => setNumber ( e . target . value ) } /> < button onClick = { () => props . buyCookie ( number ) } > Buy { number } Cookies </...

이번에는 Cookie를 판매하는 파트를 Redux를 이용하여 만들도록 하겠습니다.    일단 위의 폴더에서 CookiePart.js component와 cookie폴더가 추가 되었습니다. 2개의 component는 구조가 비슷하지만 toy와 달리 CookiePart component는 구입, 판매 수량을 조절할수 있습니다. 이제 toy폴더와 같이 3개의 js파일(cookieAction.js, cookieReducer.js, cookieTypes.js)을 생성합니다.  export const BUY_COOKIE = "BUY_COOKIE" ; // 쿠기를 사기위한 타입 입력 export const SELL_COOKIE = "SELL_COOKIE" ; // 쿠기를 팔기위한 타입 입력 cookieType.js파일을 위와같이 코딩해 줍니다. import { BUY_COOKIE , SELL_COOKIE } from './cookieTypes' ; export const buyCookie = ( num = 1 ) => { return { type : BUY_COOKIE , payload : num } } export const sellCookie = ( num = 1 ) => { return { type : SELL_COOKIE , payload : num } } 이제 cookieAction.js 부분도 위와같이 코딩을 해줍니다. 다만 이전 toyAction.js와 다른점은 함수인자가 추가된 것입니다. cookie부분은 사용자가 판매, 구매 수량을 조절할수 있게 하기 위해서 num인자를 추가했습니다. 하지만 인자가 추가되지 않는 상황을 대비하여 숫자가 들어오지 않을시 default value를 1로합니다.  // cookieTypes에서 구매와 판매 타입을 받아온다. impor...

 저번 글과 마찬가지로 Redux에 대한 코딩을 진행하겠습니다.  이제 components폴더 안에 ToyPart.js를 생성한다. 이것은 React의 components이다.  import React from 'react' ; import { connect } from 'react-redux' ; // react, redux연결 import { buyToy , sellToy } from '../Redux' ; // toy action 연결 // 위 함수는 App.js에 추가할 component function ToyPart ( props ){ // return할 component return ( < div > < h2 > Number of Toys - { props . numOfToys } </ h2 > < button onClick = { props . buyToy } > Buy Toys </ button > < button onClick = { props . sellToy } > Sell Toys </ button > </ div > ) } // Redux실행시 현재 state에 저장된 기록을 불러옵니다. const mapStateToProps = ( state ) => { console . log ( 'mapStateToProps : ' , state ); return { numOfToys : state , } } // Redux실행시 각 action에 따른 method를 Arrow function에따라 dispatch합니다. const mapDispatchToProps = ( dispatch ) => { ...