리액트를 배우고 처음으로 프로젝트에 적용해보는 프로젝트를 만들게 되었다.
이름 하여 ...mbti기반의 몬나니야채 테스트!! 뚜둥~
팀이름 : 몬나니야채들
기간 : 2023.07.12 ~ 2023.07.16
배포 사이트 : https://monnani-front.onrender.com/
인원 : 3명 ( 프론트엔드 2명, 백엔드 1명 )
역할 : 프론트엔드 ( 시작 페이지, 결과 페이지 부분 및 야채 디자인)
주말이 껴있는 4일동안 진행되는 토이프로젝트였다. 물론 주말은 반납하고 열심히 만들었다.
기획 단계에서 기존에 어떤 종류의 MBTI가 있는지 조사해 보았고 방향을 잡아보려고 했다.
회의를 통해 야채 MBTI로 의견이 좁혀졌고 야채에 대해서 더 조사하게 되었다. 조사를 통해 몬나니 야채를 파는 사이트를 알게 되었고, 어글리어스 라는 몬생긴 야채들을 구출해주는 곳이였다. 매년 13억톤 농산물이 폐기된다고 한다. 미약하게나 우리의 심리테스트를 이용 후 결과 보기에서 사이트 홍보를 하면 좋을 듯 하여 배너에 추가 했다.
🔥 자 이제부터 나의 또 다시 시작된 고분분투의 개발일지다..!
역시나 리액트를 배우고 실제로 적용하려니까 앞이 깜깜했다. 어떻게 시작하더라? ...
npx create-react-app monnani으로 프로젝트 파일부터 생성했다.
기간이 짧다보니 뭐를 어떻게 해야할지 갈피를 못 잡고 있었지만 팀장 덕분에 길을 찾을 수 있었다. 역시 습득력 빠른 사람이 너무 신기하다. 분발하자!!!
대망의 첫 시작 페이지다.!
훠우 사진이 엄청 크게 들어가서 적지않게 놀랐다..ㅎ
MBTI를 시작 하기를 누를 때! 게임하는 것 처럼 꾸며보고 싶었다.
버튼은 이곳 저곳에서 자주 쓰일 것 같아서 따로 컴포넌트로 분리해서 만들어 주었다.
버튼에 Link to를 걸어주고 test페이지로 넘어가게 했다.
첫 시작 페이지에 많은 기능은 없었다. 회원가입이나 로그인 없이 서비스를 이용하도록 했기 때문에 슈슉 넘어갔다.
결과 페이지!!
이런식으로 미리 MBTI별로 객체를 만들어 주었고, 드디어 props로 객체 안에 있는 데이터를 꺼내올 수 있었다..
리액트는 컴포넌트 간에 부모데이터를 전달할 때, props 속성을 통해 데이터를 가지고 논다고 알고 있다. 다행히 이번 토이프로젝트는 컴포넌트가 많지 않아서 다행인 것도 있었다.
하지만 다행은 무슨...😭 앞에서도 말했지만 리액트를 처음 접해서 props를 꺼내오는데도 적잔히 당황했다. 그래도 도움을 받아 하나를 해결하니까 다른 것들도 비슷하게 진행되어 해결할 수 있었다.
위에서 변수로 선언된 객체 안에서 props로 전달 받은 mbti에 맞는 야채와 이미지 사진, 내용, 닉네임까지 꺼내올 수 있었다.
이렇게 보면 정말 간단해 보이는데... 왜 막상 코드를 칠 땐..너무 막막했던 걸까?🧐
이제 위에서 언급한 어글리어스@!!@ 몬나니 야채를 파는 사이트를 광고 배너처럼 만들어보았다. 꼭 나는 배너가 움직였으면 좋겠다고 생각해서 열심히 검색하며 만들어 보았다.
그리고 MBTI의 끝은 무엇인가?!
공유하기
그렇다! 공유하기다!!! 나의 성향을 다른 이들과 공유 할 뿐만 소통을 하며 서로의 차이를 이해하고 존중할 수 있기 때문이다.
그럼으로 나는 꼭 공유하기를 만들어 보고 싶었고, 만들어 냈다.
제일 먼저 생각한건 카카오톡, 인스타그램, 클립보드 3가지를 생각했다.
검색하면서
