3조 #4

Valentin1495 · 2023-03-17T08:54:57Z

🏆 프로젝트 제목 🏆

YouTube

📌 프로젝트 소개 📌

Google에서 제공하는 YouTube API를 이용하여 데이터를 받아와 YouTube 앱을 만든다.

👤 팀원 소개 👤

📚 기술 스택 📚

⏰ 과제 진행 기간 ⏰

2023.3.10 ~ 2023.3.16

✏ 작업 영역 및 구현 기능 설명 ✏

◾ 김응열

🔻 홈페이지 header와 sidebar, sidebar modal 구현

🔻 홈페이지 비디오 카드 스타일링

◾ 장건우

🔻 Mainpage, Channelpage, MainComponent 구현

🔻 홈페이지 비디오 이미지, 비디오 타이틀, 채널 이름, 날짜 등의 데이터를 렌더링

🔻 ChannelPage는 메인페이지의 채널이름을 누르면 이동하도록 구현하였고

useEffect로 해당 channelId를 활용하여(useParams로 가져옴)
axios로 api 호출을 해서 채널 관련 비디오가 10개 받아지도록 구현

◾ 최우성

🔻 SearchPage, SearchMain 구현

🔻 useState와 useEffect를 사용하여 검색어를 저장. 검색어는 useParams를 사용하여 URL에서 가져오고,
그 결과를 SearchMain 컴포넌트에 전달하여 화면에 출력하는 것을 구현

◾ 이현정

🔻 DetailPage 구현 시 오류

어려웠던 점 😹

🔻 styled-components를 활용할 때 props 이용하여 modal을 열고 닫는 것과 반응형 구현하는 부분이 힘들었습니다.

🔻 Youtube api 호출에 제한이 있어서 그 부분을 해결하기 위해 localstorage로 대처하는 부분이 까다롭게 느껴졌습니다. 또한 async await 비동기 처리하는 부분이 조금 까다로웠습니다.

🔻 api를 호출하면서 여러가지 오류들이 났었고 이를 해결하는 것이 어려웠습니다.
또 api의 불필요한 호출을 최소화하는 것이나 내가 원하는 검색어만 가져오게 하는 것이 생각보다 까다로웠습니다. useState 나 useEffect 같은 Hook을 적재적소에 잘 사용하는 것이 어려웠습니다.

KDT-sihyeon · 2023-03-22T09:11:29Z

public/index.html

+    <style>
+      body {
+        margin: 0;
+        box-sizing: border-box;
+      }
+    </style>


index.html을 통해 별도로 글로벌 css를 적용하는것보다
통일성있게 styled component를 사용하는것이 관리측면에서 보다 좋은 코드입니다.
적용과 관련된 자세한 내용은 createGlobalStyle를 참고하시길 바랍니다.

해당 내용은 /src/index.css에도 동일하게 적용됩니다.

KDT-sihyeon · 2023-03-22T09:16:50Z

src/App.js

+
+const Layout = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [inputdata, setInputData] = useState("")


inputdata를 camelCase로 통일시켜주세요

KDT-sihyeon

프로젝트 진행하시느라 고생 많으셨습니다.
전반적으로 아쉬웠던 내용에대해 몇가지 코멘트 드리도록 하겠습니다.

컴포넌트 분리가 잘 이루어지지 않은것 같습니다. 특히 styled-component를 사용하는데 있어 공용으로 사용되는 내용을 분리하거나 역할별로 분리되어 있지 않는점을 집중적으로 수정해나가시길 추천합니다.
vh, vw와 같은 요소는 반응형으로 css를 적용하는데 어려움을 줄 수 있습니다. calc를 사용하여 하드코딩하게 되면 구성 요소에 변경사항이 생겼을 때 이를 반영하기 어려워집니다. root를 제외한 컴포넌트에서는 사용을 최대한 지양하고 다른 방향으로 구현해보시길 바랍니다. (다만 정말 필요한 상황에서는 사용하는것이 맞습니다.)
rem, px를 혼용하여 사용하기보다는 한가지로 통일성 있게 작업하시는것을 추천합니다. rem을 사용한다면 font-size 조절을 통해 반응형 웹페이지를 구현해보시는 방향으로 작업하시는것이 보다 목적에 맞습니다. 이와 관련된 내용을 찾아보시는것을 추천합니다.

KDT-sihyeon · 2023-03-22T14:21:02Z

src/App.js

+      <Routes>
+        <Route path='/' element={<Layout />}>
+          {/* <Route index element={<HomePage />} /> */}
+          <Route index element={<MainPage />} />
+          <Route path=':movieId' element={<DetailPage />} />
+          <Route path='search/:searchId' element={<SearchPage />}/>
+          <Route path='channel'>
+            <Route index path=':channelId' element={<ChannelPage />} />
+          </Route>
+        </Route>
+      </Routes>


Routes는 별도의 폴더를 만들어 관리하는것이 추후에 찾아보기 편리할것같습니다.

KDT-sihyeon · 2023-03-22T14:34:06Z

