'프로그래밍/자바스크립트' 카테고리의 글 목록

일	월	화	수	목	금	토
			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

프로그래밍/자바스크립트

[10. 코드 난독화 & 암호화] 코딩을 하다 문득 암호화를 해야 하는...

2020. 8. 28. 00:02 | Posted by 붉은kkk

최근 자바스크립트로 웹사이트를 만들던 중 문득 문득 든 생각인데, 어렵게 코딩을 해서 기능을 구현했는데

너무 쉽게 오픈되어 다른 사람들이 쓸 수 있게 되면 어떻게 될까? 라는 생각을 해보았습니다.

사실 공부할땐 저도 많이 베끼는데... ㅎㅎ 제껀 부끄러워서 보여주고 싶지 않은 마음이 큰거 같네요.

약간의 고민과 검색을 통해 난독화에 대한 내용을 보게 되었답니다.

자바스크립트 난독화란?

자바스크립트는 클라이언트에서 실행되는 언어라서 웹사이트에 접근하게 되면 크롬의 경우 "F12" 버튼을

누르는 것만으로 코드를 볼 수 있게 된답니다.

이렇게 쉽게 코드에 접근 할 수 있다보니, 해석에 어려움을 가하고자 난독화라는 기법이 적용되었답니다.

난독화는 쉽게 볼 수 있는 자바스크립의 코드를 해석하기 어렵게 해주는 기법이며, 다른 여타 언어에서도 난독화 기법은 사용될 수 있어요.

... 이렇다네요.

난독화해주는 기법들이 다양하게 있는 듯 한데... 굳이 필요한가 하는 생각도 들기도 하고

관련 내용에 대해서는 다음번 포스팅에(진짜 필요하다고 생각되어 내용을 정리해 놓았다면) 언급해 봐야겠네요.

그럼 오늘도 즐거운 프로그래밍 생활 되세요.

[9. Chart.js] JAVASCRIPT 차트 라이브러리

2020. 5. 12. 06:47 | Posted by 붉은kkk

'Chart.js'는 자바스크립트로 다양한 차트를 표현할 때 사용하면 좋은 라이브러리 입니다.

저는 아래와 같은 Radar Chart와 Polar Chart가 맘에 들어서 활용해보고 싶어졌어요.

... 실제 코드는 다음 포스팅에 남기도록 할게요.

어느새 출근 시간이 다가와서, 오늘의 포스팅은 여기서 마무리를 하고 다음 포스팅에 상세한 내용을 기재하도록 하겠습니다.

Chart.js is available under the MIT license.

