soonitoon / cmi-react-calendar

Rebuild the calendar using React ⚛️

Hi there 👋 I'm hyuno Choi

• 🔭 I’m currently enrolled in Chungbuk National University
• 🌱 I’m currently learning
• 💬 Ask me anything!
• 📫 How to reach me: [email protected]

My major is psycologyΨ and Brain-Cognitive Engineering⚙🧠 I also interested in Programming! My first programming language is . I'm currently learing FrontEnd stack📚

Try my mobile Apps📱

Visite my...

• TIL📝 : https://soonitoon.github.io/TIL

• Blog📖 : https://velog.io/@soonitoon

• NPM : https://www.npmjs.com/~soonitoon

Status Bar

Language&Framework

Laptop

cmi-react-calendar's Issues

자바스크립트 타입스크립트로 변경

자바스크립트로 만든 리액트 앱을 타입스크립트로 변환합니다.

• js-to-ts-converter를 사용해서 프로젝트 폴더 내 JS 파일 TS로 자동 변환.
• tsc --init 명령어로 tsconfig.js 파일 생성.
• react 및 styled component 모듈 @type 버전으로 인스톨.
• npm start 후 발생하는 오류 모두 해결하기.
• any 타입 점차적으로 줄이고 정적 타입으로 대체하기.

Make global state of date && Divide component

앞에서 만든 정적 페이지를 기반으로 캘린더 전역에서 공유하는 날짜 state를 만들고 컴포넌트를 적절히 쪼갭니다.

README.md 파일 작성

README.md 파일에 3주차 과제 프로젝트 리포지토리에 관한 간단한 설명을 작성합니다.

• About Repo
• 프로젝트 간단 요약
  • 과제 요구 사항
  • 프로젝트 구성
  • 로컬 실행

프로젝트에 ESLint & Prettier 적용

airbnb의 ESLint 세팅 및 Prettier를 사용해서 코드 스타일을 다듬겠습니다.

Use styled component instead of css stylesheet

컴포넌트와 분리되어 있는 스타일시트들을 삭제하고 styled-component를 활용하여 컴포넌트 파일 내부에 스타일을 삽입합니다.

Make static page

CMI 활동 2주차 과제로 만들었던 Valia JS 캘린더 코드를 리액트 코드로 리펙토링하여 정적 페이지를 만들겠습니다.

ToDo

• 페이지 내의 요소들을 리액트 컴포넌트 단위로 재구성
• CSS 스타일링

[Refactor] 코드 리뷰 기반으로 코드 다듬기

4주차 과제를 리뷰 받고 코드를 다듬겠습니다.

TODO

• 내용이 없는 리액트 컴포넌트는 닫는 태그 쓰지 않기.
• React.FC 대신 props에 대한 타입을 직접 정의하기.
• interface를 정의할 때 변수명에 "I" 프리픽스 붙이지 않기.
• Redux의 action creator가 반환하는 액션 타입을 정적으로 만들기.

[Refactor] 날짜 변경 부분을 단일 컴포넌트로 만들기

연도 부분과 월 부분으로 나뉘어져 있었던 Controller 컴포넌트를 하나의 컴포넌트로 통합합니다.

WHY?

• 날짜 변경 부분이 수행하는 기능에 비해서 컴포넌트 구조가 너무 복잡하고 깊이가 깊어 직관적으로 코드를 파악하기 힘들었습니다.
• 하나의 버튼 컴포넌트를 props에 따라 네 종류의 버튼(연도 내림, 올림 및 달 내림, 올림)으로 사용하는 기존의 방식이 Redux 패턴을 적용하기 곤란했습니다.

TODO

• Container, ChangeButton 컴포넌트 삭제하고 Controller 컴포넌트에 날짜 변경 기능 전부를 구현하기

전역 상태관리에 Redux 적용하기

React의 useContext 후크를 사용해서 관리하던 전역 상태를 Redux로 관리합니다.

• redux, react-redux 모듈 설치
• reducer, action 정의
• store 생성 후 Provider를 통해 모든 컴포넌트에서 접근 가능하도록 하기.
• context와 상호작용하던 코드를 전부 store와 상호작용하도록 바꾸기

Initialize gh-page

React App 배포를 위해 gh-page 설치 및 초기 설정을 진행합니다.

Publish issue

github-page 배포 이후 해당 주소로 들어가면 하얀 화면만 뜨는 이슈 발생. Container.js 컴포넌트 파일의 import 구문이 잘못되었음.