본문 바로가기

Programming231

JavaScript에서 함수(function)를 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 함수를 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 함수를 사용하는 방법은 크게 두가지가 있습니다. 함수이름과 함께 사용하는 방법과 함수 이름 없이 사용하는 방법(익명함수)이 있습니다. 함수 이름과 함께 사용하는 방법(선언적 함수) sum(); function sum(){ var a = 10; var b = 20; var c = a + b; } 선언적 함수는 호출하는 코드가 먼저 있더라도 상관없이 실행됩니다. 함수 이름 없이 사용하는 방법(익명함수) var sum = function(){ var a = 10; var b = 20; var c = a + b; } sum(); 익명함수는 호출하는 코드보다 항상 먼저 작성되어야 합.. 2020. 2. 12.
JavaScript에서 객체(object)를 만들고 값을 추가하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 객체(object)를 만들고 값을 추가하는 방법에 대해서 알아보겠습니다. 객체(object)를 만들고 값을 추가하는 방법은 세가지가 있습니다. new 생성자를 사용하는 방법과, 객체를 생성하면서 요소를 추가하는 방법, 그리고 중괄호를 사용해서 직접 생성하는 방법이 있습니다. new 생성자를 사용하는 방법 var obj = new Object(); obj.a = 10; obj.name = 'Korea'; obj.fn = function(){}; 객체를 생성하면서 요소를 추가하는 방법 var obj = new Object({a: 10, name: 'Korea', fn:function(){}}); 중괄호를 사용해서 직접 생성하는 방법 var obj.. 2020. 2. 11.
JavaScript의 Data Type(데이터 타입) 종류 안녕하세요. 혀코입니다. 이번시간에는 JavaScript의 Data Type(데이터 타입) 종류에 대해서 알아보겠습니다. JavaScript의 Data Type(데이터 타입)의 종류는 다음과 같습니다. Number, String, Boolean 이렇게 세가지를 Primitive Data Type이라고 합니다. Object, Array, Function 이렇게 세가지를 Composite Data Type이라고 합니다. Undefined, Null 이렇게 두가지를 Special Data Type이라고 합니다. Number: 숫자, 정수와 실수를 의미합니다. String: 문자열을 의미합니다. Boolean: 참과 거짓, true 또는 false 값을 가집니다. Object: 객체, key와 key value.. 2020. 2. 11.
JavaScript에서 var 변수 선언하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 var 변수 선언하는 방법에 대해서 알아보겠습니다. var 변수 선언하는 방법은 다음과 같습니다. var a = 10; var b = 'Hello'; 변수명 a를 만들고, 숫자 10을 저장하고, 변수명 b를 만들고, 문자열 Hello를 저장했습니다. 변수명은 모든 문자를 사용할 수 있는 것이 아니라, 제약사항이 있습니다. 변수명의 첫 글자에는 숫자를 사용할 수 없습니다. 변수명의 첫 글자에 특수기호를 사용할 수 없습니다. 변수명은 JavaScript 예약어를 사용할 수 없습니다. 참고로 JavaScript의 예약어는 다음과 같습니다. abstract boolean break byte catch char class const continue d.. 2020. 2. 10.
JavaScript에서 Comment(주석)하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 Comment(주석)하는 방법에 대해서 알아보겠습니다. JavaScript에서 Comment(주석)하는 방법은 크게 두가지가 있습니다. 한줄을 주석처리 하는 방법과, 여러 줄을 한꺼번에 주석 처리하는 방법이 있습니다. 한줄을 주석처리 하는 방법은 아래와 같이 하면 됩니다. console.log('Hello World') // Hello World를 출력합니다. 주석처리 하고자 하는 줄 앞에 '/' 기호를 두개 연달아 입력하면 해당 줄만 주석처리 할 수 있습니다. 여러줄을 한꺼번에 주석처리 하는 방법은 아래와 같이 하면 됩니다. console.log('comment for multiple line of code') /* 여러줄을 한꺼번에 주석처.. 2020. 2. 10.
jQuery 관련 웹사이트 링크 모음 안녕하세요. 혀코입니다. 오늘은 jQuery 관련 웹사이트 링크를 찾아보기 쉽도록 한군데 모아봤습니다. jQuery 공식 웹사이트 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com jQuery UI 공식 웹사이트 https://jque.. 2020. 2. 7.
JavaScript로 form input으로 받은 문자 웹페이지에 출력하는 방법 안녕하세요. 혀코입니다. 오늘은 JavaScript로 form input으로 받은 문자를 웹페이지에 출력하는 방법에 대해서 알아보겠습니다. index.html을 다음과 같이 작성합니다. Hello World Welcome to Hyukho's Programming Submit form 태그 안에는 input과 button 태그로 구성되어 있습니다. script 태그를 맨 아래 붙여서 모든 DOM element가 로드 되면 script로 DOM을 다룰 수 있게 했습니다. app.js를 다음과 같이 작성합니다. const locationForm = document.querySelector('form') const search = document.querySelector('input') const messag.. 2020. 1. 21.
Node.js에서 Fetch 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 Fetch 사용하는 방법에 대해서 알아보겠습니다. Fetch를 사용해서 JSON 포맷의 API를 핸들링해서 찾고자 하는 데이터의 값을 구할 수 있습니다. Fetch는 다음과 같이 사용할 수 있습니다. fetch('http://json-format-api-link?search=games').then((response) => { response.json().then((data) => { if(data.error) { console.log(data.error) } else { console.log(data.title) console.log(data.price) } }) }) fetch를 쓸때는 response를 then 을 사용해서 받게됩니다. 비동기적인 방식.. 2020. 1. 20.
Node.js에서 ES6 기능 Default Parameter 사용 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 ES6 기능인 Default Parameter 사용 방법에 대해서 알아보겠습니다. app.js를 다음과 같이 작성합니다. const greeter = (name) => { console.log('Hello ' + name) } greeter('Hyukho') 그리고 node app.js 명령어를 실행하면, 'Hello Hyukho'가 출력됩니다. 이번에는 greeter 함수에 다음과 같이 parameter 를 넣지않고 작성해 보겠습니다. const greeter = (name) => { console.log('Hello ' + name) } greeter() 그리고 node app.js 명령어를 실행하면, 'Hello undefined'가 출력됩니다. 함.. 2020. 1. 19.
Node.js에서 query 값을 받아서 핸들링하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 query 값을 받아서 핸들링하는 방법에 대해서 알아보겠습니다. $ mkdir query-string $ cd query-string $ touch app.js $ npm init $ npm install express query-string 폴더를 만들고, query-string 폴더 안으로 이동해서 app.js 파일을 만들고, npm 초기화해서 package.json파일을 만듭니다. 그리고 서버를 사용하기 위해 express 를 설치합니다. app.js 파일을 다음과 같이 작성합니다. const express = require('express') const app = express() app.get('', (req, res) => { res.send(.. 2020. 1. 18.
인스타그램(Instagram) 사진 및 동영상 다운로드 방법 안녕하세요. 혀코입니다. 오늘은 인스타그램(Instagram) 사진 및 동영상 다운로드 하는 방법에 대해서 알아보겠습니다. 인스타그램 Instagram 사진 및 동영상을 다운로드 하려면, instagram-scraper 라는 프로그램이 필요합니다. instagram-scraper 프로그램은 github에 있습니다. 파이썬 python으로 실행하기 때문에 파이썬 python을 먼저 설치하시는 것을 추천드립니다. 파이썬을 설치합니다. https://www.python.org/ Welcome to Python.org The official home of the Python Programming Language www.python.org 파이썬 설치가 다 끝나셨다면, 그 다음으로 커맨드창을 열어 다음 명령어를 .. 2020. 1. 17.
유튜브(Youtube) 동영상 다운로드 하는 방법 안녕하세요. 혀코입니다. 오늘은 유튜브(Youtube) 동영상 다운로드 하는 방법에 대해서 알아보겠습니다. 유튜브 동영상을 다운로드 하려면, youtube-dl 프로그램이 필요합니다. 참고로 youtube-dl 프로그램은 윈도우(Windows)와 맥(MacOS) 그리고 Linux에서 사용 가능합니다. youtube-dl을 설치하기 전에 Python을 설치하고 진행해 주는 것을 권장합니다. https://www.python.org/ Welcome to Python.org The official home of the Python Programming Language www.python.org Windows 설치 방법은 아래 링크에서 exe 파일을 다운 로드 받아서 설치하면 됩니다. https://yt-dl... 2020. 1. 16.
웹브라우저 탭에 아이콘(파비콘 Favicon) 추가하는 방법 안녕하세요. 혀코입니다. 오늘은 웹브라우저 탭에 아이콘 일명 파비콘 Favicon 을 추가하는 방법에 대해서 알아보겠습니다. 파비콘 favicon으로 쓸 png 이미지를 준비해서 img 폴더에 넣습니다. favicon 이미지는 정사각형이 가장 좋습니다. 그리고 HTML의 head 태그안에 다음과 같이 작성해 주면 웹브라우저 탭에서 아이콘이 보여지는 것을 확인할 수 있습니다. Hello World Welcome to Hyukho's website 이렇게 웹브라우저 탭에 아이콘 일명 파비콘 Favicon을 추가하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. 2020. 1. 15.
기본 메인화면 레이아웃 정리하는 방법(flex, flex-grow) 안녕하세요. 혀코입니다. 오늘은 기본 메인화면의 레이아웃을 flex의 flex-grow를 사용해서 정리하는 방법을 알아보겠습니다. HTML 파일을 다음과 같이 작성합니다. body 안에 main-content와 footer 이렇게 두개로 나누었습니다. Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pre.. 2020. 1. 15.
Node.js 포스트 링크 모음 안녕하세요. 혀코입니다. 오늘은 그동안 포스팅했던 Node.js 글들을 모아서 볼 수 있도록 링크 정리를 해놓도록 하겠습니다. https://smilehugo.tistory.com/entry/nodejs-npm-libraries-you-should-know Node.js의 필수적인 주요 NPM 라이브러리 모음 안녕하세요. 혀코입니다. 오늘은 Node.js의 필수적인 주요 NPM 라이브러리를 한눈에 볼 수 있도록 정리를 해볼까 합니다. nodemon https://www.npmjs.com/package/nodemon nodemon Simple monitor script for use.. smilehugo.tistory.com https://smilehugo.tistory.com/entry/nodejs-ho.. 2020. 1. 15.
Node.js에서 404 Page not found 페이지 설정하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 404 Page not found 페이지 설정하는 방법에 대해서 알아보겠습니다. express.js와 handlebar.js의 express view engine인 hbs를 설치 후 페이지 템플릿 설정이 되어있는 상태에서 시작합니다. 이전 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/nodejs-how-to-use-hbs-external-module Node.js에서 hbs 외장모듈 사용하는방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 hbs외장모듈 사용하는 방법에 대해서 알아보겠습니다. hbs 외장 모듈은 템플릿을 정의하는 handlebar.js의 express.js view engine입니다... 2020. 1. 11.
Node.js에서 hbs 외장모듈 사용하는방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 hbs외장모듈 사용하는 방법에 대해서 알아보겠습니다. hbs 외장 모듈은 템플릿을 정의하는 handlebar.js의 express.js view engine입니다. hbs를 사용해서 html의 반복되는 구성요소를 분리해서 만들어두고 필요한 곳에서 사용할 수 있게 만들 수 있습니다. hbs는 handlebar.js의 epxress.js view engine 이므로, express를 설치후에 hbs를 설치하도록 합니다. $ npm install express $ npm install hbs 프로젝트 루트 폴더에서 public 폴더를 만들고 그 안에 index.html 파일을 다음과 같이 작성합니다. Hello World Created by Hyukho ind.. 2020. 1. 10.
Node.js에서 Path 내장모듈 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 Path 내장모듈 사용하는 방법에 대해서 알아보겠습니다. Path 모듈은 폴더의 경로를 지정하는데 사용됩니다. app.js를 다음과 같이 작성합니다. const path = require('path') console.log(path.join(__dirname,'../')) __dirname 은 현재 폴더위치를 나타냅니다. 그리고 ../ 는 상위폴더로 이동입니다. D:\hugo\playground\nodejs\basics 에서 node app.js 를 실행하면, 코드 실행한 폴더 [D:\hugo\playground\nodejs\basics] $ node app.js D:\hugo\playground\nodejs\ 한단계 상위폴더를 출력하는 것을 확인할 수 .. 2020. 1. 10.
Node.js에서 현재 실행중인 파일의 경로 출력하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 현재 실행중인 파일의 경로를 출력하는 방법에 대해서 알아보겠습니다. 지난번에 현재 위치한 폴더의 경로를 출력하는 방법과 매우 유사합니다. 파일의 경로는 __filename 폴더의 경로는 __dirname 으로 값을 얻을 수 있습니다. app.js를 다음과 같이 작성합니다. const currentFilename = __filename console.log(currentFilename) 변수 currentFilename 에 현재 실행중인 파일의 전체 경로를 저장하고 console.log를 통해서 해당 변수를 출력하는 코드입니다. 다음 명령어를 실행하면, $ node app.js 현재 실행중인 파일의 전체경로가 출력되는 것을 확인할 수 있습니다. 이렇게 No.. 2020. 1. 9.
Node.js에서 현재 폴더 경로 출력하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 현재 폴더 경로를 출력하는 방법에 대해서 알아보겠습니다. 프로그래밍을 하다보면 현재 폴더 경로를 출력하거나 변수로 받을 경우가 있는데요. 수동으로 일일히 타이핑하지 말고, 프로그래밍을 하는 개발자 답게 현재 파일이 실행되는 폴더 경로를 출력하는 방법에 대해서 설명을 드리도록 하겠습니다. app.js를 다음과 같이 작성합니다. const currentDirectory = __dirname console.log(currentDirectory) 그리고 다음 명령어를 통해 실행해봅니다. $ node app.js 그럼 현재 폴더 경로가 표시되는 것을 확인할 수 있습니다. 이렇게 Node.js에서 현재 폴더 경로를 출력하는 방법에 대해서 알아봤습니다. 유용하셨다면,.. 2020. 1. 9.
Node.js에서 서버 구동해서 기본폴더 지정해서 디폴트 index.html 파일 보여주는 방법 안녕하세요. 혀코입니다. 저번에 Node.js에서 서버를 구동한 다음 html 파일을 보여주는 것에 대해 알아보았는데요. 이번에는 지난번과 다른 방법인 기본폴더를 지정해서 디폴트 index.html 파일을 보여주는 것에 대해 알아보겠습니다. 지난번 실행했던 코드는 다음과 같습니다. This is index.html const express = require('express') const app = express() app.get('', (req, res) => { res.sendFile(__dirname + '/index.html') }) app.get('/about', (req, res) => { res.send('This is About Page') app.listen(3000, () => { con.. 2020. 1. 9.
Node.js에서 Express로 서버 구동하고 html 파일 보여주는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 Express로 서버 구동하고 html 파일 보여주는 방법에 대해서 알아보겠습니다. 지난번에 Node.js에서 Express로 서버 구동하고 웹페이지까지 추가하는 방법에 대해서 알아봤는데요. const express = required('express') const app = express() app.get('', (req, res) => { res.send('I am Iron Man') }) app.get('/about', (req, res) => { res.send('This is About Page') }) app.listen(3000, () => { console.log('I love you 3000') }) 위의 코드처럼 해당 페이지에 res.s.. 2020. 1. 9.
Node.js에서 Express로 서버 구동한 후 웹페이지 추가하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 Express로 서버 구동한 후 웹페이지 추가하는 방법에 대해서 알아보겠습니다. 지난번에 Express로 서버 구동하는 방법까지 알아봤습니다. const express = require("express") const app = express() app.get('', (req, res) => { res.send('I am Iron Man') }); app.listen(3000, () => { console.log('I love you 3000.') }); 그래서 메인페이지에 'I am Iron Man' 이 표시되는 것까지 확인했습니다. 이제는 추가로 페이지를 만들어 보겠습니다. const express = require("express") const app.. 2020. 1. 9.
Node.js에서 request npm 대신 https 내장모듈 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 request npm 대신에 https 내장모듈을 사용하는 방법에 대해서 알아보겠습니다. request를 통해서 현재 날씨에 대한 데이터를 받는 방법은 다음과 같습니다. request npm 라이브러리를 설치 후에, app.js를 다음과 같이 작성하면 됩니다. const request = require('request') const url = 'weather-api-url-with-current-location' request({url, json: true}, (error, response) => { console.log(response.body.currently) }) request npm 대신에 https 내장모듈을 사용할 때에는 app.js를 다음과 같이 작성하면 됩.. 2020. 1. 9.
Node.js에서 ES6 기능인 Object destructuring 사용하는 방법 안녕하세요. 혀코입니다. Node.js에서 ES6 기능인 Object destructuring을 사용하는 방법에 대해서 알아보겠습니다. app.js를 다음과 같이 작성합니다. const product = { label: 'Avengers Shirt' price: 50 stock: 7 } const label = product.label const price = product.price console.log(label) console.log(price) 여기서, label과 price 변수에 product object의 각 key값에 해당하는 value를 할당하기 위해서 각각 product.label, product.price 이렇게 지정했는데요. ES6에서 지원하는 기능인 object destructur.. 2020. 1. 8.
Node.js에서 ES6 기능인 Object Property Shorthand 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 ES6 기능인 Object Property Shorthand를 사용하는 방법에 대해서 알아보겠습니다. app.js를 다음과 같이 작성합니다. const name = 'Hyukho' const userAge = 27 const user = { name: name, age: userAge, location: 'Suwon' } console.log(user) 이렇게 작성하고 커맨드창에서 다음 명령어를 실행하면, $ node app.js 아래와 같은 결과를 출력합니다. { name: 'Hyukho', age: 27, location: 'Suwon' } 코드를 자세히 들여다 보면, const로 선언된 변수명과 object에 선언된 key 값이 같은 것을 알 수 있.. 2020. 1. 8.
Node.js에서 Callback function을 사용해서 새로운 지역의 위도와 경도를 얻는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 callback function을 사용해서 새로운 지역의 위도와 경도를 얻는 방법에 대해서 알아보겠습니다. const geocode = (address, callback) => { const url = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + address + '.json?access_token={{api-key}}' request({ url: url, json: true}, (error, response) => { if (error) { callback('Unable to connect to location services!', undefined) } else if (response.body.fe.. 2020. 1. 6.
Node.js에서 callback function을 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 callback function을 사용하는 방법에 대해서 알아보겠습니다. app.js를 다음과 같이 작성합니다. setTimeout(() => { console.log('Two seconds are up') }, 2000) const names = ['Andrew', 'Jen', 'Jess'] const shortNames = names.filter((name) => { return name.length { const data = { latitude: 0, longitude: 0 } return data } const data = geocode('Philadelphia') console.log(data) 다음 코드를 실행하면, $ node app.js g.. 2020. 1. 6.
Node.js에서 Request를 사용해서 API 사용할때 에러 핸들링 하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 Request를 사용해서 API 사용할때 에러 핸들링 하는 방법에 대해서 알아보겠습니다. 에러가 나는 상황은 크게 두가지가 있습니다. 네트워크 오류 또는 해당하는 데이터가 없는 오류가 있습니다. 다음 app.js코드에서 Request를 사용해서 mapbox.com에서 제공하는 api를 사용하여 위도와 경도 좌표를 구하고 있습니다. const request = require('request') const geocodeURL = 'https://api.mapbox.com/geocoding/v5/mapbox.places/Los%20Angeles.json?access_token={{api-key}}&limit=1' request({url: geocodeURL, .. 2020. 1. 6.
Node.js에서 Request를 사용해서 도시의 위도 경도 좌표를 얻는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 request를 사용해서 도시의 위도, 경도 좌표를 얻는 방법에 대해서 알아보겠습니다. 특정 도시의 위도와 경도 좌표를 얻기 위해서 mapbox.com에서 제공하는 api를 사용하겠습니다. https://www.mapbox.com/ Mapbox An open source mapping platform for custom designed maps. Our APIs and SDKs are the building blocks to integrate location into any mobile or web app. www.mapbox.com 회원가입한 다음 로그인해서 다음 페이지로 이동한 다음 아래로 스크롤 하면 'Example request: Forward g.. 2020. 1. 6.

티스토리툴바