[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기

2020. 5. 12. 06:22 | Posted by 붉은kkk

자바스크립트로 글이 써지는 듯한 효과를 나타내고 싶을 때 쓰면 좋은 라이브러리가 있습니다.

바로 'Typed.js' 인데요.

사용방법은 어렵지 않습니다.

https://mattboldt.com/demos/typed-js/

JavaScript Animated Typing with Typed.js | by Matt Boldt

Another demo made with love by Matt Boldt. Installation # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower bower install typed.js Setup var typed = new Typed('.element', { strings: ["First sentence.", "Second sentence."], typeSpeed:

mattboldt.com

CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

예제 소스

<html>

<body>
    <div class="element"></div>
</body>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
var options = {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 40
};

var typed = new Typed('.element', options);

</script>

</html>

이렇게 하면, strings에 있는 글자가 하나씩 타이핑 되는 효과를 볼 수 있습니다.

Upgrade된 예제 코드는 아래와 같아요

(커서 효과가 추가 되었습니다.)

<div> --> <span> 으로 변경된 것도 참조하세요.

커서 효과를 주려고 하니까 div는 제대로 되지 않고 span으로 해야 되더라구요^^;

<html>
<head>
    <meta charset="utf-8">
</head>

<body>
    <span class="element"></span>
</body>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
var options = {
  strings: ['First sentence.', '&amp; a second sentence.', '테스트결과 만족 스러워요'],
  typeSpeed: 40,
  backSpeed: 100,
  fadeOut: false,
  smartBackspace: true,
  cursorChar: '_',
  loop: true
};

var typed = new Typed('.element', options);

</script>

</html>

마지막으로, 개발자의 요청사항을 만족시켜 줍시다.

'Typed.js' 사용 시 개발자에게 감사의 마음을 담아 사용함을 알려 주면 된다고 합니다.

Thanks for checking this out. If you have any questions, I'll be on Twitter.

If you're using this, let me know! I'd love to see it.

It would also be great if you mentioned me or my website somewhere. www.mattboldt.com

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[10. 코드 난독화 & 암호화] 코딩을 하다 문득 암호화를 해야 하는... (0)	2020.08.28
[9. Chart.js] JAVASCRIPT 차트 라이브러리 (0)	2020.05.12
[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기 (0)	2020.05.01
[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22

프로그래밍/자바스크립트

[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기

2020. 5. 1. 10:38 | Posted by 붉은kkk

이번 시간엔 Javascript를 이용하여 동적 테이블을 간단히 만드는 방법에 대해 포스팅 하도록 하겠습니다.

이번 포스팅은 사실 알고나면 간단한거지만, 알기까지의 과정이 쉽지 않았던 거 같네요.

(제가 동적 테이블의 유용성을 잘 인지를 못했던 거 같아요.)

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    

    </head>

    <body>
    동적 테이블 Test입니다.
    <table class="table test">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
        </tr>

        <tbody id="table1">

        </tbody>
    </table>



<script>
var myArray = [
    {'이름' : '홍', '나이' : '20', '성별' : '남'},
    {'이름' : '이', '나이' : '25', '성별' : '여'},
    {'이름' : '박', '나이' : '30', '성별' : '여'},
    
]

buildTable(myArray)

function buildTable(data) {
    var table = document.getElementById('table1')

    for (var i=0; i < data.length; i++)
    {
        var row = `<tr>
                    <td>${data[i].이름}</td>
                    <td>${data[i].나이}</td>
                    <td>${data[i].성별}</td>
                   </tr>`
        table.innerHTML += row
    }
}


</script>

    </body>
</html>

코드 블록 설명

1. HTML 기본 문서 생성

2. Table 생성 (id를 지정해줍니다.)

3. Javascript (Data 저장, Data 크기에 따른 Table 만들기)

간단한 코드이므로 설명은 굵직한 토대만 드렸습니다.

보면 간단히 알 수 있는 부분이므로 자세한 설명은 생략할게요^^

그럼 오늗도 즐거운 프로그래밍 생활 되세요.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[9. Chart.js] JAVASCRIPT 차트 라이브러리 (0)	2020.05.12
[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기 (0)	2020.05.12
[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기 (0)	2019.10.20

프로그래밍/자바스크립트

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성

2019. 10. 27. 20:01 | Posted by 붉은kkk

지난시간에 이어 자바스크립트로 데이트 서비스 웹사이트를 만드는 프로젝트에 대해 포스팅하겠습니다.

기본적인 사이트 요소는 갖추어서 맛보기용으로는 손색 없을 것 같네요.

사용된 기능

1. JSON data 형식 : 사용자 정보를 입력한 것은 JSON data 형태로 입력하였습니다.

2. If문 : 성별 및 취미를 check 하기 위해 If 문을 사용하였습니다.

3. For문 : 사용자 정보를 가져오기 위해 For문을 사용하였습니다.

해놓고 보니까 별거 아닌거 같기도 하네요.

코드는 아래와 같습니다.

자! 이렇게 자바스크립트로 하는 맛보기용 프로젝트가 완성되었습니다.

다음번엔 더 재밌는 주제로 찾아올게요.

즐거운 프로그래밍 생활 되세요.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기 (0)	2020.05.12
[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기 (0)	2020.05.01
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기 (0)	2019.10.20
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기 (0)	2019.10.20

프로그래밍/자바스크립트

[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트

2019. 10. 22. 06:48 | Posted by 붉은kkk

자바스크립트로 데이팅 사이트를 만들어볼까 하고 있어요.

앱으로 만들어보고자 했던 건데... 사실 조금 어려운 부분이 있어서 막막해 했던 프로젝트였습니다.

근데... 우연히? ㅋㅋ

자바스크립트로 데이트 사이트를 만들 수 있을 것 같다는 생각이 드네요.

우연히 보고 있는 강좌를 잘 만 변형하면 될 것 같습니다.

서론이 길면 재미가 없겠죠?

출근시간의 압박으로 길게 포스팅을 할 수는 없어서 실행화면과 코드 첨부합니다.

맛보기는 이렇게만 공유하고, 최종 완성본(?)이 제작되는 시점에 이 주제는 다시 포스팅 하겠습니다.

감사합니다.

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기 (0)	2020.05.01
[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기 (0)	2019.10.20
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기 (0)	2019.10.20
[2. 추천에디터] 무료 프로그램인 Notepad++ (0)	2019.10.18

프로그래밍/자바스크립트

[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기

2019. 10. 20. 18:50 | Posted by 붉은kkk

이번엔 자바스크립트에서 변수 사용하는 방법에 대한 포스팅입니다.

변수의 종류와 사용법 모두를 정리하고 싶은 맘이 있긴한데... 우선은 간단한 것부터 시작하겠습니다.

아직까지는 코드가 직관적으로 보이고 있으니까 이해하기 쉽네요.

1. var : 자바스크립트에서 변수(Variable) 선언을 하려면 변수명 앞에 var을 써주시면 됩니다.

2. 연산자 (산술연산자 위주)

1	=	왼쪽에 대입
2	+	더하기
3	-	빼기
4	*	곱하기
5	/	나누기
6	%	나머지

???

의도한 연산결과가 보이지 않네요.

크롬 브라우저에서 F12(버튼)를 눌러주세요.

이상으로 자바스크립트로 변수를 사용하는 방법을 연습해 봤습니다.

하나하나 차곡차곡 쌓아가다 보면 멋진 프로젝트도 완성할 수 있는 날이 있겠죠?

저부터 실천해 나가보겠습니다.

오늘도 즐거운 프로그래밍 생활되세요^^

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22
[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기 (0)	2019.10.20
[2. 추천에디터] 무료 프로그램인 Notepad++ (0)	2019.10.18
[1. 자바스크립트 시작] 자바스크립트 시작하기. (0)	2019.10.18

프로그래밍/자바스크립트

[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기

2019. 10. 20. 13:52 | Posted by 붉은kkk

오늘은 HTML에 자바스크립트 파일을 불러와서 실행되게 코드를 작성해 볼거에요.

그 전에, 자바스크립트를 배우고 알게 됨으로써 얻는 이득이 무엇인지 알려드릴게요.

저도 지금은 배우는 단계라서, 디테일한 내용들에 대해 알려드릴 수는 없지만 대략적으로 다음과 같은 것들을

할 수 있다고 합니다.

상세 내용은 아래 Table에!!!

참고 삼아 보시면 도움이 될 듯 합니다.

(아직 어떤 언어를 공부해야 될 지 모르는 분들은 그 언어로 무엇을 만들 수 있는지를, 그 언어가 무슨 프로그램 제작에 특화되어 있는지를 보고 선택적으로 취하시면 될 것 같네요.)

자바스크립트로 할 수 있는 것들은 무엇이 있을까요?

What can you build with javascript?

1. Interactive websites
2. Apps
3. Games
4. Web Applications

Requirements
1. Web Broswer
2. Code Editor
3. Basic HTML and CSS knowledge is required!

그럼 오늘의 코드를 공개합니다.

지난 시간의 HTML파일 내에서 자바스크립트를 실행했던것을,

이번엔 자바스크립트 파일을 별도로 만들어서 호출하는 형태로 사용하였습니다.

지난 시간의 확장버전이라고 보시면 되요^^

코드 관리를 효율적으로 하려면 이렇게 별도의 파일로 작성하여 사용하는 것이 맞는 방법일 것 같네요.

(...답은 없답니다. 남들이 뭐라하건 나한테 맞으면 그게 맞는 방법이에요)

ㅎㅎ 저도 얼른 실력을 키워서 상호작용하는 웹사이트를 어서 빨리 만들어 보고 싶네요.

코딩 실력이 쌓이면 (코딩 실력이라고 쓰고... "구글링 실력 & 버그 잡기 & 내가 원하는 형태로 수정하기" 라고 읽어야 될까요?) 가능할테니까요.

제가 생각하고 만든 서비스로, 어서 빨리 수익창출을 해보고 싶네요.

별도로 포스팅하는 창업 다마고찌 카테고리도 많은 관심 부탁 드립니다.

자바스크립트도 배우고 나면, 서비스를 만들거에요.

그럼 오늘도 다 같이 즐거운 프로그래밍 생활 되세요^^

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0)	2019.10.27
[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0)	2019.10.22
[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기 (0)	2019.10.20
[2. 추천에디터] 무료 프로그램인 Notepad++ (0)	2019.10.18
[1. 자바스크립트 시작] 자바스크립트 시작하기. (0)	2019.10.18

옆집오빠

태그목록

공지사항

최근에 올라온 글

최근에 달린 댓글

글 보관함

링크

calendar

카테고리

'프로그래밍/자바스크립트'에 해당되는 글 10건

[10. 코드 난독화 & 암호화] 코딩을 하다 문득 암호화를 해야 하는...

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[9. Chart.js] JAVASCRIPT 차트 라이브러리

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[8. Typed.js] JAVASCRPIT로 글쓰는 효과 만들기

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[4. 자바스크립트 변수] 자바 스크립트에서 변수 사용하기

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

[3. 자바스크립트 include] HTML에 자바스크립트 파일 포함시키기

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

티스토리툴바