아 그거 뭐였지

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..

HTTP? 서로 다른 시스템들 사이에서 통신을 주고받게 하는 프로토콜 HTTP 단점 HTTP는 암호화하지않은 평문 데이터를 전송하기때문에 외부에서 정보를 훔쳐볼수가있다. 이러한 보안성의 단점을 극복하기위해 HTTPS 프로토콜을 사용하게된다. 추가로 검색 엔진 최적화에도 도움이 된다. 구글에서는 HTTPS를 사용하는 사이트에는 검색 순위에 잘 나타나게 보상을준다. HTTPS HTTPS는 HTTP에 SSL 프로토콜을 사용한 프로토콜이다. SSL을 사용하여 서버와 사용자 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고 정보를 주고받을때 정보가 탈취되는것을 막을수있다. SSL? Secure Sockets Layer의 약자로 Netscape 인증사에서 개발한 웹 서버와 웹 브라우저간의 보안을 위해 만들어진..

기술면접스터디를 진행하면서 발표자료 정리한것을 올려본다. 마운트란? 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..