인스타그램과 비슷한 사이트 만들어보기

프로필 이미지 2개와 게시물 이미지로 활용할 10개의 이미지를 미리 준비헤두세요.

이미지 파일을 커서의 파일 탐색기로 옮기고, 커서에게 적당히 이미지들을 폴더를 만들어 정리해줘라고 지시합니다.

cursorstudy에 있는 이미지 파일들을 적당히 폴더 이름 만들어 정리해줘.

 

그러먼 커서가 알아서 명령어를 실행하여 현재 폴더에 images 폴더를 만들고 그 안에 파일을 정리해줍니다.

 

이제 리액트를 이용해서 인스타그램과 유사한 화면을 만들 차례입니다. 화면에 표시할 이미지는 images 폴더에 있는 img01~10를 사용하고 프로필에 사용할 이미지는 man, woman인 각각 적절히 사용하라고 하겠습니다.

리액트로 인스타그램 화면처럼 보이는 앱을 만들어봐. 이때 각 피드에 표시할 이미지는 images 폴더에 있는 imges 폴더에 있는 1~10.jpg 파일을 사용하고 프로필 사진은 man.png와 woman.png 파일을 사용하면 돼.

 

커서에게 위와 같이 요청하면 현재 프로젝트의 상태를 확인한 다음 리액트 프로젝트를 만들겠다고 할 것입니다. [Run]을 눌러 리액트 프로젝트 생성을 시작하세요.

 

잠시 기다리면 리액트 프로젝트가 생성됩니다. 이후 커서는 인스타그램 화면에 필요한 패키지를 설치하겠다고 합니다. 다시 한 번 [Run]을 눌러 패키지 설치를 진행합니다.

 

필요한 패키지를 모두 설치했다면, 이제 코드 생성을 시작할 차례입니다. 커서는 순식간에 많은 코드를 생성합니다. 이때 [Accept file] 또는 [V]를 눌러 코드 생성을 허용하세요.

 

코드 생성을 허용하는 과장 마지막 단계에 가면 '앱을 실행하겠다'고 하면서 명령어를 입력한 상태로 대기합니다. 리액트 앱은 화면을 만든 후에 반드시 '리액트 서버'를 실행해야 실제로 웹에서 화면을 볼 수 있습니다.npm run dev라는 명령어를 프롬포트에 이력하여 서버를 구동합니다.

 

만약 실행 중 오류가 발생하면 오류 메시지를 몽땅 복사한 후 [Add to Chat]을 눌러 커서에 전달할 수 있습니다. 콘텍스트에 오류 메시지를 포함시키고 '오류를 해결해줘'라고 요청하면 됩니다. 

 

오류를 수정한 뒤 npm run dev를 입력해 다시 실행하면 웹 브라우저에 인스타그램과 비슷하게 구성된 화면이 보일 것입니다.

 

 

디자인을 좀 더 인스타그램처럼 보이도록 추가 수정을 해보도록 하겠습니다.

디자인을 조금 더 인스타그램스럽게 해줄 수 있어?

 

커서가 코드를 수정하고 디자인을 조정합니다.