Wise Convey - code review

jungeundelilahLEE·2021년 12월 16일
0

goal

  • 6가지 이유를 찾아가는 코드리뷰
  • 파일 구조 파악
  • 동적 데이터와 정적 데이터의 구분과 데이터 핸들링

비동기 - 콜백 vs promise
웹 worker
axios

  • 일단 function 을 기준으로 잡고 다음 6가지에 대한 이유를 찾아나가는 과정으로 코드 리뷰를 해볼 예정이다.

    What?무엇을 위해 만들어졌는지?생성 용도ex. onclick event, api call etc
    Why?왜 이 --- 를 선택했는지?사용 근거 / 선택근거ex. why you use put method? etc
    How?그럼 어떻게 쓰는건지? (API/Get started)방법론 / 공식문서
    Where?(=Who?)어디서 사용할건지?(=누가 사용할건지?)
    When?언제 사용할건지?
What?
Why?
How?
Where?(=Who?)
When?
  • 파일 트리
    Reader > ErrBtn, EditingView > DataId (each Cards)

1. Reader.js

  • 왜 convertResult와, setConvertResult를 둘 다 EditingView component에 props로 넘겼을까?

    • 전체수정완료 btn을 클릭하면, update() 함수가 실행된다.
      update함수안에(EditingView.151)서 수정된 데이타를 put 메소드를 사용해서 api call한다.
      • editingParam(document.api.91)은 실제로 들어갈 데이터인데, 이것을 editingParam함수로 생성(EditingView.61)한다.
      • then으로 데이터를 받아서, setConvertResult함수를 실행시킨 뒤, 바뀐 데이터를 바인딩한다.
      • 나머지는 에러처리
    • What?바뀐 데이터를 비동기로 처리해야하고, 그 데이터를 바로 바인딩하기 위해
      Why?promise and .then() : 비동기로 처리해야 함 / 콜백
      How?-
      Where?(=Who?)수정완료시 수정된 데이터 state 변경(업데이트)
      When?수정버튼을 누르고, 업데이트된 데이터를 put할 때

    • promise
      • promise 는 비동기 작업이 성공 했는지 혹은 실패했는지를 나타내는 하나의 오브젝트 입니다. 즉 성공/실패 의 분기점이 되는 중간의 상태라고 표현할 수 있죠. 왜 promise라는 이름이 붙었는지 잠깐 살펴보자면.. "내가 할수 있는 한 빨리 너의 요청의 응답을 가지고 돌아간다고 약속(promise)할게" 라는 브라우저의 표현방식 이어서 그렇습니다.
      • .then() : 이전 작업이 성공했을때 수행할 작업을 나타내는 callback 함수 입니다. 그리고 각 callback함수는 인수로 이전 작업의 성공 결과를 전달받습니다. 따라서 성공했을때의 코드를 callback 함수 안에 작성하면 됩니다. 각 .then() 블럭은 서로 다른 promise를 반환합니다. 이 말은 .then() 을 여러개 사용하여 연쇄적으로 작업을 수행하게 할 수 있음을 말합니다. 따라서 여러 비동기 작업을 차례대로 수행할 수 있습니다.
  • how js works

    • javascript engine
      • 메모리 힙(heap : 더미) : 메모리 할당이 발생하는 곳
      • 콜 스택(stack : 쌓임) : 코드가 실행될 때, stack frame이 있는 곳
        • frame : 프레임은 컴퓨터 네트워킹 및 통신에서 디지털 데이터 전송 단위 (like a 패킷)
    • javascript runtime
      • Web APIs : 웹 브라우저를 위한 애플리케이션 프로그래밍 인터페이스
    • call stack
      • JavaScript는 단일 스레드 프로그래밍 언어이므로 단일 호출 스택을 가진다.
      • call stack : 기본적으로 프로그램에서 우리가 어디에 있는지 기록하는 데이터 구조
    	function multiply(x, y) {
    		return x * y;
	}
	function printSquare(x) {
    		var s = multiply(x, x);
    		console.log(s);
	}
	printSquare(5);

