아 그거 뭐였지

Next.js의 Server Action과 Form을 사용해서 로그인 기능을 구현하고있었는데, 문득 Api 로딩처리는 어떻게하나 싶었다. Client Side에서는 react-query를 사용하거나 직접 Loading 상태를 처리해주면 됐었다. 예시코드....// react-queryconst { isPending } = useMutation()if(isPending) return // fetch apiconst [isLoading, setIsLoading] = useState(false);const login = async ()=>{ setIsLoaindg(true); try{ ... 로그인 로직 } finally(){ setIsLoading(false); ..

반갑다 여러분, 놀랍게도 블로그 주인장 죽지 않고 살아있었다. 마음 한편속에 '블로그 써야 되는데...'를 되새긴 지 어언 6개월, 블로그에서 녹물 나오기 전에 간신히 돌아왔다.확실히 블로그를 안쓰니 알던 것도 금방 까먹고 알고 있어도 제대로 아는지 긴가민가하다. (언어능력이 떨어진 건 덤) 종종 나타나서 글을 써야겠다. 글쓰는 텀이 이 지경이니 어디 가서 블로그 쓴다고 얘기하기도 부끄럽다.한창 미쳐있던 Compound-Component 패턴 적용기도 써야되고... Suspense도 써야되고...쓸건 많은데 몸이 잘 따라주지않는다. 그래도 부끄럽지 않은 내 자신을 위해 열심히 키보드를 두들겨보겠다.   우리가 어떤 민족인가? 바로 빨리빨리의 민족이다.빨리빨리의 민족답게 느린건 참을수가없다. 웹 페이지도 ..

※주의 Vite 버전 4이상으로 설명하고 있음 ※ 사내에서 Vite를 한번 사용해봤던 적이있는데, (바이트아님 비-트임) 컴파일과 빌드가 굉장히 빨랐던 경험이 있어서 이번에 사이드프로젝트에서 한번 사용해보려 한다. 그중 svg사용하는 방법이 Vite 4버전에서 기존과 다른것같아 한번 공유해보고자 한다. 1. vite-plugin-svgr 플러그인 설치 vite에서 svg를 편하게 사용하기위해 vite-plugin-svgr plugin을 설치해주자. # npm npm install --save-dev vite-plugin-svgr # yarn yarn add -D vite-plugin-svgr # pnpm pnpm add -D vite-plugin-svgr 2. vite.comfig.ts에 svgr 내용 ..

여느때와 같이 평화롭게 코딩하던도중... 코드에서 평소와는 다른점을 발견한다. 이게... 뭐지? 못보던 줄이..? 분명 layout="fill" 속성으로 화면 꽉차게 해놨는데 왜 갑자기 줄이 그어진것 일까? 이유라도 알아보기위해 커서를 올려보자. 이제는 layout 속성이 사용되지않는다고한다. 사용한지 얼마나 됐다고 벌써 legacy 코드가 되어버린것,,, 해결하기위해 공식문서를 방문해보자 Components: | Next.js (nextjs.org) Components: | Next.js This API reference will help you understand how to use props and configuration options available for the Image Component...

리액트 렌더링 최적화에 대해 ARABOZA... 리액트 렌더링 최적화에 대해 알고있다고 생각했지만 설명해보라고하면 쉽사리 입이 떨어지지않는다. 이번기회에 한번 제대로 알아보고 가자 렌더링 최적화에 대해 알아보기전 리액트에서 렌더링 된다는 것은 무엇을 의미할까? 간단하게 의미만 살펴보자면 함수가 호출되면 함수는 내부 로직을 실행하고 리액트 element들을 반환한다. 이것이 리액트에서의 렌더링이라고 볼수있다. 호출되면 a라는 변수에 a값을 할당하고 렌더링 이라는 리액트 element를 반환한는 짧은 함수이다. function App(){ const a = "a" return 렌더링 } 렌더링 최적화에대해 예시코드를 가져왔다. function Parent() { const [changeValue,setCha..

기술면접스터디를 진행하면서 발표자료 정리한것을 올려본다. 마운트란? DOM 객체가 생성되고 컴포넌트가 브라우저에 나타나는 것 언마운트란? 화면의 렌더링된 컴포넌트를, 삭제하기 까지의 과정 애플리케이션에서 리소스를 확보하기위해 사용하지 않는 컴포넌트의 리소스를 회수하기위해 클래스형 컴포넌트 언제 리렌더링이되는지? 새로운 props값을 받았을때 state값이 변경되었을때 부모 컴포넌트가 리렌더링됐을때 (props값이 변경되지않아도 부모컴포넌트가 리렌더링되면 자식컴포넌트도 리렌더링됨) forceUpdate가 실행될때 (권장하지않음, state와 props외의 값에 의존하기때문) forceUpdate: props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고싶을때사용 https://projec..

프로젝트도중 alert로 사용자에게 알림을 줬었는데 너무 예쁘지도 않고 확인버튼을 눌러야만 하는 것이 번거롭다고 생각했었다. 기왕 만드는 거 예쁜 알림창 하나 있었으면 좋겠다 싶어서 라이브러리를 찾아보았다. 라이브러리를 찾는 기준은 다음과 같았다. 1. 커스텀훅으로 뺄 수 있을 것 2. styled-component와 같이 사용해도 충돌이 일어나지 않을 것 여러 라이브러리들이 있었고 아래 라이브러리를 사용했다가 ChakraUI가 styled-component의 컨테이너명과 겹치는 바람에 사용할 수 없게 되어 https://chakra-ui.com/ Chakra UI - A simple, modular and accessible component library that gives you the buildi..

Q. 로그인된 유저는 로그인 페이지에 못오게 해주세요. 사이드 프로젝트 진행도중 로그인페이지에 로그인 되어있는 유저가 접근할때 메인페이지로 리다이렉트 시키는 기능이 필요하였다. 처음에는 useEffect로 기능을 구현해보았는데 그렇게되면 로그인페이지에 접근한 뒤에 리다이렉트가 되어버렸다. 로그인된 사용자가 로그인 페이지를 볼수있는 점에서 페이지 렌더링이 되기전에 리다이렉트를 시킬수 있는 방법을 찾아보았다. A. getServerSideProps로 리다이렉트 NextJS에서는 getServerSideProps를 사용하면 해당 페이지가 렌더링되기전에 리다이렉트를 시켜줄수있었다. 공식문서에 적혀있는걸 간략하게 보고가자. getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않습니다..