개발 & 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..

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

목차 문제 CKEditor 에디터 설치 후 추가 plugin을 나온 이슈 원인 기존의 플러그인과 새로 설치한 plugin간에 버전 충돌이 일어난 것 같다. 앞으로 추가할 기능이 없어, CKEditor 5 파일을 직접 다운로드하여 사용해 보기로 한다.\ 참고 링크 https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules Error codes | CKEditor 5 Documentation Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, cus..

프로젝트 파일마다 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..