$: 이게 무엇인가?

Svelte에서 $:는 반응성 선언(reactive declarations)을 나타냅니다.

반응성 선언을 사용하면 변수나 표현식이 변경될 때마다 자동으로 업데이트되는 코드를 작성할 수 있습니다.

예를들어

$: ({ postArr } = data); 는 data 객체의 변경을 감지하여 자동으로

postArr 변수를 업데이트하도록 지시하는 코드입니다.

이 구문의 각 부분의 의미는 다음과 같습니다.

$: - 반응성 선언을 시작합니다.
({ postArr } = data) - 객체 구조 분해 할당(object destructuring assignment)를 사용하여 

data 객체에서 postArr 속성을 가져옵니다.


결과적으로, data 객체가 변경될 때마다 postArr 변수가 자동으로 업데이트되어 해당 변경사항을 반영합니다. 

이를 통해 Svelte 컴포넌트에서 데이터가 변경되는 경우 자동으로 UI를 업데이트할 수 있습니다.

 

조금더 자세한 내용은

https://beomy.github.io/tech/svelte/reactivity-syntax/

 

[Svelte] 반응형을 위한 문법

사용자 행동에 따라 반응형으로 동작하는 웹을 만들기 위한 Svelte 문법을 이야기합니다.

beomy.github.io

 

이 페이지를 참고하시면 좋을 것 같습니다.

 

[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

이것이다.

+ Recent posts