탐구소년

안녕하세요 탐구소년입니다. NodeJS로 서버를 제작할 때는 유용한 패키지를 많이 사용할수록 간결하게 필요한 기능을 구현할 수가 있습니다. 다양한 패키지 중에서도 passport라는 이름의 패키지는 사용자 인증과 관련된 기능을 제공하는 유용한 패키지인데, 일 때문에 passport의 간단한 예제가 필요해져서, 필요한 최소한의 기능만을 구현한 예제를 만들어봤습니다. 혹시나 passport 예제가 필요하신 분들이 참고하시면 좋을 것 같아서 블로그에 올려봅니다. 여기에서는 일단 passport가 대략 어떤 것인지에 대해서, 그리고 node 앱이 대강 어떻게 구성되는지에 대해서는 어느 정도 알고 계신 분들이 본다고 가정하고 코드 위주로만 올리도록 하겠습니다. 먼저 프로젝트 폴더의 구조는 다음과 같습니다. 뷰는 ..

안녕하세요 탐구소년입니다. 노드JS를 교육할 일이 생겨서 각종 패키지를 테스트하는 중인데, 오늘은 여러가지 패키지 중 morgan을 테스트하다가 왠지 블로그에 남겨두고 싶은 마음이 생겨서 글을 작성합니다. morgan 패키지는? morgan은 로깅(logging)에 도움을 주는 미들웨어입니다. 로깅이란 무슨 일이 어디에서 일어났는지를 기록하는 것을 의미합니다. morgan 패키지 설치 1 npm install morgan morgan 적용 방법 morgan은 클라이어트와 서버의 응답 사이에 존재하는 미들웨어이므로, 아래와 같은 코드를 적절한 위치(루트 이벤트 리스너 전)에 적용해주면 됩니다. 1 app.use(morgan("tiny")) 위와 같은 코드를 적용하면 아래와 같이 최소한의(?) 로그를 남길 ..

안녕하세요 탐구소년입니다. 오늘은 HTML, CSS, JAVASCRIPT 공부를 갓 시작하신 분들이 도전해보시면 좋을 만한 프로젝트(?)를 하나 준비해봤습니다. 이름은 타이핑 게임으로 정해보았습니다. 프로젝트의 결과물은 다음과 같습니다. 페이지가 열리면 위와 같은 화면이 등장하고 여기에는 남은 시간, 영어 단어, 입력창 그리고 점수가 표시됩니다. 시간은 8초부터 시작을 하고, 남은 시간이 0초가 될 때까지 화면에 보이는 영어단어를 타이핑하는 게임입니다. 정확하게 타이핑을 마쳤을 때마다 스코어는 하나씩 올라가고, 영어단어는 새로운 것으로 교체되며 입력창은 리셋이 됩니다. 그리고 점수를 딸 때마다 시간은 소폭 증가하여 게임을 오래 지속할 수 있게 됩니다. 기본적으로 HTML과 CSS를 사용해서 형태를 구성했..

안녕하세요 탐구소년입니다. 오늘은 visual studio 2019 설치 절차를 준비했습니다. C언어 코드 작성 및 실행을 염두에 두고 환경을 설정해가며 설치한 과정이니 이를 참고해주세요. 먼저 설치 파일의 다운로드를 위해 다운로드 페이지에 방문하겠습니다. 페이지 링크는 다음과 같습니다. visualstudio.microsoft.com/ko/vs/ 페이지 들어가자마자 보이는 셀렉트 메뉴를 클릭하고, 가장 위에 있는 Community 2019를 선택합니다. 해당 버전은 무료이므로 교육 및 학습용으로 적합합니다. 설치 파일(Installer)의 준비가 진행될 동안 잠시 기다려주세요. 설치 파일이 준비되면 위와 같은 화면이 나타납니다. 화면에서는 visual studio 2019를 통해 개발 가능한 여러가지 ..

안녕하세요 탐구소년입니다. 오늘은 자바스크립트 코드를 작성해 텍스트를 복사하는 기능을 구현한 예제를 준비하였습니다. 예제 코드를 보관하기 위해 폴더 하나를 만들고, 거기에 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..