src/components/HeaderComponents/Nav.js

+          <svg className='hamburger' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>
+            <path d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z' />
+          </svg>


FontAwesomeIcon 라이브러리에 동일한 아이콘이 있는데도 불구하고 별도로 svg를 사용하는것은 불필요한 행동으로 인식됩니다.
추가로 svg를 사용하는게 나쁜것은 아니나 png를 사용하는것이 이미지를 별도로 관리하는데 이점을 가질 수 있으므로
png로 제공 받을수 있을 경우 svg보다 png를 사용하는것을 추천합니다.

KDT-sihyeon · 2023-03-22T14:44:58Z

src/pages/MainPage/index.js

+  const fetchData = async () => {
+    await axios(requests.fetchPopularVideo).then(res => {
+      const data = res.data.items;
+      console.log(data);
+      setYoutubeData(data);
+      localStorage.setItem('PopularVideo', JSON.stringify(data));
+    });
+  };


async-await 구문과 promise.then 구문을 혼용하고 있습니다.

Suggested change

const fetchData = async () => {

await axios(requests.fetchPopularVideo).then(res => {

const data = res.data.items;

console.log(data);

setYoutubeData(data);

localStorage.setItem('PopularVideo', JSON.stringify(data));

});

};

const fetchData = async () => {

const {data} = await axios(requests.fetchPopularVideo)

setYoutubeData(data.items);

localStorage.setItem('PopularVideo', JSON.stringify(data.items));

};

KDT-sihyeon · 2023-03-22T14:54:36Z

src/components/MainComponents/Row.js

+const Row = ({ items }) => {
+  return (
+    <Container>
+      {items.map((item) => (
+        <VideoItem key={item.id} data={item} />
+      ))}
+    </Container>
+  );
+};


Row와 같이 너무 추상화된 네이밍으로 인해 Row Component를 호출하는 파일에서 직관적으로 이해하기 어렵습니다.
VideoItems과 같이 보다 직관적인 이름을 사용하는것을 추천합니다.

KDT-sihyeon · 2023-03-22T15:03:15Z

src/pages/DetailPage/index.js

+    frameborder: '0',
+    allowfullscreen: 'allowfullscreen',


JSX에서는 HTML attribute를 그대로 사용하지 않고 camelCase로 작성해야합니다.
보다 자세한 내용은 공식문서를 확인하시길 바랍니다.

KDT-sihyeon · 2023-03-22T15:12:07Z

src/components/SearchComponents/SearchMain.js

+const VideoItem = ({ data }) => {
+  const movieId = data.id.videoId;
+
+  return (
+    <Link to={`/${movieId}`} style={{ textDecoration: 'none' }}>
+      <VideoContainer>
+        <ImgWrapper>
+          <ThumbnailImg
+            src={data.snippet.thumbnails.maxres?.url || data.snippet.thumbnails.default?.url}
+            alt={data.snippet.title}
+          />
+        </ImgWrapper>
+
+        <Thumbnail>
+          <Title>{data.snippet.title}</Title>
+          <Link to={`/channel/${data.snippet.channelId}`} style={{ textDecoration: 'none' }}>
+            <Section>
+              <span>{data.snippet.channelTitle}</span>
+              <span>{moment(data.snippet.publishedAt).fromNow()}</span>
+            </Section>
+          </Link>
+        </Thumbnail>
+      </VideoContainer>
+    </Link>
+  );
+};


src/components/MainComponents/Row.js에서 동일한 코드를 사용중에 있습니다.
styled-component를 사용하기 위해 재사용성을 포기하는것은 styled-component를 사용하는 이유에 위배되는 행동입니다.
재사용성 가능하도록 props를 받는 component를 만들거나 styled-component를 사용하지 않는것을 추천합니다.

KDT-sihyeon · 2023-03-22T15:12:53Z

src/pages/SearchPage/index.js

