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..
Swagger 설정을 할 때마다 봤던 WARN 이였는데 크게 문제가 되지 않아 신경을 쓰지 않았지만, 자꾸 눈에 거슬려 해결방법을 찾았다. Swagger 버그로 보이는데 오류가 난 해당 부분을 dependcy에서 exclusion 하면 된다. maven io.springfox springfox-swagger-ui 2.9.2 io.springfox springfox-swagger2 2.9.2 io.swagger swagger-annotations io.swagger swagger-models io.swagger swagger-annotations 1.5.21 io.swagger swagger-models 1.5.21 gradle compile("io.springfox:springfox-swagger2:2...
간혹 git pull, git push를 할 때마다 사용자 자격증명을 묻는 경향이 있다. 아래 git 명령어로 사용자 저장이 가능하다. 전체로 적용하고 싶을 때는 --global 옵션을 추가하면 된다. # 사용자 이름, 이메일 설정 git config (--global) user.name "userName" git config (--global) user.email "userEmal" # 사용자 자격증명 저장 git config (--global) credential.helper store
'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 값과는 다른 의미이다. 사용자의 이름, 성별, 생년월일,..
github.com/firebase/firebaseui-web firebase/firebaseui-web FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices. - firebase/f... github.com 언어 지원범위 - https://github.com/firebase/firebaseui-web/blob/master/LANGUAGES.md git clone https://github.com/firebase/firebaseui-..
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..
요즘은 프로젝트가 Cloud 환경이 추세이다. AWS, GCP 등 실제 사용하는 인스턴스는 private subnet에 숨기고, public에 bastion host라는 걸 둬서 접근하는 방식이 있다. 이렇게 하면 관리 포인트를 하나만 만들고 그 외의 접근이 원천적으로 불가능해지기 때문이다. 개발자들이 Cloud 환경에 구축되어 있는 DB에 접근해야 된다고 생각해보자. 원척적으로는 개발자들의 모든 IP 또는 접근 가능 IP대역을 등록해야 한다. 하지만 bastion host를 사용하면 개발자 모두 쉽게 접근이 가능하다. SSH 또는 MobaXterm을 이용해서 터널링 할 수 있다. SSH ssh -L 33306:{target-private-ip}:{port} -i ./bastion.pem ec2-user..
- Collection
- 제주도 3박4일 일정
- 정렬 알고리즘
- 자바
- SQL
- sort algorithm
- 오라클 내장 함수
- 프로그래머스
- 개발환경
- Tomcat
- Maven
- 자바스크립트
- 리액트
- 리눅스 명령어
- 리액트 16
- Eclipse
- javascript
- React
- 오라클
- Java
- 제주도 여행
- 이직
- 경력관리
- Linux 명령어
- spring
- 회고
- 프로그래머
- 성능분석
- 소프트웨어공학
- effective java
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |