🎈Intro
이번 프로젝트는 react를 주로 사용하여 진행하였습니다. 팀원은 3인 구성으로 저는 팀장님과 함께 프론트 작업을 하기로 하였고 백엔드 작업은 한 분이 맡아주기로 하셨습니다. 프로젝트 주제는 개발, 코딩 관련 심리테스트였고, 저희 팀은 심리테스트를 통해 mbti를 도출하고 그에 어울리는 개발자 유형을 보여주기로 하였습니다.
🎈4L 회고
좋았던 것(Liked)
눈에 보이는 결과물
지금까지 배운 것으로 직접 프로젝트를 진행하여 그 결과물을 볼 수 있어서 좋았습니다. 그리고 결과물을 눈으로 볼 수도 있다는 것도 좋았지만 저희가 만든 심리테스트의 참여자 수가 지금도 계속 올라간다는 것이 신기하고 재밌었습니다.
배운 것(Learned)
초기 설계의 중요성
구조를 비효율적으로 짰다거나 변수명을 직관적으로 쓰지 않아서 나중에 수정 작업을 할 때 시간이 더 걸리는 문제가 있었습니다.
도움 요청하기
잘 안 되는 부분을 질문했을 때 다들 자기 일 처럼 도와주시는 것을 보고 정말 고민해도 모르겠으면 질문하는 것도 좋은 방법이라는 것을 배웠습니다. 한 시간 내내 고민했는데 5분만에 해결되는 문제였을 때 느꼈던 감정은...
부족했던 것(Lacked)
협업을 위한 tool 사용
혼자서 깃허브를 사용하는 것은 숙지하였는데 협업을 위해 사용해본 것은 처음이어서 지금까지 작업한 것이 없어진다거나 다른 팀원의 작업에 영향이 갈까봐 깃허브를 적극적으로 사용하지 못한 것이 아쉬웠습니다.
백엔드
물론 시간적으로도 능력도 부족해서 이번에는 프론트 작업만 하게되었는데 프로젝트도 끝났으니까 열심히 공부해서 백엔드도 해보고 싶다는 생각이 들었습니다.
바라는 것(Longed for)
이번에는 너무 잘하시는 분들과 같은 팀이 되어서 숟가락만 얹은 급이라...
우선 앞으로를 위한 코딩 능력치를 올리기 위해서 이번 프로젝트에서 아쉬웠던 점을 보완하면서 혼자서 새로운 심리테스트를 만들어보기로 했습니다. 그리고 다음 프로젝트에서는 협업을 위한 툴을 잘 활용해보고 커밋하는 것과 풀 받는 것을 두려워하지않기로...!
🎈정리
meta tag
meta data란?
메타데이터는 어떤 데이터를 설명하는 데이터로 요소 내부에 있으며 일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용된다.
OG TAG
카카오톡, 페이스북과 같은 서비스에 공유할 때 썸네일이나 간단한 설명을 같이 보내기 위해 오픈그래프 태그를 사용하기로 함
오픈그래프 Open graph
웹사이트가 카카오톡, 페이스북 등 sns로 공유 될 때 보여지는 미리보기창에 적용되는 정보들을 지정해주는 태그<meta property="og:url" content="" /> <meta property="og:type" content="" /> <meta property="og:image" content="" /> <meta property="og:description" content="" />
SPA (single page application)
react는 SPA로 한 페이지에서 각각의 컴포넌트들만 렌더링 되면서 사용되기 때문에 build된 이후 파일을 보면 body부분이 비어있다. 그리고 js로 body부분을 변경해 가면서 렌더링되는 방식이다. 특정 페이지마다 특정 이미지, 설명을 나오게 하고 싶다면 복잡해졌겠지만 우리는 심리테스트 해보는 것을 유도하는 것이 목적이었기때문에 정말 간단하게 index.html에 고정적인 meta tag를 설정하는 것으로 충분했다.
result page
useEffect
컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하기 위해서 사용
setTimeout
서버에서 데이터 받아오기, 네트워크 접속 대기 등 시간이 걸리는 작업이 존재하게 된다. 그래서 setTimeout을 사용하여 1.5초를 부여한 뒤 내부의 코드를 실행
&&을 이용한 조건부 렌더링
A && B // A와 B가 둘다 true일때 true, 하나라도 false라면 false
true && expression 은 항상 expression 으로 실행되고,
false && expression 은 항상 false 로 실행된다.
sessionStorage
sessionStorage.setItem(keyName, keyValue): keyName 에 해당하는 값을 만들거나 수정
setItem: 값을 저장할 때 쓰는 메소드
sessionStorage.setItem("mbti", raw) : mbti 에 해당하는 값을 만들어서 저장
[문제점]
결과 페이지에서 새로고침을 하면 데이터가 초기화되어 오류가 일어난다.
[해결방법]
웹에서 사용되는 데이터는 모두 서버에서만 관리되는 것이 아니다. 브라우저 내에서도 관리가 되는데 대표적으로 쿠키, 세션, 로컬 저장소가 있다. 즉, 사용자의 저장공간에 사용자만의 결과가 저장되고 key를 통해 그 value값을 가져올 수 있다. 우리의 경우는 휘발성 데이터를 저장하기 위해서 세션 스토리지 사용하였다. 브라우저가 꺼지면 삭제되지만 심리테스트 진행중에는 정보가 세션에 저장되어 있기 때문에 결과 페이지에서 새로고침을 하더라도 더 이상 오류가 일어나지 않는다.
모달창
라이브러리 사용하지 않고 컴포넌트로 만들어서 사용
-> useState로 모달창 노출 여부를 관리해줌
-> modalOpen이 true가 되면, Modal 컴포넌트가 노출
init() 함수
init() 함수는 패키지가 로드될 때 가장 먼저 호출되는 함수로, 패키지의 초기화 로직이 필요할 때 선택적으로 사용하면 된다.
공유하기 - facebook, twitter
facebook과 twitter의 경우는 react-share라이브러리를 사용하여 쉽게 구현이 가능했다.
공유하기 - 카카오톡
메시지를 보내는 방법은 크게 2가지라고 함 🙆♀️
1. 카카오링크 API를 사용하는 방법
2. 카카오톡 메시지 API를 사용하는 방법
프로젝트 특성상 빠르게 구현하는 것이 필요해서 1번 방법으로 선택
공식문서를 참고해서 컴포넌트를 만들어두고 사용할 페이지에서 import 하였다. 그리고 개발자 사이트에서 만들어둔 템플릿을 사용하기 위해서 sendCustom을 썼는데 templatedId에 만들어둔 템플릿 ID만 입력하면 끝이다.
cleanup: 카카오 sdk 제거하기
더 이상 카카오 sdk가 필요 없을 때는 불러오는 것을 멈추는 작업을 해줘야 하니까 useEffect의 return 값에 정리 작업을 해주는 코드를 작성
REST api 연동을 위해 axios 라이브러리 사용
우리는 결과 페이지를 여러 개로 만들어두고 해당 결과 페이지를 불러오는 것이 아니라 요청에 따른 응답을 화면에 보여주기로 했고 필요한 api문서는 백엔드 담당자분이 작성해주셨다.
REST api를 사용 할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 대표적인 메서드는 다음과 같다.
GET: 데이터 조회
POST: 데이터 등록
PUT: 데이터 수정
DELETE: 데이터 제거
처음에는 GET으로 데이터 조회만 했었다. 이후에 심리테스트의 누적 사용자 수를 알아봐야하기도하고 백엔드 담당자분께서 데이터를 활용하여 통계를 시각화해보고싶다고 하셔서 POST로 수정하였다.
