치춘짱베리굿나이스

컴포넌트의 데이터 Fetching & Rendering 크게 세 가지 방법이 있으며, 각각 수행 방법과 시간에 차이가 있다 fetch-on-render (렌더링 직후 불러오기) useEffect(() => { fetchData(); }, []); // Mount될 때 데이터 불러오기 많은 컴포넌트에서 useEffect를 통해 컴포넌트가 마운트되었을 때 데이터를 불러오는 방식을 사용한다 이 방식의 단점은 컴포넌트가 마운트 및 렌더링된 이후에 데이터를 불러오기 시작한다는 점이다 이는 곧 ‘waterfall’ 이라는 문제로 이어진다 const MovieList = () = { const [movieData, setMovieData] = useState(null); // 데이터 초기화 useEffect(() =..

store 설치 $> npm install store $> yarn add store npm 링크 store store A localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood. Latest version: 2.0.12, last published: 5 years ago. Start using store in your project by running `npm i store`. www.npmjs.com yarn 링크 Contributors https://yarnpkg.com/package/store Fast,..

IntersectionObserver 무한스크롤을 구현해야 해서 이전에 합류한 프로젝트 코드를 (모바일 뷰 구현할 때 무한스크롤 방식으로 게시글을 불러왔기 때문) 찾아보고 있었는데, 보편적인 방식은 Intersection Observer를 거는 방법 같다 이름만 들어보면 벌써 공포스러운데 차근차근 정리해보도록 하겠다 Intersection Observer가 뭐지? 한국어로 교차 관찰자 / 탐지자 라고 한다 한국말로 풀어도 어렵다 ㅋㅋ ‘타겟 요소’와 ‘타겟의 상위 요소 또는 최상위 요소의 뷰포트’가 교차되는 부분을 비동기적으로 관찰하는 API라고 한다 뷰포트라 함은 우리가 웹 페이지를 보고 있는 바로 그 화면을 의미하며, css 작업을 할 때 vw, vh 단위로 비교적 익숙할 것이다 쉽게 말하자면 어떤 ..

::before, ::after 가상 선택자는 실제 html에선 존재하지 않는 속성으로, CSS에서 임의로 생성시켜준다 그 중에서도 ::before과 ::after은 현재 요소의 내용 앞, 뒤에 CSS에 의해 생성되는 자식 요소이며, content 속성과 함께 사용한다 ::before h1::before { content: "10살에 곰을 잡은 "; color: blue; } 토끼공듀 분명 h1의 내용은 "토끼공듀" 밖에 없었는데 앞에 내용이 추가되었다 이처럼 ::before 선택자는 특정 요소의 내용 앞에 추가적인 내용을 더해준다 ::after h1::after { content: "Lv.9999"; // 텍스트에 linear gradient 적용 코드 } 토끼공듀 지금보니까 원본은 2000레벨이고 닉..

CSS 선택자 asdasd 1 // 스타일이 적용됨 2 // 스타일이 적용됨 3 // 스타일이 적용됨 4 // 스타일이 적용됨 asdasd 5 // 스타일이 적용됨 6 // 스타일이 적용됨 7 // 스타일이 적용됨 asdasd aaa 아무런 선택자도 사용하지 않았을 때의 모습 예시이다 자식 선택자 > body > div { background-color: colors.$BLACK; } asdasd 1 // 스타일이 적용됨 2 // 스타일이 적용됨 3 // 스타일이 적용됨 4 // 스타일이 적용됨 asdasd 5 // 스타일이 적용됨 6 // 스타일이 적용됨 7 // 스타일이 적용됨 asdasd aaa > 기호로 이어진 두 선택자가 서로 부모자식 관계여야 함 첫 번째로 명시된 선택자의 자식 요소 중 두 번..

yarn 지금까지 프로젝트에선 npm만 썼었는데, 이번에 프리온보딩 첫 번째 개인과제를 yarn으로 세팅하게 되었고 마침 참여중이었던 다른 프로젝트에서도 프론트엔드 개편과 함께 yarn을 써보자는 이야기가 나와서 이참에 정리해보려고 한다 약간 이름이 얀이 머냐 얀이 이러면서 좀 비호감이었는데 방금 아이콘 찾아보니 너무 귀여워서 급호감됨 고양이 못참지 yarn이란? 기본적으로 npm과 같은 자바스크립트 패키지 매니저로, 패키지 설치와 삭제를 돕는다 다만 yarn은 npm의 느린 속도와 불안정함을 보완하기 위해 태어난 녀석이라 상대적으로 빠르고, yarn.lock과 package.json에 등록된 패키지만을 설치하기 때문에 안정적이다 npm과의 차이점 속도 npm은 작업을 순차적으로 수행하기 때문에 이전 패..

Custom Hook 코딩을 하다 보면 (당연히도) 반복적인 로직이 굉장히 많이 나오게 된다 예를 들면, 버튼을 눌렀을 때 특정 상태값이 바뀌게 하는 로직, input에 값을 입력하면 상태값이 같이 변하는 로직 등... 매 컴포넌트마다 useState, useEffect를 손수 달아주기보단 훅을 직접 만들어서 필요할 때마다 불러와 사용하면 몇십줄 재선언해야할 게 한두줄이면 끝난다 예시 Axios 코드 axios.get('링크') .then(res => { console.log(res); setState(res.data); }) .catch(e => { console.log(e); }); 어떠한 API에 GET 요청을 보내는 axios 코드가 있다 보통 API에 요청을 보내는 건 컴포넌트가 Mount될 때..

😡 많은 프로젝트에서 나를 괴롭혔던 오류이다 툭하면 발생하는데 브라우저에는 컴포넌트가 하나도 렌더링되지 않고 흰 배경만 덩그러니 남아 있어서 더 킹받았던 오류 발생하는 이유도 제대로 몰랐는데 내 코드 리팩토링하면서 이유를 찾아버려 정리하기로 했따 왜 나를 괴롭히는가? 처음에는 각 태그에서 발생하는 이벤트의 기본 동작이 반복적으로 발생하는 줄 알고 e.preventDefault() 를 일일히 넣어주었고, 실제로도 해결되었다 하지만 e.preventDefault()는 태그나 와 같이 특수한 태그에서 일어나는 기본 동작을 막아주는 용도이지, 애초에 button이나 div는 기본 동작이랄 게 없어서 저걸 쓰나 마나 별반 차이가 없었다 리팩토링을 하고 보니 문제점은 함수 그 자체에 있었다;; ... const [..