'ASP.NET MVC'에 해당하는 글 14건

JavaScript :: 한글만 추출하는 정규식

ASP.NET MVC/JavaScript 2017. 3. 9. 15:28


최근에 작업을 하다보니 제가원하는 것은  예를들어 "버스커버스커" 만을 원하는데


크롤링을 하다보면 버스커 버스커 ( busker busker) 이렇게 입력되어 잇는곳이 몇군데 있다


그래서 한글만 추출을 어떻게 하나 고민끝에 정규식을 이용하면 간편하다는 글을보고 찾아서 해보았다 


1
 var Artist = config.bugstrack[0].Artist.replace(/[^\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F]/gi,"")                                        
cs


config.bugstrack[0].Artist  == 버스커 버스커 (busker busker) 입니다 


그후 뒤에있는 정규식을 한글을 제외한 문자,특수문자,공백 등등을 지우는 정규식입니다 


유용하게 사용하시면 될거같습니다 


'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: mp3 파일을 읽어서 재생시키기  (3) 2017.04.03
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
WRITTEN BY
내가달이다
,

JavaScript :: array 특정요소 삭제

ASP.NET MVC/JavaScript 2017. 2. 8. 13:24

Array  즉 배열 같은경우에는 추가는 push 삭제는 pop 을이용한다


push 는 맨앞의 값삭제


pop 은 맨뒤의 값삭제 


하지만 코딩을 하다보면  특정값이 들어간 배열을 삭제하고 싶을경우가 있다 이럴경우에는  .splice() 을 이용하면 간단하게 된다 


예를 들어보겠습니다 


 



textarea 안에 줄띄움값과 빈값 등을 거르고 한줄씩 값을 읽어와보겠습니다 


1
2
3
4
5
6
7
8
      var tracklist = this.textdownload.split('\n')
        for(var i = 0; i < tracklist.length; i ++)
        {
            if(tracklist[i].length == 0)
            {
                tracklist.splice(i, 1);
            }
        }
cs



tracklist 라는 변수에는 '\n' 을 split 을 해주면 배열값은


"" 값 도 포함이된 상태로 저장이됩니다 그래서 for 문을 배열의 length 만큼 돌려주고 


그배열의 length == 0 즉  length 값이 "" 인것을 선별해주어서 splice (i,1) 을 해주시면 




보이는 것과 같이 배열이 완성됩니다 

'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: mp3 파일을 읽어서 재생시키기  (3) 2017.04.03
JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
WRITTEN BY
내가달이다
,

JavaScript :: async.forEachOf

ASP.NET MVC/JavaScript 2017. 2. 1. 21:58

비동기가 항상 발목을 잡아버리네요 ... 


이전에 포스팅을 했던 콜백헬  http://moonna.tistory.com/14  의 연장선이라고 보시면 편합니다


