프로그래밍
-
[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..
-
[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을 보여준다. 동작방식) 위와 같은 구조의 트리에서 ..
-
[Hooks] useEffect프로그래밍/React 2023. 11. 22. 14:19
개요 useEffect와 필수개념 useEffect의 실행순서 부가정보 useEffect side effect를 별도로 처리하기 위해서 사용하는 Hook으로 매번 컴포넌트가 렌더링 될 때 특정 조건에 의해 작업을 실행하며 컴포넌트가 순수 함수를 유지하도록 도와주는 함수 Side effect) 함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램의 동작을 이해하기 어렵게 만드는행위 서버와의 통신 setTimeOut, setInterval React 외부와 상호작용 순수함수와 참조 투명성) 순수함수란 입력에 대해 항상 같은 결과를 반환해주는 함수로 외부와 관련이 없어 영향을 주지 않는 함수, 이러한 함수들은 참조에 투명하다고 하며 React에서 사용을 권장한다 재사용성의 증가와 예측 및 테스트가 쉽다 /..