[옥소폴리틱스] 옥소폴리틱스 Home page 클론 프로젝트 회고

프로젝트 설명

옥소폴리틱스 인턴 첫번째 프로젝트는 '옥소폴리틱스 홈페이지 클론 코딩' 으로 진행하였다.

github link : https://github.com/oxopolitics-internship-for-zerobase/oxoClone

GitHub - oxopolitics-internship-for-zerobase/oxoClone

 

프로젝트의 목적

나를 포함한 3명의 인턴들 모두 React를 처음 접하거나 접한지 얼마 되지 않았기 때문에, React와 좀 더 친해지기 위한 프로젝트이다.

 

구현하고자 했던 기능

1. 기본적인 화면 UI (hover, click CSS 포함)

2. json 형태로 데이터를 받아온 뒤, 알맞은 형태로 화면에 나타내기

 

기술 스택

React, JavaScript, Vite, Styled Components

 

Keep

프로젝트 완료 후에도 간직하고 싶은 잘했던 것 / 좋았던 것

*ex) "~기술 적용을 했더니 효율적으로 ~를 할 수 있었다."

 

🌟 Youtube API 없이 Youtube 미리보기 가져오기

// string 예시 
// "https://youtu.be/uHnLRiWl2zE\n\n손 억지로 잡고 휴지 쥐어주려는거 참..."
const getYoutubeImg = (string) => {
// link 주소
let link = string.split('\n').filter((el) => el.includes('https://'))[0];
// link 주소의 id
let linkId = link.split('/')[link.split('/').length - 1];

let linkImg = `http://img.youtube.com/vi/${linkId}/mqdefault.jpg`;
}

 

🌟 Youtube API 없이 Youtube 제목 가져오기

// link title 가져오기
const getLinkTitle = async (link) => {
  const json = await (
    await fetch(`https://noembed.com/embed?dataType=json&url=${link}`)
  ).json();

  return json.title;
};

이 때 json.title을 콘솔에 찍어보면 string 이라고 나오지만, 반환 값을 받으면 promise로 반환이 된다. 

promise로 받은 값은 아래와 같이 사용할 수 있다.

  let [text, setText] = useState('');
  useEffect(() => {
    getLinkTitle(link).then((res) => setText(res));
  }, []);

🤔 useState와 useEffect를 사용한 이유

: 처음 렌더링이 될 때 async 함수가 실행되지 않기 때문에 text의 초기값으로 렌더링이 된다.

이 때, 모든 컴포넌트가 mount 되고 나서 getLinkTitle 함수를 실행하면 정상적으로 Youtube 제목을 가져올 수 있다.

useState Hook을 사용해서 state 값을 변경하여 컴포넌트를 re-rendering 시켜 제목을 업데이트 시킨다.

 

Problem

프로젝트 중 겪었던 어려움(기술, 소통, 협업, 에러 등 프로젝트 진행 관련된 그 어느것이든) / 프로젝트 완료 후에도 아쉬움으로 남는 것

 

커뮤니티 본문을 구성하던 중,

🔥 p 태그 안에서 \n (개행문자)가 적용되지 않는 이슈가 발생하였다.

🔥 사진 가운데를 기준으로 정렬하기 어려운 이슈가 발생하였다.

🔥 Youtube 타이틀을 async 함수로 받아 string 값을 리턴하면 promise가 받아지는 이슈가 발생하였다.

 

Try

Problem 중 해결된 사항에 대한 해결 방법 / 해결되지 않은 사항에 대한 피드백

 

💡 커뮤니티 본문을 구성하던 중 발생한 p 태그 안에서 \n (개행문자)가 적용되지 않는 이슈

➡ css 중 white-space: pre-line을 추가하였다.

 

💡 커뮤니티 본문을 구성하던 중 발생한 사진 가운데를 기준으로 정렬하기 어려운 이슈

사진이 container보다 크기 때문에 object-fit: cover를 해도 가운데를 기준으로 안 맞춰졌다.

➡ img 컨테이너에 display: flex, align-items: center를 하니 가운데 정렬 가능!

 

💡 Youtube 타이틀을 async 함수로 받아 string 값을 리턴하면 promise가 받아지는 이슈

➡ promise로 반환된 객체를 .then 메서드를 사용하여 값을 사용하였다.

 

느낀 점

이번 프로젝트는 '2일'이라는 빠른 시간 내에 끝났다.

이렇게 빠르게 해낼 수 있던 이유는 바로 훌륭한 팀 플레이가 있었기에 가능한 일이었다.

 

1.

프로젝트를 진행하기 전에 미리 자신이 맡은 부분을 구현한 분이 내가 맡은 부분 중 '댓글' 컴포넌트를 구현해주셨다. (이거 안 도와주셨으면 이틀 안에 절대 못 끝냈을 것이다...😂 정말 감사드립니다! )

2.

나를 제외한 다른 두 분이서 하루~하루 반만에 거의 다 끝내셔서 (정말 능력자분들...) 나도 최대한 다음 회의 전까지 끝내려고 노력했다. 짜잔! 하고 완성된 화면을 보여드리고 싶었다. 팀원분들이 정말 열심히 하셔서 나도 같이 열심히 동기 부여를 받을 수 있었다!

3.

이번 프로젝트에서 가장 고민을 많이 했던 부분이 Youtube Title을 가져오는 것이었다. 여기서 json.title을 string으로 반환하는데 반환을 받으면 promise로 받아져서 값을 사용하지 못했다. 

여기서 나는 '왜 string으로 반환하는데 promise가 받아지지?' 에 꽂혀서 계속 string으로 반환을 하려고 했었다... 

(오류 나면 시야 좁아지는 거 저만 그런 거 아니죠...? 🥺)

새벽 4시까지 고민하다가 결국 다음 날 아침 팀원분들께 위의 오류를 설명하고, 앞에 있는 회의에서 질문할 예정이다라고 말씀을 드렸더니 'promise면 그냥 then 사용하면 되지 않아요?' 라는 말을 듣고 엄청난 충격을 받았다. 왜 난 생각하지 못했지...🤯 그 분의 도움을 받아 결국 회의 전에 마무리 할 수 있었다. 정말 정말 감사드립니다 😭

 

세 명의 팀원들의 합심으로 엄청난 칭찬 세례를 받을 수 있었다. 😚

전부 열심히 노력해서 뿌듯한 마음으로 마무리 할 수 있는 좋은 팀 프로젝트였다.

 

다음 프로젝트도 열심히 힘내서 진행해보자!! 🔥🔥