이전에는 단순히 async.waterfall 을 이용해 순차적으로 실행을해줬습니다 


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
        async.waterfall([
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log(scheduleId)
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                 console.log(scheduleId)
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                 console.log(scheduleId)
                                                 //next_result 없을때 값처리해야됨
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
cs


실행순서는 


"next result3" > done > "next result4" > done > "next result5" > done


이런식으로 진행됩니다 


위의 async.waterfall 을 배열의 인덱스 값만큼 반복 시켜주려면 어찌해줘야 하나 고민하다 stackoverflow 에 해결책이 있었습니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var async = require('async')
var users = ['a','b','c']
 
async.forEachOfLimit(users, 1, function(user, index, cb) {
 
    console.log(index + ': ' + user)
 
    async.waterfall([
        function(callback) {
 
           // add something function
 
            callback(null);
        }
    ], function (err, result) {
        console.log(index + ": done")
        cb()
    });
 
}, function() {
    console.log('ALL done')
})
cs



배열의 값만 큼 순차적으로 비동기통신이 되었습니다 




'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,

JavaScript :: mouseover (마우스오버)

ASP.NET MVC/JavaScript 2017. 1. 13. 15:57

기준 프로젝트화면  : http://moonna.tistory.com/18


이전에 작업은 그리드 로우 클릭시 결과값을 그래프로 보여주는 것까지 완성을 하였다 


결과



밑에 결과 그리드에 들어가있는 내용은 




그리드 안의 이미지 컬럼에 마우스를 가져가면 컬럼안의 이미지 주소값을 이용해 마우스 위치에 


이미지를 보여주는 걸 만들어볼까 합니다


HTML

1
2
3
4
5
6
7
    <ag-grid-ng2 #agGrid2 style="width: 100%; height: 200px;" class="ag-fresh"
                 [gridOptions]="gridOptions2"
                  on-mouseover='overimage($event)'
                   on-mousemove='overimagemove($event)'
                  on-mouseout='overimageout($event)'
                 enableColResize>   
    </ag-grid-ng2>
cs


해당 그리드에 on-mouseover , on-mousemove, on-mouseout 이벤트를 걸어주었습니다 



on-mouseover : 마우스 오버시 발생하는 이벤트 


on-mousemove : 마우스 이동시 발생하는 이벤트


on-mouseout : 마우스 포커스 아웃할때 발생하는 이벤트



이벤트 생성을 해준후 그리드 이미지컬럼에 마우스 오버시 이미지 컬럼의 값을 가져와보겠습니다 


우선 마우스 오버시 어떤값들을 가져오는지 확인을해보면 ..




해당 마우스 좌표값들을 가져 올수 있습니다


이 좌표들을 이용해서 마우스 위치를 기준으로 이미지를 보여주면 될거같습니다 


이후 이미지컬럼의 내용을 가져와보면 




이미지컬럼안의 값은 fromElement 라는 요소 안의 있는걸로 확인이되네요 


자세히 들여다 보면 




innerHTML이 보이실겁니다 HTML 안에있는 값을 나타냅니다 


이미지컬럼의 이미지주소를 가져오면 될거같습니다 




TS(TypeScript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 overimage(event : any ){
    if(event.fromElement.innerText.slice(0,8) == 'https://')
    {           
        var divTop = event.clientY - 20 + 'px'; //상단 좌표
        var divLeft =event.clientX + 10 + 'px'; //좌측 좌표
        document.getElementById("imgViewer").setAttribute('src',event.fromElement.innerText);
        document.getElementById("imgViewer").setAttribute('style','z-index:1; position: absolute; top :'+divTop+';left : '+divLeft+';width: 150px; display:block;')
        console.log(event)
    }
 }
overimagemove(event : any ){
        var divTop = event.clientY - 20 + 'px'; //상단 좌표
        var divLeft =event.clientX + 10 + 'px'; //좌측 좌표
        document.getElementById("imgViewer").setAttribute('style','z-index :1; position: absolute; top :'+divTop+';left : '+divLeft+';width: 150px; display:block;')
}
 overimageout(event : any ){
         document.getElementById("imgViewer").setAttribute('style','display:none;')
}
 
cs


if 문 조건은 그리드 아무곳에나 마우스오버시 이미지가 보여주면 안되어서 걸어준겁니다 


z-index 는 레이어들의 쌓임순서(배치순서) 를 정해줄수있습니다  이걸해주는이유는 그리드데이터가 이미지보다 먼저 배치가될경우


이미지가 그리드에 가려지는 경우가 발생하기때문입니다.


아래 이미지를 참고하시면 이해가 빠르실겁니다



position : absolute  는 문서의 원래위치와 상관없이  위치를 조정할수있기때문에  지금만드려는 마우스 위치를 기준으로 이미지를


보여주려하기때문에 위치값을 absoulte 를 주었습니다 





실행결과









'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,

MSSQL :: 1 Join

ASP.NET MVC/SQL 2017. 1. 13. 02:42

LEFT,RIGHT JOIN 에 대해서 포스팅해보려 합니다 


SQLD 라는 자격증을 공부해보려고 이론부터 천천히 공부해보려고합니다


사실 프로시저 짜면서 RIGHT 조인을 써본적이 거의 없다 ... 필요성을 못느낀다고해야되나 LEFT 로 작성을많이했다




LEFT OUTER JOIN


조인 수행시 좌측 테이블에 해당하는 데이터를 먼저 읽은후 , 나중 표기된 우측 테이블에서 JOIN 대상 데이터를 읽어온다


간단히 말해 


Table A,B 가 있을때 (테이블 'A' 기준) A 와 B 를 비교해서 B의 JOIN 칼럼에서 같은 값이 있을때 그 해당 데이터를 가져오고 ,


B의 JOIN 칼럼에 없을경우 NULL 값으로 채운다 




1
2
3
4
select *
from stadium left join team
on STADIUM.HOMETEAM_ID = TEAM.TEAM_ID
order by HOMETEAM_ID
cs


스타디움에 등록된 운동장 중에는 홈팀이 없는 경기장도 있다 . STADIUM 과 TEAM 을 JOIN 하되 홈팀이 없는 경기장의 정보도 


같이 출력 하도록 해보자






RIGHT OUTER JOIN


조인 수행시 LEFT JOIN 과 반대로 우측 테이블이 기준이 되어 결과를 생성한다. 



1
2
3
4
select *
from Emp E Right outer join Dept D
on E.DEPTNO  = D.DEPTNO
 
cs



DEPT 에 등록된 부서 중에는 사원이 없는 부서도 있다. 


DEPT 와 EMP 를 조인하되 사원이 없는 부서 정보도 같이 출력 하도록 해보자 




INNER JOIN 이라면 사원이 배정되지 않은 부서는 출력이 되지않았지만 LEFT , RIGHT 조인을 할경우에는 배정되지않은 부서 까지 


출력 되는걸 확인할수 있다


'ASP.NET MVC > SQL' 카테고리의 다른 글

SQL :: 3 시도별 총회원 등급 카운트  (0) 2018.05.06
MSSQL :: 0 CURSOR  (0) 2016.12.01
WRITTEN BY
내가달이다
,

JavaScript :: callbackhell(콜백헬)

ASP.NET MVC/JavaScript 2017. 1. 7. 20:00

콜백헬 에 대해 포스팅해보려고한다


비동기 프로그래밍을 짜본적이없어서 초반에 코딩을할때 고민을 많이 했다 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  func1 (
    function func2 (
        function func3 (
            function func4 (
                function func5 () {
                alert('func5()');                    
                }
            alert('func4()');    
            }
            alert('func3()');                
        }
        alert('func2()');
    }    
    alert('func1()');    
    
cs



예를 들어보자 개발을 하다보면 이런 콜백 을 자주 볼수있는데 .. 


문제는 돌아간다..돌아가긴하는데...  이걸본 다른 개발자나 인수자들은.....





이럴 경우에는 async 프레임워크 , promise 를 사용하는 방법이있다  저의 경우에는 async 프레임워크를


이용해서 해결했습니다



Waterfall



async 프레임워크에는 여러개 의 제어 흐름이 있는데 자세한것은 https://caolan.github.io/async/  공식 깃헙입니다


저는 waterfall 방식을 이용해서 코드를 깔끔하게 정리했습니다




구현 하려는 코드가 


twitter rest api 를 이용해 데이터를 가져오게되면 한페이지에 100개의 데이터를 가져올수밖에없다 대신에 포함된데이터에 


next_results 값을 포함시켜서 다음 에 찾게되는 값의 주소를 나타낸다.



이값을 이용해 내가원하는 수만큼 가져오고싶엇다 



Waterfall 예제

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
              async.waterfall([
  
                                             
                                            },
                                            function(callback){                                                                                                                                                                                                               
                                                 console.log("next_result 1")
                                                 console.log("scheduleId 1")
                                                functions.ScheduleFeatch(scheduleId);
                                                  setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            },
                                            function(scheduleId,callback){
                                                 console.log("next_result 2")
                                                 console.log("scheduleId 2")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log("scheduleId 3")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                console.log("scheduleId 4")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                console.log("scheduleId 5")
                         
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
 
cs


'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,