대략 3주간의 미니 프로젝트를 진행하면서 한동안 블로그 글 작성을 못한것 같다.. 😭

중간에 명절이 포함되어 있는건 애바참치꽁치삼치

이번 포스팅은 미니 프로젝트 기간동안 작업을 진행했던것에 대해 작성하려고 한다.



(귀여워서 그냥 한번 올려 봤다...)



프로젝트 소개

Hacker News에서 제공하는 API를 이용해서 UXUI 팀과 협업하는 React 프로젝트.

Hacker News란?

Paul Graham의 투자 펀드이자 스타트 업 인큐베이터 인 Y Combinator가
운영하고 있는 컴퓨터 과학과 기업가 정신에 초점을 맞춘 소셜 뉴스 웹 사이트이다.


사용한 기술 스택

  • 프로그래밍 언어 : JavaScript

  • UI 라이브러리 : React

  • 스타일링 : CSS in JS, SCSS

  • 상태 관리 : React Hooks

  • 빌드 도구 : Create React App

  • 라우트 : React Router 사용

  • 배포 : Vercel 활용




프로젝트 진행 과정

  1. UXUI 팀에서 만든 시안을 바탕으로 개발 가능 유무 검토.

  2. 검토한 시안을 토대로 만든 프로토타입을 활용해 UXUI팀과 회의.

  3. 중간 개발 과정에서 UXUI 팀으로부터 수정된 시안 전달 받음.

  4. 수정된 시안대로 프로젝트 스타일 수정.

  5. 반응형 디자인에 맞게 스타일 적용 (react-responsive 사용)

  6. 추가 사항 유무 확인

  7. 프로젝트 배포 (Vercel)



프로젝트 배포 주소 hacker-news-react



개선이 필요하다고 여겨지는 점

  • 모바일과 테블릿화면에서 데이터를 불러오는 과정에서 로딩페이지가 필요하다고 생각된다.
    (사용자가 좀 더 자연스럽게 볼 수 있게)

  • 데스크탑 화면에서는 more 버튼을 클릭하면 추가적으로 10개의 글들을 불러올 수 있게 구성했지만,
    모바일과 테블릿 화면에서는 화면에서 보여지는 마지막 글 밑으로 슬라이드할 경우에
    추가적인 10개의 글들을 불러올 수 있게 해야 사용자에게 좀 더 편의성을 제공할 수 있을 것 같다.





P.S.

길면 길고 짧으면 짧은 프로젝트 기간이었지만 UIUX 팀 분들과 협업하며 진행했던 정말 소중한 경험이었다.
다음주부터는 새롭게 구성된 UXUI팀분들과 FE개발팀이 함께 기업 연계 프로젝트를 진행하게 된다.
그동안 우리끼리 진행하던 프로젝트가 아닌 실제 서비스되는 프로젝트를 진행하게 되서 설레이면서 걱정도 되고 감정이 복잡미묘하다.
그래도 최선을 다해보자! 아자아자! 😺