요즘 뜨는것 같은 css프레임워크 테일윈드

 

https://2022.stateofcss.com/en-US/css-frameworks/

 

The State of CSS 2022: CSS Frameworks

The Experience Over Time chart can be toggled between retention, interest, usage, and awareness to give you a fuller picture of a category.

2022.stateofcss.com

 

확인해보니

 

 

이렇게 뭔가.. 뭔가 떠오르고 있다 흥미도가 높아지고 있다 그런게 보인다.

 

그래서 svelteKit에 tailWind를 사용해 보기로 했다.

친절하게도 프레임워크별 시작 가이드가 나와 있다.

https://tailwindcss.com/docs/guides/sveltekit

 

Install Tailwind CSS with SvelteKit - Tailwind CSS

Setting up Tailwind CSS in a SvelteKit project.

tailwindcss.com

 

저 가이드에 나와있는대로 따라하면 적용은 금방 할수 있게 될것이다.

 

 

tailwind 장점은 컴포넌트들이 잘 만들어져 있고 직관적으로 만들어진 클래스명만 쭉 적용시키면 되니까 편하다는건데

단점은 그렇게 클래스네임을 쭉 나열해서 적다보면 코드가 좀 지저분해 보인다는거 정도?

자세한 내용은 

https://blog.hubspot.com/website/tailwind-css-vs-bootstrap

 

TailWind CSS vs Bootstrap: What is The Difference & Which One is Best?

Learn about the differences between Tailwind CSS and Bootstrap, what they are for and which is best.

blog.hubspot.com

 

 

이 글을 참고해보면 도움이 많이 될것 같다

일단 tailWind는 사이즈가 작다 그래서 부트스트랩보다 로드가 빠르다

대신 부트스트랩만큼 다양하진 못하다 대충 이런 느낌인데

내가 뭐 엄청나게 다양한 컴포넌트를 사용할것도 아니고 부트스트랩이야 뭐 어디서든 쓸수 있으니

새로운거 하는김에 싹다 새로운거 해보자는 생각으로 tailWind를 선택했다. 

 

저작자표시

'Yame Programmer > SVELTE' 카테고리의 다른 글

[svelte] svelteKit 빌드 경로 /build 안나올때  (0) 2023.03.09
[svelte] svelteKit 빌드파일 위치  (0) 2023.03.08
[svelte] svelteKit + docker 지금 이 페이지가 작동하지 않습니다. 해결  (0) 2023.03.03
[svelte] document is not defined 에러 해결 방법  (0) 2023.02.28
[svelte] svelteKit 시작 해보도록 하자  (0) 2023.02.17

 

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

얼마전까지 이직한 회사에서 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

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

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

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

저작자표시

'Yame Programmer > SVELTE' 카테고리의 다른 글

[svelte] svelteKit 빌드 경로 /build 안나올때  (0) 2023.03.09
[svelte] svelteKit 빌드파일 위치  (0) 2023.03.08
[svelte] svelteKit + docker 지금 이 페이지가 작동하지 않습니다. 해결  (0) 2023.03.03
[svelte] document is not defined 에러 해결 방법  (0) 2023.02.28
[svelte] svelte tailWindcss 적용하기  (0) 2023.02.20

[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도 좀 손봐야 하고

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

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07

 

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

 

 

저작자표시

'Yame Programmer > JAVA' 카테고리의 다른 글

org.springframework.web.reactive.function.client.WebClientRequestException: readAddress(..) failed: Connection reset by peer;  (0) 2024.03.26
[JAVA] VO리스트에 add로 값 넣고 싶을때  (0) 2020.01.16
[Java] 문자열 바이트로 자르기  (0) 2017.08.28
[톰캣] 서버 실행시 CMD창 바로 사라지는 문제 해결 방법  (0) 2017.08.23
[자바예제] 제어문 예제  (0) 2015.06.19

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

 

세븐나이츠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. 모바일 버전 계획

 

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

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

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

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

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

 

 

감사합니다.



저작자표시

'Yame Programmer > DEV PRODUCT' 카테고리의 다른 글

웨일브라우저 세나2 포럼 사용자 차단기 ver 1.4 업데이트 안내  (0) 2021.04.16

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

 

세븐나이츠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. 모바일 버전 계획

 

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

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

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

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

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

 

 

감사합니다.

 

저작자표시

'Yame Programmer > DEV PRODUCT' 카테고리의 다른 글

웨일, 크롬 브라우저 세나2 포럼 유저 차단 확장 프로그램 ver 1.4 업데이트 안내  (0) 2021.04.17

[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가 호출이 된다.

저작자표시

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] treeView 선택된 노드 정보 가져오기  (0) 2018.05.15
[kendo ui] 켄도 ui bar, column 차트 모서리 radius 효과 넣기  (0) 2018.02.28
[kendo ui] Y축 값이 1 이하일땐 소수점 이상일땐 자연수, 천단위 콤마  (0) 2017.02.27
[css] css만으로 애니메이션 효과주는 방법  (0) 2016.10.07
[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12

[세븐나이츠2] 100일 이벤트 전설~전+ 영웅 소환권 시뮬레이터

 

 

 

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

 

이번에 세나2가 100일 기념 이벤트 패키지로 

 

전설~전설플러스 영웅 소환권을 내놨는데요...

음... 굉장하군여;

일단 전쁠 나올 확률은 토탈 2% 입니다.

일단 시뮬레이터를 통해 체험해 보세요

 

 

 

    지금까지 뽑힌 영웅 등급
    전설+
    0개
    전설
    0개

       

       

       

      후원하기 : toon.at/donate/637456791551738503

       

       

      저작자표시

      'Yame Game Life > 세븐나이츠2' 카테고리의 다른 글

      [세븐나이츠2] 일반,파스마,설빔연희 보스 등장확률 시뮬레이터  (0) 2021.02.13
      [세븐나이츠2] 세나2 설날 복주머니 시뮬레이터 (설빔연희)  (0) 2021.02.12
      [세븐나이츠2] 세나2 상대 길드 길드원 정보 보는 방법  (0) 2021.01.08
      [세븐나이츠2] 행운의 지도 패키지(불사) 상자깡 시뮬레이터  (0) 2021.01.07
      [세븐나이츠2] 세나2 장비 강화 시뮬레이션  (1) 2021.01.05

      [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으로 만들었습니다.

       

      저작자표시

      'Yame Programmer > react.js' 카테고리의 다른 글

      [NEXT.js] Cannot find module 'msw/node' 에러 해결  (2) 2024.03.27
      [React.js] cannot resolve 'react-transition-group' 오류 해결 방법  (0) 2017.05.25
      [react.js] react-router v4 browserHistory.push 오류 해결 방법  (0) 2017.04.19
      [react.js] 함수형 컴포넌트  (0) 2017.02.27
      [react.js] react Component Life Cycle API  (0) 2017.02.27

      + Recent posts

      티스토리툴바