이 프로젝트의 Tech Stack
javascriptreactjsreduxsass
단어장
단어장은 React를 이용한 SPA입니다. 간단한 페이지라 서버없이 localStorage를 사용하여 데이터를 저장합니다. redux를 사용하여 각 DOM의 이벤트를 관리하며, SASS를 이용하여 스타일을 정의하였습니다
2019년 4월 3일 ~ 2019년 4월 23일 (20일)
Tech Stack
  • javascript
  • reactjs
  • redux
  • sass
프로젝트 등급 개인프로젝트
  • project image
  • project image
  • project image
Project 세부내용

프로젝트 정보

  • CRA를 이용하여 프로젝트 생성 후, React를 이용하여 구현하였으며, Redux로 이벤트를 관리합니다.
  • SASS로 스타일을 작성하였으며, classNames라이브러리를 사용하여 각 컴포넌트에 스타일을 적용하였습니다.

기능

  • 메인화면 -- 한 단어에 여러 뜻을 등록 할 수 있습니다. -- 단어 추가 시, JSON파일로 여러 단어를 등록 할 수있습니다. (이미 등록 된 단어에 대하여, 뜻만 추가 할 것인지 확인합니다.) -- 단어 클릭 시, 해당 단어를 수정 할 수있습니다. -- 체크 박스 선택 후, 삭제 버튼을 눌러 단어들을 삭제 할 수있습니다.

  • 시험 화면 -- 등록한 단어들을 시험 볼 수있습니다.

  • 단어 포맷 화면 -- 등록에 필요한 JSON포맷을 보여주며 클릭 시, 복사합니다.

데모 및 소스