반응형 개발 Study49 [React/NextJS] 무료 웹 에디터 TinyMCE 사용하기 무료 웹 에디터 TinyMCE 사용하기 지난번 CKEditor로 image load까지 커버하려고 했으나 webpack 설정 및 다른 plugin을 사용할 경우 dependency가 더 복잡해지고 파일 수 및 용량도 많아져 좀 더 가벼운 TinyMCE로 대체해야 했다. (Next framework이랑 좀 충돌이 많기도...) 찾다보니 기본 Image 라는 OpenSource plugin에 input file uploader를 연결하여 blob형태로 이미지를 캐쉬에 저장하는 예제가 있었다. 좀 더 가볍고 손쉽게 사용이 가능한 아기자기하게 생긴 TinyMCE를 사용해보자. 1. TinyMCE 설치하기 https://www.tiny.cloud/docs/tinymce/6/react-zip-host/ Hostin.. 2023. 1. 26. [React/NextJS] 무료 웹 에디터 CKEditor 사용하기 React에 CKEditor5 추가하기 React에서 많이 쓰이는 오픈소스 에디터들 중 두가지가 후보에 있었는데 하나는 CKEditor5고 https://ckeditor.com/ckeditor-5/ CKEditor 5 | Powerful Framework with Modular Architecture Easy to customize RichText Editor with a powerful framework, a modular architecture, and modern features like Collaborative Editing. ckeditor.com 나머지 하나는 Tinymce 다. https://www.tiny.cloud/ The Most Advanced WYSIWYG Editor | Trust.. 2023. 1. 25. [NextJS] KaKao Map API로 좌표 얻기- Geocode사용하기 NextJS 에서 KaKao Map API 사용하기 1. API Key 발급받기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 개발자 페이지에서 API를 적용할 앱을 생성한다. 아래 글을 참고하면 된다. 2022.09.14 - [개발 Study/React] - [Next.js] Kakao 로그인 API 발급 받기 [Next.js] Kakao 로그인 API 발급 받기 Kakao 로그인 API 발급 받는 법 1. 가입하기 https://developers.kakao.com/ Kakao D.. 2023. 1. 13. [Node.js] 공공 오픈 API 이용하기 - 지하철 노선 전체 정보 가져오기 지하철 노선 전체 정보 오픈 API 1. API 신청하기 오픈API를 여러 방면으로 찾아봤는데 내가 원하는 데이터는 지하철 노선 전체 정보와 노선에 따른 역 정보였기 때문에 하단 링크에 있는 API를 사용하게 되었다. https://data.kric.go.kr/rips/M_01_02/detail.do?id=431&service=trainUseInfo&operation=subwayRouteInfo 철도 데이터 포털 열차이용정보 도시철도 전체노선정보 일반/고속철도 제공기관 : 전국도시철도운영기관등록일 : 2019.05.13활용신청 건수 : 230건 도시철도 전체노선정보 활용신청 기본정보 서비스 설명 도시철도 data.kric.go.kr 활용 신청 버튼을 클릭하고 요청하는 정보를 입력한 후 등록 버튼을 누르면.. 2022. 12. 16. [Sequelize] ForeignKey로 Cascade delete 적용하기 Sequelize Cascade Delete 적용 1. Model Column에 외래키 설정 자식 테이블에서 외래키로 설정된 Column에 reference 옵션으로 아래와 같이 외래키를 설정해주고 onDelete 옵션에 "CASCADE"를 설정해 준다. export class PersonB extends Model { @Column({ type: DataTypes.INTEGER, primaryKey:true, references: { model:'member-backup', key:'member_id' }, onDelete: "CASCADE"}) member_id!: number; //회원id @Column({ type: DataTypes.STRING(20), allowNull: true}) name!.. 2022. 12. 15. [GraphQL/Typescript] GraphQL로 이미지 파일 업로드하기 GraphQL로 파일 업로드하기 1. grpahql-upload 설치하기 Graphql로 파일 업로드를 하기 위해선 Upload라는 Scalar Type을 다룰 수 있게 돕는 graphql-upload 을 npm으로 설치해야한다. 그러나 Typescript를 쓰는 분들은 아래와 같은 에러를 많이 접할 것이고 고치고 쓰는 분들도 있겠지만 나는 버전 충돌과 현재 설치된 다른 모듈들에도 영향을 주기 때문에 grpahql-upload-ts를 설치했다. 아래 두 가지 경우에 대해 링크를 첨부하니 본인에게 맞는 방법으로 설치해보자! 1-1. graphql-upload-ts 설치 https://www.npmjs.com/package/graphql-upload-ts?activeTab=readme#type-fileupl.. 2022. 12. 14. [NextJS] SSR에서 Cookie 값 저장하고 가져오기 SSR에서 Cookie값 저장하기 + 가져오기 1. SSR에서 Cookie값 저장 방법 쿠키관련 정보는 이 글에서 생략하며, NEXT에서 쿠키를 다루는 방법에 대해 설명한다. NEXT를 사용하는 이유가 SSR을 적용하기 위해서인데 getServerSideProps()함수를 통해 페이지가 로드되는 경우 서버사이드 렌더링을 할 수 있다. 이 함수 내에서 NextContextPage를 받아오면 query, response, request에 대해 볼 수 있다. Client에 뿌려질 response의 헤더에 쿠키 값을 저장할 수 있는데 저장 방법은 아래와 같다. export async function getServerSideProps(context : NextPageContext) { const { query, .. 2022. 11. 10. [Node.js] 공공 오픈 API 이용하기 - 사업자 휴/폐업 실시간 조회 공공데이터 포털 오픈 API 사용법 현재 구현 중인 프로젝트에서 사업자 등록 번호를 입력하면 해당 사업자가 사업을 계속하고있는지 휴업인지 폐업인지 여부를 알아야하는 기능이 필요했다. 마침 검색해 보니 정부에서 국세청 정보를 무료로 오픈API를 이용하여 실시간 조회를 가능하게 했다는 기사를 보고 직접 구현해보기로 했다. 1. 공공데이터 포털 가입 및 API 활용신청 https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15081808 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Da.. 2022. 10. 20. [Node.js] 비밀번호 암호화(bcrypt HASH) bcrypt를 이용한 비밀번호 암호화 1. bcrypt 란? node에서 비밀번호와 같은 보안이 필요한 데이터를 hashing 하는데 유용한 모듈이다. 요즘은 그냥 암호화가 아니라 salt 를 이용한 기법으로 암호화를 하는데 이번 글에선 salt를 추가한 암호화에 대해서 다룬다. Salting은 같은 입력값에 대해 동일한 해쉬값을 출력하는 문제를 방지하기 위해 난수를 추가하여 해시함수에 집어 넣는 개념이다. "비밀번호 + Salt 값"의 해시가 함께 DB에 저장된다. $npm install bcrypt //typescript 이용시 아래도 추가 설치 $npm install @types/bcrypt 2. 암호화 파라미터로 받은 password를 saltRound를 10회를 돌린 후 마지막 값을 집어 넣는다.. 2022. 10. 6. 이전 1 2 3 4 5 6 다음 반응형
