히파루스의 솔직한 여행 이야기

vue.js를 설치하기 위해선 npm을 통해 설치하여야 하지만 npm을 이용하기 위해선 또 brew를 선설치하여야 한다.
brew.sh/index_ko로 이동해보면 아래와 같이 친절하게 터미널 명령어가 존재하는데 이를 복사하여 터미널에 붙여넣기 후 엔터를 친다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

그럼 sudo 권한을 위해 아이맥 비밀번호를 물어보고 이를 입력하면 한참을 다운로드에서 머물다 설치가 마무리 된다.
대략 20분 이상 걸린것 같다.(회사라 느린것인지 모름)

Homebrew가 설치 되었다면 이제 node를 설치한다.
터미널에서 brew install node 를 입력하고 엔터

npm이 설치되었으니 이제 본격적인 vue cli 설치를 진행한다.
터미널에서 npm install -g @vue/cli 를 입력하고 엔터
(CLI란 뷰 프로젝트를 빠르게 개발하고 빌드하고 서비스를 런칭시켜주는 틀)

다른 설치파일들과 달리 1~2분 이내로 금방 설치가 완료 된다.

기본 설치까지 모두 완료 되었으므로 이제 실제 vue 프로젝트를 생성해보도록 한다.
프로젝트 생성방법은 터미널에서 vue create 폴더명이므로
vue create test 입력 후 엔터

기본 옵션설치이므로 default에서 엔터 설치

프로젝트 설치가 완료되면 아래와 같이 생성된 프로젝트를 실행해 볼 수 있도록 친절히 안내가 나온다.
(node.js를 경험해봤다면 익숙한 방식이다.)

🎉  Successfully created project test.
👉  Get started with the following commands:
 $ cd test
 $ npm run serve

실제 ls 명령어를 통해 폴더를 확인해보면 test란 폴더가 생성되어 있고

cd 명령어를 통해 이동해보면 아래와 같은 구조로 프로젝트가 생성되어 있음을 알 수 있다.
test
    src
        App.vue
        assets
        components
        main.js

생성된 프로젝트를 실행하고 실제 브라우저에서 접속해보도록 한다.
먼저 프로젝트 폴더로 이동하기 위해 터미널에서 
$ cd test 입력 후 엔터

그리고 npm을 통해 프로젝트를 실행하기 위해 터미널에서 
$ npm run serve 입력 후 엔터를 치면 정상설치가 되었을 경우 아래처럼 친절하게 접속 가능한 주소를 알려준다.

App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://000.000.000.000:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.

아무 브라우저나 열고 위 주소를 입력해보자

여기까지 간단하게 처음 npm 설치부터 vue 테스트 프로젝트 설치 및 접속까지 알아보았다.

모 PG사의 파라메터들 중 한글을 포함한 파라메터를 넘길 때 UTF-8인 경우 encodeURIComponent를 호출하여 보내야만 했다.
웃긴건 이 PC사 모듈이 PC용이 있고 Mobile용이 있는데 PC용은 encode를 했다가 또다시 decode를 하는 코메디 상황을 연출한다란 점이다.
모바일은 더 웃긴게 encode만 한 후 결제 처리하는 페이지에서 다시 decode를 해야 한다란 점 -_-
도대체 왜 이딴식으로 개발하는지 PG사들 모듈들 보면 다년간 사람손을 많이 타와서 그런지 도무지 이해가 안가는 점이 한두개가 아니다.
왜들 그렇게 모듈을 만들 때 제대로 만들지 못하는건지
그나마 이 PG사는 일전에 망한 큰~기업 PG사에 비하면 양반이다.
그 큰 기업은 참.. 뭘 만들어도 이상한 결과물을 재생산해내는 노하우를 보유한 기업이니 이상하지 않지만 말이다.

javascript의 encodeURIComponent와 decodeURIComponent를 classic asp에서 호출할 때 runat server로 javascript함수를 호출해주면 된다.

<script language="javascript" runat="server">
    function decodeUTF8(str) {
        return decodeURIComponent(str);
    }

    function encodeUTF8(str) {
        return encodeURIComponent(str);
    }
</script>

<%
  response.write encodeUTF8(encodeFromJsString)
%>

www.w3schools.com/asp/ado_datatypes.asp

TEXT type adLongVarChar

.Parameters.Append .CreateParameter("TEXTATA", adLongVarChar, adParamInput, len(TEXTDATA), TEXTDATA)    

NVARCHAR type adVarWChar

.Parameters.Append .CreateParameter("USERID", adVarWChar, adParamInput, 100, USERID)

