Project milestone

[dlehdanakf]

기획

• 예선 통과를 위한 기획서 작성
• Chrome 확장프로그램 중 비슷한 기능을 제공하는 다른 어플리케이션들 조사
• 맞춤법검사 버튼을 넣을 서비스 범위 정하기, 보편적으로 버튼을 넣을 방법 고민해보기
• 확장앱 로고/아이콘 디자인

개발

Common

• 개발기한 정하기
• 코딩컨벤션, 커밋로그 컨벤션 정하기(ESLint)
• 개발환경 구축하기(Webpack, NodeJS 환경 등)

background.js

• 사이드바와 메세지를 교환할 수 있는 통신창구 개발
• 마우스 우클릭으로 맞춤법 검사할 수 있도록 기능 추가

sidebar

• 맞춤법 검사기 결과화면에서 불필요한 section 제거
• whale 확장앱 관련 로고 및 안내문구 footer 영역에 추가
• background.js 와의 통신관련 Browser API 코드 개발
• 메세지 내용이 500글자가 넘을 경우 자동 분할해주는 알고리즘 개발
• 분할된 텍스트를 사용자에게 보여줄 수 있는 UI 개발

content-script.js

• Gmail 서비스에 맞춤법 검사버튼 추가
• NAVER Mail 서비스에 맞춤법 검사버튼 추가
• Daum Mail 서비스에 맞춤법 검사버튼 추가
• 보편적으로 사용할 수 있는 맞춤법 검사버튼 개발

Getting Started

• 확장앱 설치 시 사용자에게 보여줄 랜딩페이지 퍼블리싱

홍보

• 웨일 스토어에 개시할 안내문구 편집
• 스크린샷 및 배너 디자인
• Facebook 및 기타 매체 홍보를 위한 카드뉴스 제작

[dlehdanakf]

Grammarly chrome extension

• Gmail, Facebook과 같은 주요 온라인 서비스를 넘어서 보편적으로 <textarea>, <div contenteditable="true"></div> 엘리먼트들에 맞춤법 교정 서비스를 제공하고 있음.
• 맞춤법에 오류가 있는 부분에 밑줄을 그어주는 형태로 사용자에게 직관적인 UI를 차용함.
• "웨않되" 확장앱에서도 grammarly 수준의 밑줄을 그어줄 수는 없지만 적어도 오류가 있다는 표시는 해주는 것이 좋을 것 같음.

오류 표시 예시

평상시, 오류가 없을 때	오류가 있을 때	마우스 오버

Need to do

• 밑줄긋는 기능은 깔끔하게 포기 아니, 포기못해 ٩( ᐛ )و
• 오류 갯수만이라도 출력해보자.

문장에서 맞춤법 오류 검사하기

https://m.search.naver.com/p/csearch/ocontent/util/SpellerProxy?_callback=jQuery22402374290816424922_1572265895193&q=아버지가방에들어가신다&where=m&color_blindness=0&_=1572265895196

URL Request 파라미터

• _callback : jsonp 형식의 요청 파라미터 콜백함수
• q : 쿼리문, 검사를 요청할 문장
• where : whale-grammar 으로 전달해도 무방. 필수파라미터 ×
• color_blindness : 색맹을 위한 선택옵션인듯. 필수 파라미터
• _ : 뭔지 모르겠음. 필수 파라미터 ×

Response data

• 콜백함수 파라미터로 전달되는 객체 : { message }
• message 객체 안에는 result 객체 하나만 있음. { message: { result: { ... } } }
• result 객체 안에는 errata_count, html, notag_html, origin_html 가 있음.

위 errata_count 값을 grammarly 처럼 오류 갯수로 표시해줘보자!

jsonp 다루는 방법

• jsonp 는 json 통신과는 달리 CORS 보안문제를 회피하기 위해 개발된 통신규약
• 모든 jsonp 통신의 response body 에는 콜백함수가 정의되어있다.
• 관련 아티클 바로가기