분류 전체보기 (1001) 썸네일형 리스트형 리액트 쿼리와 비교한 RTK Query와 Mutation(뮤테이션), 캐싱 동작 사내 프로젝트에서 Redux Toolkit을 도입하였기에, 주로 사용하던 Redux Query 대신에 RTK Query를 사용해 보았다. RTK Query와 React Query의 차이점 : 큰 그림 RTK Query는 프레임워크와 무관한 기능들만 포함한다. RTK Query는 React Query의 대부분의 페칭 기능들을 포함하고 있다. 하지만 React Query의 명칭이 의미하는 것처럼 React Query는 Hook과 React에 최적화된 몇몇 기능들을 포함하고 있다. useInfiniteQuery Suspense및 ErrorBoundary 따라서 무한 스크롤이나 서스펜스가 필요하다면 Wrapper 코드를 작성해야 한다. (보니까 Apollo-Client도 유사하다.) 기능 비교표는 아래 링크를 .. [번역] Mobile First Design vs Desktop First Design 원문 : https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/ The State Of Mobile First and Desktop First - Ahmad Shadeed Is mobile first or desktop first still relevant today? An article that explores both with pros and cons for each. ishadeed.com 모바일 퍼스트 모바일 버전 css를 먼저 작성한 다음 더 큰 버전을 작성 .section { padding: 2rem 1rem; } @media (min-width: 62.5rem) { .section { display: flex; al.. [번역] min(), max(), clamp() CSS 함수 원문 : https://ishadeed.com/article/css-min-max-clamp/ min(), max(), and clamp() CSS Functions - Ahmad Shadeed Learn about CSS comparison functions min(), max(), and clamp() ishadeed.com 브라우저 지원 2020년 8월 이후로 min, max, clamp 함수는 모든 메이저 브라우저에서 지원함. 안타깝게도 ie에서는 못씀 CSS Compare 함수 CSS 사양(CSS spec)에 따라 여러 값을 비교하고, 사용한 함수를 기반으로 여러 값 중 하나를 나타낸다. Min() 함수 min() 함수는 하나 이상의 쉼표로 구분된 연산을 포함하며 가장 작은 값을 나타낸다. 보통.. [JS] 한글을 2byte로 한 줄 길이 제한 및 줄바꿈 코드 바이트 수 기준으로 줄바꿈을 적용하는 코드 한 줄의 맨 앞에서 trim을 적용한다. 한 줄의 바이트 수가 threshold를 넘어가면 줄바꿈한다. /** * * @param {string} str * @param {number} threshold * @returns {string} */ const changeLine = (str="",threshold=80) => { /** * * @param {number} charCodeAt * @returns {number} */ const encode = (charCodeAt) => (charCodeAt > 127 ? 2 : 1); let [len, /**@type{string[]} */ buffer] = [0, []]; for (let i = 0; i < str.. [Vite, Vitest, Javascript] Vanilla JS로 TDD with Vitest 프로그래머스 과제관의 Vanilla SPA 연습에 TDD를 적용하면서 배운 방법을 공유한다. How to Unit Test HTML and Vanilla JavaScript Without a UI Framework Recently I was curious about something: Is it possible to write unit tests for front end code that do... dev.to 1. index.html 만들기 2. 필요한 라이브러리 다운받기 yarn add -D @testing-library/dom @testing-library/jest-dom jsdom jest 3. Vitest 설정하기 vite.config,js 설정을 추가한다. export default defi.. [번역] React TDD 기초 원문 : https://www.freecodecamp.org/news/test-driven-development-tutorial-how-to-test-javascript-and-reactjs-app/ Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications Understanding test-driven development is an essential part of being a prolific software developer. Testing provides a solid platform for building reliable programs. This tutorial will show you all y.. IT 서비스 회사와 IT회사의 차이점. 네이버 VS LG CNS? LG CNS와 같은 IT 서비스 회사와 네카라배쿠와 같은 IT 회사의 차이점은 뭘까? IT 서비스 회사 간단하게 말하면 IT 서비스 회사는 "IT 용역 회사"다. LG CNS와 같은 곳은 한마디로 거대한 인력 회사로, 외부에서 프로젝트를 수주해 해당 프로젝트에 적합한 직원을 파견하는 방식으로 프로젝트를 진행한다. 이는 사내 프로젝트를 진행할 때도 유사하게 진행된다. 또한 자사를 대표할만한 소프트웨어 제품이 거의 없거나, 해당 제품이 있더라도 IT 용역을 지원하는 프로그램이다. 따라서 어떻게 보면 각 직원은 프리랜서와 비슷한 방식으로 일하게 된다. 대신 프리랜서와 다르게 월급이 따박따박 나온다. IT 회사 소위 네카라쿠배와 같은 회사는 한마디로 "자체 서비스 회사"다. 회사를 대표하는 소프트웨어가 있고(e.. [React] Context API를 활용한 전략 패턴 원문 : https://itnext.io/the-interface-mindset-how-to-build-flexible-maintainable-react-components-with-context-api-8b332d76f6b9 The Interface Mindset: How to Build Flexible, Maintainable React Components with Context API Thinking in interfaces can enhance the flexibility and maintainability of the code, despite appearing more complex at first glance. itnext.io React의 Context API는 Prop Drilling을 피.. 이전 1 ··· 47 48 49 50 51 52 53 ··· 126 다음
