계획대로 되지 않는 것이 인생

login을 위해서, 같은 form 안에 아래와 같이 input을 구성했다. 

return (
	<form onSubmit={_onSubmit}>
    		<input name='id' ... />
        	<input name='password' type='password' ... />
	</form>
)

id input에서 tab을 통해 이동하면, 찰나에 OS ime가 잠깐 한글로 바뀌었다가 영어로 바뀌는 케이스가 있다.(테스트 환경: macOS)

이걸 위해서는 정말 간단하게 하나 추가해주면 된다.

그것은 바로 ...

inputMode='text'

return (
	<form onSubmit={_onSubmit}>
    		<input name='id' ... />
        	<input name='password' type='password' inputMode='text' ... />
	</form>
)

inputmode="text"의 동작 원리

• 목적: 브라우저나 운영체제에 "텍스트 입력이 필요하다"는 메세지를 전달하기 위함
• IME(입력기) 상태: inputmode="text"를 사용하더라도 IME는 기존 상태를 유지합니다.
  • 만약 한글 IME가 활성화된 상태라면 한글이 입력됩니다.
  • 영어 상태라면 영어가 입력됩니다.

inputmode 값에 따른 동작 예시

좀 더 자세한 이유는 아래로 ...

- https://run-a-way.tistory.com/70

https://nykim.work/84

https://nykim.work/85

https://velog.io/@cheal3/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EA%B3%BC-%EB%B7%B0%ED%8F%AC%ED%8A%B8

날리게 되어 슬픈 마음에 작성중

labelColor = "#1ab394";
labelColor = "#D9556E";
labelColor = "#FF7D95";
labelColor = "#F5B345";
labelColor = "#6B5A3E";
labelColor = "#B3EB44";
labelColor = "#5C6B3F";
labelColor = "#B369F0";
labelColor = "#5C4D69";
labelColor = "#D97C5F";
labelColor = "#B56750";
labelColor = "#5A8AE8";
labelColor = "#5580D9";
labelColor = "#4F45F5";
labelColor = "#0598E6";
labelColor = "#000000";

1. 동적으로 datalist option을 추가하기

HTML

<div>
	<input id="snack" name="snack" list="snackList" type="text"/>
	<datalist id="snackList">
	</datalist>
	<input type="hidden" name="snack" id="snack-hidden">
</div>

JS

var snackData = {};

var snackListOpt = [];


//최초 설정
function addSnackOpt(){
	//response는 받아온 값
  response.forEach(function(res){
  		//data-value가 보낼 값, value가 보여질 값.
      var tmpStr = `<option data-value="${res.money}" value="${res.name}"></option>`
      snackListOpt.push(tmpStr);
  });
  $('#snackList').append(snackListOpt);


  $('#snackList option').each(function(i,el){
      snackData[$(el).data("value")] = $(el).val();
  });
}


//실제 전송할 때
function realValue(){
    var snackMoney = $('#snack').val().trim();
    snackMoney = $('#snackList [value="'+snackMoney+'"]').data('value');
    return snackMoney;
 }

삽질이 힘들었다.

[참고 블로그]

1. https://cbw1030.tistory.com/293

2. http://jsfiddle.net/guest271314/j7ehtqjd/13/

#1. 내맘대로 봄

#a490ff / #ff90d1/ #bcff90

파스텔 톤. 배경으론 적절치 않다. 특히 초록색 배경에 하얀 글자를 넣으면 대체적으로 보이지 않는 편이다. 너무 예쁜 보라색을 발견해서 넣어봤다.

#1.5. 내맘대로 봄- 배경

#735bff / #ff5bbb / #a5ff5b

위의 색을 좀 더 찐하게 한 것. 배경으로 적절하지만 프로젝트랑은 안어울려서 기각. 초록색에 하얀 글자가 마찬가지로 잘 안보인다.

#2. 국룰 무지개

#ff5e6b / #ff9c40 / #5ce294 / #57abfa / #d690ff

배경으로 쓰기 좋은 원색 뙇 컬러. 하얀 글자 넣어도 잘 보임.

회색은 #e0e0e0, 검정은 #222222 가 어울린다.

노란색 잘쓰기 정말 힘들다.초록색은 배경으로 쓰기 정말 한정적이다.분홍색은 참 대단한 색이다. 뭘 하던 분위기를 핑크핑크하게 만든다.

문자열을 자를 때, 무심코 음절 갯수로 subString으로 자르게 되면

한글 + 영문 혼용의 상황에서, 굉장히 불편한 상황을 마주할 수 있다.

같은 여섯글자일 때, 한글과 영어가 각각

여섯글자입니다

abcde

로 보이는 현상을 마주할 수 있다. 

본인은 정해진 넓이의 칸에 글자가 넘치면 자르는 함수를 만드려고 했는데,

글자가 아니라 byte 단위로 잘라야 편안한 UI를 볼 수 있다.

(초보 개발자지만 이런 디테일에 신경쓰는 저, 비정상인가요?)

자르는 방법은 아래와 같다.

    var textEllipsis = function(data, offset){ //data: 자르고자 하는 str, offset: 자르는 byte 길이
        dataByteLength = (function(s,b,i,c){ //data의 길이를 byte로 변환한다
            for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
            return b;
        })(data);

        if(dataByteLength > offset){
            for(b=i=0;c=data.charCodeAt(i);) {
                b+=c>>7?2:1;
                if(b > offset) break;
                i++;
            }
            return data.substring(0,i)+'…';
        }else{
            return data;
        }
    }

[참고 블로그]

https://programmingsummaries.tistory.com/239

https://zionh.tistory.com/68