본문 바로가기

side project3

[React][side project] mbti궁합 테스트(3) - aws Amplify 배포 & 가비아 도메인 붙이기 🎈이전글과 이어지는 글입니다 - 마지막 7. 배포 준비(1) - SNS로 링크 전달 시 썸네일, 타이틀 변경을 위한 metadata 수정 📂 public index.html 수정 -meta 태그를 추가해서 링크 공유시 썸네일 이미지, 웹사이트 명, 간단한 소개, url 주소를 표시하고자 한다. 📂 manifest.json 수정 - src를 원하는 이미지로 수정해줌 "icons": [ { "src": "./heart.png", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "./heart.png", "type": "image/png", "sizes": "192x192" }, { "src": "./heart.png", "type.. 2021. 11. 26.
[React][side project] mbti궁합 테스트(2) 🎈이전글과 이어지는 글입니다. 5. MeinputPage & YouinputPage - 2,3번째 화면 & 모달 🥚 MeinputPage - 나의 정보 입력 플랫폼 - 입력한 정보 ⏩ 리덕스 스토어에 저장 - 성별 Click ⏩ 둘 중 한개만 클릭 가능 - 인풋창 공백 ⏩ 다음페이지로 넘어갈 수 없음 - 혈액형 & MBTI Click ⏩ 모달창에서 선택한 값으로 입력(직접입력 불가) - 다음으로 Click ⏩ 다음페이지 이동 (정보 모두 입력시) 🥚 MeinputPage에 입력값 들어갈 state 만들기 //MeinputPage.jsx import React, { useState } from "react"; const MeinputPage = () => { const [name, setName] = us.. 2021. 11. 26.
[React][side project] mbti궁합 테스트(1) 나와 상대의 별자리, mbti, 12지신, 혈액형을 입력하면 두사람의 궁합에 대해 알려주는 사이트를 만들었다. 화면 뷰는 총4개로 첫화면 / 내 정보 / 상대 정보 / 결과 화면 으로 구성되어있다. 제플린으로 제작된 화면을 그대로 따라서 구현하려고 노력했다. 사용 기술 - react(function components) - style component - react redux - axios 1. 컴포넌트 생성 & 폴더 구조 -> 액션은 삭제해도 되는데 실수로,, 남아있다,,,ㅎㅎ ->인풋 값을 저장할 리덕스 생성 -> 컴포넌트 폴더를 생성해서 필요한 페이지들을 만들어줌 ( 폴더에 있는 jsx파일을 RootRouter를 통해 페이지 전환을 해줄 것이다.) -> 모달창 폴더 -> RootRouter -> 이.. 2021. 11. 25.

티스토리툴바