FrontEnd (437) 썸네일형 리스트형 [번역] 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.. [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을 피.. [번역] 서버에서 Redux 사용하기 원문 : https://webbylab.com/blog/redux-on-backend/ How We Used Redux on Backend and Got Offline-First Mobile App as a Result | Webbylab we want to share our experience of building offline-first React-Native application, using Redux-like approach on our NodeJS backend server webbylab.com 서문 원문 저자는 React Native 앱을 개발하며 NodeJS 백엔드에서 Redux를 사용한 경험을 공유한다. 저자는 kafka나 activieMQ와 같은 도구 없이 event-sourcing a.. [Redux] 리덕스의 state, action, reducer 단방향 데이터 흐름 view는 action(이벤트; 앱에서 일어난 사건)를 트리거(by dispatch)하여 액션을 state에 전달한다 dispatch는 이벤트 트리거다 state는 reducer(이벤트 리스너; 관심 있는 사건(action type)에만 응답함)를 이용해 새로운 상태를 만든다 state는 프리젠테이션 관심사가 아닌 애플리케이션 별로 고유한 (전역) 상태이다. state가 변경되면 view가 업데이트 된다. selector로 view 트리 외부에 존재하는 전역 상태 트리(state)를 연결한다. 왜 Reducer인가 Array.reduce()는 배열안에 있는 값을 단일 값으로 축소(reduce)한다. Redux Reducer는 시간 순서대로 발생하는 일련의 액션을 단일 값으로 축소(re.. 리액트 디자인 패턴 : uncontrolled component pattern TL;DR uncontrolled component는 컴포넌트의 관심사를 달성하기 위해 스스로 내부 상태를 관리하는 컴포넌트입니다. 컴포넌트에 상태 관리 책임을 넘기고 편해지는 방법을 알아봅시다. 원문 번역입니다 : https://jjenzz.com/component-control-freak Are You a Component Control Freak? It's tempting to always control the components we implement but we can sometimes simplify things if we use the uncontrolled pattern. jjenzz.com 우리는 종종 컴포넌트의 상태를 직접 제어하려 합니다. 리액트 튜토리얼(React’s own intr.. 이전 1 2 3 4 5 ··· 55 다음
