블로그 이미지
잡다한 취미 생활 및 일상에 대한 소소한 이야기를 적어나가는 블로그입니다.
붉은kkk

공지사항

최근에 올라온 글

최근에 달린 댓글

글 보관함

calendar

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

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

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

 

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

 

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

 

자바스크립트 난독화란?

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

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

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

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

 

... 이렇다네요.

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

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

 

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

 

 

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

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

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

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

 

 

 


Chart.js is available under the MIT license.

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

 

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

성별 검색 기능과 취미 기능이 포함되었습니다.
성별 및 취미 입력후 검색하면 검색이 잘 이루어지네요.

 

사용된 기능

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

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

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

 

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

코드는 아래와 같습니다.

 

JSON형식의 user정보
유저정보를 가져오면서 성별과 취미도 검색해서 최종 결과를 뿌려줍니다.

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

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

 

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

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

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

 

근데... 우연히? ㅋㅋ

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

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

 

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

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

 

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

 

 

 

 

감사합니다.

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

 

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

 

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

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

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

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

 

변수 선언 후 산술 연산을 하는 코드입니다.

 

실행을 하면, 변수의 사용법만 덜렁 있습니다.

??? 

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

 

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

 

console로 찍은 내용들이 나와있습니다.

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

 

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

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

 

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

오늘은 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파일 내에서 자바스크립트를 실행했던것을,

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

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

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

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

코드는 여전히 간단하죠^^
2.html파일과 script.js파일을 만들었어요.
두둥. 실행 완료. 잘 동작되네요^^

 

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

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

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

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

 

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

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

 

코딩을 메모장으로만 하면 가독성이 떨어지는 경우가 있습니다.

그래서 저는 Notepad++를 추천 드립니다...

사실 저도 이제 막 설치 했답니다. 그리고 추천 이유는 무료프로그램이어서 추천 드리고 있습니다.

뭐가 좋은진 잘 모르지만, 가독성은 높아질 것 같네요. 단지 이것만이라도 저한텐 많은 도움이 될거 같습니다.

 

다운로드는 아래 사이트에서 자신의 컴퓨터에 맞는 버전으로 설치하시면 됩니다.

https://notepad-plus-plus.org/

 

Notepad++

What is Notepad++ News about Notepad++ new website Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed b

notepad-plus-plus.org

 

... 설치를 하고, 처음 만들었던 "Hello world" 출력 프로그램 파일을 열어봤습니다. ^^ 저는 만족!

 

처음 만들었던 프로그램의 코드를 열어봤습니다.

ㅎㅎ 다음엔 더 재밌는 예제로 포스팅 해보겠습니다.

 

이전 1 다음