목록전체 글 (787)
치춘짱베리굿나이스
개인과제 #1 완성, 배포 공식적인 내생각 Suspense로 로딩창 구현해보겠다고 온갖 삽질을 하다가 오늘 드디어 해결했다 겸사겸사 localStorage 값이 뜬금없이 초기화되는 문제도 해결하고, 드래그앤 드롭도 구현했다 Suspense + Promise 로 로딩 구현하는 게 제일 힘들었다... 하나 잘 막으면 다른 하나에서 터지고 이게 다 비동기 때문이다 setState가 비동기라서 그렇다 진짜 상태값 바뀌는 타이밍을 모르겠어서... 배포도 마치긴 했는데 깃허브 페이지 배포는 언제 해도 헷갈린다 배포 후에 데이터 받아오는 함수가 동작을 안해서 환경변수가 제대로 적용이 안 된줄 알고 한참을 해멨는데 CRA는 컴파일할 때 env 파일 변수를 알아서 잘 컴파일해준다는 걸 뒤늦게 알았고 사실 https 이슈..
lodash
lodash 설치 $> npm i lodash $> yarn add lodash npm 링크 Contributors lodash 용례 이름이 lodash인 이유는 라이브러리를 사용할 때 언더바 (_ = low dash) 를 쓰기 때문이다 객체, 배열 등의 자바스크립트 / 타입스크립트 기본 데이터 구조를 쉽게 다룰 수 있도록 도와주는 라이브러리 심지어 성능도 좋아 라이브러리를 가져다 쓴다고 무거워지거나 성능저하가 크게 일어나지 않는다 중복값 제거, 객체 데이터 추출, 깊은 복사, 특정 데이터 삭제 등 바닐라 자바스크립트로 두세줄 걸릴 만한 일들을 lodash를 사용하면 한 줄 정도만에 간단하게 끝낼 수 있다 이제 배열에서 요소 하나 삭제할 때 slice 두번 하고 합치는 더러운 일을 안 해도 된다.......
개인과제 #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 로컬 스토리지는 말그대로 로컬에 저장되며, 브라우저를 종료해도 값이 살아있다 또한 같은 페이지 프로토콜 (같은 웹 페이지 주소) 는 탭이나 창이 달라도 같은 로컬 스토리지를 공유하므로, 다른 창을 열었다고 해서 다른 값이 나오지 않는다 이러한 특성 때문에 사용자가 고의로 지워버리지 않는 이상 데이터는 계속 유지된다 브라우저별로 서로 다른 로컬 스토리지 영역을 가지므로, 크롬에서 저장한..