feat: api 분리, loader 추가

codejs-kr · codejs-kr · commit 509ead925687 · 2021-07-23T18:27:57.000+09:00
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -0,0 +1,13 @@
+const API_DOMAIN = 'https://jsonplaceholder.typicode.com';
+
+export const fetchComments = () => {
+  return fetch(`${API_DOMAIN}/comments`, {
+    method: 'GET',
+  }).then((res) => res.json());
+};
+
+export const fetchPhotos = () => {
+  return fetch(`${API_DOMAIN}/photos`, {
+    method: 'GET',
+  }).then((res) => res.json());
+};
diff --git a/src/components/ImageListItem/index.scss b/src/components/ImageListItem/index.scss
@@ -11,7 +11,7 @@
     margin-right: 20px;
 
     img {
-      max-width: 150px;
+      max-width: 180px;
     }
   }
 }
diff --git a/src/components/ImageListItem/index.tsx b/src/components/ImageListItem/index.tsx
@@ -15,9 +15,7 @@ const ImageListItem = ({ index, imageUrl, title, onLoad }: Props) => {
       </section>
       <section>
         <p>index: {index}</p>
-        <p>
-          {title} {title} {title} {title} {title} {title}
-        </p>
+        <p>{Array.from({ length: 10 }).map(() => title)}</p>
       </section>
     </div>
   );
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
@@ -0,0 +1,11 @@
+import { Spinner, Box } from '@chakra-ui/react';
+
+const Loader = () => {
+  return (
+    <Box textAlign="center" margin={6}>
+      <Spinner speed="0.65s" emptyColor="gray.200" color="blue.500" size="lg" />
+    </Box>
+  );
+};
+
+export default Loader;
diff --git a/src/components/TextListItem/index.tsx b/src/components/TextListItem/index.tsx
@@ -13,9 +13,7 @@ const TextListItem = ({ index, email, name, body }: Props) => {
       <p>index: {index}</p>
       <p>email: {email}</p>
       <p>name: {name}</p>
-      <p>
-        body: {body} {body}
-      </p>
+      <p>body: {Array.from({ length: 2 }).map(() => body)}</p>
     </div>
   );
 };
diff --git a/src/pages/ImageList/index.tsx b/src/pages/ImageList/index.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState, useCallback } from 'react';
 import { checkInfiniteScrollPosition } from '../../helpers/scroll';
 import { throttle } from 'lodash-es';
+import { fetchPhotos } from '../../apis';
 
 import { Container, Heading, Button, Text } from '@chakra-ui/react';