SELECT시 특정 필드를 CONVERT할 경우가 종종있다.
그런데 데이터 이상으로 해당 레코드들만 제외하고 CONVERT를 해야 할 경우 WHERE 조건을 준다한들 예외 오류가 발생하게 된다.

예를들어
퇴사일이 없는 (NULL값)직원이 있고 있는 직원이 있다치자
일괄적으로 CONVERT를 실행할 경우 여지없이 해당 NULL값인 직원의 데이터 때문에 예외 오류가 발생한다.
그러하다면 WHERE조건을 주고 해당 레코드들을 제외시킨 후 CONVERT를 하면 되겠거니 싶지만
여지없이 예외오류를 내뱉는다.
서브쿼리로 해당 테이블을 1차 가공 후 CONVERT를 실행시켜도 똑같다.

괴이한건 이 상황에서 그냥 TOP 1000000 을 주고 실행하면 오류를 발생시키지 않는다.
그렇다고 매번 TOP으로 실행하자니 못마땅하다.

이때 사용할 함수가 try_cast, try_convert, try_parse 되시겠다.

조금 더 구체적인 예로 try_convert 함수를 설명해 보겠다.

학생테이블인 STUDENT라는 테이블의 USERID 필드가 VARCHAR(50) 형태로 존재하고
아래처럼 해당 필드는 학번값을 저장하고 있다 치자

그런데 특이하게 몇몇 레코드만 영문자로 되어 있는 상태고 학번의 앞자리 2자리를 기준으로 입학년도를 추출해야 할 상황인 경우
그냥 CONVERT쿼리를 실행하든 앞서 설명한 상황처럼 SUBQUERY, NOT IN, 알파벳을 제외하는 방법(not like '%[a-zA-Z]%') 등등
뭔짓을 해도 예외오류를 발생시킬 것이다.

메시지 245, 수준 16, 상태 1, 줄 15
varchar 값 'cr'을(를) 데이터 형식 int(으)로 변환하지 못했습니다.

이럴 땐 TRY_CONVERT함수를 WHERE문으로 실행시켜주면 깔끔하게 해결된다.
SELECT USERID FROM STUDENT WHERE TRY_CONVERT(INT, LEFT(USERID, 2)) <= 99

회사 서버에 스토리지가 매우 부족해서 어쩔 수 없이 이용자가 생성해내는 컨텐츠 파일 데이터를 CDN을 이용해 서비스하게 되었다.

여하간에 이런 상황이므로 dextupload 컴포넌트를 이용해 업로드 된 파일을 마찬가지로 FTP 컴포넌트를 이용하여 전송해주면 되겠다.

여기서 문제가 발생한다. 요즘 서버들은 다 64bit다.
하.. 딥빡
node.js로 ftp전송프로그램을 만들까도 생각했지만 전산팀에서 싫다한다. ㅎㅎㅎㅎㅎㅎㅎ

다시 돌아와서 FTP 컴포넌트를 만지작 거려본다.
그런데 classic asp는 너~무 오래된 단종된 언어인지라 ftp dll 컴포넌트가 32bit 밖에 존재하지 않는다.
물론 유료 $80짜리 상용 64bit 컴포넌트도 있긴 하지만
공짜가 좋지 아니하겠는가?

해결방법은 존재한다.
일단 classic asp에서 FTP업로드가 가능한 aspftp.dll을 구해본다.(친절하게도 나님이 첨부파일로 등록해뒀다.)

먼저 첫번재 방법이다.

서버로 이동해보자.

aspftp.dll 마우스 오른쪽 버튼 속성 > 보안 > 편집 > Users > 모든권한에 체크

cmd.exe를 실행 후 aspftp.dll이 존재하는 폴더에서(내 경우 wow64에 복사해뒀음) regsvr32 aspftp.dll

윈도우의 구성요소서비스 실행

콘솔루트 > 구성요소서비스 > 컴퓨터 > 내컴퓨터 > com+ 응용프로그램에서 마우스 오른쪽 클릭하여 새로만들기 > 응용프로그램 선택

응용프로그램 설치 마법사가 나오면 다음 클릭

빈 응용 프로그램 만들기 클릭

응용 프로그램의 이름을 입력(내 경우  ASPFTP)

계속 다음 클릭

새로 생성한 ASPFTP에서 마우스 오른쪽 클릭 후 속성 클릭

보안탭에 권한 부여 > 이 응용 프로그램에 대한 엑세스 검사 수행의 체크를 해제 > 확인 클릭하여 빠져 나오기

