이번 캡스톤 프로젝트를 진행하면서 React를 새롭게 배웠다. 원래는 백엔드와 모델 개발을 담당 하였는데 중간에 팀원 한명이 부득이한 사정으로 하차 하였기에 그 팀원의 몫까지 프론트엔드 개발까지 담당하게 되었다. 그래서 캡스톤 이전에는 단순히 HTML, CSS , JA
URL 설계 전체 URL 웹 프로그램이었기에 필요한 URL을 설계하고 개발을 시작했다. 물론 맨 처음부터 이렇게 URL을 설계를 시작한 것은 아니였다. 개발을 하면서 필요한 URL을 추가하면서 진행했고 파라미터 도 많이 수정했다. 처음에는 "/" , "/home"
url은 /home이고 \\ 컴포넌트를 사용했다. 화면 구성은 맨 위에는 탭 메뉴를 사용하여 클릭하면 내 정보, 내 책장, 내 독후감으로 바뀔 수 있도록 했다.\\ 코드에서 중요한 부분은 다음 부분이다.Step1. html,css로 UI 디자인을 다 해놓고Step2.
url은 /reading/:title/:chapter/:page이고 <Read/> 컴포넌트를 사용했다. url매개 변수로 책 제목, 현재 읽고 있는 단원 , 페이지를 사용했다.내 책장에서 원하는 책을 선택하면 책 읽는 화면으로 이동할 수 있다.책 읽기 부분은 프로
url은 다음과 같다.단원별 활동은 사용자가 책을 한 단원 읽을 때마다 해당 단원에 해당하는 내용을 퀴즈를 풀면서 다시 한번 복기하고 짧은 글 쓰기 활동을 통해 독후 감상문을 한번에 작성하는 부담을 줄일 수 있도록 합니다.퀴즈 활동 관련한 요구사항을 정의할 때 처음에는
url은 다음과 같다.독후감 작성하기 활동은 사용자가 선택한 책을 모두 다 읽고 단원 별 활동까지 모두 마무리하면 시작할 수 있다. 가장 먼저 아홉 가지의 독후감 형식 중 원하는 형식을 선택하고 형식 가이드를 확인한 후 독후감을 작성하면 된다. 독후감 작성 시에도 무작
url은 /feedback/:title 이고 <Feedback/> 컴포넌트를 사용하였습니다. 좌측에는 사용자가 작성한 독후감을, 우측에는 AI의 피드백을 볼 수 있습니다. 그리고 맞춤법 교정 기능을 통해 내 감상문에서 틀린 맞춤법도 확인할 수 있습니다.더 편한 방
빙고 url은 /writing/:title/bingo 이고 컴포넌트는 <Bingo/>이다.말 그대로 AI와 빙고게임을 할 수 있습니다. AI는 키워드 추출 모델을 이용하여 자동으로 키워드를 추출하고 9개의 단어를 골라 빙고판을 구성합니다. 사용자가 직접 9개의 단
프론트 개발을 하면서 가장 큰 장애물은 비동기 이슈였습니다.api통신을 해서 data를 받아오고 이를 보여줘야 하는데 axios는 비동기로 동작하기 때문에 렌더링이 먼저되는 상황이 발생하면서 key error 같은 에러가 발생했습니다. 이를 해결하기 위해 loading
프론트 개발을 프로젝트에서 맡아서 하는 건 이번이 처음이었는데, 확실히 다른 개발보다 개발 결과가 눈에 보여서 그런지 재미있게 개발을 할 수 있었습니다. 개발을 하면서 많은 우여 곡절이 있었지만 약 한 달 정도 되는 기간동안 리액트를 배우고 개발하면서 많은 걸 배울 수
키워드 추출 모델은 주어진 문서에서 키워드를 추출하는 모델입니다. 전체적인 로직은 다음과 같습니다.문서에서 명사를 추출한 후 SBERT를 이용해 임베딩을 진행합니다. 그리고 Extract Keyword 프로그램을 통해 키워드를 추출합니다.주어진 문서에서 명사를 추출하는
피드백 모델은 사용자가 작성한 독후감을 AI가 자동으로 피드백 해주기 위한 모델입니다. 전체적인 로직은 다음과 같습니다.사용자가 작성한 독후감을 문장 단위로 나눈 후 KOBERT 모델로 임베딩을 진행합니다. 그 다음, 학습 시킨 GRU 모델에 임베딩된 벡터를 입력으로