거의 알고리즘 일기장

이 글은 최근 expo만을 이용해서 앱을 만들고 배포까지 해보고 만든 후기이다. 약 1년전에 이런글을 적은적이 있다. https://kunkunwoo.tistory.com/279 react native 약 1년간 사용해본 얕은 후기 react native를 작년 12월쯤 expo로 이용해본것을 시작으로 사용한지 약 1년쯤 지났다. 최근들어 rn에 대한 회의감이 들기 시작했다. 그래서 한번 rn 약 1년 사용기를 정말 얇게 남겨보고자 한다. 주의!: kunkunwoo.tistory.com 이 당시에는 꽤나 rn에 대한 불신이 가득한 상태로 적어서 조금 부정적으로 적었던거 같다. 현재는 rn 자체에 꽤나 익숙해져서 그런지 디버깅이나 이런게 수월해져 다시 긍정적으로 생각하고 있지만, 초심자들 입장에서는 벽이 ..

왜 개선하는가?? 오늘의 그림일기 앱의 무한스크롤은 1. useEffect의 dependencyArray에 따라 fetch 함수 실행 -> 2. fetch 함수 success시, state를 기존의 state에 추가 하는 방식으로 짜여져 있었다. 이러다보니 꽤나 많은 부분을 신경써줘야 했고 많은 부분이 불편했는데, 내가 느낀 단점은 이랬다. 1. useEffect 자체가 api를 fetching하는데 적합하지 않다. 단적인 예로 1. strictMode에서 2번씩 실행되도록 되어있음. 2. dependencyArray를 이용하는 방식이라 이걸 컨트롤하기가 쉽지가 않다. 2. 짜야할 로직이 많다. loading, refresh, error에 대한 컨트롤 로직이 꽤나 많다. 그래서 개선해야할 필요성이 있다고..

이번에 설명할 두가지 라이브러리는 간단하게 input들의 관리가 가능하게 도와준다. 이 친구들을 만나고 다양하게 빡치던 input validation check 로직의 쾌적함이 달라졌다. 밑의 설명을 읽어도 되지만, 여기까지 읽었는데 혹한다 싶으면 그냥 공식문서 읽으러 가길 바란다. https://react-hook-form.com/get-started Get Started Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com https://github.com/jquense/yup GitHub - jquense/yup: Dead simple Object schema validation Dead s..

react에서 prop을 다 넘겨주는 일은 상상이상으로 번거롭다. 이때, react의 context를 사용하면, prop drilling 없이도 컴포넌트 트리 전체에서 데이터를 가져다 쓸수있다. 그런데 이제는 이런 문제?가 생긴다. 자식1은 a데이터만 쓰고 자식2는 b데이터만 쓴다고 가정하자. 이때, a데이터가 변경되었는데, 자식1뿐만이아니라 자식2도 리랜더링 된다. 지금 우리의 프로덕트의 규모가 큰편이라 성능 최적화 관점에서 이 상황에서 자식 1만 리랜더링 되었으면 좋겠다. 어떻게 할까? 방법 1. context를 나눈다. a와 b가 현재 하나의 context인데 이걸 두개로 나눈다. 간단하쥬?? 그럼 context를 저렇게 손수 하나하나 만들어야 하나요??.. 이런 불편한 부분은 당연히 자동화 한 ..

원래 배포환경에 따라 달라지는게 없는 프로덕트를 수정할 일이 생겼다. cra의 내장된 .env 파일 사용시의 제약 이 수정사항 중 배포환경(dev or prod)에 따라서 환경변수가 몇개 바뀌어야 하는 상황이었는데, cra 환경에서는 이런식으로 .env.* 이런식으로 파일을 나눠서 환경변수를 관리할수 있다. 근데, 이러한 제약이 존재한다. /... this feature is available with react-scripts@1.0.0 and higher. (웬만한 프로젝트는 react-scripts1.0.0 버전상위다.) // -> 이 순서로 우선순위가 있다. npm start: .env.development.local, .env.local, .env.development, .env npm run ..

이번에는 저번의 pi chart, donut chart에 이어서 line chart를 만들어보았다. https://kunkunwoo.tistory.com/278 파이 차트, 도넛 차트 라이브러리 없이 만들기 (pi chart, line chart) https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/ SVG와 삼각 함수로 도넛 차트 만들어보기 이번 포스팅에서는 얼마 전에 필자가 삽질했던 내용인 SVG로 도넛 차트 그려보기에 대해서 이야기해볼 kunkunwoo.tistory.com 결과물 사전지식 1. svg path line 그리기 2. bezier curve 1. svg path line 그리기 path d 속성중 command L 사용..

https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/ SVG와 삼각 함수로 도넛 차트 만들어보기 이번 포스팅에서는 얼마 전에 필자가 삽질했던 내용인 SVG로 도넛 차트 그려보기에 대해서 이야기해볼까 한다. 사실 도넛 차트를 그리는 것 자체는 SVG가 제공하는 엘리먼트를 사용하면 되기 때 evan-moon.github.io 이 블로그를 인상깊게 보고 나도 한번 만들어보기로 했다. 결과물 사전지식 1. 원 상에서 좌표를 구하는 공식 2. svg path로 호를 그리는 방법 1. 원 상에서 좌표를 구하는 공식 코드로 작성하면 다음과 같다. //https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-..

이제까지 나의 경우, ref를 prop으로 넘기는 일은 거의 없었다. 대부분 밑의 코드처럼 1. ref를 쓰는 컴포넌트의 상단에 ref 선언후 사용 2. hook에 ref 선언후 가져와서 사용 하지만, 최근에 시각적 테스트를 위해 storybook을 도입하게 되면서 구조가 변경이 되었다. 이로 인해 prop으로 ref를 내려줄 일이 생겼다. 그냥 prop에다가 ref를 내려주면 안되나여?? 다른점이 뭐임? ref는 prop으로 내려줄수 없다. 그 이유는 react 공홈에서 찾을 수 있었다. refs는 전달되지 않는다는 것입니다. 그것은 ref는 prop이 아니기 때문입니다. key와 마찬가지로 ref는 React에서 다르게 처리합니다. HOC에 ref를 추가하면 ref는 래핑 된 컴포넌트가 아니라 가장 ..

jsx란? react component안을 보면 html tag처럼 생긴걸 볼수 있다. jsx는 javascript의 확장 문법으로, ui가 어떻게 생겨야 하는지 간단히 작성할수있다. //예시 import React from 'react'; const Test = () => { //return안에 있는 html tag같은게 jsx return ( ) } export default Test; JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. 한문장으로 정의하자면 이렇다. ( JSX 이해하기 머릿글이다.) jsx는 그냥 React.createElement(...args)을 우리가 보기 편한 형태인 html tag형..

https://dev.to/ms_yogii/useaxios-a-simple-custom-hook-for-calling-apis-using-axios-2dkj#final-code useAxios : A simple custom hook for calling APIs using axios Hello folks, Frontend apps are not complete if there are no api calls involved and calling an api b... dev.to 이런 글을 읽게 되었다. 이 글을 보고 이것처럼 hook으로 error, loading 값을 추가해서 return 하는식으로 바꿔주면 이용하는데 간편할거 같아 윗글의 코드에서 Typescript로만 바꿔 만들어 보았다. 예제 코드..