개발 & IT 정보

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

프론트엔드 개발 코딩 강의 사이트 추천 3(번외 사이트) 프론트엔드 개발 공부 사이트들을 정리해 보았습니다. 처음 개발 공부를 시작하시는 분들께 도움이 되기를 바랍니다! 1. 생활코딩 (https://opentutorials.org/course/1) 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그 opentutorials.org 개발 입문으로 추천하는 사이트입니다. Web, Database, 언어, 클라이언트, 서버, 데이터 과학, 개발도구, 프로젝트 관리 카테고리로 나누어져 있습니다. 모든 콘텐츠들은 무료로 제공하고 있습니다. (유튜브 영상) 유료강의..

이전 글 보러 가기 👉 [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..