본문 바로가기

전체 글464

jQuery로 Tab UI 구현하는 방법 안녕하세요 혀코입니다. 오늘은 jQuery로 Tab UI를 구현하는 방법에 대해서 알아보겠습니다. index.html 에 파일을 다음과 같이 작성합니다. 어벤저스 에너지원 ‘큐브’를 이용한 적의 등장으로 인류가 위험에 처하자 국제평화유지기구인 쉴드 (S.H.I.E.L.D)의 국장 닉 퓨리(사무엘 L.잭슨)는 [어벤져스] 작전을 위해 전 세계에 흩어져 있던 슈퍼히어로들을 찾아나선다. 아이언맨(로버트 다우니 주니어)부터 토르(크리스 헴스워스), 헐크(마크 러팔로), 캡틴 아메리카(크리스 에반스)는 물론, 쉴드의 요원인 블랙 위도우(스칼렛 요한슨), 호크 아이(제레미 레너)까지, 최고의 슈퍼히어로들이 [어벤져스]의 멤버로 모이게 되지만, 각기 개성이 강한 이들의 만남은 예상치 못한 방향으로 흘러가는데… 지구의.. 2020. 1. 4.
Node.js를 사용해서 Notes 앱 만드는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js를 사용해서 Notes 앱 만드는 방법에 대해서 알아보겠습니다. app.js를 다음과 같이 작성합니다. const yargs = require('yargs') // 사용자로부터 명령어를 받는다. const notes = require('./notes.js') // 노트 추가, 삭제, 리스트, 읽기등의 함수를 가진다. yargs.command({ // 노트를 추가할 수 있는 명령어를 정의한다. command: 'add', // 명령어 describe: 'Add a new note', //설명 builder: { // 옵션 2개 title과 body를 가진다. title: { describe: 'Note title', // 옵션 설명 demandOption: tr.. 2020. 1. 3.
Node.js에서 Arrow function 사용하는 방법 안녕하세요. 혀코 입니다. 오늘은 Node.js에서 Arrow function을 사용하는 방법에 대해서 알아보겠습니다. #1 숫자 하나를 받아서 그 숫자의 제곱을 구하는 일반적인 함수를 구현해 보겠습니다. const square = function (x) { return x * x } console.log(square(3)) 위의 일반 함수를 Arrow function으로 나타내면 다음과 같이 작성할 수 있습니다. const square = (x) => { return x * x } console.log(square(3)) 또한 아래처럼 return 키워드 없이 한줄로 작성할 수 있습니다. const square = (x) => x * x console.log(square(3)) 위와같이 작성된 코드의 .. 2020. 1. 3.
Node.js에서 JSON 데이터 추가하는 방법(readFileSync, push, writeFileSync) 안녕하세요. 혀코입니다. 오늘은 Node.js에서 JSON 데이터를 추가하는 방법에 대해서 알아보겠습니다. app.js 를 다음과 같이 작성합니다. const yargs = require('yargs') const notes = require('./notes.js') // Customize yargs version yargs.version('1.1.0') // Create add command yargs.command({ command: 'add', describe: 'Add a new note', builder: { title: { describe: 'Note title', demandOption: true, type: 'string' }, body: { describe: 'Note body', dem.. 2020. 1. 2.
Node.js에서 JSON 파일에 데이터를 저장하고 읽는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 JSON 파일에 데이터를 저장하는 방법에 대해서 알아보겠습니다. app.js 파일을 다음과 같이 작성합니다. const book = { title: 'Ego is the Enemy', author: 'Ryan Holiday' } const bookJSON = JSON.stringify(book) console.log(bookJSON) 다음 명령어를 실행해 보겠습니다. $ node app.js 결과는 다음과 같이 출력되는 것을 확인할 수 있습니다. {"title":"Ego is the Enemy","author":"Ryan Holiday"} 이번에는 author에 해당하는 값만 출력하는 방법에 대해서 알아보겠습니다. app.js 파일을 다음과 같이 작성합니.. 2020. 1. 2.
Python - 리스트의 문장 단어 정렬하는 방법(split,sorted,join,title) 안녕하세요. 혀코입니다. 벌써 2020년이네요. 오늘은 리스트의 문장을 단어로 분리해서 정렬 후 다시 문장으로 붙이는 방법에 대해서 알아보겠습니다. 우선 리스트를 다음과 같이 정의합니다. greetings = ["world hello","nieuwjaar gelukkig","happy year new"] for loop을 사용해서 리스트의 각 항을 단어로 분리해보겠습니다. for g in greetings: words = g.split() print(words) ['world', 'hello'] ['nieuwjaar', 'gelukkig'] ['happy', 'year', 'new'] 이번에는 sorted를 사용해서 정렬을 해보겠습니다. for g in greetings: words = sorted(g... 2020. 1. 2.
Node.js에서 yargs npm 모듈 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 yargs npm 모듈을 사용하는 방법에 대해서 알아보겠습니다. $ touch app.js $ npm init $ npm install yargs app.js를 만들고 npm 초기화를 하고, yargs npm 라이브러리를 설치했습니다. yargs npm 라이브러리를 사용하기 위해서 app.js 상단에 포함시켜 줍니다. const yargs = require('yargs') console.log(process.argv) console.log(yargs.argv) 이렇게 app.js 를 업데이트 해주고, node 명령어를 실행해 줍니다. $ node app.js 그러면 다음과 같은 결과가 나타납니다. [ 'D:\\Programs\\nodejs\\node.ex.. 2019. 12. 27.
Node.js에서 추가 명령어 받아 처리하는 방법(process.argv) 안녕하세요. 혀코입니다. 오늘은 Node.js에서 추가로 명령어를 받아서 처리하는 방법에 대해서 알아보겠습니다. $ touch app.js $ npm init $ npm install chalk app.js 파일을 만들고 npm 초기화해서 package.json 파일을 생성하고 chalk npm 모듈을 설치했습니다. 먼저 app.js를 다음과 같이 작성한 상태에서 시작하겠습니다. const chalk = require('chalk') console.log(chalk.green.inverse("Green Man")) chalk npm 모듈을 사용하기 위해 제일 상단에 chalk 가 필요하다고 설정하고 Green Man 이 녹색 배경에 검은색 글자로 표시되도록 설정했습니다. 여기서 Node 명령어를 실행하면.. 2019. 12. 27.
Node.js에서 chalk npm 모듈 사용하는 방법 안녕하세요 혀코입니다. 오늘은 Node.js에서 chalk npm 모듈 사용하는 방법을 알아보겠습니다. $ touch app.js $ npm init $ npm install chalk app.js를 만들고 npm 초기화를 통해서 package.json 파일을 생성하고 chalk npm 모듈을 설치했습니다. chalk npm 모듈을 사용하기 위해서 app.js를 다음과 같이 업데이트 합니다. const chalk = require('chalk') console.log(chalk.green('Green Man')) 이렇게 하고 다음 명령어를 실행하면, $ node app.js 'Green Man'이 녹색으로 표시되는 것을 확인할 수 있습니다. 이번에는 inverse 옵션을 통해서 글자색이 아닌 배경색이 녹.. 2019. 12. 27.
Node.js에서 validator npm 모듈 사용하는 방법 (이메일 형식, URL 형식 확인) 안녕하세요. 혀코입니다. 오늘은 Node.js에서 validator npm 모듈 사용하는 방법에 대해 알아보겠습니다. $ touch app.js $ npm init $ npm install validator app.js를 만들고 npm init 커맨드를 통해서 package.json파일을 만들었습니다. 그리고 오늘 알아볼 validator npm 모듈을 설치했습니다. app.js 파일을 다음과 같이 코딩해서 이메일 형식이 올바른지 확인을 해 보겠습니다. const validator = require('validator') console.log(validator.isEmail('ironman@fakemail.com')) 이렇게 하고 다음 명령어를 실행하면 $ node app.js true를 반환합니다. 이.. 2019. 12. 27.
Node.js로 직접 모듈 만들어 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js에서 직접만든 모듈을 사용하는 방법에 대해서 알아보겠습니다. 메인파일 app.js 파일을 만들고 다음과 같이 코딩합니다. const name = "Iron Man" console.log(name) 이렇게 하고 다음 명령어를 실행하면, $ node app.js 'Iron Man'이 표시가 되는 것을 확인할 수 있습니다. 동일한 폴더에 'custom-module.js'를 만들고 다음과 같이 코딩합니다. console.log("custom-module.js") 그 다음 app.js 파일도 다음과 같이 코딩합니다. require('./custom-module.js') const name = "Iron Man" console.log(name) 이렇게 하고 다음 명령어를.. 2019. 12. 27.
Node.js 파일 생성,수정,확장 방법(writeFileSync, appendFileSync) 안녕하세요. 혀코입니다. 오늘은 Node.js로 txt 파일을 생성하고 수정하고 확장하는 방법에 대해서 알아보겠습니다. app.js 파일을 만들고 다음과 같이 코딩합니다. const fs = require('fs'); fs.writeFileSync('app.txt','app.txt is created!'); 파일을 만들기 위해서는 fs(file system) node module를 포함해야 합니다. 다음 명령어를 실행합니다. $ node app.js app.txt 파일이 만들어졌고 안에 'app.txt is created!'가 표시되어 있는 것을 확인할 수 있습니다. 이번에는 app.js 파일을 다음과 같이 업데이트해 보겠습니다. const fs = require('fs'); fs.writeFileSyn.. 2019. 12. 26.
Node.js 콘솔(REPL) 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js 콘솔(REPL: Read Eval Print Loop)을 사용하는 방법에 대해 알아보겠습니다. 간단히 node 명령어를 실행하면 node.js와 자바스크립트를 실행할 수 있는 Node.js 콘솔(REPL)을 사용할 수 있습니다. $ node 다음으로 가장 기본적인 사용방법에 대해 알아보겠습니다. 덧셈 연산하는 방법 > 1 + 2 3 문자열을 더하는 방법 > "Hello" + " " + "World" Hello World 알파벳 문자열을 모두 대문자로 변경하는 방법 > 'Hugo'.toUpperCase() 'HUGO' 함수 사용하는 방법 > f = function(x) { return x * 3 } > f(4) 12 그리고 마지막으로 Node.js 콘솔(REP.. 2019. 12. 26.
Node.js로 신체질량지수(BMI) 계산하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js로 신체질량지수(BMI)를 계산하는 방법에 대해 알아보겠습니다. $ mkdir bmicalculator $ cd bmicalculator $ touch bmicalculator.js $ npm init $ npm install express $ npm install body-parser bmicalculator 폴더를 만들고 bmicalculator.js를 생성한다음 Node Package Module(NPM)을 초기화 세팅한 후에 express와 body-parser를 설치합니다. bmicalculator.js를 다음과 같이 코딩합니다. //jshint esversion:6 const express = require("express"); const bodyP.. 2019. 12. 24.
Node.js로 두 숫자의 합을 구하는 방법(POST, Body-parser) 안녕하세요. 혀코입니다. 오늘은 Node.js로 두개의 값을 폼으로 받아서 간단한 덧셈연산을 할 수 있는 웹사이트를 만드는 방법에 대해 알아보겠습니다. $ mkdir calculator $ cd calculator $ touch calculator.js $ npm init $ npm install express calculator 폴더를 만들고 그 폴더안으로 이동해서 calculator.js 파일을 만들고 npm 초기화 세팅 후, express를 설치합니다. calculator.js 파일을 다음과 같이 업데이트 합니다. //jshint esversion:6 const express = require("express"); const app = express(); app.get("/",function(res.. 2019. 12. 24.
맥 터미널에서 code 명령어가 실행이 안되는 경우 해결 방법 안녕하세요. 혀코입니다. 오늘은 맥 터미널에서 visual studio code 실행시키는 code 명령어가 실행이 안되는 경우 해결 방법에 대해서 알아보겠습니다. 우선 Visual Studio Code가 Applications 폴더에 들어있는지 확인합니다. Applications 폴더에 Visual Studio Code가 없다면 Applications 폴더에 Visual Studio Code 앱을 넣어주세요. 그 다음으로 Visual Studio Code를 실행시켜서 단축키 Shift + Command + p 를 눌러서 아래 그림과 같이 Command Palette를 실행합니다. 그리고 'shell command'를 입력하면 아래와 같이 옵션이 나오게 됩니다. 옵션중 'Shell Command: Ins.. 2019. 12. 23.
Node.js 서버 업데이트할때 자동으로 재시작 하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js 서버 업데이트할때 자동으로 재시작하는 방법에 대해 알아보겠습니다. Node.js 서버를 업데이트할때 자동으로 재시작 하려면 Nodemon을 설치해야 합니다. 다음 명령어를 실행시켜서 Nodemon을 설치합니다. $ npm install -g nodemon Access 권한에러가 난다면 아래 명령어를 실행시켜서 Nodemon을 설치합니다. $ sudo npm install -g nodemon 제대로 설치가 되었나 확인 해보겠습니다. server.js를 다음과 같이 작성합니다. //jshint esversion:6 const express = require("express"); const app = express(); app.get("/", function(re.. 2019. 12. 20.
Node.js + Express 사용해서 서버 사용하는 방법 안녕하세요. 혀코입니다. 오늘은 Node.js와 Express를 사용해서 서버 사용하는 방법에 대해 알아보겠습니다. 우선 Node.js를 설치합니다. https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node 설치 후에 서버로 사용할 폴더 하나를 만들고 다음 명령어를 사용해서 server.js 파일을 만듭니다. $ touch server.js server.js 파일을 만든 다음, 아래의 명령어를 사용해서 node package module을 초기화 하고, package.json 파일을 만듭니다. $ npm init package name: (server) v.. 2019. 12. 19.
티스토리 사이트맵 제작 및 Google Search Console 등록하는 방법 안녕하세요. 혀코입니다. 티스토리 블로그 포스팅을 했는데 구글에서 검색이 잘 안된다면 Google Search Console에 사이트맵이 제대로 등록이 되었는지 확인해봐야 합니다. 오늘은 티스토리 블로그의 사이트맵을 제작하는 방법과 파일을 업로드해서 Google Search Console의 사이트맵에 등록하는 방법에 대해서 알아보겠습니다. 참고로, 티스토리에서 사이트맵이 자동으로 생성되지 않기 때문에 블로그 포스팅을 할때마다 새로운 페이지 링크를 사이트맵에 추가해줘야 하는 번거로움이 있으니 참고해주세요. 우선 아래 형식처럼 sitemap.xml 파일을 만듭니다. https://smilehugo.tistory.com/entry/worknet-event-galaxy10s-notebookpen-ipad-191.. 2019. 12. 18.
일본 시민단체가 공개한 일본군 위안소 지도 일본의 한 시민단체가 일본군 위안소 지도를 공개했다고 합니다. 일본군 위안소 지도 확인 가능한 웹사이트 주소 공유합니다. https://wam-peace.org/ianjo/map/ 출처: https://www.dogdrip.net/237284790 2019. 12. 17.
이모티콘 및 특수 문자표를 모아놓은 웹사이트 이모티콘 또는 특수 문자를 입력하고 싶을 때 다들 어떻게 입력하시나요? 자음을 누르고 한자키를 입력한다구요? 휴대폰의 이모지를 이용하시나요? 찾아보니 이모티콘 및 특수 문자표를 모아놓은 웹사이트가 있어 소개해 드릴까합니다. 원하는 이모니콘 또는 특수 문자를 찾은 다음에 간단하게 클릭만 하면 클립보드에 바로 복사가 되어서 사용하기 편하답니다. https://unicode-table.com Unicode® Character Table Unicode character search web service. Find, copy and paste your favorite characters: 😎 Emoji, ❤ Hearts, 💲 Currencies, → Arrows, ★ Stars and more 🚩 unicode-.. 2019. 12. 12.
웹사이트의 옛 모습을 확인할 수 있는 웹사이트 현재의 구글, 아마존, 네이버, 다음의 초창기 웹사이트 레이아웃은 어떻게 생겼을까? 이러한 궁금중을 해결시켜줄 웹사이트가 있어서 소개드리려고 합니다. 바로 wayback machine이라는 웹사이트입니다. https://archive.org/web/ Internet Archive: Wayback Machine archive.org 사용 방법은 간단합니다. 웹페이지 상단에 보면 웹사이트 주소를 집어넣는 곳에 확인하고 싶은 도메인 주소를 집어 넣기만 하면 됩니다. 그리고 달력에서 년도와 날짜를 선택해 주기만 하면 됩니다. 구글을 확인해 봤습니다.(https://www.google.com) 하얀 바탕에 딱 세줄이 전부.... 다음은 애플을 확인해 볼께요. 국가별 사이트를 선택할 수도 있고 구글에 비해서 컨텐츠.. 2019. 12. 12.
개발자의 프로그래밍 레퍼런스 웹사이트 - devdocs 거의 모든 프로그래밍 언어의 레퍼런스를 한눈에 볼 수 있도록 만들어논 웹사이트가 있어서 소개드릴까 합니다. HTML, CSS, JavaScript 는 기본으로 볼 수 있는 상태로 되어 있고, 나머지는 활성화 하시면 해당 프로그래밍 언어의 레퍼런스를 확인할 수 있습니다. 필요에 따라 활성화 하시고 사용하시면 될 것 같네요. https://devdocs.io/ DevDocs Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more. devdocs.io 2019. 12. 12.
개발자가 알아두면 유용한 웹사이트 - w3schools 프론트엔드를 포함해 백엔드 개발자가 알아두면 유용한 웹사이트 w3schools를 소개해 드립니다. HTML, CSS, JavaScript 뿐만아니라, JavaScript에 연관된 jQuery, React, AngularJS, JSON, AJAX를 비롯해 서버언어인 SQL, PHP, ASP, Node.js, Raspberry Pi와 Python, Java, C++, C#에 관련된 프로그래밍 정보를 총 망라하고 있습니다. 또한 웹사이트 내에서 프로그래밍 예제도 있고 간단하게 연습할 수도 있습니다. 관심있으신 분은 북마크하시고 프로그래밍할때 유용하게 사용하시면 좋을 것 같습니다. https://www.w3schools.com/ W3Schools Online Web Tutorials 2019. 12. 12.
프론트엔드 개발자가 알아두면 유용한 웹사이트 - MDN web docs 프론트엔드 개발자가 알아두면 유용한 웹사이트를 소개드릴까 합니다. 바로 MDN web docs 입니다. HTML, CSS, JavaScript에 관련해서 자세한 정보를 확인할 수 있으며, 학습 가이드라인도 제공해 주니 관심있으신 분은 북마크 하시고 이용하시면 될 것 같습니다. https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org 2019. 12. 12.
갤럭시10s,노트북펜,아이패드,에어팟프로 경품이벤트 - 워크넷앱(~19.12.24) 워크넷앱에서 갤럭시10s, 이어버즈,노트북펜,아이패드3세대,에어팟프로등 경품이벤트를 진행한다는 정보입니다. 참여방법은 회원가입 후 로그인 한다음 이벤트페이지에서 응모권을 받아서 응모를 하면됩니다. 응모권은 한시간마다 두장씩 얻을 수 있고 원하는 경품에 무제한 응모가 가능합니다. 저는 아이패드가 갖고 싶어서 몰빵하는 중입니다. ㅋㅋ Android: https://play.google.com/store/apps/details?id=kr.go.keis.worknet&hl=ko 워크넷(WorkNet) - Google Play 앱 워크넷은 고용노동부 고용센터의 인증을 거친 믿고 신뢰할 수 있는 일자리정보를 제공하고 있습니다. 1. 채용정보 - 직종별, 지역별, 테마별(공채기업, 청년친화강소기업, 강소기업, 4차산.. 2019. 12. 12.
경품이벤트 정보를 얻을 수 있는 웹사이트 - 슈퍼투데이 경품이벤트 정보를 찾다가 알게된 사이트를 공유해볼까 합니다. 바로 슈퍼투데이라는 웹사이트인데 경품이벤트 정보를 한눈에 확일할 수 있어서 좋은 것 같습니다. 경품이벤트 정보를 얻어서 이벤트에 응모도 하고 당첨되서 경품도 받게되길 바래봅니다. https://www.suto.co.kr/ 이벤트응모 슈퍼투데이 경품 이벤트 응모, 즉석당첨 이벤트, 당첨확률 높은 이벤트, 경품응모 최적화 커뮤니티 www.suto.co.kr 2019. 12. 12.
애플 맥북 프로 16인치 출시 - 이전모델과 달라진점 8가지 드디어 애플에서 맥북 프로 16인치를 출시했습니다. 이전모델에 비해서 크게 달라진점 8가지를 알아보겠습니다. #1. 이전 버전에 비해 크기가 커지고 더 무거워 졌습니다. 이전 버전 2018 MacBook Pro 15 사이즈: 34.94cm x 24.07 cm 두께: 15.5 mm 무게: 1.83kg 새버전 2019 MacBook Pro 16 사이즈: 35.79cm x 24.59 cm 두께: 16.2 mm 무게: 2.0kg #2. 키보드가 변경되었습니다. 키보드에 ESC 물리버튼이 생겼으며, 기존의 버터플라이(나비식) 키보드가 가위식 키보드로 변경되었습니다. #3. 베젤이 줄어들고, 해상도가 3072 x 1920으로 더욱 커졌습니다. #4. 인텔 9세대 CPU 6코어/8코어를 사용하고, 메모리는 16기가에.. 2019. 11. 14.
클라우드 스토리지(Cloud Storage) 서비스 추천 TOP 10 인터넷을 검색해 보면, 클라우드 스토리지 서비스를 제공해주는 곳이 많이 있습니다. 너무 많아서 어떤 서비스를 골라야 할지 막막합니다. 직접 사용해 보고 편리한 순서대로 적어보았습니다. 클라우드 스토리지 서비스가 필요할 때 도움이 되고자 적어봅니다. 1. 구글 드라이브(Google Drive) https://drive.google.com/ 구글에서 제공하는 클라우드 스토리지 서비스 입니다. 가입하면 15기가를 무료로 사용하실 수 있습니다. 구글 드라이브는 스토리지 서비스 이외에, 구글원이라고 해서, 구글닥스(Google Docs), 구글시트(Google Sheets), 구글 슬라이드(Google Slides) 등의 업무관련 프로그램을 사용하실 수 있고, 이 외에도 유용한 프로그램을 함께 사용하실 수 있습니.. 2019. 10. 4.
맥에서 터미널로 아이폰 시뮬레이터 시작하는 방법 맥에서 Xcode를 실행하지 않고 아이폰 시뮬레이터를 시작하는 방법에 대해서 알려드리겠습니다. 우선 터미널을 켜시고 다음 명령어를 실행시켜주세요. $ open -a simulator 그러면, 아이폰 시뮬레이터가 실행됩니다. 추가로 아이폰 시뮬레이터의 화면 스크린샷을 찍는 방법은 단축키를 사용하시면 됩니다. Command + s 그러면 다음과 같은 스크린샷을 찍을 수 있습니다. 2019. 9. 29.