매일 기록하는 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() 사용하는 이유
- 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
- Class 예제
- Prototype 예제
- Gettr Setter 예제
- 배열 내장함수
- 구조분해 할당 Destructuring
- 모듈
- form태그의 값을 서버에 데이터에 전송할때
- localStorage 데이터 저장, 참조
- 에러 처리
- URLSearchParams
- SPA
- toLocaleString() 세자리수 마다 콤마 넣어주기
- 부모창 자식창
- 문자열의 문자 코드
- 정규표현식 변수 삽입 방법
- 디바운스, 스로틀링
- React 환경설정
- React
- JSX
- 엘리먼트 랜더링
- Components and Props and State
- state and setState
- Lifecycle
- 재조정 이해하기
- 이벤트
- Controlled components
- 컴포넌트 스타일링
- Error Boundaries
- Ref
- forward refs
- 컴포넌트 반복
- HOC 고차 컴포넌트
- Render Props
- React SPA Router
- useHistory, useLocation, usePrams, useRouteMatch
- Hook을 사용하는 이유
- useState
- Vanilla Javascript useState
- useEffect
- Vanilla Javascript useEffect
- useCallback, React.memo 사용해서 컴포넌트 성능 최적화
- Custom Hook
- useMemo
- Context in Class Component
- Context Hook API
- redux
- react-redux
- custom Hook으로 container 컴포넌트 대체
- 이전 state, props 얻는 방법
- redux-thunk
- redux-saga
- Redux Thunk vs Saga
- react-virtualized 성능 최적화
- Immer
- Custom Snippet
- Next.js
- styled component animation
- 무한 캐러셀
- 여러번 발생하는 이벤트 호출 방지
- 여러 이미지가 캐러셀 페이지 하나에 들어가게 구현한 캐러셀
- tailwindcss Complex variants
- map function 사용시, radio input 첫번째 input을 default checked 값으로 하는법
- img 태그 이미지가 없을경우 대체이미지 생성
- 성능 최적화 툴
- Chrome Performance 패널
- 이미지 사이즈 최적화
- Chrome Performance 패널로 bottleneck 현상 분석
- webpack bundle analyzer, cra-bundle-analyzer
- code splitting, Lazy loading
- Text Compression 텍스트 압축
- Reflow, Repaint
- 컴포넌트 Preloading
- 이미지 preloading
- 이미지 동적 로딩
- 이미지 사이즈 최적화
- 폰트 렌더링 최적화
- 폰트 사이즈 최적화
- 폰트 Preload
- HTML, JS, CSS, IMG파일 캐시 최적화
- 사용하지 않는 CSS 제거
- 알고리즘 TIL
- 28가지 알고리즘 문제
- 2016년
- 두 정수 사이의합
- 제어문 연습 문제
- 선형검색 과 이진검색
- 문자열 반복 예제
- 정렬, 버블정렬
- 선택정렬, 삽입정렬
- 배열 HOF 연습문제
- 두 개 뽑아서 더하기
- 3진법 뒤집기
- 완주하지 못한 선수
- 문자열 내맘대로 정렬하기
- 프로그래머스 1단계
- 알고리즘 TIL
- 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 상태 코드