개발 & IT 정보

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 (feat. 울집 고양이) [MBTI 테스트 사이트 만들기 #5] 카카오톡 공유하기 버튼 추가하기(React) 친구에게 테스트 결과를 공유하도록 하기 위해서 카카오 공유 API를 활용하려고 합니다. 우선 카카오톡 콘솔 사이트로 가서 어떤 API가 있는지 확인해 보겠습니다. kakao developers > 문서 https://developers.kakao.com/docs/latest/ko/index Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 API를 ..

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #3] 테스트 질문지 만들기 [MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 이전 포스팅에 이어서 미리 질문과 답, 그리고 16가지 결과 페이지? 이미지를 만들었다. 처음 만든 mbti이어서 그런지 질문과 답을 구상하는 부분에서 가장 시간이 오래 걸렸다. ㅠㅠ 간단한 css를 추가한 결과물은 아래와 같다. 필요한 페이지는 모두 만들었으니, 이제 답을 선택했을 때 다음 질문으로 넘어가는 로직과, 결괏값을 통해 각 결과 페이지로 들어갈 수 있게 로직을 짜야한다. Quiz 화면 Quiz 컴포넌트에서 현재 해당하는 테스트의 정보(지금은 고양이 MBTI테스트)를 props로 받는다. props정보는 아래와 같다. export const datas ..

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #2] 이메일 보내기 버튼 만들기 [MBTI 테스트 사이트 만들기 #3] 테스트 질문지 만들기 각 테스트를 보여줄 메인 화면을 완성했다. 이제 심리 테스트를 하나 만들어보자. 각 테스트에 관한 정보는 datas 배열에 담고 있다. 내가 만들고 있는 고양이 성격 테스트는 질문 12가지와 결과 12가지로 구성하려고 한다. 테스트 정보가 담긴 datas 배열 import catBTI_banner from "../assets/img/catBTI/catBTI_banner.png"; import catBTI_full from "../assets/img/catBTI/catBTI_full.png"; export const datas = [ //catBTI - 고양..

이전글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #0] Visusal Studio Code 설치와 Create-react-app 생성 메인화면 만들기 MBTI 테스트 사이트를 만들기 위해서 추가할 기능들과 추후 추가하고 싶은 기능을 대강 정리해보면 다음과 같다. 시간 없어서 대충 만들려고 했는데, 생각보다 오래걸린다...ㅠㅠ 추가할 기능 및 작업(필수) MBTI 테스트 웹 사이트 추가 MBTI 테스트 문의 이메일 버튼 SNS 공유하기 버튼 애드센스 연결 도메인 추가 추후에 추가하고 싶은 기능(옵션) 앱 연동 유저 인증 유저가 직접 MBTI 테스트를 만들 수 있는 기능 1. 테스트 템플릿을 선택하고, 2. 질문과 답을 각각 입력받아서 3. 최종적으로 만들어진 테스트 url을 친구에게 공유할 수 있는 ..

Visusal Studio Code 설치와 Create-react-app 생성 수익형 웹사이트에 꽂혀서 MBTI 테스트 사이트를 만들어볼 것이다. 노트북이 고장 나서 친구 컴퓨터로 해야 되는데, 세팅부터 차근차근해보도록 한다. node 설치 node가 설치 안되어 있다면 아래 다운로드를 눌러 설치한다. (필수) https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code 설치 우선 개발에 필요한 Visual Studio Code를 설치해 본다. VSC 설치는 이곳에서 할 수 있다. https://cod..