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? |
왜 convertResult와, setConvertResult를 둘 다 EditingView component에 props로 넘겼을까?
What? | 바뀐 데이터를 비동기로 처리해야하고, 그 데이터를 바로 바인딩하기 위해 |
Why? | promise and .then() : 비동기로 처리해야 함 / 콜백 |
How? | - |
Where?(=Who?) | 수정완료시 수정된 데이터 state 변경(업데이트) |
When? | 수정버튼을 누르고, 업데이트된 데이터를 put할 때 |
how js works
function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
==> 아래와 같이 동작 => 호출 스택의 각 항목을 **stack frame** 이라고 한다.
function foo () {
foo();
}
foo();
update() 가 먼저 호출스택에 들어감 -> updateBillOfLading()이 들어감 -> 여기서 비동기로 처리 -> put메소드로 데이터를 클라에서 서버로 업데이트하고 상태코드 받아옴 -> 그 결과값을 다시 보여줘야 -> state를 변경해주는 작업 필요 -> result에 받아온 값을 .then() 메소드를 사용해서 받아서 성공시, 실패시 나눠서 처리 -> 성공시 setConvertResult(data.views)로 state 업데이트하고, 실패시 에러코드와 메시지 모달로 뿌려줌
What? 바뀐 데이터를 비동기로 처리해야하고, 그 데이터를 바로 바인딩하기 위해 Why? promise and .then() : 비동기로 처리해야 함 / 콜백 How? - Where?(=Who?) 수정완료시 수정된 데이터 state 변경(업데이트) When? 수정버튼을 누르고, 업데이트된 데이터를 put할 때
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 : 배열 내 요소를 순회하며, 함수를 적용
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면, 원래 값 그대로 가져간다. 수정한 값으로 바꾸지 않음
동적 데이터 vs 정적 데이터