개발 & IT 정보

목차 문제 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..

문제 Next에서 scss 사용하던 중, 자동으로 생성되는 mui클래스에 스타일 적용이 안됨 SCSS SCSS을 특정 파일에 미리 정의한 스타일을 적용하기 위해 classnames bind함수를 사용하였다. 기본적으로 module.scss을 사용한다면 아래처럼 객체형으로 적용할 수 있다. import styles from './PopoverStyle.module.scss'; 하지만 class name이 camelCase가 아니면 오류가 발생한다. 그래서 classnames bind함수를 사용하였다. 방법1 import styles from './PopoverStyle.module.scss'; import classNames from 'classnames/bind'; const cx = classNames..

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

문제 로딩 화면 구현을 위해 expo-app-loading을 적용했는데, 에러 메시지가 나왔다. expo-app-loading is deprecated in favor of expo-splash-screen... expo-app-loading이 나오면서 더 이상 사용하지 않는 라이브러리라고 함. 삭제 후 현재 제공하고 있는 라이브러리를 적dyd해야 한다. 해결 1. expo-splash-screen install & import expo-splash-screen을 설치하고, import한다. npx expo install expo-splash-screen import * as SplashScreen from "expo-splash-screen"; 2. useEffect를 사용해 font가 load 되기 ..

블로그 썸네일 만들기 사이트 추천 Banner Maker https://banner.godori.dev/ Banner Maker Create a simple banner and download it. banner.godori.dev 문구와 배경으로만 이루어진 심플한 썸네일 이미지를 만들 때 자주 사용하는 사이트입니다. 배경색, 폰트 색을 자유롭게 변경할 수 있고, 사이트에서 제공하는 무작위 이미지를 배경으로 사용해 보실 수 있습니다. 썸네일 크기도 조절할 수 있어 썸네일 이미지를 만들 때 유용하게 사용하실 수 있을 것 같습니다. Banner Maker 사용법 사용법이 간단하여 굳이 설명이 필요하지 않겠지만, 썸네일 생성하는 순서를 적어 보자면 아래와 같습니다. 원하는 크기 width, height 선택 ..

저작권 없는 이미지, gif 사이트 모음 1. Pixabay (픽사베이) https://pixabay.com 우주, 자연, 동물 등의 다양한 이미지를 찾아볼 수 있습니다. 이미지 말고도 저작권이 없는 비디오, 음향, gif를 제공해 줍니다. 2. unsplash unsplash는 유료 무료 이미지를 모두 제공합니다. 필름사진, 길거리사진, 패션&뷰티 등의 다양한 카테고리를 볼 수 있습니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 3. pexels https://www.pexels.com/ko..

bitbucket 구글계정으로 push를 했는데 패스워드 인증 실패 에러문구가 떴다. fatal: Authentication failed for ... 구글링 결과 구글계정일 때는 app password를 등록해서 인증이 가능하다고 한다. App password 설정 1. bitbucket 에서 계정 로그인 2. 계정아이콘 클릭 → 드롭다운 메뉴에서 Personal Bitbucket settings 클릭 3. App passwords 메뉴 클릭 → Create app password 클릭 4. Label명과 아래 요소들을 확인하여 필요한 권한을 선택하고, Create를 선택 Create를 하고나면, 아래와 같이 생성한 app password가 나온다. ※ Close를 선택하고 나면 다시 app passw..

커뮤니티 사이트 제작 중 사용했던 페이지네이션 모듈을 소개하고자 한다. 간단한 목록 페이지를 만들면서 해당 모듈이 쓰이는 방법을 단계별로 정리해보았다. 설치하기 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..