개발51 게시판 만들기(Toast UI Editor 추가) 이번에는 게시판을 작성해보고자 합니다. 게시판을 어떻게 작성해야 할지 고민을 하면서 구글링을 하는 순간 toast UI라는 디자인이 괜찮은 Editor가 있어 이를 활용하기로 하였습니다. 아래와 스크린샷과 같이 https://ui.toast.com/tui-editor TOAST UI :: Make Your Web Delicious! TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud. ui.toast.com 우선 설치를 위해서 설치 방법부터 확인을 해보았습니다. npm install --save @toast-ui/react-editor 명령을 통해서 설치를 하라고 나와 해당 방법으로 설치를 하려 하였으나 react 18.2.0.. 2023. 1. 2. react_웹사이트 만들기_3.네비게이션바로 사이트 이동 안녕하세요. 오랜만에 react 관련 글을 쓰게 되었네요. 이번에는 전에 만든 네비게이션바를 통해서 사이트 이동을 하도록 하겠습니다. 우선 react-router-dom을 통해서 기능을 실현할 계획입니다. 터미널에서 npm install react-router-dom 을 입력하셔서 설치부터 해줍니다. 설치가 완료 되면 전에 components 폴더에 만든신 것과 같이 home.js, features.js, pricing.js 파일을 만들어 줍니다. 이후 App.js로 이동 후 수정이 들어갑니다. import './App.css'; import Navigation from './components/nav'; import Home from './components/home'; import { BrowserR.. 2022. 10. 18. 사이드바에 배너 달기 좌측 사이드바에 쿠팡 배너 다는 것에 대해서 문의를 주신 분이 있어 오랜만에 블로그 글을 쓰네요.^^ 위에 이미지에 빨간 칸처럼 추가 하는 방법은 생각보다 간단합니다. 우선 쿠팡파트너스 사이트에서 배너를 하나 생성합니다. (https://partners.coupang.com/) 이후 하단에 파트너스 코드를 복사를 합니다. 이후 플러그인을 추가해 줍니다. 이후 꾸미기 > 사이드바 에서 HTML 배너출력 옆에 + 버튼을 눌러서 추가 해 줍니다. 오른쪽에 추가적으로 HTML 배너출력에 마우스를 가져가면 편집을 하실 수 있는데 편집 후에 아까 쿠팡파트너스에서 생성한 배너의 코드를 복사해서 붙여넣기 하시면 됩니다. 적용을 하시고 나면 이후 사이드바에 배너가 생성된 것을 확인하실 수 있습니다. 이 방법을 응용하시면.. 2021. 6. 8. react_웹사이트 만들기_2. 네비게이션바 만들기 이번에는 웹사이트에 가장 상단에 네비게이션바를 만들겠습니다. 우선 디자인에 아주 센스가 없는 저는 bootstrap의 도움을 받으려고 합니다. 아래 사이트를 들어가 bootstrap을 설치 방법을 참고하여 설치를 시작하도록 하겠습니다. https://react-bootstrap.github.io/ https://react-bootstrap.github.io/ React Bootstrap The most popular front-end framework Rebuilt for React. Current version: 1.0.0-beta.17 react-bootstrap.github.io 해당 사이트를 접속하여 Get started를 눌러 설치 방법을 보입니다. npm을 이용해서 설치를 하라고 나오네요. 저.. 2020. 3. 18. 이전 1 2 3 4 5 ··· 13 다음
