치춘짱베리굿나이스

lodash 설치 $> npm i lodash $> yarn add lodash npm 링크 Contributors lodash 용례 이름이 lodash인 이유는 라이브러리를 사용할 때 언더바 (_ = low dash) 를 쓰기 때문이다 객체, 배열 등의 자바스크립트 / 타입스크립트 기본 데이터 구조를 쉽게 다룰 수 있도록 도와주는 라이브러리 심지어 성능도 좋아 라이브러리를 가져다 쓴다고 무거워지거나 성능저하가 크게 일어나지 않는다 중복값 제거, 객체 데이터 추출, 깊은 복사, 특정 데이터 삭제 등 바닐라 자바스크립트로 두세줄 걸릴 만한 일들을 lodash를 사용하면 한 줄 정도만에 간단하게 끝낼 수 있다 이제 배열에서 요소 하나 삭제할 때 slice 두번 하고 합치는 더러운 일을 안 해도 된다.......

다들 감사합니다~~~~~ 정확히 5000의 순간을 목격해서 뿌듯하다

개인과제 #1 공식적인 내생각 코드를 짜다 보니 Suspense를 단단히 잘못 알고 있는 듯한 느낌이 들어서 (실제로도 잘못 쓰고 있었던게 맞았다) Suspense 관련해서 자료를 정리하고, 또 Suspense 관련 자료를 검색하다 보니 비동기 처리랑 Promise 관련해서 자료 정리하고... 공부할 게 끝이 없다 작업 내용 (삽질 오브 삽질) 자꾸 로컬 스토리지 값이 초기화되던 문제 useEffect(() => { store.set('storageData', favoriteData); }, [favoriteData]); 이 코드가 문제였다 storageData는 FavoritePage에 들어올 때마다 값이 initialData로 초기화되는데, favoriteData가 변경되었으니 당연히 저 useEff..

비동기 처리와 Promise 동기 (Synchronous) 와 비동기 (Asynchronous) const [testValue, setTestValue] = useState(0); const handleOnClick = () => { setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); }; ... {`${testValue}`} add 1 앞에서 prevState에 관해 짧게 정리할 때 슬쩍 본 코드이다 testValue가 한번에 5씩 증가하지 않는 이유가 ‘비동기’ 적인 작동방식 때문이라고 했었는데,..

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

개인과제 #1 공식적인 내생각 하루종일 갤갤대느라 별거 안했다... 처참하다 (ㅋㅋ) 로컬 스토리지에 값 올리는 것까진 했는데 새로고침할 때마다 로컬 스토리지에 있는 값이 자꾸 초기화된다 이부분 내일 다시 한번 봐야겠다 작업 내용 (삽질한 내용) Suspense에 대해 단단히 잘못 알고 있는 듯한 나 {renderMovieContainer()} 딱 이렇게만 해 놓으면 renderMovieContainer() 돌아가는 동안 로딩 컴포넌트가 렌더링 되는 줄 알았다 내 예상은 renderMovieContainer 내의 모든 내용이 렌더링될 때까지 로딩 컴포넌트가 빙글빙글 돌아가는 거였는데 실상은 하나라도 로딩되면 Array.map 메서드의 작업 내용이 끝나지 않아도 suspense가 종료되고 컴포넌트가 렌더링..

localStorage / sessionStorage 이번 기업과제는 로컬스토리지에 값을 저장해야 한다는 조건이 붙어 있어 store 라이브러리를 사용하려고 하는데, 기왕이면 로컬 스토리지에 관해 알고 사용하면 더 좋지 않을까? 싶어 정리를 해 본다 찾아보던 중에 세션 스토리지도 있길래 같이 적으려구 localStorage 로컬 스토리지는 말그대로 로컬에 저장되며, 브라우저를 종료해도 값이 살아있다 또한 같은 페이지 프로토콜 (같은 웹 페이지 주소) 는 탭이나 창이 달라도 같은 로컬 스토리지를 공유하므로, 다른 창을 열었다고 해서 다른 값이 나오지 않는다 이러한 특성 때문에 사용자가 고의로 지워버리지 않는 이상 데이터는 계속 유지된다 브라우저별로 서로 다른 로컬 스토리지 영역을 가지므로, 크롬에서 저장한..

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,..