코딩하는여자. 권냥

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 형태로 받을 수 있다.

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

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

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 러닝 가이드

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: "홍이동" }

[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>

https://ram2ram2.tistory.com/16

(css) table 테이블 깨짐 방지 td 줄바꿈방지

안녕하세요. 오늘은 테이블깨짐의 주 원인인 줄바꿈에 대해 알아보는 시간을 가져보겠습니다.

흔히 우리 테이블에서 td 태그 안에 주는 줄바꿈방지 스타일로는

white-space:nowrap;

이걸 많이 씁니다. 그런데 이것 만으로 해결되지 않는 경우가 있으니..

이와 같은 경우는 테이블이 내가 정해둔 td width 값을 유지하지 않고 막 크기를 늘리기도 하고 줄이기도 하고.. 

개발자들의 수명을 단축시킬때가 많지요.. OTL..

복잡한 테이블이고 특정 액션에 따라 tr 또는 td를 유동적으로 바뀌는 상황에서는 테이블이 쉽게 깨지는 경우가 많습니다. 이렇게 말하면 프론트엔드만 개발했던 분들은 도대체 그런 경우가 어딨냐고 물으시겠지만..

예를 들면 이렇습니다.

디자인상 행이 5개, 열이 4개인 테이블이었지만..

특정 조건(통상 if문)에 따라 tr 또는 td를

추가로 더 늘리기도 하고 줄이기도 하고...

어쩔 때는 그 안에 데이터(글자수)가 적었다가 많았다가..

그러다보면 원래 디자인 되어있던 테이블이 막 그 안의 데이터에 따라 깨지는 현상이 발생하는것이죠. 

거기에 호환성보기모드/비호환성보기모드 에 따라 상황이 왔다 갔다.. ie, 크롬에 따라 또 다르고..

이런거 잘못 걸리면 개발자 수명 단축됩니다. 상당히 짜증나요 ㅠㅠ

그런데 나의 이런 고민을 해결해준 단 한 줄의 스타일이 있었으니

그거슨 바로바로!!!!

table-layout:fixed;

와. 저 한 줄만 갖다 넣으면 되는거였어.. ㅠㅠ테이블 깨짐과 이상한 곳에서 줄바꿈이 되는 현상을 해소하기 위해 몇 시간을 고심하던 끝에 찾았다.

생각보다 별거 아니었지만.. 꽤 요긴하게 쓰일것 같은 css ㅋㅋㅋ

댓글과 구독은 저를 춤추게 합니당.

모두모두 즐코딩 하세열~

자바스크립트 브라우저 경고창 안뜨게 닫는 방법

javascript에서 자기자신(브라우저 창)을

닫고 싶을 때 하는 방법은

  1. window.close();

  2. self.close();

이렇게 두가지가 있다.

그런데 창을 닫을때 저렇게 쓰면 창을 닫겠냐는 경고창이 꼭 나온다.

예, 아니오 버튼이 한번 더 나와서 마우스로 굳이 또 클릭을 하게 만든다.

물론, 이 기능이 반드시 필요한 경우도 있다. 그러나 대부분의 경우 닫기 기능을 경고창 없이 진행하게 하고 싶을 것이다. 

자, 그러면 이럴 때 어떻게 하면 좋을까??

window.open("about:blank", "_self").close();

이렇게만 써주면 된다. ㅎㅎㅎ

어라, 닫아야 되는데 open이 써 있어서 이상한가??

약간의 꼼수이긴 하나, 자기 자신의 창에 자식창을 열어서 모두 닫아버리는 방법이라 보면 되겠다.

반대로, 자식 창에서 부모창을 이렇게 닫으려면 어떻게 하지??

opener.open("about:blank","_self").close();

이렇게 하면 된다.

아... 너무 쉽다.

댓글과 구독이 간절하다.. 

개발자들끼리는 꼭 해주세요.. ^--------^

HTML에서 다른 문서 import 하기

HTML의 기능이 막강해지면서 웹사이트를 구축할때 많은 부분이 변화되고 있다.

예전에는 웹사이트를 만들 때 개발자가 서버언어(jsp, asp, php 등)로 개발해서 디자이너가 준 html 코딩을 입히거나 반대로 디자이너가 준 html파일을 개발자가 요리조리 서버언어를 입혀서 만드는 방식이었다.

서버언어로 할 수 있는 것 중에 가장 많이 한 것이 레이아웃을 담당하고 있는 디자인의 공통 선언문들을 include 파일로 분리하여 장기간 유지보수하기 편하도록 개발하는 방식이다.

그런데 요즘 html의 기능들이 막강해지고 ajax, json 등의 서버 언어와 연계할 수 있는 방식들이 발달되면서 프론트엔드 페이지를 굳이 서버언어로 가지 않아도 되는 시대가 왔다. 

마치, 무겁게 입고 다니던 코트를 벗고 초경량 구스다운을 입는 것처럼 웹사이트가 매우 가벼워진 것이다.

그러면 이 때, 떠오르는 생각이 있다. 공통페이지들이 선언되는 것들은 어떻게 빼야 하나?

html에도 include가 지원되나??

필자 역시 순간, 그런 생각이 들었는데..

html에도 항상 사용하던 import 기능이 있다는 사실을.......... 잠시 망각했던 것이다.

대부분 이 기능은 css나 javascript를 직접 참조하고 싶을때 많이 사용했으므로.. 떠오르지 않았던 것 같다.

(그래.. 내가 너무 html을 무시하고 있었구나.. 뭐 그런 생각..ㅜㅜ)

html에서 가장 많이 참조하는 파일들은 대체로 jQuery, jQuery-mobile, Bootstrap, ignite 등등..

그 외 각종 css 까지..

모든 html페이지에서 이 많은 것들을 모두 다 선언하고 사용해야 하는거라면 당연히 공통파일로 빼야 한다.

그러기 위해선 아래와 같이 상단에 공통 html 파일을 선언해두고 사용하면 된다.

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

그리고 그 공통파일에는 아래와 같이 쓰면 된다.

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...


<template>
  ...
</template>

<html>, <head> 이런거 빼고 공통으로 사용할 것들만 넣어주면 끝난 것이다.

그런데 이것은 테스트해본 결과, IE에서는 동작하지 않았다. (정말...안타까운 일이 아닐 수 없다)

동작을 잘 하는지 알아보려면 다음과 같이 스크립트 조건문으로 확인해볼 수 있을 것이다.

if ('import' in document.createElement('link')) {
  // 지원하므로 그대로 진행합니다.
} else {
  // 파일을 로딩하기 위한 다른 라이브러리나 require 시스템들을 사용하세요.
}

만약, IE 버전에서 html 파일을 import하는 방법이 있거나 공통 레이아웃을 관리하는 페이지를 참조할 수 있는 방법을 아시는 분은 주저없이 댓글로 공유했으면 합니다. 

로드/에러 이벤트

<link> 엘리먼트는 import가 성공적으로 로딩되면 load이벤트가 그리고 onerror는  실패가 발생할때 발생한다.

import는 즉시 로딩을 시도하는데 즉시 로드를 피하는 방법은 아래와 같이 onload/onerror 속성을 이용해보자.

<script async>
  function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
  }
  function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
  }
