대문이미지용

서문

안녕하세요 @wonsama 입니다. 프로그램을 만들면서 UI가 엉망이라 대폭 개선하고 프로그래밍 순서 또한 수정 하였습니다. 역시 만들다 보면 문제가 많이 발생하네요 -_-;

동작방식

1. 본문 (영어) : 문장 입력 후, 하단 [단어 추출] 버튼 누르기
2. 좌측 단어 목록 나열
3. 모르는 단어 선택 ( 선택하면 붉은색이 초록 색으로 변경 됨 )
4. 선택 완료 후, 하단 [저장하기] 버튼
5. 재 조회 시 알고 있는 단어를 제외한 나머지 부분을 보여주도록 함.

DONE

• 파일에서 읽기
• 문장에서 단어 추출
• 이미 알고 있는 단어는 추출 제외
• 선택 문장 구글 번역
• medium 류 사이트 번역

ING

• express로 ui 구성하기 ( 모르는 단어 선택을 쉽게 하기 위함 + 웹에서도 동작하도록 )

TODO LIST

• 학습 목록 리스트 UI에 표현하기

( 생각 날때마다 좀 더 추가예정)

[이미지] 1. 초기화면

[이미지] 2. 영문 컨텐츠 입력

[이미지] 3. 단어추출

[이미지] 4. 알고 있는 단어 선택(클릭 시 toggle)

[이미지] 5. 저장

[이미지] 6. 재조회 (알고 있는 단어는 제외되어 표시됨)

[이미지] 7. 알고있는 단어 저장

[이미지] 8. 학습이력 저장

result

본문 입력도 좀 더 깔끔해 짐.

source

생략 / 이전 회차 소스와 다른것은 거의 없음 UI구성만 재 조합함.

맺음말

열심히 업데이트 하겠습니다.

다음 시간에는 ...

학습 이력 화면 조회

이전 글 목록

프로그래밍을 통한 단어장 만들기 #3 - 구글번역 구현
프로그래밍을 통한 단어장 만들기 #2 - Medium 파싱
프로그래밍을 통한 단어장 만들기 #1 - 시작