[Javascript] HTML form 데이터 다루기
안녕하세요 탐구소년입니다. HTML로 웹문서를 만들 때 태그를 사용하면 데이터를 입력할 수 있는 양식을 만들 수가 있습니다. 이 양식에 입력된 데이터를 사용자가 서버 프로그램으로 전달하게 되면, 해당 서버가 그것을 처리할 수 있습니다. 이번 포스팅에서는 사용자가 직접 서버의 역할까지 수행할 수 있도록, HTML 웹문서에 자바스크립트 코드를 추가하여 폼에 입력된 데이터를 처리해보도록 하겠습니다. 사용자가 폼을 통해 몇가지 데이터를 입력하고 제출을 하면, 제출된 데이터를 화면 상에 출력하는 흐름으로 코드를 작성해 볼 것입니다. 먼저, 다음과 같이 HTML 코드를 작성하여 간단한 양식을 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ..
[NODEJS] passport 사용해 로컬 로그인 구현하기
안녕하세요 탐구소년입니다. NodeJS로 서버를 제작할 때는 유용한 패키지를 많이 사용할수록 간결하게 필요한 기능을 구현할 수가 있습니다. 다양한 패키지 중에서도 passport라는 이름의 패키지는 사용자 인증과 관련된 기능을 제공하는 유용한 패키지인데, 일 때문에 passport의 간단한 예제가 필요해져서, 필요한 최소한의 기능만을 구현한 예제를 만들어봤습니다. 혹시나 passport 예제가 필요하신 분들이 참고하시면 좋을 것 같아서 블로그에 올려봅니다. 여기에서는 일단 passport가 대략 어떤 것인지에 대해서, 그리고 node 앱이 대강 어떻게 구성되는지에 대해서는 어느 정도 알고 계신 분들이 본다고 가정하고 코드 위주로만 올리도록 하겠습니다. 먼저 프로젝트 폴더의 구조는 다음과 같습니다. 뷰는 ..
[제이쿼리] 미니프로젝트 - 타이핑 게임
안녕하세요 탐구소년입니다. 오늘은 HTML, CSS, JAVASCRIPT 공부를 갓 시작하신 분들이 도전해보시면 좋을 만한 프로젝트(?)를 하나 준비해봤습니다. 이름은 타이핑 게임으로 정해보았습니다. 프로젝트의 결과물은 다음과 같습니다. 페이지가 열리면 위와 같은 화면이 등장하고 여기에는 남은 시간, 영어 단어, 입력창 그리고 점수가 표시됩니다. 시간은 8초부터 시작을 하고, 남은 시간이 0초가 될 때까지 화면에 보이는 영어단어를 타이핑하는 게임입니다. 정확하게 타이핑을 마쳤을 때마다 스코어는 하나씩 올라가고, 영어단어는 새로운 것으로 교체되며 입력창은 리셋이 됩니다. 그리고 점수를 딸 때마다 시간은 소폭 증가하여 게임을 오래 지속할 수 있게 됩니다. 기본적으로 HTML과 CSS를 사용해서 형태를 구성했..
자바스크립트 클립보드 복사하기 기능
안녕하세요 탐구소년입니다. 오늘은 자바스크립트 코드를 작성해 텍스트를 복사하는 기능을 구현한 예제를 준비하였습니다. 예제 코드를 보관하기 위해 폴더 하나를 만들고, 거기에 index.html, index.css, 그리고 index.js 파일까지 총 세 개의 파일을 생성하였습니다. 그리고 다음은 각각의 파일에 작성된 코드입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 자바스크립트 텍스트 복사 내용 입력 복사 Colored by ColorScripter cs index.css 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 #container..
visual studio code 설치 파일 다운로드 및 설치하는 법
안녕하세요 탐구소년입니다. 프로그램 코드 작성을 위한 여러가지 편리한 기능을 제공하는 소프트웨어, 코드 편집기를 알고 계시나요? 오늘은 여러 종류의 코드 편집기 중에서도 많은 이들의 사랑을 받고 있는 비주얼 스튜디오 코드(이하 VSCODE)의 다운로드 및 설치방법에 대해서 준비해봤습니다. VSCODE는 이름에서도 알 수 있듯 마이크로소프트사에서 만든 코드 편집기입니다. VSCODE는 다운로드는 아래의 링크에서 가능합니다. https://code.visualstudio.com/ 링크를 타고 들어가시면, 위와 같은 페이지가 펼쳐집니다. 위 이미지를 기준으로, 왼편의 가운데 쯤에 있는 파란색 'Download for Windows 버튼을 누르시면 설치가 시작됩니다. 당연히 윈도우를 사용하지 않으시는 경우 버튼..
파이썬 웹 크롤링 : 기본 개념 및 간단 예제
안녕하세요 탐구소년입니다. 오늘은 파이썬으로 웹 크롤링하는 방법에 대한 글을 준비했습니다. 잠깐 짬이 나서 쓰는 글이기 때문에 복잡한 내용을 다루기에는 약간 부담이 있으므로.. 웹 크롤링의 개념과, 기본적인 접근 방법, 그리고 간단한 예제 코드 순서로 아주 간단하게만! 정리해보도록 하겠습니다. 웹 크롤링이란? 웹 상에 있는 데이터들을 잘 긁어오는 기술을 크롤링이라고 합니다. 인터넷 사이트들을 돌아다니며 필요한 정보를 자동, 반자동으로 획득하는 행위(?)를 웹 크롤링이라고 하는 거죠. 그러한 행위를 위해서는 역시(!) 그러한 처리를 할 수 있는 컴퓨터 프로그램이 필요하겠죠. 이때 그런 역할을 처리하는 컴퓨터 프로그램을 '웹 크롤러'라고 하고요. 이 웹 크롤러를 사용하는 행위를 웹 크롤링이라고 하면 되겠습니..