THE DEVLOG
ETRI의 OpenAPI를 통해 형태소를 분석하고, 이를 퀴즈형태로 파싱해봅니다.
형태소 분석기를 사용하고 싶었다.빅맥좋아요 님의 JavaScript/자연어 처리\[node.js] 형태소 분석기 mecab 사용하기라는 글을 읽고, mecab-ya를 설치해서 리액트나 next.js에 그대로 모듈을 올려 사용해보려고 했는데....역시나 택도 없었다.그러
styled components 설치yarn create next-app --example with-styled-components-babel으로 styled-compoents가 적용된 예시를 설치한다.styled-components는 서버사이드를 위해 별도의 설정이
본래는 API 라우터를 먼저 생성하는게 맞지만...익숙하지 않은 API라우터 페이지보다는 프론트 페이지를 먼저 만들어봐야지.pages/quiz/create.tsx파일을 생성한다.textarea에 내용을 입력하고,해당 내용을 '/api/articles'에,post 요청으
리액트에서 형태소 분석기 사용하기에서 형태소 분석기의 기술 검증을 한 바 있다.깃허브에서 많은 별을 받은 배하람님의 취준생이라면 알면 좋을 프론트엔드 관련 지식들의 일부를 발췌해서 형태소 분석을 진행해보았다.결과적으로 형태소 분석기는 아래와 같이 작동한다.'배열'에 문
문제를 만들기 전에, 데이터가 있어야 한다.데이터는 quiz.json 파일과 keyword.json 파일로 나눈다.quiz.json 파일은 Array<Object> 타입이며 아래와 같다.여기서 id는 배열 내에서의 인덱스 값이다.keyword.json 파일은 Ar
pages/api/quiz.tsx 에서 게시글을 읽어들이는 로직을 작성하는데,이미 데이터를 읽는 로직은 handler의 최상위에 있기에 아래의 부분만 작성하면 데이터를 반환하게 된다.이렇게 데이터를 반환했을 때,json으로 작성한 부분이 'data'에 담겨서 반환된다.
퀴즈앱을 만들었는데, 문제가 잘 안보이는 이슈...결국에는 디자인을 할 필요성이 있었음.문자열을 하나의 태그로 묶는 방식에서,(innerHTML 방식을 피하려면)텍스트를 분리하여, 각 각의 텍스트를 태그로 묶어 스타일링 해야함.그리고.... 그럴줄 알고 \\{ \\}로
얼추 퀴즈의 규칙도, 퀴즈를 푸는 화면의 레이아웃도 디자인이 끝났다.본 어플리케이션을 PWA로, 오프라인에서도 작동하게 만들 예정이다.따라서 LocalStorage를 적극적으로 활용할 생각이며, MVP로 오늘 중으로 완성하여 빠르게 배포할 생각이다.이를 바탕으로 사용자
pwa를 배포하기 위해서는 service-worker.js 파일에 이벤트 리스너를 추가해주어야 한다. 여기에는 'install', 'activate', 'fetch' 등이다.이러한 작업을 zero-config로 도와주는 라이브러리가 next-pwa이다.설치yarn in
배포 주소 | Github프로젝트명: 형태소 분석기를 활용한 "다짜고짜 CS문제 풀기"프로젝트 진행 기간 : - 2023.02.28 ~ 2023.03.04 (5일 간)프로젝트 인원 : 1 명 (개인 프로젝트)주요 기술 스택: Next.js 13, Redux Toolki