==> 아래와 같이 동작 => 호출 스택의 각 항목을 **stack frame** 이라고 한다.
    • " Blowing stack " — 최대 호출 스택 크기에 도달했을 때 발생 / 재귀 사용 중 흔하게 발생
   function foo () {
   	foo();
   }
   foo();
  • Concurrency & the Event Loop
    • 브라우저가 호출 스택에서 너무 많은 작업을 처리하기 시작하면 꽤 오랜 시간 동안 응답하지 않을 수 있음
    • 대용량의 코드가 들어올 때 : 비동기콜백으로 해결
  • 그래서 이벤트루프는? : 콜스택과 콜백큐를 모니터링하는 역할

update() 가 먼저 호출스택에 들어감 -> updateBillOfLading()이 들어감 -> 여기서 비동기로 처리 -> put메소드로 데이터를 클라에서 서버로 업데이트하고 상태코드 받아옴 -> 그 결과값을 다시 보여줘야 -> state를 변경해주는 작업 필요 -> result에 받아온 값을 .then() 메소드를 사용해서 받아서 성공시, 실패시 나눠서 처리 -> 성공시 setConvertResult(data.views)로 state 업데이트하고, 실패시 에러코드와 메시지 모달로 뿌려줌

What?바뀐 데이터를 비동기로 처리해야하고, 그 데이터를 바로 바인딩하기 위해
Why?promise and .then() : 비동기로 처리해야 함 / 콜백
How?-
Where?(=Who?)수정완료시 수정된 데이터 state 변경(업데이트)
When?수정버튼을 누르고, 업데이트된 데이터를 put할 때

2. EditingView.js

  • arr.find(callback f)
    • callback f 을 만족하는 첫번째 element의 값을 반환
	let oceanLiner = [
    	  { value: 'FWD', label: 'Freight forwarder' },
      	  { value: 'SHP', label: 'Shipping company' },
      	  { value: 'AIR', label: 'Air transport company' },
    	  { value: 'TRK', label: 'Trucker' },
    	  { value: 'RAI', label: 'Rail service provider' }
	]
     	oceanLiner.find(item => item.value === 'SHP')
	// {value: 'SHP', label: 'Shipping company'}
  • reduce()

    • map이 배열 내의 요소를 각각 변형한다면, reduce는 배열 자체를 변형함 (배열을 만들수도, 객체를 만들수도, etc)
    • 다른 메서드들과 마찬가지로, 첫번째 인자로 함수를 받는다.
    • 그러나, 두번째 인자로 초기값을 커스텀 세팅할 수 있다. (생략 가능 / 생략시, 배열의 첫번째 값이 초기값이 된다.)
    • 배열을 순회하며 return 된 값을 계속 이어받아 사용한다.
  • map : 배열 내 요소를 순회하며, 함수를 적용

  • filter : 배열 내 요소를 순회하며, 함수에 맞는 요소를 추출

  • requestKeyMap ={
    // 1o 8o 14o 15o 16o 17o 18o -> editingparam에서
    2 SHPPR: 'shipperName',
    4 CNSGN: 'consigneeName',
    6 NTFY: 'notifyName',
    o3 SHPPR_ADDRESS: 'shipperAddress',
    o5 CNSGN_ADDRESS: 'consigneeAddress',
    o7 NTFY_ADDRESS: 'notifyAddress',
    o9 PLCOFRCPT: 'placeOfReceipt',
    o10 PRTOFLDNG: 'portOfLoading',
    o11 PRTOFDSCHRG: 'portOfDischarge',
    o12 PLCOFDLVRY: 'placeOfDelivery',
    13 ONBRDDT: 'onBoardDate',
    21 SHPPNG_ITM: 'shippingItem',
    20 CNTNR_INFRMTN: 'containerInformations',
    19 CNTNR_QTY: 'sizeTypes',
    }

editingParam
editingParam이 실제 업데이트되는 데이타가 되는 것 /
convertResult는 배열
수정되는 데이터는 {} 객체에 키&벨류값으로 들어간다.
item.succeeded === false면, 원래 값 그대로 가져간다. 수정한 값으로 바꾸지 않음


profile
delilah's journey

0개의 댓글