ASPFTP > 구성요소를 마우스 오른쪽 버튼으로 클릭하여 새로만들기 > 구성요소 클릭 > 다음 > 새 구성요소 설치 클릭하여 앞서 regsvr32로 등록했던 dll파일을 찾아 선택 후 다음 클릭

이제 코딩하면 된다.
코딩은 포스팅 하단에 만들어 두겠다.

64bit 윈도우에서 32bit dll사용하는 두번째 방법이다.

iis에서 그냥 쉽게 32bit True로 바꿔주면 된다.
응용프로그램 풀을 선택후 우클릭 혹은 우측의 고급설정을 클릭합니다.
"32비트 응용프로그램 사용"

그런데 이렇게 하면 다른 64bit dll들을 사용 못한다. -_-

그러도 된다면 간단하게 두번째 방법으로 진행하면 되고 그게 아니라면 첫번째 방법대로 진행하면 된다.

<%

ACCESS_TYPE_PRECONFIG = 0

ACCESS_TYPE_DIRECT = 1

ACCESS_TYPE_PROXY = 2

TRANSFER_TYPE_ASCII = 1

TRANSFER_TYPE_BINARY = 2

FILE_ACCESS_WRITE = 1

FILE_ACCESS_READ = 2

ATTRIBUTE_READONLY = 1

ATTRIBUTE_HIDDEN = 2

ATTRIBUTE_SYSTEM = 4

ATTRIBUTE_DIRECTORY = 16

ATTRIBUTE_ARCHIVE = 32

ATTRIBUTE_NORMAL = 128

ATTRIBUTE_TEMPORARY = 256

ATTRIBUTE_COMPRESSED = 2048

ATTRIBUTE_OFFLINE = 4096

Function ftpDownload(sourceFile, copyFile) ' Download Function

    Dim objFTP

    Dim strMsg

    Set objFTP = Server.CreateObject("NIBLACK.ASPFTP")

    objFTP.sServerName = "server"

    objFTP.sUserID = "id"

    objFTP.sPassword = "password"

    If objFTP.bConnect Then

        objFTP.lTransferType = TRANSFER_TYPE_ASCII

        If objFTP.bGetFile(copyFile, sourceFile) Then ' Success

            strMsg = "Get Successful!"

        Else

            strMsg = "Get Failed: " & objFTP.sError ' Fail

        End If

    Else

        strMsg = "Connection Failed: " & objFTP.sError

    End If

    Set objFTP = Nothing

    ftpDownload = strMsg

End Function

Function ftpUpload(sourceFile, copyFile) ' Upload Function

    Dim objFTP

    Dim strMsg

    Set objFTP = Server.CreateObject("NIBLACK.ASPFTP")

    objFTP.sServerName = "******"

    objFTP.sUserID = "******"

    objFTP.sPassword = "******"

    objFTP.bPassiveMode = True 'True 'Passive Mode

    If objFTP.bConnect Then

        objFTP.lTransferType = TRANSFER_TYPE_ASCII

        If objFTP.bPutFile(sourceFile, copyFile) Then ' Success

            strMsg = "Put Successful!"

        Else

            strMsg = "Put Failed: " & objFTP.sError ' Fail

        End If

    Else

        strMsg = "Connection Failed: " & objFTP.sError

    End If

    Set objFTP = Nothing

    ftpUpload = strMsg

End Function

' FTP FILE UPLOAD

ftpUploadResult = ftpUpload("D:\PDS\1.jpg","/test/1.jpg")

response.Write ftpUploadResult

' FTP FILE DOWNLOAD

'ftpDownloadResult = ftpDownload("Folder\uploadFile.txt","C:\uploadfile.txt")

%>

참고로 com+ 등록 원본은 아래와 같다.
blog.daum.net/kibchj/207

잘 돌아가던 푸시가 iOS 14로 버전업 되면서 작동하지 않는 버그가 발생했다.

오류가 발생했는지 조차 파악이 안되는 아주 악질적인 버그로 

버그를 인지하게 된 경위는 다음과 같다.
내 앱은 카톡처럼 푸시가 왔을 때 카운팅을 해주지 않고 didFinishLaunchingWithOptions 에서 무조건 뱃지를 0으로 초기화 해주고 있었는데 iOS 14로 올라간 이후부터 뱃지가 계속 1로 표시되고 있음을 발견할 수 있었다.

소스를 돌려보니 충실히 application.applicationIconBadgeNumber = 0; 코드가 동작되고 있었지만 여전히 뱃지 카운트가 1로 표시되었다.

