Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/soozynn/github-issue-list_fastlane


https://github.com/soozynn/github-issue-list_fastlane

Last synced: 4 days ago
JSON representation

Awesome Lists containing this project

README 

        
## 실행방법



```

git clone https://github.com/soozynn/github-issue-list_fastlane.git

```



```

npm install

```



설치 후,



```

npm start

```



http://localhost:3000/ 을 실행시켜주세요.



## 최종 결과



result



## 사용한 기술과 선택한 이유



```

  "@reduxjs/toolkit": "^1.8.3",

  "prop-types": "^15.8.1",

  "react": "^18.2.0",

  "react-dom": "^18.2.0",

  "react-router-dom": "^6.3.0",

  "react-redux": "^8.0.2",

  "styled-components": "^5.3.5",

  "typescript": "^4.7.4",

```



- @reduxjs/toolkit


  스토어 설정, 리듀서 생성, 불변성 업데이트 로직 등 단순화하는 유틸리티가 포함되어 있어 사용하기 간단하고, 더 적은 코드로 더 많은 작업 수행 가능한 점, 또 이전과 달리 mutable 로직을 작성할 수 있으며 전체 슬라이스 상태의 생성도 자동으로 수행할 수 있는 여러 장점에 의해 상태 라이브러리로 채택하게 되었습니다.



- styled-components


  props를 사용하여 style을 컴포넌트에 맞춰 유동적이게 적용할 수 있는 점을 좋아하기에 선택하게 되었습니다. 자체 스타일을 포함하기에 작은 컴포넌트를 잘 만들어 놓는다면 이외의 여러 프로젝트에서도 쉽게 재사용할 수 있는 이점과 이 외에도 글로벌 스타일을 주어 전체적으로 통일된 스타일 또한 적용할 수 있는 이점이 있어 해당 기술을 선택하게 되었습니다.



## Challenge



- TypeScript


  이번 과제를 통해 처음 TypeScript를 사용해보게 되었습니다. 사용을 해보면서 타입을 지정하여 제어해주는 점이 좋다는 생각이 들었고, 정적타입을 지원하여 컴파일단계에서 오류를 포착하여 개발자의 의도를 명확하게 코드로 기술할 수 있는 점이 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 해준다고 생각이 들었습니다. 아쉬웠던 점은 완벽하게 적용하기엔 시간이 부족했다고 생각이 들어 과제를 제출한 후에도 작성한 코드에 대해 더 개선해보도록 하겠습니다!



- Observer 적용하기


  요구사항 이외에 또 다른 시도로 무얼 해볼 수 있을까 생각을 해보다 데이터가 더 많다는 가정으로 Intersection Observer API를 사용하여 인피니트 스크롤을 구현해보는 것 또한 재밌겠다라는 생각이 들어 만들어보게 되었습니다. 한 번에 이슈 카드가 보여지는 것도 나쁘지 않겠지만 스크롤이 특정 포지션을 지나갔을 때 아이템을 추가로 로드하는 인피니트 스크롤을 구현하는 것이 사용자 측면에서 더 자연스러운 흐름일 거 같다는 생각이 들었습니다.



## About



현재 추가해보고 싶은 기능 중 IntersectionObserver가 미완성이어서 계속해서 접근해보고 있습니다. 참고해주시면 감사합니다!



## 배포 사이트



https://stellar-tulumba-56de81.netlify.app