전체 글
요즘 Next.js 파헤치기를 시도하고 있다. 만들어놓은 많은 좋은 기능들을 제대로 알고 쓰기란 항상 어려운 것 같다. 이번에는 Next.js 프로젝트에서 AccessControl을 관리하는 부분을 개선할 필요성이 있어 middleWare를 적용해보았다. 필요성 외에도 실질적인 문제 상황이 존재했다. Problem 내가 작업한 페이지는 결제 페이지였다. 결제 페이지는 아래와 같은 로직을 가지고 있다. 결제 페이지에 진입하기 전에 로그인 여부를 체크한다. → 로그인이 되어 있지 않으면 로그인 페이지로 리다이렉션한다. 로그인이 되어 있으면 유저 정보를 불러온다. → 휴대폰 인증 여부를 확인한다. 인증이 되어 있지 않으면 → 휴대폰 인증 페이지로 리다이렉션 한다. 휴대폰 인증이 끝나면 → 다시 결제 페이지로 ..
목차 작업에 대한 필요성 (테스트 → 작업 TDD 시도하기) 요구사항에 따른 테스트 케이스 작성 msw 재정리 mock data 생성 및 관리 handler 생성 및 관리 import 경로 설정 jest + msw를 사용하여 test code 작성하기 정리한 테스트 케이스를 코드로 변환하기 msw로 경우에 따른 동적인 데이터 세팅하기 테스트 실행하며 컴포넌트 작업하기 컴포넌트 만들기 작업에 대한 필요성 (테스트 → 작업 TDD 시도하기) 맡은 프로젝트에서 유저가 쓴 글들을 모아볼 수 있는 유저 페이지가 추가되어야 했다. 이 경우에 리스트 컴포넌트와 같은 경우에는 이미 이전에 쓰던 컴포넌트가 있었지만 유저 정보가 들어가 있는 컴포넌트는 새로 만들어야 했다. 게다가 이 유저 정보 컴포넌트는 크리에이터인지, ..
Promblem: d3로 개발한 bubble chart의 필요한 기능 중에 hover 시에 그 위로 bubble chart에 대한 정보들을 담은 툴팁이 나오도록 해야 했다. 그래서 고민이 많았다. 일단 svg위에 div를 위치 시켜야 하는건가? 그럼 svg 컴포넌트의 좌표를 일일히 다 정해 줘야 하는 거 아닌가? d3를 잘 다뤄 본 적도 없고 svg로 만든 컴포넌트들을 잘 다뤄 볼 일도 없어서 고민이 많았다. 그런데 생각보다 해결 방법은 간단했다. 우선 sv위에 div를 올릴 수 있었고, 결론적으로 말하면 svg위에 올리는 것이 아니라 화면 전체에 그냥 포지션을 정해 준다는 느낌으로 해결이 가능했다. Solve: 우선 버블 차트 컴포넌트 내에 hover 할 경우에 필요한 정보들을 state로 선언해 주었..
Problem: d3를 이용해서 버블 차트를 만들었는데, 오픈소스를 참고해서 만들다 보니 내 입맛에 딱 맞는 것이 아니라 열심히 다시 맞추어 개발하는 과정에서, 원래 들어가 있는 애니메이션이 toomuch 라서 애니메이션을 없앨 수 없을까 했다. 그래서 찾은 방법이 아래의 방법이다. 의외로 간단했다. 코드 한 줄이면 애니메이션 기능을 완전히 없앤 채로 화면에 고정해서 넣을 수 있었다. Solve: 일단 버블 차트를 시뮬레이트 하는 함수 안에서 강제로 포지션을 줘서 움직이게 하는 부분을 제외하고 (먼저 지우고) 아래와 같이 tick() 메소드를 사용하면 동작을 멈추는 것을 볼 수 있었다. this.simulation = d3 .forceSimulation() .nodes(data as SimulationN..
Problem: 문제는 렌더링을 강제하는 코드를 테스트 하던 도중에, 이 코드를 어디다가 넣어야 내가 원하는 것처럼 동작을 할 지 그게 문제였다. 그런데, 제대로 동작을 하리라고 생각했던 곳에 넣었는데도 해결은 커녕 Maximum update depth 문제가 생겼다. 물론 이렇게 해서 나온 문제였으나 (근본적으로 이것이 문제가 아니라서 해결이라고 하기에도 뭐하지만) 이런 오류가 난 김에 이 문제에 대해서 생각해 보게 되었다. 글을 찾아보다 보니, 나도 항상 궁금했었다. onClick={() => EventFunc(a)} 항상 이벤트를 쓸 때에는 () => 요런 형식이 한 번 더 들어가서 쓰고 있는데 왜 그런가에 대한 의문... 그냥 onClick = {onClick}처럼 onClick={EventFun..
Promblem: react로 이것저것 시도를 해 보던 중, 이와 같은 오류가 발생하였다. Solve: If the error is not resolved, try installing the 6.0.9 version of the react-error-overlay package. 간단하게 버전 6.0.9의 react-error-overlay를 설치하면 된다고 한다. # 👇️ with NPM npm install --save-dev react-error-overlay@6.0.9 # -------------------------------------------- # 👇️ with YARN yarn add react-error-overlay@6.0.9 --dev 결론: 근데 궁극적인 문제는 이게 아니었다.....
d3를 사용해서 작업을 하다 보니, 데이터가 업데이트 됨에 따라서 화면을 갱신해야 할 일이 생겼다. 그런데 의도대로 되지 않아서 리액트의 렌더링 조건을 다시 찾아볼 겸 아래의 내용을 정리해 보았다. 1. state의 변경이 있을 때 유동적인 데이터를 저장하기 위해서는 state라는 것을 사용하고, 이것을 업데이트 해주기 위해서 setState 라는 메서드를 사용한다. 이것을 사용해서 값이 바뀔 경우 감지하고 리렌더링이 실행된다. 2. 새로운 prop이 들어올 때 전달 받은 props 값이 업데이트 되면 리렌더링이 실행된다. 3. 부모 컴포넌트가 렌더링이 될 때 값이 업데이트 되지 않더라도 부모 컴포넌트가 리렌더링이 되면 같이 리렌더링이 된다. 4. shouldComponentUpdate에서 true가 반..
데이터 시각화를 할 일이 많아서 주로 echart 라이브러리를 많이 사용하고 있는데, 세부적으로 계속 설정해 주어야 하는 부분들이 꽤 있어서 다루기가 번거롭다. 그때마다 공식 문서를 찾아보고는 하지만, 이해가 잘 안 될 때도 있는데 이번에도 문제에 봉착했다. echart는 편리하게 되어 있어서 글자가 겹칠 것 같으면 label을 띄워주지 않고 띄엄띄엄 보여주는데, 나는 모든 x축의 라벨 값을 보고 싶었다. 그래서 아래와 같이 참고하여 설정을 해주었다. axisLabel: { width: 100, //fixed number of pixels overflow: 'truncate', // or 'break' to continue in a new line interval: 0, }, axisLabel 속성에 i..
object 내부에 있는 프로퍼티 값들을 기준으로 sorting을 해야 할 일이 있었다. 그런데 objects Cannot assign to read only property '2' of object '[object Array] 라는 오류가 발생하였다. 이를 해결하기 위해 아래의 방법을 찾아 보았다. 문제 원인 stackoverflow에서 찾은 답변은 아래와 같았다. The array is frozen in strict mode, you'll need to copy the array before sorting it: array = array.slice().sort((a, b) => b.stats.speed - a.stats.speed) 그래서 위와 같은 방법으로 array를 복사한 뒤에 sorting을 ..
ts에서 내가 interface를 정의하여 타입을 지정한 배열에서, map을 사용해야 하는 상황이 발생했는데 이때 'Property 'map' does not exist on type' 이라는 문구가 뜨며 문제가 발생하였다. 이 타입을 지정해서 배열로 인식하지 못하여 map을 사용할 수 없다는 것이다. 그래서 이것에 대한 해결 방안으로 아래와 같은 방법을 시도했다. 문제 원인 "Property 'map' does not exist on type" 오류 map()는 배열이 아닌 값에 대해 메서드를 호출할 때 발생한다. 오류를 해결하려면 map()배열의 메서드만 호출하거나 메서드를 호출하는 변수의 유형을 수정해야 한다. const person = { name: 'Kim', age: 25, }; person...
위의 두 가지 글을 참고했다. bubble chart를 위와 같은 형식으로 만들 일이 있었는데, 아래처럼 컴포넌트 내에서 처리를 해서 줄바꿈을 하려고 해도 먹히지 않는 현상이 발생하였다. { content.split("\n").map((txt) => ( {txt} ))} 보통은 이렇게 하면 먹힌다는데, 나는 d3를 사용하고 있어서 위의 태그를 보았더니 내에 있는 content였다. 이와 관련하여 글을 찾아보던 중에 (참고 문서)의 글과 MDN글을 찾게 되었다. 결론은, 안에서는 이나 줄바꿈이 먹히지 않기 때문에 이라는 태그로 cotent를 감싸 주어서 그 각각의 태그마다 dx, dy 등의 속성으로 위치를 직접 잡아 주어야 한다는 것이다. {/*space line condition*/} {content.s..
itstory.tk/entry/%EB%A0%88%EB%93%9C%EB%B8%94%EB%9E%99-%ED%8A%B8%EB%A6%ACRed-black-tree 레드블랙 트리(Red-black tree) 이진검색트리는 저장과 검색에 평균 Θ( )시간이 소요되지만 운이 나쁘면 트리의 모양이 균형을 잘 이루지 못한다. 균형이 많이 깨지면 Θ(n)에 근접한 시간이 소요될 수도 있다. 그래서 고안해 itstory.tk 강의를 들으며 추가적으로 참고한 자료는 위와 같다. 레드 블랙 트리의 특성에 대해서 다시 한 번 정리해볼 수 있는 기회를 가질 수 있었다. 예전에는 왜 이렇게 굳이 사용해야 하는지 이해가 가지 않았다. 어떤 방식으로 트리가 동작하고, 하는 것을 이해하기가 힘들었는데 다시 보니 이런 원리로 레드 블랙 트..