조금 더 살펴보니 푸시를 등록해주는 소스단에서 에러로 빠짐이 확인되었고

    UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];

    center.delegate = self;

    [center requestAuthorizationWithOptions:(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge)

                          completionHandler:^(BOOL granted, NSError * _Nullable error) {

                            if( !error ) {

                                // required to get the app to do anything at all about push notifications

                                dispatch_async(dispatch_get_main_queue(), ^{

                                  [[UIApplication sharedApplication] registerForRemoteNotifications];

                                });

                                NSLog( @"Push registration success." );

                            } else {

                                NSLog( @"Push registration FAILED" );

                                NSLog( @"ERROR: %@ - %@", error.localizedFailureReason, error.localizedDescription );

                                NSLog( @"SUGGESTIONS: %@ - %@", error.localizedRecoveryOptions, error.localizedRecoverySuggestion );

                            }

    }];

반나절 가량 삽질한 끝에 원인을 알아내었다.
https://developer.apple.com/forums/thread/660648

보다시피 앱 이름이 영어가 아니면 푸시토큰을 등록할수도 푸시를 허용할지도 물어보질 않는다.

iOS 13 상태에서 이미 푸시토큰을 등록해 사용해왔고 iOS 14로 업그레이드를 한 후에도 여전히 푸시가 잘 도착하였기에 상상도 못할 치명적인 버그였다.
정말 웃기는건 앱스토어에 올라가 있던 서비스 중인 앱을 다운받아도 마찬가지로 뱃지가 1로 표시된다란 점이다.

해결방법은 조금 간단하다.

먼저 Target > Build Settings > Packaging > Product Name을 영어로 바꿔준 후

Info.plist에서 Bundle Name을 $(PRODUCT_NAME)에서 원하는 한글이름으로 바꿔주면 푸시 등록 과정은 기존 iOS 13처럼 정상 처리가 가능하다.

진짜... 이런 악질적인 버그를 내고도 애플은 아무런 안내가 없으니 ㅡㅡ

bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory

pod로 프로젝트를 사용하다 mac OS가 업그레이드시 저런 오류가 나타날 수 있다.

이유까진 모르겠고 이 경우

sudo gem install cocoapods 명령어를 통해 pod를 다시 install시켜주면 해결된다.

보안은 나날이 강화되고 있고 앱을 올릴때도 SSL이 필수가 되었고(물론 예외 처리는 가능) 웹은 말할 필요가 없다.

일찍이 크로스사이트가 막혔고 이젠 혼합콘텐츠란걸 알게 되었다.

혼합콘텐츠란 SSL이 적용된 사이트에서 SSL이 적용되지 않은 사이트의 컨텐츠(이미지, 동영상, 스크립트, CSS 등)를 불러오는 방식인데 자세한 내용은 구글의 블로그를 참고하자

(https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content?hl=ko)

자세히 잘 설명되어 있다.

읽다보면 "나(구글)님께서 널 때렸는데 니가 왜 맞아야 하는지 설명해줄께" 처럼 아주 잘 와닿는다.

혼합컨텐츠가 뭔진 알았을테고

혼합컨텐츠로 인해 컨텐츠가 불러와지지 않는 심각한 문제가 생겼다면 해결하는 방법은 다음과 같다.

크롬은 사진처럼 주소창의 자물쇠 아이콘을 눌러 사이트 설정 > 안전하지 않은 콘텐츠의 차단(기본값)을 허용으로 바꿔주면 동작한다.

(익스플로러는 망한 브라우저니 대충 알아서 옵션 설정을 하면 됨)

그럼 이게 왜 필요한지 생각해보자

특수한 경우이긴 하지만 이 특수한 경우를 접하게 되면 사람 돌아버린다.

하루 이틀 시간 낭비는 예사다.

인생 짧으니 내 경험을 공유하고자 한다.

상황은 이러하다.

동영상이나 음원처럼 용량이 큰 파일을 CDN을 통해 서비스한다 치자

(회사의 CDN 주소를 공개하기엔 뭐하니 웹상에 있는 클래식 음원을 하나 불러와보자.)

그럼 플레이어로 불러와야 하는데 그냥 박아넣으면 용용죽는다. 안된다.

그럼 어쩌야 할까?

이렇게 해야 한다.

        var player = new Audio('http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3');

        player.controls = false; //컨트롤 안보여줄래요

        document.body.appendChild(player);

        player.play();

넣었다 뺐다 넣었다 뺐다

쉬운가?

찾아내는데 2시간 넘게 걸렸다. -_-

그다음은 혼합컨텐츠 문제

이렇게 처리해도 내 사이트가 SSL인데 위에 저 클래식 음원은 SSL을 지원하지 않는다면 HTTP로 호출할 수 밖에 없다.

