오랜만에 블로그에 들어와 본다.

얼마전까지 이직한 회사에서 react를 사용했었는데 너~~~무 오랜만에 react를 해보니 바뀐것도 많이 바뀌었고

프론트 개발하기 좀더 편하게 했던거 같다.

 

그리고 조금더 알아보니 요즘 프론트엔드에 vue 이후로도 svelte , qwik , solid  이런 새로운것들이

나타나고 있어서 그중 압도적으로 코드량이 적다고 하는 svelte를 시작해 보려고 한다.

svelte를 시작한 이유

1. 그나마 새로나온 애들중 커뮤니티 사이즈가 좀 있다.

2. 코드량이 압도적으로 적다.

3. qwik나 solid는 react랑 굉장히 유사하다고 해서 좀 다른걸 해보고 싶었다.

4. 원랜 vue를 하려고 했는데 뭐가 또 새로 잔뜩 나왔으니까 새로낭노걸로 해보자는 심리

 

일단 데모버전으로 좀 까작거려 보다가 이것저것 만들어볼 생각이다.

기본적으로 시작하기 위한 명령어 ( 부트스트랩보다 요즘 tailwind가 또 좋다길래 일단 써본다)

npm init svelte@latest my-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

대충 이렇게 명령어 쳐놓고 한번 대충 올려보기나 해보자

이번기회에 타입스크립트도 공부하기 위해 타입스크립트 사용할수 있도록 선택을 했다.

외부망 끊겨있는 플젝도 끝났고 새로 공부하기로 했으니 다시 블로그에 글도 좀 올리고 해야겠다

[javascript] 단어(구분자) 단위 반응형 줄바꿈

 

얼마전 개발자 오픈채팅방에서

가변적인 너비의 div안에 DB에서 가져온 텍스트들을 넣는데

div의 너비가 바뀔때마다 자동으로 줄바꿈이 되어야 하는걸 만들어야 하는데

잘 모르겠다 라는 질문이 있었다.

간단하게 css로 줄바꾸면 되는거 아닌가 했는데

콤마(,) 로 구분되어진 단어들이고 단어안에 띄어쓰기도 들어가 있다고 한다.

즉 콤마로 구분되어진 단어들이 너비에 따라 자동으로 줄바꿈이 되어야 하며

단어들은 띄어쓰기가 포함되어 있고 폰트의 크기도 가변적으로 변할 수 있다고 한다.

 

재밌어 보여서 대충 구현을 해 보았다.

jsbin으로 구현해 보았으니

 

https://jsbin.com/tomojibaku/1/edit?js,output 

 

JS Bin

Sample of the bin:

jsbin.com

 

이 링크에 가서 확인을 하면 된다.

 

코드는

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="textContatiner" class="txt-container">
    
  </div>
</body>
</html>
cs

 

JS

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var data = "일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈,육번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈";
setTxt();
 
// 너비가 바뀔때마다 셋팅을 해준다.
$( window ).resize(function() {  
setTxt();
});
 
 
 
function setTxt(){
    // 너비가 변할때마다 div컨테이너를 비워주고 다시 셋팅
  var container = $("#textContatiner");
  container.empty();
 
  var conW = container.width();
  var dataArr = data.split(",");
 
  // 폰트크기도 가변적으로 바뀔수 있기 때문에 1글자의 너비를 구한다.
  container.append($("<span id='test'>한</span>"));
  var oneW = $("#test").width()*2;
  $("#test").remove();
  
  var lineData = "";
  var subData = "";
  var lineNo = 0;
  var spId ="sp"+ lineNo;
  var sp = $("<span id='"+spId+"'></span>");
  container.append(sp);
  
 
  for (var i = 0; i <dataArr.length; i++) {
     subData = lineData;
     lineData = lineData+","+dataArr[i];
    sp.text(lineData);
    var spW = sp.width();
    if(spW > conW - oneW){
      sp.text(subData);
      sp.css("display","block");
      lineNo++;
      i--;
      spId ="sp"+ lineNo;
      sp = $("<span id='"+spId+"'></span>");
      container.append(sp);
      lineData = "";
    }
    console.log(spW);
  };
  
  
  
}
cs

 