+    axios.get(`/search?part=snippet&maxResults=10&q=${searchId}`)
+      .then(response => {
+        console.log(response.data)
+        const responsedata = response.data.items


responseData와 같이 camelCase로 변경하시는것을 추천합니다.

KDT-sihyeon · 2023-03-22T15:54:19Z

src/pages/ChannelPage/index.js

+  async function getChannelData() {
+    try {
+      const response = await axios(requests.fetchChannelData(channelId));
+      const cdata = response.data.items;
+      setChannelData(cdata);
+      const response2 = await axios(requests.fetchPlayLists(channelId));
+      const vdata = response2.data.items;
+      setChannelVideo(vdata);
+    } catch (error) {
+      console.log(error);
+    }
+  }


response, response2와 같이 무의미한 변수명을 부여하는것은 좋지 않습니다.

Suggested change

async function getChannelData() {

try {

const response = await axios(requests.fetchChannelData(channelId));

const cdata = response.data.items;

setChannelData(cdata);

const response2 = await axios(requests.fetchPlayLists(channelId));

const vdata = response2.data.items;

setChannelVideo(vdata);

} catch (error) {

console.log(error);

}

}

async function getChannelData() {

try {

const {data: channelData} = await axios(requests.fetchChannelData(channelId));

setChannelData(channelData.items);

const {data: playLists} = await axios(requests.fetchPlayLists(channelId));

setChannelVideo(playLists.items);

} catch (error) {

console.log(error);

}

}

KDT-sihyeon · 2023-03-23T05:35:35Z

src/components/SidebarComponents/SideModal.js

+const Modal = styled.div`
+  position: fixed;
+  top: 75px;
+  height: calc(100vh - 75px);
+  width: 208.3px;
+  background-color: white;
+  transition: transform 300ms;
+  z-index: 10;
+  transform: ${({ showModal }) =>
+    showModal ? 'translateX(0)' : 'translateX(-100%)'};
+`;


값을 하드코딩하여 css를 적용하는 방식은 다지안 변경사항에 유연하게 대처하기 어려워 최대한 지양하는것이 좋습니다.
예를 들어 width와 같은 경우 고정 px를 지정하기보다 padding값을 통해 여백을 주는 방식으로 변경하면
동일한 디자인을 보여주지만 유연한 코드가 될것입니다.

KDT-sihyeon · 2023-03-23T06:30:01Z

src/pages/DetailPage/index.js

+const DetailPage = () => {
+  let { movieId } = useParams();
+  console.log(movieId);


아래 코드를 넣으시고 로그에 나오는 데이터를 확인하시며 디테일 컴포넌트를 마크업 해보시길 바랍니다.

useEffect(() => {(async ()=> { if (movieId) { const response = await axios(requests.fetchDetailVideo(movieId)); console.log(response) } })(); },[movieId]);

KDT-sihyeon · 2023-03-23T07:20:32Z

어려웠던점과 관련된 코멘트입니다.

🔻 styled-components를 활용할 때 props 이용하여 modal을 열고 닫는 것과 반응형 구현하는 부분이 힘들었습니다.

useState와 함께 잘 사용하셨습니다. container 자체를 modal로 사용하기보다 modal로 나타날 element를 한개 추가하여 별도로 관리하는것이 보다 유연하게 사용기 좋습니다. (z-index등을 적용시키는데 이점)

🔻 Youtube api 호출에 제한이 있어서 그 부분을 해결하기 위해 localstorage로 대처하는 부분이 까다롭게 느껴졌습니다. 또한 async await 비동기 처리하는 부분이 조금 까다로웠습니다.

localStorage의 경우 문자열 값만 들어갈수 있습니다. 그렇기에 JSON.parse나 JSON.stringify등이 필요합니다.
이를 기억하고 계시면 보다 적용하는데 도움이 될것으로 보입니다.

async-await 구문의 사용이 어렵다면 Promise.then과의 상관관계에 대해 공부해보시는것을 추천합니다.

🔻 api를 호출하면서 여러가지 오류들이 났었고 이를 해결하는 것이 어려웠습니다.
또 api의 불필요한 호출을 최소화하는 것이나 내가 원하는 검색어만 가져오게 하는 것이 생각보다 까다로웠습니다. useState 나 useEffect 같은 Hook을 적재적소에 잘 사용하는 것이 어려웠습니다.

api를 호출하시며 겪으신 오류들이 어떤것인지 몰라 자세한 피드백을 드리기 어렵습니다.
이후 프로젝트에서 github내 issue를 사용하여 남겨두신다면 팀원을 비롯하여 여러 사람들이 내용을 공유받기 좋을것 같습니다.

useState와 useEffect를 잘 사용하기 위해서는 react의 life-cycle과 관련된 내용을 이해하고 있는것이 중요합니다.
아래 공식문서를 읽어보시는것을 추천합니다.

3조

ace611b

Valentin1495 self-assigned this Mar 17, 2023

KDT-sihyeon reviewed Mar 22, 2023

View reviewed changes

KDT-sihyeon reviewed Mar 23, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3조 #4

3조 #4

Valentin1495 commented Mar 17, 2023 •

edited by dochidev

Loading

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon left a comment

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 22, 2023

KDT-sihyeon Mar 23, 2023

KDT-sihyeon Mar 23, 2023 •

edited

Loading

KDT-sihyeon commented Mar 23, 2023 •

edited

Loading

3조 #4

Are you sure you want to change the base?

3조 #4

Conversation

Valentin1495 commented Mar 17, 2023 • edited by dochidev Loading

🏆 프로젝트 제목 🏆

📌 프로젝트 소개 📌

👤 팀원 소개 👤

📚 기술 스택 📚

⏰ 과제 진행 기간 ⏰

✏ 작업 영역 및 구현 기능 설명 ✏

어려웠던 점 😹

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KDT-sihyeon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KDT-sihyeon Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

KDT-sihyeon commented Mar 23, 2023 • edited Loading

어려웠던점과 관련된 코멘트입니다.

Valentin1495 commented Mar 17, 2023 •

edited by dochidev

Loading

KDT-sihyeon Mar 23, 2023 •

edited

Loading

KDT-sihyeon commented Mar 23, 2023 •

edited

Loading