크롬의 검사 기능을 통해 왜 플레이가 안되는지 확인해보면 ERR_CERT_AUTHORITY_INVALID 오류를 내뱉고 있다.

안타깝게도 국내 CDN서비스 업체들은 아직 상황 판단을 못하는건지 HTTPS를 지원하지 않는다.

모 대기업 CLOUD 상담센터 상담원에게 HTTPS지원안하냐? 계획없냐? 물어보면 "SSL CDN 어버버 네???" 이런다.

한숨 나와서 그냥 아니에요~ 하고 끊어버렸다.

이건 방법이 없다.

HTTPS를 지원하는 CDN업체를 찾아서 하던지 (가령 Cloudflare) 아니면 위에 언급했듯이 이용자에게 브라우저 설정을 바꿔주세요 라고 할 수 밖에 없다.

2020년 현재일 기준으로 테스트 해본 결과 크롬, 엣지, 모바일 사파리, 모바일 크롬 브라우저 중 혼합 컨텐츠를 차단시키는 브라우저는 PC크롬브라우저가 유일했다.

아마 다른 부라우저들도 수년내로 따라가지 않을까 싶다.

보안은 그렇게 강화하며 따라가곤했으니

<textarea name="TITLE" class="TITLE">내 제목, 입니다.</textarea>
<script type="text/javascript">
    CKEDITOR.replace("TITLE", { height: 100 });
</script>

<textarea name="TITLE" class="TITLE">내 제목 입니다.2</textarea>
<script type="text/javascript">
    CKEDITOR.replace("TITLE", { height: 100 });
</script>

<textarea name="TITLE" class="TITLE">내 제목 입니다.3</textarea>
<script type="text/javascript">
    CKEDITOR.replace("TITLE", { height: 100 });
</script>

대충 이런식으로 TEXTAREA에 CKEDITOR를 적용해놓고 저장을 하는데 가끔 CKEDITOR를 배열로 배치하여 사용할 때 배열 구조상 문장에 ", " 이런 문자열이 들어가면 문제가 생길 수 있다.

뒤 처리단에서 동일안 컨트롤 이름으로 SPLIT하여 처리하게 될 경우 ", "로 인해 의도치 않게 데이터가 짤려버리는 상황처럼 말이다.

따라서 팁으로 보내기전에 해당 문자열은 다른 문자열로 치환시킨 후 처리하는 뒷단 페이지에서 다시 원상복구 시켜주면 해결되는데 이게 그냥 하면 안되고 아래처럼 getData로 값을 받아서 setData로 치환된 데이터를 넣어줘야 한다.

            $(".TITLE").each(function() {
                var editor = CKEDITOR.instances['TITLE' + nCkeditorNum];
                strData = editor.getData();
                editor.setData(strData.replace(/, /g, "!^"));
                nCkeditorNum++;
            });

처리하는 뒷단에선 "!^"를 ", "로 다시 원상복구 하여 저장시키든 말든 하면 끝남
굳이 자바스크립트 정규표현식까진 설명 안하겠음.

블로그 : https://blog.addpipe.com/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/

git : https://github.com/addpipe/simple-recorderjs-demo

사용법 : 위 github로 접속하여 소스 다운로드만 하면 잘 됨
github.com/addpipe/simple-recorderjs-demo/archive/master.zip

js폴더 하위에 app.js만 수정해주면 되는데 기본은 php로 되어있다.
난 classic asp이므로 function createDownloadLink(blob) 이 부분을 수정해주면 된다.
원본은 리스터로 업로드 버튼을 클릭하면 업로드를 진행하게 되어 있는데 자동으로 업로드를 해줘야 했기 때문에
upload.addEventListener("click", function(event) {
})

// 자동업로드시작
  var xhr=new XMLHttpRequest();
  xhr.onload=function(e) {
      if(this.readyState === 4) {
          alert(e.target.responseText);
      }
  };

  var fd=new FormData();     

  fd.append("audio_data", blob, "filename.wav"); // 파일 이름은 원본 소스에 날짜시간 뭐 이런식으로 되어 있는데 알아서 바꿔주면 된다.

  fd.append("userid", "myid");

  xhr.open("POST","/upload/voiceupload.asp",true); //js폴더 기준으로 업로드 파일의 경로를 제대로 지정해줘야 한다.

  xhr.send(fd);

// 자동업로드끝

주의사항 : SSL(https)가 아닌경우 권한 문제 발생되므로 반드시 SSL환경에서 구현할 것
edge, (android, ios, pc)

chrome, safari 등 어지간한 브라우저는 다 지원함.
망할 IE는 안됨. 당연히