레퍼런스 마이닝

axios를 사용할 때 get 메서드로 배열 데이터로 요청을 하게 되면 400 에러 잘못된 요청이라고 오류나 난다. 서버 Controller에서 처리하거나 axios get 요청할 때마다 paramsSerializer 직렬화를 추가해주면된다. 하지만 get 요청할 때마다 직렬화 옵션을 넣는다는 게 여간 귀찮고 알맞은 방식의 코드는 아니다. 아래와 같이 axios를 생성할때 옵션을 지정하면 간단히 해결된다. import qs from 'qs'; const instance = axios.create({ headers: { 'Content-Type': 'application/json', }, // `paramsSerializer`는`params`를 직렬화(serializing) 하는 옵션 함수입니다. // (..

Cloud Firebase를 사용하여 실시간 화면 공유를 할 수 있다. PC 또는 태블릿에서 데이터를 입력하면 미치 공유가 되는 것처럼 가능하다. 예를 들어 은행업무를 보면 계좌 개설이나 대출을 받을 때 동의서를 태블릿으로 서명 동의를 받는 것을 예를 들 수 있다. 아래 예시는 키 몸무게를 입력받아 Cloud Firebase 데이터를 적재하고 실시간으로 다시 화면에 표출하는 예시이다. CloudFirebase.js import React, { useEffect } from 'react'; import firebase from 'firebase'; import 'firebase/firestore'; const firebaseConfig = { apiKey: 'AIzaSyCpJV8njsbs9h-zDagtND..

'use strict'; // var (don`t ever use this) // var hoisting - 어디에 선언하는가에 관계 없이 선언을 가장 위로 끌어 올리는것 // has no block scope - 블럭 스콥의 개념이 없다. // let - Mutable // Variable - 변수 (변경될수 있는 값 read/write) // let (added in ES6) // global 변수는 어느곳에서나 접근이 가능하다. // global 변수는 어플리케이션이 시작할때부터 끝날때까지 메모리에 올라가있기 때문에 최소한으로 사용해야한다. let globalName = 'global'; { let name = 'ref'; console.log(name); name = 'ref-m1'; consol..

import React, { useCallback, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; /* * ImageWidthPlaceholder * 이미지 로드 전 대체 이미지 표시 */ const ImageWithPlaceholder = ({ width, height, src, alt, onClick }) => { const [source, setSource] = useState('/images/img_profile_edit_nodata.png'); // 기본 이미지 const [imageWidth, setImageWidth] = useState(width); const [imageHeight, setImageHeigh..

Firebase 전화번호로 로그인하기를 활용한 인증 샘플이다. 기본적으로 전화번호 인증은 팝업이 뜨지만, 팝업 없이 사용할 수 있는 코드이다. 간단하게 기능적으로만 뼈대만 만들었으며, 살은 여러분들이 붙여서 유용하게 사용하면 된다. 간단한 전화번호 input과 인증 요청 버튼, 인증코드 input과 인증 확인 버튼으로 구성된 화면이다. 전화번호를 넣고 인증 요청을 누르면 간단하게 로봇이 아님을 증명해야 하는 퀴즈가 나온다. 인증 요청을 하면 입력된 전화번호로 Firebase에 등록된 도메인을 기반으로 코드가 전송된다. 이후 인증 확인을 누르면 인증이 완료된다. 인증이 완료될 때 uid라는 값이 특정되어 오는데, 이 값은 본인을 식별할 수 있는 ci 값과는 다른 의미이다. 사용자의 이름, 성별, 생년월일,..

create-react-app(CRA)로 생성된 프로젝트는 env파일을 활용하여 전역 설정과 같은 환경변수를 사용할 수 있다. 배포 환경에 따른 타이틀, 화면이나, port, API 주소 정보들이 바뀌어야 할 때 유용하다. env 파일 우선순위 NODE_ENV 환경변수는 script에 따라 자동으로 값이 지정되는데, npm start는 development, npm run build는 production, npm test test로 매핑된다. 이점을 활용하면 된다. 여기서 중요한 점이 있는데 env 파일에 대한 우선순위이다. npm start : .env.development.local, .env.development, .env.local, .env npm run build : .env.productio..

SNS 로그인 SNS 연계에 필요한 개발자 및 앱 등록은 간단하므로 샘플 소스 위주로 정리하였다. 실제 로그인 연동 및 사용자 정보까지 연동이 되는 React 코드이다. developers.naver.com NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com developers.kakao.com Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.k..

Jenkins (Exec command) # dev,prod setting config export NODE_ENV="dev" echo $NODE_ENV cd /svc/reference-m1 tar -xvf reference-m1.tar sleep 5 #select node version nvm use 14.15.4 #npm install npm install sleep 5 # run server sh startReference-m1.sh > /dev/null 2>1 & startReference-m1.sh #!/bin/sh APP_NAME="reference-m1" APP_DESC="[reference-m1]" # Process Check sh /svc/reference-m1/stopReference-..

QuillEditor에서 HTML모드가 없어서 code-block를 HTML 모드로 커스텀 하였다. QuillEditor.css .ql-container , .ql-editor { height: 500px; } *[quill__html]{ display: none; width: 100%; margin: 0; background: rgb(29, 29, 29); box-sizing: border-box; color: rgb(204, 204, 204); outline: none; padding: 12px 15px; line-height: 24px; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; position: absolute; top: 0;..

import React, { useState, useMemo } from 'react'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; import * as api from 'lib/api'; const QuillEditor = () => { /** * imageUrl 제어 */ function imageUrlHandler() { const range = this.quill.getSelection(); const url = prompt('please copy paste the image url here.'); if (url) { // 커서위치에 imageUrl 삽입 this.quill.insertEmbed(r..