코딩하는여자. 권냥

axios 백엔드 호출 후 리턴 받는 방법

필자는 리액트를 개발하는 중이다.
React, redux Saga를 이용해 Spring Boot와 Rest Api 통신을 한다.

원래는 아래와 같이 데이터를 받았다.

- api.js -

export const getData = async () => {
    try {
        const res = await axois.get(restApiurl);
                    .catch((error) => {
                        return error;   
                    });
       return res.data
    } catch(e) {
         console.log(e);
    }     
};

만약 디비에서 에러가 나서 HttpStatus  500 에러가 났다고 가정해 보자.
아무리 에러 보내도 try catch 문에 잡히지 않고..
. catch(error)에도 걸리지 않는다.
환장할 노릇이다. ㄷㄷㄷㄷㄷㄷ
테스트해 보니 백엔드가 먹통일 때만 catch문에 걸림...ㅠㅠ
그러니까.  이 상태로는 이벤트 핸드링을 하기 어렵다는 것임.

그렇다면 아래와 같이 수정해 보자!!

export const getData = async () => {
    try {
        return await axois.get(restApiurl, {validateStatus: () => true});
                    .then(function(response) {
                        //console.log(response)
                        return response.data
                     }
                     .catch(function(error) => {
                        return error;   
                     });
    } catch(e) {
         console.log(e);
    }     
};

위 코드를 보면 .then, .error 구문에 function() 을 넣어주었다!!

이렇게 해서 console.log(response)를 찍어보면 에러코드가 나온다!!!
이때 url을 전송할 때 validateStatus: () => true 를 같이 보내면 리턴 받는 것들을 json 형태로 받을 수 있다.

엄청나게 구글링 해서 얻은 결과!! 뿌듯하다!!

도움 되셨거나 더 많이 아시는 분들은 댓글 달아주세요^^
소통은 저에게 힘이 된답니다. ㅎㅎ

wrapbootstrap.com (부트스트랩 테마 판매 사이트)

asios.post URL, parameter 를 전송할 때 특수문자 때문에 400 에러가 나는 경우가 많다.

구글링 해보면 encodingURL 등등을 사용하라 해서 넣어봤지만 매끄럽지 않았다.

주로 오류 나는 것이 &, %, # 등등..
이걸 전부 다 replaceAll 해주기엔 한계가 있다.

물론, 정규식으로 체크하는 로직은 몇 줄이면 해결 되지만..

한번 인코딩 하면 다시 받아올 때 디코딩을 해줘야 하고.. 여간 번거로운일이 아닐 수 없다.

Node.js를 사용하는 FrontEnd 환경에선
qs 라이브러리를 사용하자.

매우 쉽다. 상단에 1줄 선언 하고 사용하면 그만임.

const qs = require('qs');
axios.post('http://something.com/', qs.stringify({ foo: 'bar#$&' }));

출처: Axios 러닝 가이드

React 에서 window.scrollTo 또는
scrollRef.current.scrollIntoView 가 안되나요?

아래 로직을 추가해보세요.

useEffect(() => {
    setTimeout(() => window.scrollTo(0, 0));
}, []);

//스크롤 이벤트(맨 위로 버튼 클릭시)
const goToTop = () {
    topRef.current.scrollIntoView({ behavior: 'smooth' });
};

여기서 behavior: 'smooth' 를 써주면 스크롤이 좀 더 부드럽게 이동됩니다.

Ref를 주지 않고 아래 방법대로 하면 된다고 구글신이 알려주었으나.. 저는 작동을 하지 않았습니다. 댓글로 이유를 알려주실 분 있으실까요?
1. window.scrollTo(0,0)
2. document.getElementById("root").scrollTo(0,0)

저는.. 1, 2번 방법으로 하고 싶었으나.. 어쩔 수 없이 최상단 div에 ref를 걸어두고 했습니다.

JAVASCRIPT Object, Array 특정 key값 삭제 시 filter() 사용하기

<예제>
var testArr = [
    { id: 1, name: "홍길동" },
    { id: 2, name: "홍이동" },
    { id: 3, name: "홍삼동" }
];

var newArr = testArr.filter((item) => item.id != 3);
console.log( newArr);

//결과
0: { id: 1, name: "홍길동" }
1: { id: 2, name: "홍이동" }

Jira 커스트마이징 할 때 login 관련 텍스트를 수정하고 싶은데 뭐 무슨 수를 써도 수정이 안될 때가 있었다. 그야말로 대환장파티.. 분명 소스는 맞는데 왜 안되는걸까..  한참을 고민하다 찾았다.

우선, Jira 설치폴더로 가서 web.xml을 열어보자

위치: 설치폴더/Atlassian/Jira/atlassian-jira/WEB-INF/web.xml

아래 2개의 엘리먼트를 찾아서 주석 처리한다.

    <servlet>
        <servlet-name>jsp.login_jsp</servlet-name>
        <servlet-class>jsp.login_jsp</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>jsp.login_jsp</servlet-name>
        <url-pattern>/login.jsp</url-pattern>
    </servlet-mapping>

이제 Jira를 재기동하고 확인해보자. 

Jira 한글 깨질 때. 인코딩 추가하기

Jira 커스트마이징을 할 때 로그인 페이지에 username -> 아이디 와 같이 한글로 바꿔야 할 경우 한글이 깨지면 아래와 같이 추가해보자.

Jira 설치폴더로 가서  /Atlassian/Jira/conf/server.xml을 열어서 <Connector 로 시작하는 태그를 찾아보자.

<Connector acceptCount="100" bindOnInit="false" connectionTimeout="20000" ...... />

위 태그를 찾았다면 그 안에  URIEncoding="UTF-8" 을 추가해준다.

그리고 한글이 깨지는 jsp 페이지를 찾아서 맨 위 상단에 아래와 같이 추가한다.

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

Jira 재기동 후 확인해보면 한글이 깨지지 않고 잘 나오는 것을 확인할 수 있다.

이 방법은 tomcat을 사용하는 대부분의 프로그램에서 적용이 가능하다.

<jsp> 페이지 url, 서버, 로컬 ip 가져오기

<!-- 로컬 정보 -->
Local IP : <%= request.getRemoteAddr() %><br>
Local Host : <%= request.getRemoteHost() %><br>

<!-- 서버의 기본 경로 -->
Context : <%= request.getContextPath() %> <br>
URL : <%= request.getRequestURL() %> <br>
URI : <%= request.getRequestURI() %> <br>
Path : <%= request.getServletPath() %><br>
Server Port : <%= request.getServerPort() %><br><br>
서버 Root 경로 : <%= application.getRealPath("/") %><br>
서버 Root 경로 : <%= request.getRealPath("/") %><br>

<!-- 서버 ip, port -->
String strServerIP = request.getServerName();                            // 서버 ip
String strServerPort = Integer.toString(request.getServerPort());        // 서버 port
String serverRootUrl = "http://"+ strServerIP +":"+ strServerPort +"/";  // Root 경로
out.println(serverRootUrl );

[CSS] <br> 태그 줄 간격 조절하기 line-height

아래와 같이 <br> 태그가 있는 곳을 <span> 또는 <td> 등으로 둘러싸고

line-height:170%; 넣어주면 된다. 

수치는 커질 수록 간격이 넓어진다.

<div style="line-height:170%; font-size:12px; font-family:돋움;">
   가나다라 abcd 1234<br>
   가나다라 abcd 1234<br>
   가나다라 abcd 1234<br>
   가나다라 abcd 1234
</div>

[Oracle] 문자형을 숫자형으로 바꾸기 / Null인 경우 디폴트 주기 / Max 함수 사용하기

테이블 생성 시 varchar 등의 타입으로 컬럼을 만들었을 때 max와 같은 함수를 사용할 수 없다.

(예: 문자형은 숫자 9를 숫자 10보다 더 높은 것으로 인식하기 때문)

따라서 Max 함수를 사용하려면 숫자형으로 형 변환이 반드시 필요하다. 

이 때, 주의할 점은 그 문자형 컬럼값이 null인 경우도 있다는 것이다. 

숫자형일 때는 이럴 경우 '0'으로 반환해야 할 때도 있다.

1. 문자형 -> 숫자형으로 바꾸기

 -> TO_NUMBER

SELECT TO_NUMBER(CHAR_COL) FROM DUAL;

2. NULL일 때 DEFAULT '0' 주기

  --> NVL

SELECT NVL(TO_NUMBER(CHAR_COL),0) FROM DUAL;

3. 위 내용으로 MAX 함수 사용하기

SELECT MAX(NVL(TO_NUMBER(CHAR_COL),0)) FROM DUAL;