</script>

<link rel="import" href="file.html"
      onload="handleLoad(event)" onerror="handleError(event)">

주의할점은, 이벤트핸들러가 페이지에서 import가 로딩되기 전에 정의되어야 한다는 점이다. 브라우저는 태그를 맞닥들이자마자 import를 시도하려 하므로 만약 함수가 아직 존재하지 않는다면 정의되지 않은 함수명에 대한 콘솔 에러가 날 수도 있기 때문이다.

동적으로 import를 생성하고자 한다면?

var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

더 많은 html import에 대해 알아보고자 한다면 아래 링크를 타고 가세요.

출처: http://www.html5rocks.com/ko/tutorials/webcomponents/imports/

맨 위로 기능은 어떻게 줄까?

컨텐츠가 워낙 길때 스크롤을 하염없이 다시 올리기엔 벅차다.

그래서 항상 우측에 "맨 위로" 또는 "Top" 버튼을 두어 클릭하면 맨 위로 가게 해주기 때문에

사용자의 편의를 생각하면 꼭 있어야 되는 기능이다.

물론 아이폰에서는 화면 맨 위 상단을 터치하면 해당 기능을 실행해주긴 한다.

원래 예전에 HTML 코딩을 할 때 주로 사용했던 방식은 아래와 같이 했었다.

<a href="#top">맨 위로</a>

그러나, 위와 같이 써 주면 접근성 오류는 물론이고 웹표준에도 맞지 않다.

그러면 간단하게 자바스크립트로 구현해보자.

<a href="#" onClick="javascript:window.scrollTo(0,0)">맨 위로</a>

위와 같이 하면 동작이 잘 된다. 

하지만 위 방법대로 하면 <a> 태그에 #기호를 쓰기 때문에 또 웹표준 오류다.

만약 이미지로 top버튼을 준다면 아래와 같이 해보자.

<input type="button" value="맨위로" onClick="javascript:window.scrollTo(0,0)" />
<input type="image" src="top.gif" onClick="javascript:window.scrollTo(0,0)" alt="맨위로" />

이제 완벽하다. 웹표준 오류가 뜨지 않고도 맨위로 기능 맘껏 쓸 수 있다.

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

아래와 같이 <br>이 쓰여질 스타일에 line-height:170% 이런식으로 주면 된다. 

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

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