개발 & IT 정보

이전 글 보러 가기 👉 [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 테스트 사이트 만들기 #2] 이메일 보내기 버튼 만들기 MBTI 사이트의 하단에 위치한 이메일 버튼을 만들고, 개발자에게 이메일을 보낼 수 있는 기능 만들기 1. 아이콘 선택 이메일 그림이 그려져 있는 아이콘을 다운로드한다. (canva에서 png파일로 다운로드) 다운을 받았으면 내 프로젝트에 이미지들이 모여있는 assets>img폴더로 이동한다. 2. 버튼 컴포넌트 추가 EmailButton 컴포넌트를 생성하고, 초반에 렌더링 될 App 컴포넌트에 해당 컴포넌트를 위치시킨다. import React, { useRef } from "react"; import emailIcon from "../../assets/img/email.png"; //다운받은 이메일 아이콘 function EmailBu..

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

간단하게 화면에서 텍스트 타이핑 효과를 구현할 수 있는 라이브러리 웹이나 앱에 텍스트의 동적인 애니메이션 효과를 낼 수 있음 react-typed 설치 npm i react-typed 또는 yarn add react-typed react-typed 적용예시 import React from "react"; import Typed from "react-typed"; function App() { return ( ); } export default App; react-typed 적용화면 react-typed 속성 필수 속성 strings: 타이핑 효과로 표시할 문자열의 배열을 정의 optional 속성 typeSpeed: 타이핑 속도 backSpeed: 백스페이스 효과의 속도 startDelay: 타이핑 시작..

웹과 앱 디자인에서는 적절한 색상 조합이 중요합니다. 사용자 경험(UX)과 브랜드 인식을 향상하는데 큰 역할을 하기 때문입니다. 이를 돕기 위해, 여러분께 매우 유용한 네 가지 색상 조합 도구를 소개하고자 합니다. 1. Two Color Combinations https://2colors.colorion.co/#google_vignette Two Color Combinations Two color combination palettes 2colors.colorion.co Two Color Combinations은 이름 그대로 두 가지의 색상을 이용한 조합에 초점을 맞춘 사이트입니다. 'Popular' 메뉴에서는 사용자들이 공유한 다양한 5가지 색상조합을 인기순으로 확인할 수 있습니다. 간결하면서도 효과적인..

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..

목차 Expo Api 정리 (React Native) React Native 입문 단계에서 적용해본 API를 정리하는 글. 주의 : 간단하게 작성된 문서이므로 생략된 내용이 많음. Expo란? Expo는 React Native개발을 쉽게 만들어주는 개발 도구 별도의 Xcode나 Android Studio가 없어도 개발 가능 Expo SDK를 제공해주어 카메라, 위치, 알림 등의 다양한 기능을 제공 복잡한 빌드 배포를 생략하고 쉽고 간편하게 앱개발을 할 수 있게 하는 도구 Expo 설치 초기 환경 세팅 node 설치 Expo-cli 설치 homebrew 설치(mac) +watchman 설치(수정된 코드를 자동으로 적용해주는 Fast Refresh 도구) 휴대폰 앱 'Expo Go' 설치(안드로이드는 'Ex..

프로젝트 파일마다 Public 미디어 파일의 경로가 달라 매번 잦은 실수를 반복하곤 하는데요. 이를 간단히 해결하는 방법이 있습니다. 바로 상대경로로 쓰여진 주소를 절대경로로 바꿔주는 것입니다. index.html에서와 js파일에서 쓰는 방식이 조금 달라서 아래 예시를 보고 그대로 따라하시면 되겠습니다. index.html %PUBLIC_URL%/파일명 js process.env.PUBLIC_URL/파일명 참고문서 https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and h..

커뮤니티 사이트 제작 중 사용했던 페이지네이션 모듈을 소개하고자 한다. 간단한 목록 페이지를 만들면서 해당 모듈이 쓰이는 방법을 단계별로 정리해보았다. 설치하기 npm i react-js-pagination Paging 컴포넌트 생성 paging.js import Pagination from 'react-js-pagination'; export const Paging = ({ page, count, setPage }) => { return ( ); }; activePage: 현재 페이지 itemsCountPerPage: 한 페이지당 보여줄 리스트 아이템의 개수 totalItemsCount: 총 아이템의 개수 pageRangeDisplayed: Paginator 내에서 보여줄 페이지의 범위 prevPage..