킹의 개발일지

38일차 이전 파트에서 자원을 공유하는 타임라인의 문제를 살펴봤다. 멀티 스레드 환경에서 공유자원은 lock으로 관리 돼, race condition을 막아야 한다. 아니면 다른 스레드가 공유자원을 업데이트 하기도전에 채어가서 이상한 결과가 도출 될 것이다. 마찬가지로 이전 파트에서는 cart, total 값을, 전역변수를 끌어와서 사용하고 있었다. 문제가 발생하는것은 불보듯 뻔했다. 이제 공유하는 자원을 없애보자. 지금까지 전역변수를 지역변수로 바꾸로 암묵적 인자를 명시적 인자로 바꿔주는 작업들을 쭉 해왔다. 이제 써 먹어볼 차례다! 우선 문제의 코드를 살펴보자. #문제의 코드 function add_item_to_cart(name, price, quantity) { cart = add_item(car..

37일차 이제 다이어그램을 그리기 위한 세 단계를 모두 살펴봤다. 다시 원점으로 돌아와 add_item_to_cart 메서드의 타임라인 다이어그램을 만들어보자. # add_item_to_cart add_item_to_cart은 위 그림에서 볼 수 있듯, 총 13개의 액션으로 이루어져있다. 다이어그램을 그리기 위한 세 단계를 다시 상기해보면 아래와 같다. 액션을 확인한다. 각 액션을 그린다. 단순화 한다. 이제 세 단계에 따라 다이어그램을 그려보자. 1. 액션을 확인한다. 이미 우리는 위 그림에서는 총 13개의 액션이 확인했다. 다음 단계로 넘어가자. 2. 각 액션을 그린다. 위에서 액션을 확인했다. 그리고 ajax는 타임라인을 빼내서 다이어그램을 그리므로 아래와 같이 총 세계의 타임라인, 13개의 액션을..

36일차 타임라인 다이어 그램은 총 세단계로 그릴 수 있다. 1. 액션을 확인한다.2. 순서대로 실행되거나 동시에 실행되는 액션을 그린다. 3. 플랫폼에 특화된 지식을 사용해 다이어그램을 단순하게 만든다. 지금까지 1, 2단계는 확인했다. 오늘은 3단계 다이어그램을 단순하게 만드는 방법을 보자. 우선 2단계까지 그린 다이어그램, 코드, 액션을 확인해보자. # 예시 코드 saveUserAjax(user, function() { setUserLoadingDOM(false); } setUserLoadingDOM(true); saveDocumentAjax(document, function() { setDocLoadingDOM(false); } # 액션 saveUserAjax() setUserLoadingDOM(..

35일차 이번 파트는 아래와 같이 메서드의 실행을 타임라인으로 그리는 법과 비동기 문제에 대해서 설명한다. 저자가 드는 예시로 쇼핑몰 사이트에서 상품 구매버튼을 빠르게 두번 클릭하면, 표시되는 금액이 제 멋대로라는 것이다. 4달러 짜리 두개를 사면 배송비(2달러) 포함 10달러가 되어야하지만 12달러, 8달러 등 잘못된 금액이 도출 된다는 것이다. 아래 그림은 사용자가 구매버튼을 두번 클릭했을 때를 타임라인으로 옮겼을 때이다. 이번 파트에서는 위에서 언급한 문제를 해결하는 방법에 대해서는 설명하고 있지 않다. 아마 내일 아니면 모레 파트에서나 설명할 것으로 보인다. 오늘 파트는 타임라인을 그리는 법에 대해서만 설명한다. 그래서 타임라인 그리는 대략적인 방법을 리뷰해보겠다. # 타임라인 작성요령 우선 액션..

