개발 & IT 정보

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

[문제해결] "Could not resolve dependency: react-redux@"^8.0.0" from the root project" 문제 ckeditor5 패키지 삭제 중 npm 에러가 발생하였다. Could not resolve dependency: react-redux@"^8.0.0" from the root project... Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. 해결 패키지 버전 종속성 문제를 해결하기 위해 아래 명령을 시도해..

[2023] 아이폰으로 gif 움짤 만드는 법(추천 웹 사이트) 아이폰을 가지고 계시다면, 다른 앱 필요 없이 기본 앱으로 쉽게 gif를 만들 수 있습니다! 아래 나온 순서대로 따라 해 보세요. 아이폰 기본 앱으로 gif 만들기 먼저 아이폰 기본 앱인 단축어 앱을 눌러 실행해 주세요. 앱이 안보이신다면 App Store앱에서 '단축어'를 검색해 설치 유무를 확인하시고, 설치가 안되어있다면 설치를 진행해 주시면 됩니다. 단축어 앱을 열면 아래와 같은 메인화면이 뜰 것입니다. 여기서! 하단 메뉴에 '갤러리'를 눌러주면 갤러리 탭으로 이동하는데요. 상단 검색창에 'gif'를 입력하면 아래와 같이 나옵니다. 저는 가지고 있는 비디오를 이용하여 gif를 만들 거라서 세 번째 gif 만들기를 선택했습니다. 선택하고..

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

우리가 반응형 웹사이트를 제작할 때 모바일에서 어떤 식으로 화면에 보이는지 확인해야 할 필요가 있습니다. 그것을 배포 없이 손쉽게 확인하기 위해서 할 수 있는 방법 중 하나인데요. 로컬에서 개발 중인 내 화면을 모바일에서도 쉽게 확인할 수 있는 방법입니다. 모바일 기기에서 아래의 주소로 접속하면 됩니다. 모바일 접속 URL http://[IP주소]:[port주소] IP 확인 IP주소를 확인하고 싶다면 아래 방법을 참고하시면 됩니다. Window OS: https://www.tp-link.com/kr/support/faq/838/ 사이트 참고 Mac OS: 시스템 설정 → 네트워크 → 연결된 와이파이 우측 점 세개 아이콘 클릭해서 네트워크 설정 선택 → 아래 화면에서 IP 주소값 확인 만약 내가 개발하고 ..

간단하게 화면에서 텍스트 타이핑 효과를 구현할 수 있는 라이브러리 웹이나 앱에 텍스트의 동적인 애니메이션 효과를 낼 수 있음 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: 타이핑 시작..

웹 개발 시 유용한 VSCode(Visual Studio Code) 익스텐션 Theme 테마 & 스타일 관련 익스텐션 1. Color Hightlight Color Hightlight는 코드 내에 있는 색상값을 배경색상으로 강조하는 익스텐션입니다. 해당 익스텐션을 사용하게 되면 요소 내에 색상값을 빠르게 식별할 수 있어, 컬러 스타일 정의 시 유용하게 사용할 수 있습니다. 적용된 모습 2. Community Material Theme Community Material Theme 익스텐션은 VSCode에서 사용할 수 있는 테마 관련 확장 기능 중 하나입니다. 여러가지 테마를 제공하고 있습니다. 테마 설정하는 방법은 다음과 같습니다. 사용방법 1. 설정 -> 테마 -> 색 테마 -> 테마 고르기(방향키로 미..

MBTI란? MBTI는 개성을 알아보는 재미있는 테스트 방법 중 하나입니다. MBTI에 들어가면 16가지 성격 유형이 있는데요, 내 자신이 어떤 성격을 가지고 있는지, 어떤 환경에서 최고의 역량을 발휘하는지, 그리고 다른 사람들과 어떻게 상호작용하는지 등을 알아볼 수 있습니다. 이외에도 직업 선택, 인간관계, 연애 스타일 등 여러 분야에서 MBTI 결과를 활용할 수 있어요. 이름 궁합 테스트처럼 재밌기도 하지만, 심리학적인 측면에서 볼 때 매우 유익하기도 합니다! 👉🏻 무료 MBTI 테스트 하러 가기 👈🏻 MBTI 검사를 응용한 여러가지 재미있는 테스트 사이트들이 많이 있는데요, 귀여운 디자인의 사이트 몇 가지 정리해봤습니다. 1. 돼지유형테스트 https://pigmbti.sayun.studio/ 돼지..

문제 bitbucket repository를 생성하고 git에서 원격 저장소를 추가하려고 아래 명령어를 기입했다. git remote add origin https://[레파지토리주소].git 아래와 같은 오류 메시지가 출력된다. error: remote origin already exists. 예전에 작업하고 홀딩됐던 터라 아마 기존에 원격 저장소가 있었던 모양이다. 기존에 원격 저장소를 추가해 놨다면, 기존 원격 저장소를 삭제하고 다시 시도해봐야 한다. 해결 1. 원격 저장소 확인 우선 아래와 같이 현재 프로젝트에 가서 어떤 원격 저장소가 있는지 확인해봐야 한다. git remote -v 그럼 현재 추가되어 있는 원격 저장소 url이 출력될 것이다. 👇🏻예시👇🏻 더보기 origin https://gi..

웹과 앱 디자인에서는 적절한 색상 조합이 중요합니다. 사용자 경험(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가지 색상조합을 인기순으로 확인할 수 있습니다. 간결하면서도 효과적인..