폰트가 바뀔수도 있으니 div안에 한글자를 넣어서 너비를 확인하고 클리어 시킨다음

콤마로 구분된것들을 하나씩 추가 하다가 일정 너비 이상이 되면

이전텍스트로 복원을 하고 새로운 span을 생성해 넣는 식이다.

더 깔끔하게 구현하려면 css도 좀 손봐야 하고

첫번째 문장에 들어가는 콤마 지우고 하면 쓸만할 것 같다.

 

VO에서 값을 가져오기 위해 vo.get이름() 이런식으로 가져오는데

getdata1 ~getdata32 이렇게 숫자증가단위로 여러개가 있는 경우

for문을 돌리면서 가져오고 싶을때가 있다.

vo를 for문으로 값을 가져오기 위해 자바 리플렉션을 사용했다.

저렇게 하면 메소드를 문자열로 바꿔서 불러올수가 있다.

 

map형식을 써도 되긴 하지만 애초에 vo형태를 잡아놓은것도 있고 다른데서 쓰고 있기 때문에

리플렉션의 비용이 조금더 들어가더라도 아래와 같은 방법을 사용 했다.

 

 

 

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
32
33
34
35
36
37
38
39
40
41
42
43
    
        for(int count=1; count < 32; count++){
            
            String time = count+"";
            if(time.length()==1){
                time = "0"+count;
            }
            Class<?> c = vo.getClass();
            
            String value = null;
            try {
                Method method = c.getMethod("getT"+time);
                try {
                    value =  (String) method.invoke(vo);
                } catch (IllegalAccessException | IllegalArgumentException | InvocationTargetException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            } catch (NoSuchMethodException | SecurityException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            HisDataVO updateVO = new HisDataVO();
        
            if(value.equals("")){
                value = null;
            }
            System.out.println(time+"회 :"+value);
            updateVO.setCOUNT(value);
            updateVO.setRECORD_DAY(vo.getRECORD_MON()+time);
            updateVO.setBUILDING_ID(vo.getBUILDING_ID());
            try {
                 result = goalSettingService.updateHead(updateVO);
            } catch (Exception e) {
                // TODO: handle exception
                System.out.println(e);
                System.out.println("업데이트 실패 "+time+"회");
                msg = "수정 실패 하였습니다";
            }
            
            
        }
        
cs

 

 

안녕하세요 시뮬제작자 입니다.

 

세븐나이츠2 포럼 유저 차단기 [웨일, 크롬 브라우저 확장프로그램] 가 업데이트 되어 안내 드립니다.

 

해당 프로그램은 구글크롬에서 검수 완료된 코드이며 

 

사용자에게 특정 권한을 요구하지 않습니다.

 

또한 수집되어지는 데이터 또한 사용자가 차단하고자 하는 유저의 닉네임 뿐이며

 

이는 각 사용자 브라우저에 쿠키로 저장이 됩니다. 다시말해 개발자는 사용자가 누굴 삭제 하는지

 

어떤 행동을 했는지 전혀 알 방법또한 없습니다.

 

 

04.16  sena2Block (포럼유저 차단기 for 웨일브라우저) 1.4 버전 업데이트 안내

 

1. 성능 최적화 업데이트 ( 1.0 버전 대비 약 70% 상승, 댓글 입력시 렉현상 제거)

2. 대댓글 차단

3. 유저 프로필 알람리스트 차단

 

 

 

다운로드 및 업데이트 링크

웨일 : https://store.whale.naver.com/detail/najbpdigjgdncblddolmebfpgadkcgim

크롬 : https://chrome.google.com/webstore/detail/sena2block/kbhofmnkchmglhifnaaheeefgbkjkooo?hl=ko

 

 

사용 방법

설치 후 새로고침 및 브라우저 재시작

차단 : 포럼 게시판에 차단 하고자 하는 유저 오른쪽 클릭 후 차단 버튼 클릭 

차단 해제 : 아무 유저 오른쪽 클릭후 나타나는 차단 유저중 해제하고 하는 유저 옆 해제 버튼 클릭

 

일부 오류

일부 환경에서 차단 새로고침 후 바로 차단기능이 적용이 안되는 현상이 있습니다.

이런경우 게시판 하단의 1.2.3.4 등의 다른 페이지로 이동후 정상 적용되는 임시 해결 방법이 있으니

참고 하여 주시길 바랍니다.

 

 


 

1. 엣지 브라우저

 

엣지브라우저 사용법은 아래 링크의 블로그를 참고 하여 주십시오

https://psychoria.tistory.com/720

 

https://extrememanual.net/32297

 

 

 

2. 모바일 버전 계획

 

현재 대부분의 모바일 브라우저는 성능상의 문제로 인해 모바일버전에선 확장 프로그램을 지원하지 않고 있습니다.

그러나 키위브라우저의 경우 모바일 버전에서도 크롬스토어의 확장 프로그램을 사용할수 있기에

크롬버전이 정상 등록된 이후에 모바일버전에서의 테스트를 진행할 예정 입니다. 그러나 스토어에 등록된 이후에나

테스트가 가능하기 때문에 테스트 기간이 매우 길어질 것으로 보이며 당분간은 모바일 버전에서의

차단기능은 사용하실수 없다는점 인지 하여 주시길 바랍니다.

 

 

감사합니다.



안녕하세요 시뮬제작자 입니다.

 

세븐나이츠2 포럼 유저 차단기 [웨일브라우저 확장프로그램] 가 업데이트 되어 안내 드립니다.

 

 

04.16  sena2Block (포럼유저 차단기 for 웨일브라우저) 1.4 버전 업데이트 안내

 

1. 성능 최적화 업데이트 ( 1.0 버전 대비 약 70% 상승, 댓글 입력시 렉현상 제거)

2. 대댓글 차단

3. 유저 프로필 알람리스트 차단

 

 

 

다운로드 및 업데이트 링크

https://store.whale.naver.com/detail/najbpdigjgdncblddolmebfpgadkcgim

 

 

사용 방법

설치 후 새로고침 및 브라우저 재시작

차단 : 포럼 게시판에 차단 하고자 하는 유저 오른쪽 클릭 후 차단 버튼 클릭 

차단 해제 : 아무 유저 오른쪽 클릭후 나타나는 차단 유저중 해제하고 하는 유저 옆 해제 버튼 클릭

 

일부 오류

일부 환경에서 차단 새로고침 후 바로 차단기능이 적용이 안되는 현상이 있습니다.

이런경우 게시판 하단의 1.2.3.4 등의 다른 페이지로 이동후 정상 적용되는 임시 해결 방법이 있으니

참고 하여 주시길 바랍니다.

 

 


 

1. 크롬 브라우저

많은 분들이 크롬을 사용하고 계셔서 크롬 버전을 기다리고 계신점 잘 알고 있으나

1.0 버전 및 1.2 버전에서 크롬스토어 다운로드시

압축해제가 되지 않는다는 오류창과 함께 설치가 되지 않는 오류가 발견 되었습니다.

 

파일이름중 한글 파일명을 지원하지 않기 떄문에 일어나는 오류로 판단되어 현재 1.4버전을 새로 올려

검토중에 있습니다. 빠르면 오늘 오후 늦으면 다음주중으로 검토가 완료될 것으로 보여 집니다.

 

구글크롬이 네이버웨일에 비해 검토 기간이 길어 개발자로써 어떻게 할수 없는 부분이기에 양해 부탁 드립니다.

 

 

 

 

2. 모바일 버전 계획

 

현재 대부분의 모바일 브라우저는 성능상의 문제로 인해 모바일버전에선 확장 프로그램을 지원하지 않고 있습니다.

그러나 키위브라우저의 경우 모바일 버전에서도 크롬스토어의 확장 프로그램을 사용할수 있기에

크롬버전이 정상 등록된 이후에 모바일버전에서의 테스트를 진행할 예정 입니다. 그러나 스토어에 등록된 이후에나

테스트가 가능하기 때문에 테스트 기간이 매우 길어질 것으로 보이며 당분간은 모바일 버전에서의

차단기능은 사용하실수 없다는점 인지 하여 주시길 바랍니다.

 

 

감사합니다.

 

[kendo ui] grid command destroy 안되는 현상 해결 방법

kendo ui의 grid 기능중 해당 라인을 삭제(제거) 하는 버튼을 추가 할수 있도록

 

command 의 destory가 있다.

 

그런데 해당 버튼을 클릭해도 dataSource의 destory가 아닌 create가 호출 되는 현상이 있는데

 

dataSource의 schema model에 지정하는 id값이 올바르지 못해서 그런것이다.

 

특히나 vo로 받아오는 경우엔 앞단어가 소문자로 치환되서 받아지는 것에 유의 하여야 한다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
schema : {
            model : {
                id : "facility_ID",
                fields : {
                    fields : {
                        FACILITY_NM : {},
                        ASSET_CODE : {},
                        ENERGY_USE_ID : {},
                        CM_STANDARD : {},
                        INSTALLATION_DT : {},
                        EXPECTED_DAY : {},
                        PREVICOUS_DT : {},
                        EXPECTED_DT : {},
                    }
                }
            }
cs

 

저기서 id라고 쓰여져 있는 부분에 id필드명이 정확히 입력이 되어야

 

destory가 호출이 된다.

[es6] es6 map 중간에 안멈추는 현상

 

얼마전 react로 영웅뽑기 시뮬레이터를 만들고나서

어느 회사로 면접을 보러 갔었다.

 

면접중에 react에 jquery를 사용했을때의 이슈에 관해 이야기를 했었다.

 

예~~~~ 전에 뭔가 이슈가 있다는걸 어디선가 봤던 기억은 있었으나

정확히 무슨 이슈인지 무슨 문제인지 몰랐기에 시간 났을때 검색을 해 보았다.

 

아직 다 찾은건 아니지만 일단 jquery로 dom제어를 했을때 문제가 생길수 있다는 내용을 찾았다

정확히는 가상dom이 렌더링을 끝마치지 못했을때 jquery로 dom제어를 하면 해당 노드가 없으니

문제가 생긴다는 것이었다.

 

혹시나 다른 이슈를 아시는 분이 이 포스팅을 본다면 댓글 남겨주시길 바랍니다.

 

 

각설하고 영웅뽑기 시뮬레이터에서 사용된 jquery요소들을 없애고 es6에 맞춰서 만들어 보려고 했다.

영뽑시뮬에서 제이쿼리로 사용한것은 $.each 뿐이다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
// id 를 index값으로 부여
$.each(this.state.heroList, function(index, item){
      item.id = index;
    });
    
 
//위의 코드를 아래와 같이 바꾸어주었다
 
this.state.heroList.map((item,index)=>{
                            item.id = index;
                            });
 
 
cs

 

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
32
33
34
 
// 영웅 확률 일괄 변경
 $.each(this.state.heroList, function(index, item){
       
       if(targetId==0&&item.grade==4){
         item.per = 0.0471428571428571;
       }else{
         if(item.grade==4){
            item.per = 0.02;
          }
        if(item.id==targetId){
          item.per = 0.4;
          }
       }
       
      
    });
 
 
 
//->
 
 this.state.heroList.map((item,index)=>{
       if(targetId==0&&item.grade==4){
         item.per = 0.0471428571428571;
       }else{
         if(item.grade==4){
            item.per = 0.02;
          }
        if(item.id==targetId){
          item.per = 0.4;
          }
       }
 });
cs

 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
// 뽑기
 
 $.each(this.state.heroList, function(index, item){ 
       sum=+ (sum + item.per).toFixed(12);
       //console.log("sum값"+sum)
    
       if(sum >= val){
         heroCard = item;
         //console.log(item);
         return false;
        }
    
      });
 
 
//-> map으로 돌려봄
 
 
this.state.heroList.map((item,index)=>{
       sum=+ (sum + item.per).toFixed(12);
       console.log("sum값"+sum);
       console.log("val값"+val);
    
       if(sum >= val){
          console.log("결과 sum값"+sum+"val값"+val);
         heroCard = item;
         //console.log(item);
         return false;
        }
     });
 
 
//-> 중간에 안멈추고 끝까지 돌게됨
 
/*
참고 블로그 : https://daniel-park.tistory.com/9 
원인 -> 주어진 길이만큼 iterator을 돌리면서 그때마다 콜백을 돌림
    콜백을 호출하는 순간 Loop의 임무는 끝
 
참고 블로그에서 얻은 해결 방법 -> for loop로 코드를 다시 작성
*/
 
 
//-> 다시 작성한 코드
 
 for(let cnt=0; cnt < this.state.heroList.length; cnt++){
       sum=+ (sum + this.state.heroList[cnt].per).toFixed(12);
       if(sum >= val){
         heroCard = this.state.heroList[cnt];
         return heroCard;
        }
    }
 
 
//근데 이거도 좀 이상함 포문 다음에 console.log 출력이 안된느 현상 발견
 
//->for of를 이용해 해결
 
for(let hero of this.state.heroList){
       sum=+ (sum + hero.per).toFixed(12);
       if(sum >= val){
         heroCard = hero;
         break;
        }
    }
cs

 

 

단순히 map((item,index){}); 형식으로 돌려보니

중간에 멈추질 않는다

찾아보니 안멈춘다고 한다 

daniel-park.tistory.com/9

 

[Javascript] es6 함수들 도중 break?

Javascript와 es6  최근 node.js와 Vuex기반 프로젝트 기능을 개발하고 테스트 하던 중, 생각하지도 못한 버그가 발생하였다. es6의 Array.map, Array.filter, Array.reduce 등의 함수들은 많은 개발자들의 수..

daniel-park.tistory.com

이곳과

niceman.tistory.com/111

 

이 블로그의 글을 참고하여 

 

for of로 바꾸었더니 정상작동하는 것을 확인 할 수 있었다.

 

for in과 for of 의 차이는

for of : 반복가능한 객체를 반복하는 기능을 수행한다. 다시말해 객체의 요소들을 순회하긴 위한 구문

for in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행, 즉 객체의 속성을 순회하기 위한 구문

편하게 설명하면

객체 내부까지 써먹으려면 of를 쓰고 인덱스만 뽑으려면 in을 쓰라는 말이다.

 

위 블로그에서 찾은 또 하나의 내용으론

 

for in은 인덱스가 문자로 변환, 프로토타입까지 순회, 루프 순회 순서가 무작위 라는 것이고

for of는 for in의 단점을 보완했고 foreach에서 지원하지 않는 break, continue, return이 사용 가능하다는것 그리고

배열순회를 지원하는 문법중에서 가장 간결하고 직접적으로 접근 가능하다는 것이다.

 

아무튼 영뽑시뮬 기본기능에서 제이쿼리는 걷어 내어 보았다

 

걷어내기 이전 코드는

jsbin.com/goxetubuyo/edit?html,js,output

 

JS Bin

Sample of the bin:

jsbin.com

 

이거고

 

걷어낸 후의 코드는

jsbin.com/cesigagoku/edit?html,js,output

 

JS Bin

Sample of the bin:

jsbin.com

이것이다.

간단하게 뭐 해볼거 없을까 찾다가

js로 만들었던 영웅뽑기 시뮬레이터를 react 버전으로 만들어 보았습니다.

블로그에서 실행되나 테스트 용입니다.

아직 테스트하고 예전에 했던 감찾기 용으로 가볍게 한거라 기존 시뮬레이터의 모든 기능이

들어가 있진 않습니다.

 

jsbin.com/goxetubuyo/edit?html,js,output

 

JS Bin

Sample of the bin:

jsbin.com

 

 

jsbin으로 만들었습니다.

 

얼마전 회사에서 새로운 기능을 만들어서 배포 하였는데

 

현장 IE환경에서 특정 페이지가 구동이 안되는 현상을 발견 하였다.

무엇이 문제인가 하니

IE에서는 배열의 find를 지원하지 않았던것

그래서 찾은 해결방법이

<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find"></script>

 

를 추가 하는것이다.

 

IE에서 지원하지 않는 기능을 추가해주는 스크립트 이다.

 

역시 개발하면서 뭔가 불편하다 싶은게 있으면

 

누군가가 해결해 놓은 솔루션이 있기 마련이다.

 

배포 순서.

 

git add .

git commit -m '메모'

git push -u origin master

git push heroku master

heroku ps:scale web=1

heroku open

 

+ Recent posts