CSS

반응형 레이아웃 @media쿼리 일반적으로~

• min-width: 가장 작은 사이즈의 레이아웃을 기본으로, 점점 커지는 레이아웃을 작성
• max-width: 가장 큰 사이즈의 레이아웃을 기본으로, 점점 작아지는 레이아웃을 작성
• 레이아웃은 flex grid 프로퍼티 이용
• 모바일도 많이 쓰니, 미디어 쿼리에 min-width를 적용해서 써야 화며이 커질때마다 min-width로 화면크기에 따라 추가작업내용을 넣으면됨

css 프로퍼티 선언(프로퍼티, 값) 기록

• box-sizing 1. border-box: width = content + padding + border 2. content-box: width = content
• CSS Reset: 각 태그마다 패딩 마진 등등을 초기화함
• img 태그에 속성 width주는 방법 -attribute ex) <img width="300px"> -css ex) <style> img { ... } </style> -inline style(inline css) <img style="width: 300px;"> 모두 동일한 효과 적용. 충돌시 우선순위는: attribute < css < inline style inline style은 잘 안쓰고, attribute, css를 주로쓴다 css를 써서 html과 분리해서 써주는게 정석이고 attribute까지 써주는 경우는 사용자 경험(파일 로드시 html이 먼저 로드)과 특별한 태그들 한정 svg같은 https://css-tricks.com/whats-the-difference-between-width-height-in-css-and-width-height-html-attributes/
• 셀렉터는 범위가 더 작을 수록 우선함 즉, id > class >tag이름
• min-width: 콘테이너에 이값이 지정되면 아이템이 콘테이너보다 작아도 콘테이너는 이값을 유지하며 아이템이 이보다 커지면 콘테이너도 따라커짐 max-width: 컨테이너에 이 값이 지정되면, 아이템이 컨테이너보다 width값이 작을땐, 컨테이너가 아이템에 맞추고 클땐, 컨테이너는 이값이 최대고, height를 늘린다. 다음줄을 만든다 min-height: width와비슷 max-height: width와 비슷한데, 컨테이너에 이값지정시, 아이템이 컨테이너보다 height가 커지면 overflow 속성이 적용되어, 넘치는 값을 어떻게 처리할지 결정하게됨 자를지, 스크롤 적용할지 드등

xxx

• 시멘틱 태그를 쓰면 컴퓨터가 더 잘알아먹음 인간은 코드보면 아는데 컴터는 이걸써줘야 header, footer, aside, ...
• web은 4가지로 구성: html, url/uri, web browser/web server, http
• css의 속성은 property, react의 속성은 props, html의 속성은 attribute
• 레이아웃 용어 정리, 시멘틱태그 header: 윗부분 nav: 상단에 메뉴 section: 콘텐츠 영역 aside: 콘텐츠에 대한 부가정보 or nav

React

• state의 값을 변경 시, original data를 건드려서 변경하는 push를 쓰지말고 original data를 복사해서 변경하고 다시 할당하는 concat 같은 방법을 사용 지향 그래서 매 연산마다 original data를 복사해서 변경하기보다, original data를 한번 복사해 놓고 여러 연산을 수행하는게 좋다 객체는 Object.assign(); 배열은 Array.from(); 을 쓸 수 있다(여러 방법존재)
• React 컴포넌트가 렌더링을 수행하는 시점 Props가 변경되었을 때 State가 변경되었을 때 forceUpdate() 를 실행하였을 때 부모 컴포넌트가 렌더링되었을 때 -처음 시작할때는 모든 컴포넌트 렌더링. 처음 시작이므로 -vsc 변경후 저장은 변경 컴포넌트 포함 하위만 리렌더링
• Hooks의 종류와 용도 Hooks: 함수형 컴포넌트의 상태관리 라이브러리 -useState: 컴포넌트에서 상태관리를 사용하게 해줌 -useRef: DOM 선택, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리, -useEffect: 컴포넌트가 처음 나타났을때(마운트됐을때), 사라질때(언마운트됐을때), 특정 props가 바뀔때(업데이트될때) 특정 작업을 처리 모양: useEffect(callbackFn, [deps]), [deps]: 의존값이 들어있는 배열 특징 1. deps배열을 비웠을때([]), 컴포넌트가 처음 나타날때만 useEffect 에 등록한 함수실행(callbackFn 실행) 2. useEffect는 cleanup 함수를 반환함. 이는 useEffect에 대한 뒷정리를 함. deps가 비어있는 경우, 컴포넌트가 사라질때 호출됨 3. deps에 값이 존재하면, 컴포넌트가 처음 마운트/언마운트 될때, 지정한 값이 바뀌기 직전/바뀔때, 그 값이 호출됨 3. 마운트 시 하는 작업 -props로 받은 값을 컴포넌트의 로컬 상태로 설정 -외부 API 요청 -라이브러리 사용 -setInterval을 통한 반복setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약 4. 언마운트 시 하는 작업 -setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout) -라이브러리 인스턴스 제거 -useMemo: cont x = useMemo(callbackFn, [deps]);// useMemo 반환값은 callbackFn의 반환값 deps가 바뀌면 callbackFn이 실행 => 근데 useMemo가 있는 코드만 실행x App.js가 다시 실행. -useCallback: 컴포넌트의 렌더링마다 선언했던 함수들도 재선언 -useReducer: useState와 같은 상태관리 라이브러리. 차이점은 상태 업데이트 로직을 컴포넌트에서 분리시킬수있다 const [state, useState] = useState(state초기값), useState로 state를 업데이트 const [state, dispatch] = useReducer(reducer, state초기값), >>>state초기값이 useState, useReducer함수의 인자로 들어간 후, >>>원시값(call by value)은 원래 복사되서 사용되므로 실제값은 원래 변경되지 않고 state로 반환 객체(call by reference)는 실제값을 변경되지 않게 함수 내부적으로 복사해서 state로 반환 dispatch로 state를 업데이트 실행 -> reducer function이 실행되어 반환값이 state의 새로운 값이 됨
• spread operator는 배열, 객체 모두 이용가능 spread operator 사용하여 새로만들때, 앞에서부터 코드가 진행되므로 특히 객체에서 중복되는 프로퍼티되는게 존재하면 덮어쓴다.
• 구조분해할당(비구조화 할당) 시, 객체 내의 변수와 새로 생성하는 변수의 이름이 같아야 함.
• eventhandler 종류: onclick, onchange ... event handler는 callback 을 받는다 인자를 넘겨야하면, () => func(argument) 식으로 쓸 수 있다 onRemove={() => onRemove(user.id)}
• setTimeout(callbackFn, t[ms]); t[ms] 후 callbackFn 실행
• 불필요한 렌더링 방지해야한다 -React.memo(...)를 이용해서 변화가 없는 하위컴포넌트가 상위컴포넌트 재랜더링 시, 또 렌더링 되지 않게 한다 -useCallback( , )을 써서, 첫번째인자는 만들고자 하는 함수. 두번째 인자에 넣은 배열 내 원소들이 값이 바뀌면 첫번째 인자인 함수를 업데이트 그 함수에 주시하고 있는 두번째 인자의 원소들이 있으니깐 => 함수를 매 렌더링마다 선언하는게 아니라 변화가 존재할때만 선언하도록 그런데 두번째 인자가 자주 사용 되는 값(useState로)이라 useCallback을 쓴 소용이 없을때 첫번째 인자에서 setState 시 callback(함수형 업데이트)함수+매개변수는 자주 사용하는 변수로 하고, 두번째 인자는 비워서 함수생성은 한번만 하고, 매개변수는 항상 최신으로 실행되게 할 수 있다...