목록분류 전체보기 (887)
치춘짱베리굿나이스
React-beautiful-dnd 설치 $> npm i react-beautiful-dnd $> yarn add react-beautiful-dnd npm 링크 https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago. Start using react-beautiful-dnd in your project by running `npm i react-beautiful-dnd`. There are 1265 other projects in the..
개인과제 #1 완성, 배포 공식적인 내생각 Suspense로 로딩창 구현해보겠다고 온갖 삽질을 하다가 오늘 드디어 해결했다 겸사겸사 localStorage 값이 뜬금없이 초기화되는 문제도 해결하고, 드래그앤 드롭도 구현했다 Suspense + Promise 로 로딩 구현하는 게 제일 힘들었다... 하나 잘 막으면 다른 하나에서 터지고 이게 다 비동기 때문이다 setState가 비동기라서 그렇다 진짜 상태값 바뀌는 타이밍을 모르겠어서... 배포도 마치긴 했는데 깃허브 페이지 배포는 언제 해도 헷갈린다 배포 후에 데이터 받아오는 함수가 동작을 안해서 환경변수가 제대로 적용이 안 된줄 알고 한참을 해멨는데 CRA는 컴파일할 때 env 파일 변수를 알아서 잘 컴파일해준다는 걸 뒤늦게 알았고 사실 https 이슈..
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가 종료되고 컴포넌트가 렌더링..