매일 기록하는 TIL
실력있는 프론트엔드 개발자가 되기위한 공부과정
배우고 공부했던 모든 내용을 기억할 수 없기 때문에 정리해서 모를때마다 꺼내 볼 수 있도록 한다.
- 마진 병합 Collapsing margin
- Margin negative 마진음수
- 복합 선택자
- Flex 레이아웃 구성
- Float으로 레이아웃 구성 및 이해
- Float 배치되는 과정
- 이미지 하단에 공백이 오는 이유 및 해결
- Fieldset이 flex가 안되는 이유 및 해결
- HTML 글자수 넘어가는경우 말줄임표
- IS / IR 기법 설명
- 특성 선택자
- transfrom, animation
- 요소를 화면 가운데에 위치시키는 방법
- 화면 전체를 스크롤없이 높이를 차지하게 하는방법
- CSS 블러 효과(Blur effect)
- height auto
- input disabled
- 글자 수 길어졌을때 (...) 구현(ellipsis)
- float 해제 방법
- BFC
- 스크린 리더 사용자를 위한 텍스트 숨김 방법
- Grid System
- 미디어 쿼리
- 효율적인 CSS 사용
- Sass vs Less vs Stylus
- 웹폰트, 로컬폰트 적용
- pseudo-elements
- box-sizing:border-box를 사용하는 이유
- position 속성
- Cascading
- CSS framwork
- absolute대신 translate() 사용하는 이유
- CSS 요소 선택 방법(first-child, last-child, nth-child, nth-of-type, nth-last-of-type)
- img태그 vs background-image
- section vs article 태그
- em vs rem
- z-index 정상적으로 동작안될때
- IMG의 srcset과 sizes 속성
- 시멘틱 마크업
- 시멘틱 마크업 요소
- doctype이란?
- 표준모드(standards mode)와 호환모드(quirks mode)
- XML과 XHTML
- XHTML 한계점
- 다국어 페이지를 만들때 고려해야할 사항
- data- 속성
- 로컬스토리지, 세션스토리지, 쿠키
- Progressive rendering
- srcset 속성
- SVG
- Web Component
- 변수의 동작원리 이해
- 표현식과 문
- 데이터 타입
- 연산자
- 제어문
- 타입변환과 단축속성
- 객체 리터럴
- 원시값과 객체 비교
- 함수-1
- 함수-2
- 스코프
- 전역 변수의 문제점
- 호이스팅
- let, const와 블록 레벨 스코프
- 프로퍼티 어트리뷰트
- 생성자 함수에 의한 객체 생성
- 함수 객체의 프로퍼티와 일급 객체
- 프로토타입 - 1
- 프로토타입 - 2
- 프로토타입 - 3
- strict mode
- 빌트인 객체
- this
- 실행 컨텍스트
- 클로저
- 클래스
- 브라우저 렌더링 과정
- DOM
- 비동기 프로그래밍
- Promise
- Gettr Setter 예제
- 배열 내장함수
- 구조분해 할당 Destructuring
- Symbol
- 모듈
- form태그의 값을 서버에 데이터에 전송할때
- localStorage 데이터 저장, 참조
- 에러 처리
- URLSearchParams
- SPA
- toLocaleString() 세자리수 마다 콤마 넣어주기
- 부모창 자식창
- 문자열의 문자 코드
- 정규표현식 변수 삽입 방법
- 디바운스, 스로틀링
- React 환경설정
- Custom Snippet
- React
- JSX
- 엘리먼트 랜더링
- Components and Props and State
- state and setState
- Lifecycle
- 재조정 이해하기
- 이벤트
- Controlled components
- 컴포넌트 스타일링 방법
- Styled Components
- Error Boundaries
- Error Boundaries 함수형 컴포넌트
- Ref
- forward refs
- 컴포넌트 반복
- HOC 고차 컴포넌트
- Render Props
- React SPA Router
- useHistory, useLocation, usePrams, useRouteMatch
- Hook을 사용하는 이유
- useState
- Vanilla Javascript useState
- Immer
- useEffect
- Vanilla Javascript useEffect
- useCallback, React.memo 사용해서 컴포넌트 성능 최적화
- Custom Hook
- useMemo
- Hooks 사용한 React 성능 최적화 체크리스트 및 총정리
- Context in Class Component
- Context Hook API
- redux
- react-redux
- Redux toolkit
- Reselect
- custom Hook으로 container 컴포넌트 대체
- 이전 state, props 얻는 방법
- redux-thunk
- redux-saga
- Redux Thunk vs Saga
- SWR
- React Query 란?
- React Query(1) - 환경 설정, useQuery, handle Error, devtools
- React Query(2) - React Query 캐시
- React Query(3) - Background Refetch 옵션
- React Query(4) - 데이터 요청 함수 이벤트 핸들러 등록 , Success and Error Callback, UI를 위한 데이터 가공 옵션, Custom Query Hook
- React Query(5) - Query Id, useQuery 여러번 호출, useQueries
- React Query(6) - Dependent Queries, Initial Query Data
- React Query(7) - Infinite Queries, useMutation, Query Invalidation
- React Query(8) - Handling Mutation Response, Optimistic Updates
- 여러번 발생하는 이벤트 호출 방지
- 무한 캐러셀
- 여러 이미지가 캐러셀 페이지 하나에 들어가게 구현한 캐러셀
- 이미지 여러개 무한 자동 슬라이더 auto multiple slider
- img 태그 이미지가 없을경우 대체이미지 생성
- react-virtualized 성능 최적화
- 뒤로가기 스크롤 위치 기억
- hover 이벤트 모바일 반응형 이슈
- 모바일 touch 이벤트시 click 이벤트 발생 이슈 해결
- 호버, 클릭시 별점 기능 UI
- 무한 슬라이드 중간에 멈추고 진행하는법(Only CSS | 다음,이전 버튼X)
- 성능 최적화 툴
- Chrome Performance 패널
- Chrome Performance 패널로 bottleneck 현상 분석
- webpack bundle analyzer, cra-bundle-analyzer
- code splitting, Lazy loading
- Text Compression 텍스트 압축
- Reflow, Repaint
- 컴포넌트 Preloading
- 적절한 이미지 크기 로드
- 이미지 preloading
- 이미지 지연 로딩(Image lazy loading) with intersection observer
- 이미지 지연 로딩(Image lazy loading) with react-lazyload, Native Lazy loading
- 이미지 사이즈 최적화
- 폰트 렌더링 최적화
- 폰트 사이즈 최적화
- 폰트 Preload
- HTML, JS, CSS, IMG파일 캐시 최적화
- 사용하지 않는 CSS 제거
- Layout Shift
- memoization 렌더링 성능 향상
- 스켈레톤 UI (Skeleton UI)
- 최적화 Check List
- ESlint
- JSON Server
- Prettier
- open color
- nvm
- npm install --save-dev, --save-prod
- 터미널에서 vscode여는 방법(code . 적용 하는법)
- Tailwindcss
- Tailwindcss Complex variants
- git issue 관리
- E325: ATTENTION 에러 처리
- Vscode Javascript 자동완성 안될때
- npm
- Jest 사용하기
- Jest 비동기 코드 테스트
- Jest UI testing
- Jest 스냅샷
- Storybook(1) - Storybook이란?, Writing Stories, Story 계층, Renaming Story & Sorting Stories
- Storybook(2) - Renaming Story & Sorting Stories, Story within Story, Args, Decorators, Addons
- Cypress 란?
- Cypress 사용하기
- AWS s3, CloudFront, Route53 프론트엔드 배포
- Webpack
- Webpack, Babel 사용해서 React 개발 환경 구축
- webpack 이미지, 폰트 loader
- MSW(Mock Service Worker)
- Git 명령어
- Vscode에서 마크다운 사용
- 원격저장소 업로드 동작 과정
- Git branch
- Git rebase
- Git flow
- Git bash 단축표현
- Git commit 취소
- Git 폴더명, 파일명 변경 안되는 이슈 해결
- Cookie
- 캐시 기본 동작
- 메모리 캐시, 디스크 캐시
- 캐시 검증 헤더와 조건부 요청
- 프록시 캐시 서버
- 캐시 무효화
- 서버 인증 방법 : JWT vs 세션 / 쿠키
- HTTP,HTTPS
- CORS(Cross-Origin Resource Sharing)
- GET, POST
- TCP, IP
- OSI 7계층
- REST API
- 네트워크 정의 및 역사
- 네트워크 구조
- 물리계층 역활과 기능
- 물리계층 장비와 케이블
- 데이터링크 역활과 기능
- 데이터링크 스위치와 ARP
- 네트워크 계층의 역활과 IP의 구조
- 라우터와 서브넷
- ICMP, DHCP
- Transport 계층 TCP / UDP
- HTTP 상태 코드