데이터 원본을 그대로 수정한다면 의도치 않은 사이드 이펙트를 방지하기위해서 데이터의 원본을 바로 수정하것은 지양하는 것이 좋습니다. 복사를 하여 카피본을 만들어서 사용하는 습관을 가지는것이 좋습니다.구조 분해 할당을 사용하거나 자바스크립트에서 지원하는 메소드 중에 de

JavaScript - filter(Boolean) 을 이용한 Array filter

Component UI 지금까지 사용해본 React UI 라이브러리는 두 가지 라이브러리입니다. 대표적인 Component UI 방식입니다. Antd MATERIAL-UI 라이브러리를 사용해본 장점으로는 기본값으로 style이 지정되어있고 styled-componen

Context API

React에서 제공하는 Portal은 UI를 어디에서 렌더링 시킬지 DOM을 사전에 선택하여 부모컴포넌트 바깥에서 렌더링 할 수 있도록 해줍니다.child (첫번째인자) : ReactChildrencontainer (두번째인자) : DOM 엘리먼트react프로젝트의 h

IntersectionObserver > ## Intersection Observer의 사용법 root : 루트는 말 그대로 API가 교차(intersect)되는 여부를 확인할 때의 기준이 되는 요소로 기본적으로는 뷰포트로 설정되는데 여기서 굉장히 주의할 점이 사용자

lsif -i :번호 ex: lsof -i :3000kill PID번호

function shuffle(array) { array.sort(() => Math.random() - 0.5);}const numbers = 1, 2, 3;shuffle(numbers);

미디어쿼리 미디어쿼리 사용방법 -> customStyled component 내에서 호출 ex) ${mediaQueries(FROMTABLETTO_PHONE)} { ${(props) => (props.theme.width )}; }

페이지에서 getServerSideProps 함수를 내보내면 반환된 데이터를 이용해 페이지가 요청 받을때 마다 호출되어 pre-rendering합니다.기본적으로 next는 모든 페이지를 pre-render합니다. 각 페이지에 대해 미리 HTML을 생성합니다. 더 나은

클라이언트 측 데이터 가져오기는 페이지에 SEO 인덱싱이 필요하지 않거나 데이터를 미리 렌더링할 필요가 없거나 페이지 콘텐츠를 자주 업데이트해야 할 때 유용합니다. 페이지에서 수행하면 런타임에 데이터를 가져오고 데이터가 변경되면 페이지 내용이 업데이트됩니다.컴포넌트에서

Next - 공식 홈페이지 getStaticProps https://nextjs.org/docs/basic-features/data-fetching/get-static-props https://nextjs.org/docs/api-reference/data-fetchi

틱택토 만들기 > React 공식문서 자습서에 나와있는 틱택토를 타입스크립트와 함수형 컴포넌트로 작업했습니다. > > buildTool: React-Create-App style: styled-component type-check: TypeScript github :

스크롤 퍼센트 구하기 > 이전 글에는 요소의 절대위치를 구하는 글을 적었습니다. 이번에는 현재 내가 얼마나 스크롤을 했는지 퍼센트를 구하는 방법입니다! > ( 스크롤 된 높이+ 보고있는화면(viewport)높이 ) / 전체문서높이 * 100 활용하기 Element

웹 페이지를 만들다 보면 해당 요소의 절대위치를 찾아야 할 때 있습니다,절대위치를 이용해 스타일을 꾸미거나 로직을 만들때 사용할 수 있습니다.해당 요소가 웹 페이지를 기준으로한 위치입니다.스크롤된 컨텐츠의 길이 + Viewport 상대좌표를 구하면 요소의 절대위치를

Styled-component + TypeScript >저는 React, TypeScript ,Styled-componet 이 세가지 조합을 많이 사용하고 있습니다. Styled-component를 사용하는 이유는 독자적인 클래스를 만들어 스타일 충돌을 방지 SASS와

이벤트 루프는 브라우저내에 내장된 기능입니다. Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인합니다.만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으

렉시컬스코프 > 스코프란? 식별자가 유효한 범위입니다. 스코프를 구분해보면 두가지가 있습니다. 전역 스코프 : 코드 어디에서든 참조할 수 있는 범위 지역 스코프 : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있습니다. 자바스크립트의 상위

HTML, CSS, JavaScript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력되는 것을 말합니다.파싱 : 어떤 페이지에서 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것렌더링 과정의 순서를 요약하면1\. 서버에 요청 및 응답(HTTP)2\. 브라우

Mac에서 hosts 파일 찾기