Puppy's paw

position 속성이 없으면 그림자가 보이지 않는다.

아마 그림자를 앱솔루트로 붙여서 그런 것 같다.

https://lodash.com/

javascript sugar 정도로 이해하면 될 것 같다.

스쳐지나가면서 봤던 코드들은 이거 때문에 꼭 외부 라이브러리를 써야 하나 그정도 였다.

그래도 잘 활용하면 가독성을 높여줄 수 있고 정말 필요한 것들이 뭐가 있는지 살펴 봐야 겠다.

_.chunk(array, [size=1])

배열을 size단위로 쪼개 준다.

바로 생각 나는 것은?

페이징 나눌 때 편하겠네

_.compact(array)

잘못된 데이타를 걸러낼 때

.filtering( elm => elm ) 이거랑 같은데 굳이 써야 할까낭?

거기다 0을 출력해 주고 싶을 때 수정하기도 힘들다.

_.concat(array, [values])

애매하다. 그래도 뭐 다양한 형식을 합칠 경우 편할 듯

table cell word-wrap 문제

컴포넌트로 컨트롤 하는 방법은 없다.

css로 찾아서 해결해야 한다.

event listener가 받는 첫번째 인자 e 는 javascript의 event object를 가르킨다.

이는 브라우저 마다 조금씩 다른데

react는 이를 SyntheticEvent라 부른다.

리액트를 안쓰더라도 자바스크립트 객체기때문에 알두면 좋다.

다 몰라도 preventDefault() 는 많이 써봤을 것이다.

이미 완성되어있는 업무를 할 경우

DB컬럼들이 정해져 있어서 자료구조가 변경될 일이 거의 없다.

하지만 새로운 업무로 프로젝트를 하는 경우

DB는 정해져 있지 않다.

DB를 먼저 정하고 한다해도 개발하면서 새롭게 추가되는 요소는 계속 생긴다.

이럴 경우 DB를 짜놓고 바뀔 때 마다 DB를 업고 관련코드 다 고치고 그런다면 시간이 너무 오래 걸린다.

자연스럽게 애자일하게 개발하다보면

자료 구조가 바뀌는 일이 많은데

클라이언트에서 자료구조의 변형이 클 경우 변화에 유연하게 대처하는게 힘들다.

[

  {

    productId, : 1,

    productName, : '마우스'

  }

]

이런식으로 만들어서 처리하는 것과

[

 product : { id: 1, name: '마우스}

]

이런식으로 처리하는 것은 알고리즘이 달라지기 마련이다.

size 같이 name이 안붙는 컬럼도 있고 id가 없는 컬럼들도 있고 제각각이다.

공통으로 한번에 처리하는게 어렵다고 느낄 수도 있겠지만

같은 입력폼의 내용들은 파일 같이 특이한 경우가 아닌 단순 텍스트 값이라면 공통으로 처리가 가능해야 한다고 생각한다.

또 그렇게 자료 구조를 만들어야 변화에 빨리 대처할 수 있다고 생각한다.

하지만 아직까지 좋은 자료구조를 만들어내는데는 실력이 모자른 것 같다.

이런 부분에서 고민이 많아질 줄 몰랐는데 아직 경험이 부족한가 보다.

다 잘 보냈는데

dispatch 실행하는 함수는 실행되는데

return dispatch => 구문이 실행이 안된다

다르 dispatch는 잘 실행이 된다.

connect로 넘겨준 함수를 실행해야 하는데 그냥 함수 자체를 실행시켜 버렸다.

그것도 모르고 한참 해맸다 ㅜㅜ

아 정말 바보 같다.

돔이 포커싱 되는 걸 방지하는 태그인 줄 알았는데

엉뚱한 거라서 해맸다.

html unselectable 속성은 텍스트 드래그를 막아 준다.

하지만 익스플로어와 오페라 브라우저에서만 작동한다.

파폭이나 크롬 같은 브라우저는 css 속성으로 해결한다.

마우스 드래그 이벤트 인데 css속성으로 가야 하는 건지는 의문이다.

<style>
        .unselectable {
            -moz-user-select:none;
            -webkit-user-select:none;
        }
</style>

css는 이런식으로 적용하면 된다.

callback 패턴은 가독성도 정말 안좋고

들여다 보지 않으면 뭔일이 일어나는 지도 파악하기도 힘들다.

함수 설계를 promise를 return하도록 바꿀 수 있다면 편하겠지만

건드릴 수 없는 함수들이 있다.

이럴 경우 래핑해서 await로 바꿀 수 있다.

다음 코드에서 nodeJs의 fs.reddir을 promsie를 리턴하는 함수로 감쌌다.

new Promise 안에 대상 함수를 넣어서 활용해야 한다.

Promise는 형식만 참조하지만 여기서는 값으로 사용하고 있습니다

라는 ts 에러가 날 경우

{ 
  "compilerOptions": {
    "lib": ["es2015"]
  }
}

tsconfig.json에 추가해준다.