메모 앱 만들어보기

다음과 같은 구성의 메모 앱을 만들어보겠습니다.

① [새 메모]: 메모지를 새로 만들고, 해당 메모지를 바로 수정할 수 있는 상태로 표시하여 사용자의 입력을 유도합니다.

② [수정]: 메모지를 수정 모드로 전환합니다.

③ [저장]: 수정 모드에서만 보이는 버튼입니다. 메모를 저장하고, 수정 모드를 종료합니다.

④ [삭제]: 메모지를 삭제합니다.

⑤ [메모 검색]: 메모를 검색하여 검색한 결과만 보여줍니다.

 

앱을 만들기 위해 필요한 기술들을 나열하면서 ① ~ ⑤번의 기능을 그대로 입력하는 것입니다. 이때 커서에게 'CRA'로 만들어달라고 하겠습니다. 여기서 CRA는 리액트 프로젝트를 가장 간단하게 시작하는 명령어입니다.

CRA로 메모 앱을 만들어줄 수 있어? 다음 기능이 동작하는 매모 앱이어야 해. ① [새 메모]: 메모지를 새로 만들고, 해당 메모지를 바로 수정할 수 있는 상태로 표시하여 사용자의 입력을 유도합니다. ② [수정]: 메모지를 수정 모드로 전환합니다. ③ [저장]: 수정 모드에서만 보이는 버튼입니다. 메모를 저장하고, 수정 모드를 종료합니다. ④ [삭제]: 메모지를 삭제합니다. ⑤ [메모 검색]: 메모를 검색하여 검색한 결과만 보여줍니다.

 

그러면 커서가 Create React App 명령어를 사용해서 프로젝트를 생성합니다.

 

프로젝트가 생성되면 커서가 알아서 코드를 작성하기 시작합니다. 코드 생성이 완료되면 [Keep] 또는 [Run]을 눌러 작성된 코드를 파일에 반영합니다. 만약 진행 중 오류가 발생하면 커서가 자체적으로 감지하여 오류를 해결해줄 겁니다. 프로젝트를 진행하는 모든 과정은 [Run] 또는 [Keep]을 눌러 진행하세요.

 

메모 앱이 최종적으로 완성되면 다음과 같이 커서가 '메모 앱이 완성되었고, 실행해볼 것인지'를 물어봅니다. [Run]을 눌러 앱을 실행합니다. 

 

그런데 실행해보니 메모 앱이 제대로 동작하지 않습니다. 지금은 입력란에 메모를 작성하고 [새 메모]를 누르면 아무것도 적히지 않은 새 메모가 생성되는 이상한 구조로 만들어졌습니다.

 

현재 상황을 최대한 구체적으로 적어서 커서에게 오류를 해결하려고 하면 됩니다. 이때 중요한 점은 커서가 전체 프로젝트를 제대로 확인할 수 있도록 프로젝트 폴더를 @memo-app으로 등록하고 질문하세요. 커서의 처리 방식에 따라 memo-app이 생성되지 않을 수 있습니다. 커서의 채팅 내용과 왼쪽 사이드바를 확인해 콘텍스트를 적절히 설정하세요.

 

모든 수정을 반영했다면 다시 웹 브라우저로 돌아가 [새로고침]을 눌러 메모 앱을 실행합니다.