Width 블록 요소의 기본적인 width 값은 auto이다. margin auto와 비슷하게, 자기가 먹을 수 있는 최대한의 space를 차지하려고 한다. width를 정의하는 방법은 크게 2가지다. 100%, 5rem, 200px 등 숫자가 포함된 어떤 단위 auto, fit-content 등 어떤 키워드 width를 숫자로 정의하는 경우 부모 요소를 기준으로 한다. 예를 들어 100% 라고 하면 무조건 부모 요소의 width만큼 늘어난다. (auto와 달리, 마진이 있더라도 무시된다) min-content, max-content, fit-content min-content와 max-content는, 다른 width와 달리 child를 기준으로 너비를 잡는다. 예를 들어서 auto나 100% 같은 값..
Flow layout HTML element의 레이아웃은 레이아웃 알고리즘에 의해 결정된다. 여러가지 레이아웃 모드(e.g. flex box, grid, positioned 등)가 있는데, 디폴트는 Flow layout이다. Flow layout에서는 모든 element들이 display 프로퍼티를 가지며 display 값은 inline, block, inline-block이다. 이 값들에 따라 레이아웃이 어떻게 위치할 지가 결정되며, 값들은 기본적으로 element 태그에 따라 다르다. 예를 들어 div는 디폴트로 block 값을 가지며, span은 inline을 디폴트 값으로 가진다. inline 인라인 요소는 margin-left/right을 이용해서 방향을 조절할 수는 있지만, width나 hei..
Negative Margin padding이나 border에는 음수가 적용되지 않지만 margin에는 있다. margin을 음수로 주면 부모 element 영역을 벗어날 수 있게 된다. 또한 형제 element를 가깝게 끌어당길 수도 있다. margin은 해당 엘리먼트의 위치만 바꾸는 것이 아니라, 다른 element 간의 갭을 조절할 수 있다. 음수 값을 주게 되면 형제 element는 가까워지게 된다. 또한 음수값으로 인해 해당 element가 이동한다면, 그 이동한만큼 형제 element들도 따라서 이동을 한다. 포지션에 영향을 미치는 다른 프로퍼티(e.g. transform: translate)와 달리 마진은 다른 엘리먼트의 포지션에까지 영향을 미치므로 이를 주의해야 한다. 만약 아래처럼 전체적으..
pseudo-classes element의 현재 상태에 따라 적용되는 css (e.g. hover, focus) button:hover { color: blue; } pseudo-elements 해당 element의 sub element이면서, 우리가 명확히 만든적 없는 DOM element를 타겟하는 경우. (e.g. placeholder, before, after) input::placeholder { color: green; } /* p element 안에, text가 시작되기 전 앞에 핑크색 대시를 추가 */ p::before { content: '-', color: pink; } selector - children, descendent의 차이 /* only children */ p > a { c..
공통점 둘 다, 사이트 URL에 대응하는 HTML을 생성하고 SEO를 향상시킨다. Static Rendering 차이점은 static rendering은 빌드 타임에 일어나고, server rendering은 유저가 요구할 때마다 일어난다는 것이다. 미리 빌드 타임에 각 URL에 대한 모든 HTML 파일들을 다 만들어 놓고, s3나 웹서버에 push 해놓고 유저가 요청할 때 미리 만들어둔 것을 전송한다. 예를 들어 s3 cloudfront를 사용하면 요청이 오면 cloudfront를 사용해 캐시된 버전이 있는지 확인하고 없으면 s3 요청을 한다. 장점 모든 요청 가능한 리퀘스트에 대응하는 응답을 다 만들어둔다. 그렇기 때문에 당연히 응답 속도가 매우 빠르다. 단점 요청 가능한 리퀘스트를 미리 예측할 수 ..
Query 디폴트 useQuery와 useInfiniteQuery를 사용한 쿼리 인스턴스는 기본적으로 캐시 데이터를 stale로 취급한다. (staleTime이 기본적으로 0) stale query는 아래와 같은 조건에서 자동적으로 refetch 된다. 새로운 쿼리 인스턴스가 마운트했을 때 (refetchOnMount) 예를 들어 데이터를 fetch하는 컴포넌트가 있고, 이 컴포넌트가 다른 데에서도 마운트되면 캐시된 데이터를 쓰는게 아니라 그 때 또 다시 refetch한다는 뜻. 윈도우가 refocus됐을 때 (refetchOnWindowFocus) 네트워크가 다시 연결됐을 때 (refetchOnReconnect) refetch interval 설정을 해줬을 때 (refetchInterval) useQu..
React에서 form의 validation을 도와주는 라이브러리이다. 이 라이브러리는 기본적으로 uncontrolled component를 베이스로 하지만 controlled component에 대한 지원도 하고 있다. react hook form의 장점은 가볍고, 다른 디펜던시가 없으며, ref를 기반으로 하여 다른 UI 라이브러리와 호환이 잘된다는 것이다. 가장 간단한 형태 const { register, handleSubmit } = useForm(); 여기서 register는 해당 컴포넌트의 값을 트래킹하고 validation을 하기위해 react hook form 라이브러리에 등록한다는 뜻이다. input을 등록하려면 아래처럼 ref에 register을 넘겨주면 된다. 이 때 중요한 점은 반드..
Case 1 - dependency array 없이 data fetch const [data, setData] = useState(); useEffect(async () => { const result = await something; setData(result.data); }) 문제점: 데이터를 불러온 후 setData를 하고 있기 때문에 리렌더링되고, 그러면 useEffect이 또 실행되므로 무한 루프가 발생한다. Case2 - dependency array 있이 data fetch const [data, setData] = useState(); useEffect(async () => { const result = await something; setData(result.data); }, []) 개선..
- Total
- Today
- Yesterday
- 제네릭스
- oracle
- 포인터 변수
- 자바
- CSS
- youtube data api
- useEffect
- SQL
- rxjs
- this
- 인스턴스
- Prefix Sums
- react
- Data Structure
- jQuery
- package.json
- c언어
- 리덕스
- Redux
- GIT
- JavaScript
- Java
- Conflict
- getter
- 개발 공부
- 알고리즘
- til
- linkedlist
- Session
- 깃
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |