일단 링크부터
https://userju.github.io/MBTI-over-immersion-TEST/
MBTI 과몰입 테스트
userju.github.io
12/22일 부터 1월 8일까지 하루에 3~4시간씩. 약 19일에 걸쳐 만들었다.
크리스마스를 맞아 서울에서 3박 4일
연말기념으로 부산에서 1박 2일
친구와 다이빙을 하러 가고
또 서울을 3박 4일동안 갔다가
드디어 배포를 완료하고 친구들에게 링크를 보냈다.
하지만 이게 끝이 아니다
내 목표는 이 프로젝트를 끝내는 것이 아니라 프로젝트를 통해 무언가를 배워가는 것이기 때문에
아직 내 프로젝트는 끝나지 않았다.
언제 끝날련지...
프로젝트 진행 이유
나는 한번 부딪혀보기 전까지는 '내가 제대로 배운 것이 맞나?' 끊임없이 의심하는 사람 중 한명이다.
실제로 배웠다고 생각하더라고 생각보다 머리에 들어간 것들이 없을 수도 있고
머리로 생각하며 새로운 시도를 하지 않고 계속 배우기만 하는 것은 성장에 한계가 있다고 생각해 react로 만들 프로젝트를 결심하게 되었다.
2021년 사람들을 16가지 성격유형에 푹 빠지게 한 검사가 있다. 바로 MBTI이다.
이전에도 심리테스트는 사람들을 매혹시키며 다양한 형태로 존재했지만 MBTI 검사만큼은 여타 심리테스트와는 달랐다.
계속해서 관련된 심리테스트들이 꼬리를 물고
'딸기 먹는 유형으로 알아보는 MBTI' 등 실제 MBTI 성격과 관련이 전혀 없어보이는 마케팅 요소로까지 등장했다.
동시에 이런 MBTI 붐은 같은 성격유형의 사람에게 동질감을 느끼거나, 싫어하는 MBTI 성격 유형이 생기는 등 테스트 밖의 관계에도 영향을 주기도 했다.
그래서 'MBTI 과몰입 유형'이라는 것을 만들고 사람들이 자신이 얼마나 MBTI에 과몰입하는지를 알려주는 테스트가 있으면 재미있겠다고 생각해 진행하게 되었다.
프로젝트에 사용된 언어 / 패키지
React를 사용해서 코딩했다.
그 과정에서 react-router을 사용하고
post css를 이용해서 바닐라 JS를 스타일링 할 때보다 bem 구조를 덜 생각하며 스타일링할 수 있었다.
firebase 중 firestore을 이용해서 테스트를 마친 사람들의 결과를 저장하고
이 결과를 다시 읽어와
1. 사용자 수와
2. 'MBTI 과몰입 유형'별 상위 5개 MBTI
3. 본인이 선택한 본인의 MBTI를 퍼센트로 보여주었다.
재미있었던 점 & 어려웠던 점
1. react-router을 사용했던 것
react 인터넷 강의들을 들으면서 react router 버전을 다운그레이드해서 구버전으로 배울 것인지, 신 버전으로 배울것인지 정말 많이 고민하다가 신버전, react-router v6으로 진행했었다.
중간에 막히는 부분이 매우 많았지만... 그럴 때마다 공식 문서와 기존에 머리를 싸맸던 개발자들의 기록을 보면서 배워나갔다. 그 경험이 이번 프로젝트에서 십분 발휘되었다.
useNavigate()뿐만 아니라 useNavigate에 인자를 전달하고, useLocation으로 받아오는 방법을 배우고 정말 뛸듯이 기뻤다.
하지만... useLocation으로 계속 인자를 넘기는 것이 효율적인 방법인지는 확실히 모르겠다.
시행착오를 겪으며 더 배우면 알 수 있을 것.
아래의 stackoverflow도 참고! 영어 독해 능력만 나날이 늘어난다.
2. kakao talk으로 공유하기
카카오톡으록 공유하기 버튼을 만드는게 왜이렇게 어려웠는지 모르겠다.
script를 가져와서 어디에 넣어야 할지 몰라서 헤매고,
공식문서를 소홀히했다가 객체로 kakao버튼을 만드는 방법밖에 없는 줄 알고 열심히 노력했지만
공식문서를 모두 확인한 다음, 맨 마지막의 간단한 sendCustom() 방법을 찾아내고 말았다.
만약 react로 카카오톡으로 공유하기 버튼을 만들고 싶은데 뭐가 잘 풀리지 않는다면 저한테 말씀주세요😂
// useEffect(() => {
// kakaoBtnClick();
// }, []);
// container: "#kakaoLinkBtn", // id를 가지고 온다 #로
// objectType: "feed",
// content: {
// title: "MBTI 과몰입 테스트",
// description: "#MBTI #Mbti과몰입 #과몰입테스트 #mbti테스트",
// imageUrl: "imageurl",
// link: {
// mobileWebUrl: "https://userju.github.io/MBTI-over-immersion-TEST/",
// webUrl: "https://userju.github.io/MBTI-over-immersion-TEST/",
// },
// },
const kakaoBtnClick = () => {
window.Kakao.Link.sendCustom({
templateId: 68225,
});
};https://developers.kakao.com/tool/demo/message/kakaolink?method=send&message_type=custom
3. test_page를 효율적으로 넘기는 방법에 대한 고민.
글이 달라질 때마다 새로운 test_page component로 넘어가는 것보다
본문에 있는 질문과
긍정응답, 부정응답만 바뀌며 응답에 따라 점수가 적림되는 방법이 낫다고 생각했다.
// name을 받아와서 testpage를 끝낸 다음 name을 보여주어야 한다
const onClick = (e) => {
setCurrentQ((prev) => prev + 1);
if (currentQ < 15) {
if (e.target.value === "O") {
setPoint((prev) => prev + 1);
} else {
setPoint((prev) => prev - 1);
}
} else {
navigate("/mbti", { state: { user, point } });
}
};<div className={styles.questionBox}>
{currentQ <= 15 ? (
<h3 className={styles.question}>{questionBox[currentQ].q}</h3>
) : (
<h1>Loading</h1>
)}
</div>
그래서 이 방법을 사용했다.
currentQ, setCurrentQ를 이용해서 questionBox라는 질문 박스 객체를 하나씩 넘긴다.
currentQ(현재 질문)이 딱 15개가 될 때 까지는(질문 개수가 15개이다)
질문 박스를 하나씩 넘기며 다른 질문들을 보여준다.
그리고 질문이 15개가 넘어갔을 경우는 Loading 화면을 보여주고
navigate를 이용해서 /mbti페이지(mbti를 선택하는 페이지)로 넘어가게 한다.
4. firestore에 유저의 선택내용 올리기
const onClick = async () => {
if (mbti === "") {
alert("MBTI를 선택해주세요");
} else {
navigate("/result", {
state: { user, point, pointRange, mbti },
});
const docRef = await addDoc(collection(db, "results"), {
mbti,
point,
Range: pointRange,
});
}
};일단 mbti가 선택된 후 '결과 보기'를 누르면 result창으로 넘어간다.
동시에 firestore에 결과를 저장한다.
이 과정에서..
firebase 초기화를 계속 안해서 오류가 났었다. 공식문서를 잘 읽어보고 문제는 작은것에서부터 찾자!
+ mbti를 선택하는 창을 css grid를 사용해서 구성해보았다.
5. firestore에 있는 값들 분석해서 보여주기
아주 어렵지만 정말 재미있던 부분이었다.
기본적인 JS문법을 알고 잘 활용할 수 있어야 한다는 생각이 가장 많이 났던 부분이었다.
const onClick = () => {
const sameRange = testArray.filter((res) => res.Range === pointRange); // 전체 test를 한 사람 중 같은 범위에 있는 사람들의 배열
setSameRangeArr(sameRange);
showRank(sameRange);
const sameMbti = sameRange.filter((res) => res.mbti === mbti); // 현재 범위에 속한 사람 중 나와 MBTI가 같은 사람들의 배열
setSameMbtiArr(sameMbti);
setOpenRes(true);
// console.log(topFiveArr);
// console.log(topFiveArr[0]); // undefined. 순서문제가 발생하고 있다.
};일단 '수치보기' 버튼을 onClick하면 이 함수가 작동되게 했다.
그리고 filter을 이용해서 testArray라는 배열을 돌게 했는데, 이 testArray는
useEffect(async (e) => {
const querySnapshot = await getDocs(collection(db, "results"));
querySnapshot.forEach((res) => {
arr.push(res.data());
});
setTestArray(arr);
}, []);useEffect로 렌더링이 될 때 firestore에서 데이타를 가져온 다음에
이를 forEach로 돌면서 배열 arr에 넣어주고
setTestArray(useState 두번째 값)에 집어넣어준 것.
어쨌든 이 배열을 가지고
1. 전체 테스트를 한 사람중 같은 결과가 나온(ex- 아침드라마보는 어머니 형)사람들을 모은 배열
2. 1번 범위에 속한 사람 중 나와 같은 MBTI를 가지고 있는 사람들의 배열을 가지고 온다.
(++ 지금생각하니.. 2번은 배열을 가져와 배열의 length를 구하는 것보다 애초에 +1씩 더하면서 개수를 구했어도 됐을 것 같다)
// 많이 나온 mbti를 5위까지 보여주기 위한 함수
// 1
const showRank = (sameRange) => {
let result = {};
sameRange.forEach((rank) => {
result[rank.mbti] = (result[rank.mbti] || 0) + 1;
});
// 2
let sortable = [];
for (let mbti in result) {
sortable.push([mbti, result[mbti]]);
}
sortable.sort((a, b) => {
return a[1] - b[1];
});1).
이 showRank부분을 구성하는 것이 조금 힘들었다.
배열 안에 들어있는 중복 개수를 측정하는 방법에 대해 오래 고민하고 다른 사람들의 코드를 찾아보았다.
sameRange라는 배열에서 들어있는 mbti의 개수를 하나하나 새야 했다.
그래서 sameRange라는 배열을 하나하나 돌면서,
ex)
result.ENTP 값이 아직 들어오지 않았다면 = undefined라면
result.ENTP를 넣어주고 그 값에 1을 적용해준다.
만약에
result.ISFP 값이 배열을 돌면서 진작 들어와있었다면 = 값이 존재한다면
거기에 또 1을 추가해주는 것이다.
만약 다시 result.ENTP가 나왔을 때는 진작 값에 1이 적용되어있으니까 1만 더해지는 것이다
이렇게 배열 안에 들어있는 중복 개수를 측정할 수 있다.
2)
상위 5개의 mbti를 보여주기 위해서 sort를 이용했다.
result { ENTP : 3, ISTJ : 5 }이런식으로 나오는 객체를 다시 뽑아 sortable이라는 배열에 push한 다음에
이 값을 sort해서 순서대로 정렬한다.
여기서 그냥 a - b 가 아니라 a[1] - b[1] 인 이유는 sortable 안에 들어있는 배열의 0번째 값이 아닌 첫 번째 값에 수가 할당되어져 있기 때문이다.
이 후
// top5개의 mbti를 보여주기 위한 함수
const rangeLength = sameRange.length;
const topFive = sortable.slice(sortable.length - 5);
topFive.map((per) => {
return (per[1] = ((per[1] / rangeLength) * 100).toFixed(2));
});sortable 배열에서 뒤 5개(가장 큰 mbti 5개)를 잘라내고
map을 통해 setTopFiveArr이라는 useState()에 집어넣었다.
6.
당연하게도 프로젝트를 하는 것 자체가 재미있었다.
MBTI에 과몰입하는 친구와 MBTI를 '극혐'이라고 말하는 친구의 의견을 각각 받아서 질문을 만들고
콘텐츠회사에 다니는 친구의 도움을 받아 결과 한줄을 작성했다.
나머지 내용은 혼자서 작성했지만, 인터넷에서 많은 사람들의 과몰입 경험을 보는 것도 재미있었다.
그래서 무엇을 배웠나
1.
배움은 인식이 아니라 직접 사용해 볼 때 내 것이 된다.
열심히 듣던 강의들이 조금 더 내 것이 된듯한 느낌이 들었다.
그냥 따라치는 강의가 아닌 내 스스로 생각하고 무언가를 만들어 본 후 다시 강의를 들어보니
처음에는 정말 어려웠던 코드의 논리구조가 명확히 보이며
'이런식으로 할 수도 있지 않을까?'
'이 강사님의 스타일과 저 강사님의 스타일은 ~~한 면이 다르구나'
를 더 잘 알 수 있게 되었다.
동시에 약간씩 다른 방식으로 가르키시는 강좌를 들으며 지금 상황에 있어 더욱 필요한 방법을 취사선택해서 쓸 수 있게 되었다.
2.
서핑 능력
처음에는 하나부터 열까지 내가 아는 지식을 총동원해 만들어보고싶었다.
하지만 아주 사소한 부분부터 큰 로직까지 완전히 혼자 힘으로 짜내기는 어려웠다.
그래서 stack overflow나 다른 개발자들이 한번 거쳐간 에러 관련 글, 누군가가 시도했던 방법들을 서치하며 찾아보게 되었다.
다른 개발자들이 한번 고민했던 흔적들을 들여다보는것은 치팅이 아닌 방향을 제시하는 표지판 같은 것이고,
남들의 고뇌를 배껴오는 것이 아니라 나 스스로 해결하려고 노력하고 코드를 한 줄 한 줄 써보고 console을 찍어보는 것은 새로운 배움의 기회가 될 수 있다는 것을 깨달았다.
게다가 영어로 된 공식문서나 stack overflow를 들여다 보니까 독해 능력도 늘어난 것 같다..ㅎ
3.
70%만 하기
당연하게도, 나는 아직 완벽한 결과를 낼 수 없는 실력이라고 생각한다.
코딩에 발을 들인지 약 6개월, 아무리 노력을 해도 긴 시간 동안 갈고닦은 사람들처럼 빠르고 단단하게 멋진 코드를 짤 수 있는 실력은 아니다.
그 와중에 본인에게 가혹한 성향이 약간 있어서 내 결과물에 만족하는 경우 또한 드물다.
하지만 내가 내 결과에 만족하지 못하더라도, 너무 간단하고 별것 아닌 결과물이라도 일단 세상에 내놓는 것,
열심히 공부를 갈고닦는 것도 좋지만 일단 무언가를 고뇌하며 70%의 결과를 내놓는게 훨씬!! 배움에 도움이 된다고 생각하게 되었다.
코드를 짜는 데 있어서 어떤 것을 배우고 고민했다
라고 말하는 것은 진작 너무 많이 써놓은 것 같아서 코딩 외 다른 방면으로 배운 것들을 나열해 보았다.
내가 처음에 react를 배울 때
useEffect와 useState에 대한 내용을 포스트잇에 적어서 컴퓨터 밑에 붙혀놨었다.
그리고 딱 일주일이 지나서 포스트잇을 읽어봤을 때
'와 나 이런걸 모르겠다고 해놓은거야?'
라는 생각이 들었다.
당시에는 새로 배우는 것들이라 분명히 어렵고 힘든 과정이었지만
딱 며칠이 지나고 나서 돌아보니 과거의 내가 짠 코드, 어려웠다고 적어놓았던 것들이 너무나도 익숙해져있어서 깜짝 놀랐다.
지금 이 프로젝트도 마찬가지일 것이다.
다음에 다시 보면 '이걸 왜... 이렇게했지?' 라는 생각이 들 것 같다.
하지만 이렇게 과거의 내 고민을 돌아보았을 때 별게 아닌 것이 되어있을 때마다 성장했다고 느낀다
나는 또 얼마나 성장할 것인가!
어서 공부하러 가야지.
너무 재밌다!!!
'🤸♀️ 내 프로젝트 > MBTI 과몰입 테스트' 카테고리의 다른 글
| [MBTI 과몰입 테스트] 프로젝트 다시 열어보기 (0) | 2022.04.21 |
|---|