분류 전체보기 (367) 썸네일형 리스트형 Testing Library, 그리고 fireEvent vs userEvent # Testing Library란- UI 컴포넌트를 사용자 중심적으로 테스트하기 위한 경량화된 라이브러리- 주로 웹애플리케이션의 DOM 기반 테스트를 지원- React, Vue, Svelte, Angular 등 다양한 프레임워크 지원 - 철학 : 테스트가 실제 사용자가 애플리케이션을 사용하는 방식과 유사해야..- 웹프론트엔드 테스트에서 사실상 표준으로 자리잡은 라이브러리🔗 Testing Library 사이트 : https://testing-library.com/ Testing Library | Testing LibrarySimple and complete testing utilities that encourage good testing practicestesting-library.com Simple a.. [ Storybook 스터디 5주차 ] [ 테스트 ]# UI 컴포넌트 테스트의 기초무엇이 테스트에 적합할지 알아보자.디자인시스템은 UI 컴포넌트로 구성된다. 각 UI 컴포넌트에는 일련의 입력(속성)들이 주어졌을 때 의도한 외관과 느낌을 설명하는 스토리들이 포함되어 있다.그런 다음 최종 사용자를 위해 브라우저 또는 장치에서 스토리를 렌더링한다. 한 컴포넌트에는 여러 상태가 포함되어있다.상태에 디자인 시스템 컴포넌트의 수를 곱해본다면, 모든 상태를 추적하는 것이 불가능하다는 걸 알 수 있다.그래서 지금 자동테스트를 설정해야한다. # 외관에 대한 시각적 테스트디자인 시스템에는 시각적인 UI 컴포넌트가 포함되어있다.시각적 테스트는 렌더링된 UI의 시각적 측면을 검증한다.시각적 테스트는 일관된 브라우저 환경에서 모든 UI 컴포넌트의 이미지를 캡쳐한다... [ Storybook 스터디 4주차 ] [디자인 시스템 소개]- 거대 기술기업부터 신생 스타트업까지 회사들은 시간과 비용을 아끼기 위해 UI패턴을 재사용하는 방식 도입 # 다지인 시스템을 왜 사용하는가?재사용이 가능한 사용자 인터페이스는 새로운 개념이 아니다. 스타일가이드, UI키트 및 공유가능한 위젯은 예전부터 존재했다.UI컴포넌트 : 사용자인터페이스를 이루고 있는 조각들의 시각적이고 기능적인 속성을 캡슐화 (like 레고) 디자이너, 개발자 모두 UI 컴포넌트를 다루고 있다.디자인 시스템은 두 분야를 연결하는 다리.조직의 공용 컴포넌트에 대한 '단일한 진실의 원천(source of truth)'이 된다. 프러덕션 디자인 시스템은 UI 컴포넌트와 프런트엔드 인프라구조를 포함해야한다.3가지 기술적 파트- 재사용이 가능한 공용 UI 컴포넌트- .. [ Storybook ] Storybook의 args, parameters # args- 컴포넌트가 어떻게 렌더링되어야 하는지에 대해 하나의 자바스크립트 객체로 정의를 해놓은 것- 컴포넌트의 props, slot, style, input 등 다양한 속성값을 지정하는데 사용되는 객체- 컴포넌트의 다양한 상태를 시각적으로 테스트하고 문서화할 수 있다. ## 특징1. 동적 속성 : 스토리북의 UI에서 속성값을 실시간으로 변경 가능. 컴포넌트의 다양한 상태를 쉽게 확인2. 재사용성 : 여러 스토리에서 동일한 args를 재사용 가능. 코드중복을 줄이고 일관성 유지가능import { Button } from './Button';export default { component: Button,};export const Primary = { args: { primary: true, .. 데스크탑, 태블릿, 모바일 사이즈 모바일 : ~767px태블릿 : 768~1023px데스크탑 : 1024px~ [JS] 배열 비우기(빈 배열로 만들기, 초기화) 방법 예전에 사수가 코드리뷰를 하시면서 이런 말씀을 하셨다.'빈 배열을 만드는 방법 중, 배열의 길이를 0으로 만드는 것과 빈 배열을 할당하는 게 같아 보이지만 차이가 있다.'처음에는 무슨 말인지 이해를 못해 찾아보았고, 찾아본걸 바탕으로 정리하려고 한다. 배열이 선언 & 할당되어 있을 때,배열을 초기화(빈 배열로 만들기)하는 방법은 여러가지가 있겠지만 크게 세 가지로 정리해보려고 한다. 우선, 아래와 같은 배열이 있다고 해보자.let name = ['ria', 'Jun'] 방법1. 배열에 새로운 빈 배열을 할당name = [];정확하게 말하면 이 방법은 배열을 비우는 것이 아니라, 새로운 빈 배열이 저장된 메모리주소를 참조시키는 것. 1/ let name = ['ria', 'jun']처음에는 name.. [코딩테스트 ALL IN ONE]코딩테스트 🍯 TIP # 자료구조: 데이터를 저장하고 관리하는 방식자료구조는 데이터를 체계적으로 저장하여 메모리를 효율적으로 사용할 수 있게 하고, 빠르고 안정적으로 데이터를 처리할 수 있도록 도와준다. 메모리구조를 잘 알고 있어야 자료구조의 중요성을 알게된다. example)num1 = 10num2 = 16num3 = 17num4 = 5num5 = 11num6 = 14num7 = 1num8 = 4num9 = 20num10 = 20지금은 10개지만, 데이터를 100개, 1000개를 저장해야하는 상황이 온다면 변수를 하나하나 지정해서 저장하는건 무리가 있다.이런 경우, 비슷한 성질의 데이터를 모아서 저장을 하면 좋겠다. 이렇게 변수를 하나하나 지정해서 데이터를 저장하기보다는, Array 자료구조를 사용하면 데이터를 더 효율적으.. 자바스크립트 동작 원리(Call Stack, Task Queue, Event Loop etc) 코드를 잘 짜고 싶으면 문법말고도 여러가지 배울것이 많다. ex: 웹브라우저 동작 원리 등. 그러면 코드 잘짜는 개발자가 될 수 있다. 자바스크립트를 작성하면 브라우저가 실행시킨다. HTML, CSS, JS를 해석해주는 것이 브라우저. - 특징 : 자바스크립트를 해석하는 순서가 특이함. 아래 코드를 실행시키고싶다. 1+1 하고 1초 쉬고 2+2 하고 일반 프로그래밍 언어는 이런식을 작동한다. //python ver print(1+1) time.sleep(1) print(2+2) 파이썬 같은 경우는 위에서부터 한줄한줄 실행된다. 2 → 1초 쉬고 → 4 자바스크립트에서도 똑같은 기능을 만들어보려고 setTimeout을 사용해서 코드를 작성하였다. //JavaScript ver console.log(1+1).. 이전 1 2 3 4 ··· 46 다음