안녕하세요! 오늘은 개발도구 이클립스의 설치 절차에 대한 정리를 준비했습니다. 정확히는 자바 통합개발환경 설치를 진행하도록 할텐데요, 바로 시작해보도록 하겠습니다. 이클립스 설치를 위해서는 먼저 아래의 링크로 이동을 해주어야 합니다. https://www.eclipse.org/ 오른쪽 상단에 Download 버튼이 있는 게 보입니다. 이것을 클릭해줍니다. 그러면 페이지 이동이 이루어지고, 위와 같은 버튼이 상단에 나타납니다. 주황색 버튼을 클릭합니다. 그러면 설치파일의 다운로드가 시작되는데, 다운로드가 끝나면 곧장 설치파일을 실행시킵니다. 설치파일 실행중... 설치파일이 열리면 여러가지 항목 중 설치를 원하는 항목을 선택할 수 있는데, 이 중 가장 위에 있는 Eclipse IDE for Java deve..

안녕하세요! 이번 글에서는 윈도우 컴퓨터에서 자바 프로그래밍을 시작하기에 앞서 진행해주면 좋은 '자바 환경변수 설정'에 대해 정리해보도록 하겠습니다. 환경변수는 운영체제가 프로그램을 실행할 때 참고하는 데이터이고, 환경변수에 자바와 관련한 데이터를 설정하면 운영체제가 자바 프로그램을 실행하는 데 많은 도움이 됩니다. 자세한 내용이 궁금하신 분들은 조금만 찾아보시면 손쉽게 자료를 얻으실 수 있을 것이고요, 이번 글에서는 환경변수 설정에 대해서만 담백하게(?) 정리하도록 할게요! 환경변수 설정을 위해 제일 먼저, 제어판 > 시스템 및 보안 > 시스템 창을 열어보겠습니다. 여기에서 좌측 상단에 보이는 '고급 시스템 설정'을 선택해주시면 됩니다. 그러면 창이 하나 열리게 되는데 거기에서 '고급' 탭을 선택하시고..

안녕하세요! 오늘은 자바 프로그래밍의 첫걸음인 JDK 설치 절차에 대해 정리해보도록 하겠습니다. JDK의 설치를 위해서는 제일 먼저 아래의 링크로 이동을 해주셔야 합니다. https://www.oracle.com/kr/java/technologies/javase-downloads.html 클릭하면 이동합니다. 옛날에는 이렇지 않았던 것 같은데.. 인터페이스가 무척 깔끔하네요. 가운데에 있는 JDK Download가 보이시죠? 여기를 클릭해주시면 됩니다. 그러면 각 운영체제에 맞는 설치파일을 다운로드할 수 있는 페이지가 나타납니다. 저는 윈도우에서의 설치를 가정하고 있습니다. 테이블 내용 중 밑에서 두번째에 있는 Windows x64 Installer의 링크(?)를 클릭해주세요. 그러면 창이 하나 뜰 것입..

안녕하세요 탐구소년입니다. 오늘은 HTML의 태그를 사용할 때 항상(?) 등장하는 action 속성과 onsubmit 이벤트 핸들러의 차이에 대해서 정리해보겠습니다. 벌써 하나는 속성이고 하나는 이벤트 핸들러라는 차이를 말해버리고 말았는데, 아무튼 차이를 알아보도록 하겠습니다. action action은 다음과 같은 역할을 합니다. 'form 데이터를 처리할 프로그램의 URI를 지정한다.' URI(Uniform Resource Identifier)는 하나의 리소스를 가리키는 문자열입니다. URL(Uniform Resource Locator)도 URI의 일종이라고 할 수 있는데요, 따라서 action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면, 브라우저의 루트(route..

안녕하세요 탐구소년입니다. 프로그램 코드 작성을 위한 여러가지 편리한 기능을 제공하는 소프트웨어, 코드 편집기를 알고 계시나요? 오늘은 여러 종류의 코드 편집기 중에서도 많은 이들의 사랑을 받고 있는 비주얼 스튜디오 코드(이하 VSCODE)의 다운로드 및 설치방법에 대해서 준비해봤습니다. VSCODE는 이름에서도 알 수 있듯 마이크로소프트사에서 만든 코드 편집기입니다. VSCODE는 다운로드는 아래의 링크에서 가능합니다. https://code.visualstudio.com/ 링크를 타고 들어가시면, 위와 같은 페이지가 펼쳐집니다. 위 이미지를 기준으로, 왼편의 가운데 쯤에 있는 파란색 'Download for Windows 버튼을 누르시면 설치가 시작됩니다. 당연히 윈도우를 사용하지 않으시는 경우 버튼..