구버전
-
[CSS] Float, Flex, Grid구버전/CSS 2023. 12. 1. 17:14
Float CSS의 정렬을 위해 사용되는 속성으로 float을 이용해 띄워지면(정렬되면) 텍스트 및 인라인 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이름이 붙여진 것을 보임 절대위치 요소는 float 속성을 무시한다 자주 사용되는 Value left : 블록의 좌측으로 이동 후 부동 right : 블록의 우측으로 이동 후 부동 none : 기본값으로 기본속성 그대로 유지 inline-start : 시작쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 inline-end : 끝쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 Flex-box CSS3에서 처음 소개된 한방향 레이아웃 모델로써 HTML 요소 정렬에 사용되며 float 더 적은 코드와 읽기 쉬운방법으로 float을 대체하고 사용 ..
-
[Jest] Vite + Typescript + pnpm 환경에서 Jest구버전/CSS 2023. 11. 30. 21:36
개요 설치하기 자주사용하는 Matcher 1. 설치하기 Jest 패키지 설치) pnpm add -D @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer package.json 수정) "scripts":{ ... "test": "jest" } 실행문구임 이거 추가해줘서 터미널에서 쳐야함 Jest 설정파일 추가) // jest.config.ts export default { testEnvironment: "jsdom", transform: { "^.+\\.tsx?$": "ts-jest", }, mo..
-
[CS study] TDD의 중요성구버전/CS Study 2023. 11. 30. 10:07
개요 TDD란? 왜 TDD를 할까? 테스트 종류 Jest사용해보기 TDD(Test Driven Development) 작성하고자 하는 코드가 어떤 일을 할 것인지를 묘사하고 동작을 검증할 때 테스트 코드를 먼저 작성하고 빠르게 테스트를 진행하며 개발하는 방법 순서) 요구사항 분석 및 이해 => 설계 => 테스트 코드 작성 요구사항 분석에 집중하여 목적을 명확하게 파악하게 됨 사용하기 좋은 상황) 요구사항이 명확할 때 비즈니스 로직 협업 시 문서(명세서) 역할 코드리뷰 Why? 코드의 퀄리티 상승 및 비용절감 코드의 결함을 개발 주기의 초기에 발견하는데 도움이 되어 후에 수정하는데 있어 드는 비용을 줄일 수 있다. 요구사항에 충족하는 코드인지 재확인이 가능하다. 빠른 피드백으로 코드의 퀄리티를 상승시킬 수..
-
[React] Suspense구버전/React 2023. 11. 22. 15:42
개요 Suspense의 개념 및 동작방식 Usages Suspense React에서 무언가를 기다릴 때 사용한다. (children이 로딩되기 전에 fallback을 보여준다) useEffect의 단점) UI폭포(Waterfall)를 발생한다(상위 컴포넌트의 데이터부터 UI가 순차적으로 나타나는 것) 초기랜더링 이후 발생하는 사이드 이펙트로, 데이터 로딩이 끝나면 리랜더링을 수행하기에 Race Condition에 취약 이러한 단점을 보완해주는 Suspense 예시) fallback에는 실제 UI가 로딩이 끝날 때까지 대신 보여줄 컴포넌트를 넣어준다 (스피너, 스켈레톤...) 컨텐츠를 보여준 후 다시 suspend상태에 들어가게 되면 다시 fallback을 보여준다. 동작방식) 위와 같은 구조의 트리에서 ..