전체 글
-
[React] 조건부 렌더링 시 "falsy" 값 렌더링 주의React 2022. 6. 28. 15:44
문제 api로 배열 데이터를 받아와 화면에 뿌려주는 작업 중 화면에 0이 출력되어 찾아보았다. 원인 JSX 이해하기 – React A JavaScript library for building user interfaces ko.reactjs.org {props.messages.length && } 한 가지 주의해야 할 점은 0과 같은 “falsy” 값들은 React가 렌더링 한다는 점입니다. 예를 들어, 아래의 예시는 props.messages가 빈 배열일 때 예상과는 다르게 0을 출력하게 됩니다. props.messages.length가 0이면 "falsy" 값이 나오니 조건부 렌더링을 이용하면 되겠다! 라는 생각이지만 리액트는 그 값을 렌더링한다고 한다. 그래서 0이 출력하게 되었다. “falsy” 값..
-
[CSS] emotion 사용 시 :nth-child CSS selector 경고CSS 2022. 6. 25. 18:27
The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type" 가상 클래스 ":nth-child"는 서버 사이드 렌더링 수행 시 잠재적으로 안전하지 않다. ":nth-of-type"으로 변경하라 CSS 라이브러리로 emotion 사용 시에, :nth-child을 사용하니 위와 같은 경고 메시지가 나타났다. ":nth-of-type"으로 변경하니 경고는 사라졌지만 이유가 무엇인지 궁금해졌다. :nth-child와 :nth-of-type 차이 :nth-child(n) :nth-child 부모 엘리먼트의 모든 자식 엘리먼트중 n번째 부모 엘리먼트의 특정 자식 ..
-
[JavaScript] Throttle 와 DebounceJavaScript 2022. 6. 23. 23:19
Throttle 와 Debounce - 성능 최적화를 위해 이벤트의 횟수를 제어하는 기법 - 스크롤 이벤트 리스너를 등록하면 스크롤 할 때마다 수 많은 스크롤 이벤트가 발생한다. window.addEventListener("scroll", () => console.log("scroll!")); Throttle 이벤트를 일정한 주기마다 한 번만 발생하도록 한다. 일정 주기를 1초로 설정한다면, 10초 동안 계속 이벤트를 발생시켜도 10번만 호출이 된다. Debounce 특정 시간이 지나야 이벤트가 한 번 발생한다. 연속되는 이벤트 호출이 그룹으로 묶이게 된다. ex) - 검색 API 호출 (자동완성) : "안녕"을 검색하면 'ㅇ', '아', '안' '안ㄴ', '안녀' 과 같이 불필요한 요청들을 막아준다. ..
-
[JavaScript] 브라우저 창 사이즈JavaScript 2022. 6. 16. 16:22
window.screen.width window.screen.height => 사용자의 모니터 화면의 크기를 구할 때 사용 window.outerWidth window.outerHeight => 해당 브라우저의 창의 크기를 구할 때 사용 window.innerWidth window.innerHeight => 해당 브라우저 창의 상단 사용자 인터페이스를 제외한 실제 작업 영역의 크기를 구할 때 사용 (스크롤바 영역 포함) document.documentElement.width document.documentElement.height => 해당 브라우저 창의 상단 사용자 인터페이스를 제외한 실제 작업 영역의 크기를 구할 때 사용 (스크롤바 영역 포함X)
-
[React] TypeError: Array.map is not a functionReact 2022. 6. 14. 14:17
TypeError: Array.map is not a function 문제 데이터 배열을 받아 map 함수로 데이터 목록을 출력하도록 하였다. 잘 동작하는 듯 하다가 특정 상황에서 해당 오류가 발생하였다. 분석 map 함수는 배열에만 동작한다. 이 오류는 해당 데이터가 배열이 아니기 때문에 나는 오류이다. 데이터를 받아오는 코드를 작성할 때도 이 사실에 주의하여 배열로 받아오겠끔 하였다. 그런데 왜 특정 경우에 이런 오류가 나는지 고민했다. 그 이유는 바로 데이터를 받는 상태의 초기값 때문이었다. 해당 프로젝트에서 상태 관리 라이브러리인 리덕스를 사용했다. 바로 데이터를 받아오는 상태의 initialState를 {}로 할당하였기 때문이었다. 해결 해당 상태의 initialState를 []로 할당하였다.
-
[CSS] 콘텐츠의 길이와 상관 없이 footer 하단 고정CSS 2022. 6. 10. 13:39
🚩목표 콘텐츠의 길이와 상관 없이 footer를 하단에 고정시켜야 한다. header의 경우 스크롤을 내릴시 상단고정이 되어야 한다면 position:fixed를 사용하면 된다.하지만 footer의 경우 스크롤이 생길 때 항상 고정되어 있어 어색하다.position: absolute로 하단에 위치해보아도 콘텐츠가 길어져 스크롤이 넘어서면 하단에 위치하지 않게 된다. 💡방법 : min-height min-height를 이용해 화면에 꽉채우게 한다. height의 기본 속성은 auto이니 컨텐츠의 길이가 화면보다 짧으면 화면이 꽉차게 나오고 길다면 길이만큼 스크롤이 발생 Header Content Footer /* css */ * { box-sizing: border-box; } header { width:..
-
[자료구조] 최소 비용 신장 트리etc. 2022. 6. 6. 21:58
신장트리 n개의 정점으로 이루어진 무방향 그래프에서 n개의 모든 정점과 n-1개의 간선으로 만들어진 트리 - 깊이 우선 신장 트리 : 깊이 우선 탐색을 이용하여 생성된 신장 트리 - 너비 우선 신장 트리 : 너비 우선 탐색을 이용하여 생성된 신장 트리 최소 비용 신장 트리 무방향 가중치 그래프에서 신장 트리를 구성하는 간선들의 가중치 합이 최소인 신장트리 최소 비용 신장 트리를 만드는 알고리즘 - Kruskal 알고리즘 - Prime 알고리즘 Kruskal 알고리즘 Ⅰ 가중치가 높은 간선을 제거 1. 그래프에서 모든 간선을 가중치에 따라 내림차순으로 정리 2. 그래프에서 가중치가 가장 높은 간선을 제거 - 이때 정점을 그래프에서 분리시키는 간선을 제거할 수 없으므로 그 다음으로 가중치가 높은 간선 제거 ..
-
[CSS] aspect-ratio : 요소의 비율 유지하기CSS 2022. 6. 1. 23:58
목적 반응형 요소를 만들 때 이미지(요소)의 비율을 그대로 유지하려고 한다. 비율은 16:9로 가정하였다. 방법 1. padding-bottom (or padding-top) 2. aspect-ratio 1. padding-bottom (or padding-top) .wrapper { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%; } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - height를 0, padding-bottom 값을 %로 지정하여 너비에 따라 보여질 높이의 비율을 정할 수 있다. - 요소의 ..