CSS-in-JS 라이브러리를 간단하게 분석해 봅니다✨

오랜 역사와 방대한 커뮤니티를 자랑하는 Webpack 번들러와 빠른 속도를 장점으로 치고 올라오는 Vite 번들러를 비교해봅니다!

회사에서 1월 초에 인아웃 앱 대나무숲 게시판 에디터를 react quill 라이브러리로 교체했는데 어느 날부터 한글 입력 줄바꿈이 제대로 적용이 되지 않는 문제가 생겼습니다. 유저의 제보로 알게 됐고 안드로이드는 문제가 없었는데 ios에서만 일어나는 현상이고 부랴부랴

리액트 쿼리를 사용하면 만나게 되는 잦은 api 요청과 리렌더링! 리액트 쿼리의 라이프 사이클과 세부 옵션들을 잘 모르면 이런 상황들을 만날 수 있는데요, 왜 이렇게 되는지, 주의해야할 점은 무엇인지, 어떻게 개선할 수 있을 지에 대한 내용을 작성했습니다.

지난 번에는 useMutation 의 기본 적인 사용 방법에 대해서 소개했다. 이번에는 잠깐 전 편에서 잠깐 언급했던 custom hook을 사용하면서 queryClient랑 함께 사용하기와 optimistic updates 에 대한 내용을 적으려한다.

useQuery 와 다르게 mutation은 데이터를 생성 / 업데이트 / 삭제 할 때 사용 된다. 이번은 useMutation 의 기본 편이고 실용 편도 작성할 예정이다.

스토리북으로 가장 먼저 만들어보았던 컴포넌트는 버튼 컴포넌트!버튼이라고 만만하게 보면 안된다.disabled, fullWidth, hover...등 경우의 수가 많기 때문에 작성해야하는 스타일이 많다 :)피그마로 직접 만들어본 버튼 디자인이다.피그마 처음 써봤는데 기존

컴포넌트를 만들기 전, css를 reset하는 작업이 필요하다.공통으로 사용되는 font-family도 이때 설정해주면 편하다.src 폴더 하위에 GlobalStyle.tsx 를 작성했다.(font는 Noto Sans KR 기준)reset css는 구글에 서치하면 나오

회사에서 부족한 일정으로 미처 도입하지 못했던 디자인 시스템 구축을 개인적으로라도 꼭 해보고 싶어서 저녁 시간마다 열심히 디자인하고 개발했다.emotion + storybook + typescript 로 진행했으며 rollup.js 로 번들 작업 후 npm 라이브러리로

이전 시리즈에서 더 나아가 useQuery를 회사에서 어떻게 쓰고 있는지 정리해두려 한다.QueryClient 에서 추가적으로 defaultOptions 를 적용할 수 있다.refetchOnMount, refetchOnReconnect, refetchOnWindowFo

회사에서 사용 중인 리액트 쿼리.server state를 아주 효율적으로 관리할 수 있는 라이브러리이다.기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 만들려면 꽤 귀찮거나 까다로웠던 기능을 제공해준다.리액트 쿼리 사용을 위해

var 변수만 호이스팅이 되는 줄 알았던 나는.... TDZ에 대해 알게 되는데 !!! 뚜둥

💡 외부 데이터에 의존하는 경로가 있을 경우 동적 라우팅을 이용할 수 있다.\[ 로 시작하고 ] 로 끝나는 페이지는 Next.js의 dynamic routes이다.pages/post/pid.js경로 /post/1, /post/abc 등이 일치된다. 경로 매개변수는 페

처음 Next.js를 시작할 때 CRA와 눈에 띄게 달랐던 점은 바로 라우팅 구조 였다.pages 에서 만든 폴더와 파일은 곧 Router 경로가 된다.pages/index.js ⇒ /pages/blog/index.js ⇒ /blogLink 라는 React 구성 요소를

이번에 회사 프로젝트에 도입된 Next.js!! 이미 일은 진행 중이지만 퇴근 후 집에서 개념도 돌아볼 겸!!! 공식 문서 보고 공부했던 내용들을 정리 하고자 합니다 !!!!! 😂

이미지 출처: https://monsieursongsong.tistory.com/6스택/큐와는 다른 비선형 구조이다.여러 데이터가 계층 구조 안에서 서로 연결된 형태를 나타낼 때 사용된다.정점을 노드(Node) 라고 하고 노드와 노드를 연결하는 선을 가지(Ed

연결리스트는 여러 개의 노드로 이루어져 있다.각각의 노드는 데이터와 다음 노드의 주소를 가지고 있다. 맨 뒤 노드가 맨 앞 노드를 다음 노드로 가지게 할 수도 있다.새로운 데이터를 추가하거나 위치를 찾거나 제거할 수가 있다.데이터의 추가/삭제가 용이하나 순차적으로 탐색

프로그래머스의 스택/큐 Level2의 기능개발 문제이다.처음 풀었던 코드는이것이었는데 제출 후 채점하기를 하면 2,3,4,7,9,10 번 테스트는 자꾸 실패로 떠서 다시 풀어야했다.ㅜㅠ어떤 테스트 케이스를 추가해봐도 오류를 찾을 수가 없어서...

2020년 9월, 개발자에 관심을 갖고 처음 자바스크립트 공부를 시작하면서 눈에 보이는 무언가를 만드는 데에만 급급했다. 현실적인 문제로 취업이 급해서 리액트와 리액트 네이티브를 건드리면서 포트폴리오를 만들었고 취업을 했지만 알고리즘에 대한 지식과 문제풀이 실력이 너

덱은 Double-ended Queue 의 약자이다스택과 큐를 합친 자료구조여서 양 끝에서 데이터를 넣거나 추출할 수 있다.