-import StackSkleton from '../../components/StackSkeleton';
+import StackSkeleton from '../../components/StackSkeleton';
 import ImageListItem from '../../components/ImageListItem';
 
 export interface ImageListItemState {
@@ -21,16 +22,9 @@ const ImageList = () => {
   const [list, setList] = useState<ImageListItemState[]>([]);
 
   const fetchData = useCallback(async () => {
-    // const res = await fetch('https://jsonplaceholder.typicode.com/photos');
-    // console.log('res :>> ', res);
-    fetch('https://jsonplaceholder.typicode.com/photos').then((res) => {
-      const data = res.json();
-
-      data.then((newList) => {
-        totalList = newList;
-        addList();
-      });
-    });
+    const response = await fetchPhotos();
+    totalList = response;
+    addList();
   }, []);
 
   const addList = useCallback(() => {
@@ -75,11 +69,13 @@ const ImageList = () => {
 
       <section>
         {list.length ? (
-          list.map(({ title, thumbnailUrl }, index) => (
-            <ImageListItem index={index} imageUrl={thumbnailUrl} title={title} />
-          ))
+          <>
+            {list.map(({ title, url }, index) => (
+              <ImageListItem key={index} index={index} imageUrl={url} title={title} />
+            ))}
+          </>
         ) : (
-          <StackSkleton count={5} />
+          <StackSkeleton count={5} />
         )}
       </section>
     </>
diff --git a/src/pages/ImageListVirtualized/index.tsx b/src/pages/ImageListVirtualized/index.tsx
@@ -2,14 +2,15 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { WindowScroller, CellMeasurer, CellMeasurerCache, AutoSizer, List, ListRowProps } from 'react-virtualized';
 import { checkInfiniteScrollPosition } from '../../helpers/scroll';
 import { throttle } from 'lodash-es';
+import { fetchPhotos } from '../../apis';
 
-import { ImageListItemState, SPLICE_SIZE } from '../ImageList';
 import { Container, Heading, Button, Text } from '@chakra-ui/react';
+import { CheckCircleIcon } from '@chakra-ui/icons';
+import { ImageListItemState, SPLICE_SIZE } from '../ImageList';
 import ImageListItem from '../../components/ImageListItem';
-import StackSkleton from '../../components/StackSkeleton';
+import StackSkeleton from '../../components/StackSkeleton';
 
 const cellCache = new CellMeasurerCache({
-  defaultWidth: 100,
   fixedWidth: true,
 });
 
@@ -20,14 +21,15 @@ const ImageListVirtualized = () => {
   const listRef = useRef<List>(null);
 
   const rowRenderer = ({ index, key, parent, style }: ListRowProps) => {
+    const { title, url } = list[index];
     return (
       <CellMeasurer cache={cellCache} parent={parent} key={key} columnIndex={0} rowIndex={index}>
         {({ measure }) => (
           <div style={style} key={index}>
             <ImageListItem
               index={index}
-              imageUrl={list[index].thumbnailUrl}
-              title={list[index].title}
+              title={title}
+              imageUrl={url}
               onLoad={measure} // 중요: measure 함수로 이미지가 로드된 이후 재 측정을 해주어야 정확한 사이즈로 랜더링됩니다.
             />
           </div>
@@ -37,16 +39,9 @@ const ImageListVirtualized = () => {
   };
 
   const fetchData = useCallback(async () => {
-    // const res = await fetch('https://jsonplaceholder.typicode.com/photos');
-    // console.log('res :>> ', res);
-    fetch('https://jsonplaceholder.typicode.com/photos').then((res) => {
-      const data = res.json();
-
-      data.then((newList) => {
-        totalList = newList;
-        addList();
-      });
-    });
+    const response = await fetchPhotos();
+    totalList = response;
+    addList();
   }, []);
 
   const addList = useCallback(() => {
@@ -79,7 +74,7 @@ const ImageListVirtualized = () => {
     <>
       <Container padding={0} marginBottom={5} textAlign="center">
         <Heading size="md" mb={5} textAlign="center">
-          react-virtualized (O)
+          react-virtualized (<CheckCircleIcon color="green.500" />)
         </Heading>
         <Button mb={5} colorScheme="blue" onClick={addList}>
           목록 추가하기
@@ -114,7 +109,7 @@ const ImageListVirtualized = () => {
             )}
           </WindowScroller>
         ) : (
-          <StackSkleton count={5} />
+          <StackSkeleton count={5} />
         )}
       </section>
     </>
diff --git a/src/pages/TextList/index.tsx b/src/pages/TextList/index.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useState, useCallback, Fragment } from 'react';
 import { checkInfiniteScrollPosition } from '../../helpers/scroll';
 import { throttle } from 'lodash-es';
+import { fetchComments } from '../../apis';
 
 import { Container, Heading, Button, Text } from '@chakra-ui/react';
-import StackSkleton from '../../components/StackSkeleton';
+import StackSkeleton from '../../components/StackSkeleton';
 import TextListItem from '../../components/TextListItem';
+import Loader from '../../components/Loader';
 
 export interface TextListItemState {
   id: number;
@@ -13,27 +15,18 @@ export interface TextListItemState {
   body: string;
 }
 
-let isFetching: boolean = false;
-
 const TextList = () => {
   const [list, setList] = useState<TextListItemState[]>([]);
+  const [isFetching, setFetching] = useState<boolean>(false);
 
-  const addList = useCallback(() => {
-    isFetching = true;
-    fetch('https://jsonplaceholder.typicode.com/comments').then((res) => {
-      const data = res.json();
+  const addList = useCallback(async () => {
+    setFetching(true);
 
-      data.then((newList) => {
-        setList([...list, ...newList]);
-        isFetching = false;
-      });
-    });
+    const response = await fetchComments();
+    setList([...list, ...response]);
+    setFetching(false);
   }, [list, setList]);
 
-  useEffect(() => {
-    addList();
-  }, []);
-
   const onScroll = useCallback(() => {
     if (isFetching) {
       return false;
@@ -43,7 +36,11 @@ const TextList = () => {
     if (isNeedFetching) {
       addList();
     }
-  }, [addList]);
+  }, [isFetching, addList]);
+
+  useEffect(() => {
+    addList();
+  }, []);
 
   useEffect(() => {
     const onScrollTrottle = throttle(onScroll, 100);
@@ -67,13 +64,16 @@ const TextList = () => {
 
       <section>
         {list.length ? (
-          list.map(({ name, email, body }, index) => (
-            <Fragment key={index}>
-              <TextListItem index={index} email={email} name={name} body={body} />
-            </Fragment>
-          ))
+          <>
+            {list.map(({ name, email, body }, index) => (
+              <Fragment key={index}>
+                <TextListItem index={index} email={email} name={name} body={body} />
+              </Fragment>
+            ))}
+            {isFetching && <Loader />}
+          </>
         ) : (
-          <StackSkleton count={5} />
+          <StackSkeleton count={5} />
         )}
       </section>
     </>
diff --git a/src/pages/TextListVirtualized/index.tsx b/src/pages/TextListVirtualized/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`margin-right: 20px;`
`12`	`12`
`13`	`13`	`img {`
`14`		`- max-width: 150px;`
	`14`	`+ max-width: 180px;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`	`}`