본문 바로가기

create react app .env 파일 순서 CRA 공식 문서에 따르면 파일 순서는 아래와 같다. Files on the left have more priority than files on the right: npm start: .env.development.local, .env.local, .env.development, .env npm run build: .env.production.local, .env.local, .env.production, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing) 출처] CRA adding custom enviroment .env파일이 하나 이상 있으면 위 규칙이 적용된다. .env .env.production 이렇게 있으면,..
react query optimistic update 테이블에서 메모를 실시간으로 업데이트 해야 했다. 문제는 메모를 수정할 때, 잠깐동안 이전 데이터가 보였다가 수정된 데이터가 보였다. 예를 들어, 'abc'라는 상태에서 '가나다'로 메모를 수정하면 잠깐동안 'abc'로 데이터가 렌더링되었다가 patch가 완료되면 다시 '가나다'로 변경되는 식이었다. 원인은 데이터가 patch(이하 mutate) 되는 동안 아직 업데이트 되지 않은 데이터를 참조하기 때문이었다. ({ ...data memo: }))} /> 대략 이런 구조에서, 데이터를 mutate 할 때 수정된 데이터가 아닌 기존의 list를 참조하기 때문에 잠시 이전의 데이터가 나타났던 것이다. optimistic update를 통해 이 문제를 해결할 수 있었다. optimistic update는 말 ..
tailwind css의 classname 순서 문제 tailwind를 사용해보니 편리하지만 직관적으로 이해하기 어려운 부분도 많다. 그 중 대표적인 것이 스타일이 classname에 적힌 순서대로 적용되지 않는 점이다. 아래 포스트가 좋은 예시를 들고 있다. https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/#tailwind-class%EC%9D%98-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 Tailwind CSS 사용기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 위 포스트의 예시를 한 마디로 정리하면, 아래 코드는 text-blue 를 보장하지 않는다. Hello world tailwind는 classname은 순서는 고려하지 않기..
react 자식 컴포넌트의 함수를 부모 컴포넌트에 내보내기 가끔 react에서 자식 컴포넌트의 함수를 부모 컴포넌트로 내보내야 할 때가 있습니다. 좋은 패턴은 아니지만 필요하다면 useImperativeHandle을 사용하면 됩니다. useImperativeHandle의 특징은 공식 문서 한글 번역이 굉장히 난해하다는 점입니다. 아마 쓰지 말라는 무언의 암시가 아닐까 생각합니다. 공식 문서에서 제공하는 번역은 다음과 같습니다. useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다. 다행히 원문은 아래와 같습니다. useImperativeHandle customizes the instance value that is exposed to parent components when using..
sourcetree push할 때 Permission denied 에러 처리 오랜만에 sourcetree를 사용했더니 push 할 때 다음과 같은 에러가 발생했습니다. Pushing to [repository path] remote: Permission to [repository path] denied to [username]. fatal: unable to access '[repository path]' The requested URL returned error: 403 기본적으로는 ssh 키를 다시 생성해서 등록해주는 방식으로 해결하는 것 같습니다. 관련된 내용은 자료가 많은 것 같아 본문에 포함하지 않겠습니다. 저는 검색해서 나오는 방법들을 이것저것 시도했는데 잘 되지 않아 아래와 같은 방법으로 해결했습니다. 설정 -> git 탭에서 git version을 변경해 주었더니 ..
strapi 호스팅 중 발생한 에러 처리 strapi 호스팅 중 발생한 에러 처리 과정을 공유합니다. 저는 digitalocean을 통해 배포했습니다. 오피셜 가이드를 따라하신 분이면 아마 같은 에러가 발생할 것이라 예상됩니다. digitalocean 배포 로그를 보니 heroku를 사용하는 것 같습니다. heroku로 배포하시는 분들에게도 도움이 되었으면 합니다. Pointing local server at Heroku Postgre produces unexpected error: Could not load js config file config/database.js: Cannot read property ' charAt' of undefined https://github.com/strapi/strapi/issues/8810#issuecomm..
FP 중요 개념 정리4 :: 에러 처리(1) FP 중요 기능 정리 5 :: 함수형 프로그래밍의 에러 처리1 (functor, monad) 명령형 코드는 주로 try-catch 구문으로 예외를 처리합니다. try 문으로 안전하지 않은 코드를 둘러싸는 아이디어 입니다. 함수형 프로그래밍에서도, '위험한 코드를 안전망으로 감싼다' 라는 개념은 동일하게 적용됩니다. 다만, try-catch문은 에러가 발생했을 때 제어를 넘겨주는 방식인 반면 함수형 프로그래밍에서는 특수한 객체를 사용하여, 제어를 역전시키지 않고 데이터 흐름을 유지하며 에러를 처리합니다. 이 특수한 객체를 '모나드'라고 부릅니다. 모나드에 대해 살펴보기 전에 더 넓은 개념인 functor에 대해 살펴보도록 하겠습니다. Functor 값을 특정한 컨테이너로 감싸 불변성을 유지하는 것은 함수형..
FP 중요 개념 정리3 :: 조합기를 사용한 제어 흐름 관리 함수형 프로그래밍에서는 if, for같은 제어 흐름도 함수 조합기를 이용해 구현합니다. 이전에 살펴본 compose, pipe도 함수 조합기의 일부입니다. 이번 포스트에서는 제어 흐름을 관리하는데 자주 사용되는 함수 조합기를 다루어 보겠습니다. 이번 포스트에서 다루게 될 함수들을 간단히 정리하면 다음과 같습니다. identity : 주어진 인수와 동일한 값을 반환. tap : 객체 하나와 함수 하나를 받아, 객체에 함수를 실행하고, 다시 객체를 반환. alternation : 함수 2개를 받아 값이 있으면 첫 번째 함수를, 없으면(ex. null)두 번째 함수를 실행. sequence : 2개 이상의 함수를 인수로 받아, 동일한 값에 대해 각 함수를 차례로 실행하는 함수를 반환. fork(join) : ..