34일차 저번 파트에서 재귀를 사용해서 중첩된 객체를 변경하는 nestedUpdate 메서드를 작성해보았다. 그러나 이는 한 가지 생각해 보아야 할 점이 있는데, 중첩이 길어질 수록 긴 '키 경로'가 필요하다. 예를들어, 블로그 포스트 저자의 이름을 대문자로 바꾸는 update를 생각해보자. 우선 블로그 데이터에서 포스트들을 골라내야하므로 'posts' 라는 키가 필요할 것이다. 그리고 그 포스트들중 '12'번 포스트이며, 그 post 객체의 'author', 즉 저자 정보들 중에 'name' 값을 변경해야 하므로, 키 경로는 다음과 같을 것이다. [ "posts", "12", "author", "name" ] 다음은 이렇게 기억해낸 키 경로를 파라미터로 넘겨주어야한다. nestedUpdate(blog,..

33일차 어제는 중첩이 없는 객체에 대해서 함수형 도구 update를 사용해봤다. 오늘은 중첩된 객체에 함수형 도구를 사용해보자. 우선 다룰 객체를 보자. shirt 객체는 내부에 options라는 중첩 객체를 가지고 있다. var shirt = { name: "shirt", price: 13, options: { color: "blue", size: 3 } } 이때 size를 변경해주고 싶을 때는 어떻게 해야할까? 간단히 생각해 볼 수 있는 코드를 먼저 보자. function incrementSize(item) { var {size: {options}} = item; var newSize = size + 1; var newOptions = objectSet(options, "size", newSize)..

32일차 이전까지 filter, map, reduce 등 배열을 효과적으로 다루기 위한 함수형 도구를 살펴봤다. 이번에는 객체를 다룰 수 있는 함수형 도구를 살펴보자. 먼저 냄새가 나는 코드를 함수를 살펴보자. function incrementField(item, field) { var value = item[field]; var newValue = value + 1; var newItem = objectSet(item, field, newValue); return newItem; } function decrementField(item, field) { var value = item[field]; var newValue = value - 1; var newItem = objectSet(item, fiel..

31일차 이번 파트도 저번처럼 예시 위주로 다룰 예정이다. 1. 포지션별로 가장 높은 사람을 골라 명단을 완성하는 코드를 만들어 보자. 주어진 데이터는 다음과 같다. var evaluations = [{name: "Jane", position: "catcher", score: 25}, {name: "John", position: "pitcher", score: 10}, ...]; // 최종 명단은 다음과 같이 만들어져야 한다. var roster = {"pitcher: "John", "catcher": "Jane", ...}; 예제에서는 이미 높은 점수순으로 정렬되어 있다고 전제를 두고있다. 하지만 정렬이 돼 있지 않은 경우까지 생각해보자. 일단 점수순으로 정렬하는 메서드를 만들어 보자. function..

30일차 이전 포스팅부터 지금까지 반복문을 함수형 도구 체인으로 리팩터링하는 방법을 알아봤다. 이제 함수형 코딩이 감이오기 시작한다! 이번 포스팅은 예제를 중심으로 다뤄보려한다. 예제1 다음 함수를 함수형 도구 체인으로 바꿔보자. function shoesAndSocksInventory(products) { var inventory = 0;// 1.누적 for (var p = 0; p < products.length; p++) {// 2.반복 var product = products[p]; if (product.type === "shoes" || product.type === "socks") {// 3.조건 inventory += product.numberInInventrory; } } return in..

문제의 발단 일출, 일몰 시간을 가져오기 위해 공공데이터 포털의 한국천문연구원_출몰시각 정보 api를 사용할 일이 생겼다. 로직상 4일치의 일출, 일몰 시간이 필요했지만 한국천문연구원_출몰시각 정보은 한 번 요청에 하루치 데이터만 응답해주고있다. 심지어 응답값도 xml이라구.. ㅠ 때문에 4일치 데이터를 얻기 위해 4개의 요청을 날려야 하는 상황이 생겼다. 간단하게 4번의 요청을 하면 되지 않을까 생각이든다. const data1 = await fetch(url_1);// 오늘 const data2 = await fetch(url_2);// 내일 const data3 = await fetch(url_3);// 모레 const data4 = await fetch(url_4);// 글피 ... 그러나 이 요..