[클라우딩 어플리케이션 엔지니어링 TIL] 240401 - SNS 앱 클로닝 프로젝트 (3)

Intro

---

프로젝트 마지막날!

주말과 오늘까지 피드 검색 & 피드 게시글 올리는 화면을 구현하였다.

 

 

 

프로젝트 진행사항

---

피드 검색 기능

 

태그를 검색하는 기능을 추가했다.

검색어와 같은 태그가 포함되어 있는 피드만 리스트로 보여준다.

결과가 없을 경우 검색결과가 없습니다라는 문구를 보여준다.

최근 검색어는 가장 최근에 검색한 키워드가 맨 위에 오고 자바스크립트의 Set을 사용해 중복을 없애주었다.

 

 

피드 새글 작성 & 사진 올리기

react-native-camera-roll 라이브러리를 사용하여 핸드폰의 사진 앱에 접근하여 사진을 올릴 수 있는 기능을 구현하였다.

const fetchImages = () => {
    CameraRoll.getPhotos({
      first: 100,
    }).then(res => {
      setImages(res.edges.map(e => e.node.image));
    });
  };

 

CameraRoll의 getPhotos 메서드를 사용하면 카메라 앨범 사진들을 불러올 수 있다.

first는 최근 n개의 사진을 가져오겠다는 옵션이다.

 

 

 

여러 사진을 가져올 수 있고 선택한 사진을 삭제할 수 있는 버튼도 구현하였다.

선택한 사진은 슬라이드 형식으로 볼 수 있다.

사진을 선택한 후 다음을 누르면 새 게시물 내용과 키워드를 입력할 수 있는 화면이 나타난다.

 

 

 

프로젝트 폴더 구조

📦src
 ┣ 📂apis
 ┃ ┗ 📜dummyData.js
 ┣ 📂assets
 ┃ ┗ 📜logo.png
 ┣ 📂components
 ┃ ┣ 📜CommentsModal.tsx
 ┃ ┣ 📜CustomBottomTab.tsx
 ┃ ┣ 📜PageHeader.tsx
 ┃ ┗ 📜RenderFeed.tsx
 ┣ 📂pages
 ┃ ┣ 📜CalendarPage.tsx
 ┃ ┣ 📜ChatPage.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜MyPage.tsx
 ┃ ┣ 📜NewPostDetailPage.tsx
 ┃ ┣ 📜NewPostPage.tsx
 ┃ ┣ 📜SearchPage.tsx
 ┃ ┣ 📜SearchResult.tsx
 ┃ ┗ 📜Splash.tsx
 ┣ 📂types
 ┃ ┗ 📜types.ts
 ┣ 📂utils
 ┃ ┗ 📜setAgoDays.ts
 ┗ 📜router.tsx

 

 

 

 

마무리

---

이번 프로젝트에선 구현해야 할 기능들을 완전히 구현하지 못했지만 타입스크립트를 도입했다는 점에 의미가 있다.

처음에는 변수의 타입을 선언하고 라이브러리에서 외부 타입을 불러와야 하는 번거로움과 귀찮음을 느꼈지만, 프로젝트가 진행될수록 이러한 과정이 초기 오류를 잡는 데 도움이 되었다.

 

 

예를들어, 배열의 크기를 비교하는 코드를 작성하다가 실수로 length를 입력하지 않았을 때 JS는 오류 없이 동작하는 반면 TS에서는 타입 오류를 발생시킨다.

ts 예시

 

js 예시

 

이러한 오류들을 사전에 찾아 해결하여 코드 안정성을 높일 수 있었다.

여러모로 타입스크립트를 사용하는 이유를 찾을 수 있었다.