본문 바로가기

dev218

[linux] 리눅스 OS 확인 리눅스는 오픈 소스 운영 체제인 관계로 현재 다양한 종류의 리눅스 버전이 존재합니다. 이를 일반적으로 리눅스 배포판 이라고 합니다. Suse, OpenSUSE, Debian, Ubuntu, CentOS, Arch, Fedora, RHEL은 대표적인 배포판 이름입니다. 서버에 설치된 리눅스 OS 버전 및 이름을 알면 보안 패치에 매우 유용할 수 있습니다. 리눅스에서 OS 버전 확인 리눅스에서 OS 이름과 버전을 찾는 방법은 다음과 같습니다. 터미널 프로그램을 실행합니다. ssh로 원격 로그인 합니다. ($ ssh user@server-name) 다음 명령어 중 하나를 입력하여 리눅스의 OS 이름과 버전을 찾습니다. $ cat /etc/os-release $ lsb_release -a $ hostnamect.. 2022. 9. 29.
[javascript] 자바스크립트 팩토리얼 계산하기 (factorial) 이 포스트에서는 재귀함수, while 루프, for 루프를 사용해 팩토리얼을 계산하는 방법을 설명하겠습니다. 팩토리얼 계산이란? 팩토리얼(factorial)이란 주어진 수 보다 작거나 같은 모든 양의 정수를 곱한 것 입니다. 기호는 "!"를 사용하며 팩토리얼 이라고 읽습니다. 예를 들어 5 팩토리얼을 구한다면 다음과 같이 계산을 하면 됩니다. 5! = 5 * 4 * 3 * 2 * 1 재귀함수로 팩토리얼 구하기 재귀함수는 함수 내에서 자기 자신을 다시 호출하는 함수를 말합니다. 특정한 조건에 만족할 때 까지 자기 자신을 계속 호출하여 결과를 얻어내는 방법 입니다. function factorial(num) { if (num < 0) return -1; else if (num == 0) return 1; e.. 2022. 9. 29.
[javascript] 자바스크립트 자판기 만들기 자바스크립트 자판기는 브라우저에서 구동되는 프로그램이기 때문에 c언어나 자바, 파이썬과는 다르게 화면에 UI를 그리고 변경하기가 쉽습니다. 이번 포스트에서는 사용자의 클릭 이벤트를 받아 음료를 얻을 수 있는 자판기를 만들어 보겠습니다. 전체 소스코드 index.html 자판기 돈을 넣으세요 style.css * { margin: 0; padding: 0; box-sizing: border-box; } h1 { color: #323330; } div { display: flex; align-items: center; justify-content: center; margin: 10px; } .hide { display: none; } .container { height: 100vh; } .panel { pa.. 2022. 9. 28.
[javascript] 자바스크립트 시계 만들기 이 포스트에서는 어떻게 실시간으로 갱신되는 자바스크립트 시계를 구현하는지 알아보겠습니다. 자바스크립트 시계에 대하여 시계는 인터넷 뱅킹이나 전자상거래 등과 같이 시간이 꼭 필요한 사이트에서 반드시 필요한 도구입니다. 여기서 자바스크립트가 웹페이지를 실시간으로 조작할 수 있게 해줌으로써 현재 시간을 보여주는 자바스크립트 시계를 만드는 것은 상당히 간단해졌습니다. 이 포스트에서는 화면을 예쁘게 보이게 하는 CSS 스타일링에 대해서는 다루지 않고, 시계를 구현하는 실질적인 자바스크립트의 코드에 초점을 맞출 것 입니다. 자바스크립트로 12 시간 시계 만들기 이제 12시간 단위로 표시되는 시계를 만들어 보겠습니다. index.html index.js function currentTime() { const date.. 2022. 9. 28.
[javascript] 자바스크립트 랜덤 문자열 만들기 간단하게 랜덤 문자열 만들기 자바스크립트에서 임의의 문자열을 생성하는 방법은 여러 가지가 있습니다. 가장 빠른 방법은 Math.random() 메소드를 사용하는 것 입니다. Math.random() 메소드는 0(이상)과 1(미만) 사이의 난수를 반환합니다. 이 난수를 문자열로 변환한 후 소수점 표시를 제거하면 됩니다. const rand = Math.random().toString().substr(2, 8); 위의 예제는 8개의 숫자로 된 랜덤 문자열을 만들어 냅니다. 영숫자 문자열을 생성하려면 2에서 36 사이의 값을 toString() 메소드의 매개변수인 radix로 넘기면 됩니다. 이는 결과 값의 진법을 정의하는 것 입니다. 이진수 문자열(0~1)을 얻으려면 toString() 메소드의 radix에.. 2022. 9. 27.
[javascript] 자바스크립트 체질량지수 BMI 계산기 체질량지수(BMI) 계산기를 사용하면 키와 몸무게를 기준으로 BMI 값을 계산할 수 있습니다. 체질량지수는(BMI)는 대부분의 사람에게 꽤 신뢰가능한 체지방 지표가 될 수 있습니다. BMI 계산 공식: BMI = (몸무게) / (키 * 키) 체질량지수는(BMI)는 개인의 몸무게와 키로 계산하는 수치입니다. 이번에 만들 자바스크립트 BMI 계산기는 사용자의 키와 몸무게를 입력받을 것 입니다. 계산 과정은 간단합니다. 킬로그램 단위의 몸무게를 키의 제곱으로 나누면 됩니다. 여기서 주의할 점은 키의 단위는 'm' 라는 것 입니다. 계산의 결과가 18.5 이하면 저체중, 18.5~23은 정상, 23~25는 과체중, 25~30은 비만, 30 이상은 고도비만으로 나눕니다. HTML 전체 코드 BMI 계산기 키 (c.. 2022. 9. 23.
[javascript] 자바스크립트 값 입력받기 (prompt) 이 포스트에서는 자바스크립트의 prompt() 메소드를 사용해 사용자에게 숫자나 문자열을 받는 다이얼로그 사용법을 알아보겠습니다. 자바스크립트 prompt() 메소드 prompt()는 window 객체의 메소드입니다. prompt() 메소드는 브라우저에게 문자열과 인풋필드, 두 개의 버튼을 가지는 다이얼로그를 표시하도록 합니다. 다이얼로그는 사용자에게 문자열을 입력하는 화면을 보여주고 사용자가 취소나 확인을 누를 때 까지 기다립니다. 다음은 prompt() 메소드의 문법을 보여줍니다. const result = window.prompt(message, default); message: 화면에 표시할 문자열로 이 값을 생략하면 화면에 아무 글자도 표시가 안됩니다. default: 입력 필드의 기본 값을 받.. 2022. 9. 23.
[node.js] 웹소켓 채팅 서버 WebSocket chat 웹소켓은 게임이나 공유작업 웹사이트 등 여러 응용프로그램에서 사용되고 있습니다. 이번 포스트에서는 실제로 작동하는 간단한 채팅 서버를 만들어 보겠습니다. WebSocket을 사용하려면 백엔드 서버가 필요하고 이를 화면에 보여주는 프론트 클라이언트가 필요합니다. 백엔드는 node.js로 프론트는 자바스크립트를 사용하겠습니다. 웹소켓의 자세한 작동 방식에 대한 정보가 알고싶다면 Websockets 101을 참고 바랍니다. 예제 코드는 모두 macOS에서 작성했습니다. 채팅 기능 모든 사용자는 처음 접속 시 자신의 이름을 지정할 수 있고 서버는 임의의 색을 지정하며, 새로운 사용자가 접속했다는 시스템 메시지를 콘솔에 보여줍니다. 이후 사용자는 메시지를 전송할 수 있습니다. 채팅 후 사용자가 브라우저 창을 닫으.. 2022. 9. 22.
[javascript] 자바스크립트 문자열 숫자로 변환하는 방법 자바스크립트에서는 문자열을 숫자로 바꾸는 다양한 방법을 제공합니다. Number('12'); parseInt('12', 10); parseFloat('12.99'); console.log(+'12'); console.log(-'12'); Number 객체로 문자열을 숫자로 변환 문자열을 숫자로 바꾸는 첫 번째 방법은 Number 객체를 사용하는 것 입니다. 아래 예제에서 data 라고 이름지은 변수에 문자열 "12"를 할당해 보겠습니다. const data = '12'; 이 data 라는 변수에 typeof 연산자를 사용하면 이 변수는 문자열을 가지고 있다는 결과를 얻을 수 있습니다. console.log(typeof data); 이제 Number 객체를 통해 data 변수의 문자열 값을 숫자로 다음과 .. 2022. 9. 22.
[linux] 리눅스 IP 주소 확인 방법 TL;DR - IP 주소를 확인하는 리눅스 명령어는 다음과 같습니다. ip addr ip addr show eth0 ifconfig -a ifconfig eth0 ip route ip route show dev eth0 IP 주소란? IP 주소는 192.168.0.1 같은 숫자의 나열 값으로 인터넷에서 데이터 통신을 위해 사용되고 네트워크 인터페이스를 식별하는 기능과 위치를 특정하는 기능을 가지고있습니다. IP 주소는 기기가 인터넷을 통해 데이터 패킷을 보내거나 받을 수 있도록 하는 식별자입니다. 이는 위치와 관련된 정보를 가지고 있어서 양방향 통신이 가능하게 합니다. 대부분의 인터넷 서비스 제공업체(ISP: Internet Service Provider)는 여전히 IPv4를 사용하고 있습니다. 이는 ".. 2022. 9. 21.
[javascript] 자바스크립트 드래그 앤 드롭 draggable 참고: https://www.javascripttutorial.net/web-apis/javascript-drag-and-drop/ 이 튜토리얼에서는 자바스크립트 드래그 앤 드롭 api와 간단한 드래그 앤 드롭 앱을 구현하는 방법에 대해 알아보겠습니다. 자바스크립트의 드래그 앤 드롭 API HTML5는 공식적으로 드래그 앤 드롭 스팩을 공개했습니다. 대부분의 최신 웹 브라우저는 HTML5 스팩을 기반으로 네이티브 드래그 앤 드롭 기능을 구현했습니다. 이 드래그 앤 드롭 기능은 기본적으로 이미지와 텍스트만 끌 수 있습니다. 이미지를 끌려면 마우스 버튼을 누른 상태에서 이동하기만 하면 됩니다. 텍스트를 끌려면 일부 텍스트를 하이라이트 해놓고 이미지를 끌 때와 같은 방식으로 끌어다 놓아야 합니다. HTML5 .. 2022. 9. 20.
[javascript] 자바스크립트 현재 날짜 시간 표시 이 글에서는 자바스크립트를 사용해 현재 날짜와 시간을 가져오는 다양한 방법을 알아보겠습니다. Date Object 자바스크립트는 Date라는 내장 객체를 제공합니다. 이를 통해 여러가지 방법으로 날짜와 시간을 얻을 수 있습니다. 먼저, 날짜 객체를 만드는 방법을 살펴보겠습니다. 날짜 객체는 다음 네가지 방법으로 만들 수 있습니다. new Date(); new Date(year, month, day, hours, minutes, seconds, milliseconds); new Date(milliseconds); new Date(date string); new Date() new Date() 메소드는 실행한 순간의 현재 날짜와 시간을 가지는 새로운 Date 객체를 생성합니다. var d = new Date.. 2022. 9. 16.
[javascript] 자바스크립트 배열에서 특정 값 삭제 자바스크립트의 배열은 여러 값을 묶을 수 있고 그 값들에서 루프를 돌 수 있게 해줍니다. 이를 위해 다양한 방법으로 값을 추가하거나 제거할 수 있는데 간단하게 쓸 수 있는 Array.remove() 메소드는 존재하지 않습니다. 그 대신 자바스크립트 배열에는 값을 정리할 수 있는 다양한 방법을 제공합니다. 예를 들면 pop() 메소드를 통해 배열의 끝부터, shift() 메소드로 배열의 부터, splice() 메소드를 통해 배열의 중간에서 제거하는 등 다양한 방법이 있습니다. 다음은 자바스크립트 배열에서 항목을 제거하는데 사용할 수 있는 여러가지 방법의 예입니다. pop(): 배열의 끝에서 항목 제거 shift(): 배열의 시작에서 항목 제거 splice(): 배열의 특정한 인덱스에서 제거 filter().. 2022. 9. 7.
[javascript] 자바스크립트 문자열 배열로 자르기 (split) 이번 포스트에서는 JavaScript의 split() 메소드를 사용해 일정한 기준으로 문자열을 잘라 배열로 변환하는 방법을 알아보겠습니다. 자바스크립트 문자열 split() 메소드 JavaScript에 내장된 String.prototype.split() 메소드를 이용해 문자열을 부분문자열의 배열로 나눌 수 있습니다. split([separator, [,limit]]); split() 메소드는 separator, limit 두개의 옵셔널 매개변수를 받습니다. separator: 문자열을 나눌 구분자로서 원본 문자열을 구분자로 나눕니다. 구분자로는 문자열이나 정규식을 사용할 수 있습니다. 이 매개변수를 생략하거나 원본 문자열에서 구분자를 찾을 수 없는 경우 원본 문자열을 그대로 배열에 반환하게됩니다. lim.. 2022. 9. 6.
[javascript] 자바스크립트 fetch로 formdata post 보내기 폼 데이터를 전송할 때 JavaScript의 fetch api를 사용하면 데이터 전송을 세밀하게 제어할 수 있습니다. 이는 submit과 동시에 데이터를 전송하고 새 페이지로 리다이렉션하는 표준 HTML 동작으로 처리하지 않고 최소한의 dom 조작으로 그냥 백그라운드에서 더이터 전송을 처리하고 효율적으로 통신할 수 있도록 합니다. 준비 post 메시지를 보내는 작업을 하기 전에 post로 보낼 form이 필요합니다. 간단하게 사용자 이름과 비밀번호 두 개의 입력필드를 가지는 양식을 만들어보겠습니다. 먼저 index.html 파일을 만들고 다음의 코드를 입력합니다. Submit 위 코드를 실행하면 다음과 같은 화면을 얻게됩니다. form에 submit 이벤트 추가 먼저 폼 항목을 선택하고 submit 이벤.. 2022. 9. 1.
[express.js] post 받는 서버 만들기 이 포스트에서는 express.js를 사용해 간단하게 post 메소드를 받는 서버를 만들어 보겠습니다. post 메소드는 HTTP 프로토콜을 통해 데이터를 전달하는 가장 일반적인 방법으로 post 메소드를 사용해 클라이언트가 보낸 정보를 request body에서 가져오는 방법을 알아보겠습니다. 여기 작성한 모든 코드는 macOS에서 작업했습니다. 프로젝트 생성 node.js의 웹 프레임워크인 express.js를 사용해 서버를 만들기 전에 콘솔에서 적당한 위치에 npm 프로젝트를 생성합니다. $ mkdir test-express && cd test-express $ npm init -y 위의 코드로 test-express 라는 디렉토리를 만들고 그 안에서 npm 프로젝트를 초기화 했습니다. 'npm i.. 2022. 9. 1.
[javascript] 자바스크립트 키보드 입력 추가하기 (엔터키 입력) 계산이나 게임을 만들기 위해서는 숫자나 방향키 등 키보드 입력이 필요한 경우가 있습니다. JavaScript는 이같은 상황을 해결하기 위해 키보드 입력 이벤트를 지원합니다. 키보드 입력 이벤트를 추가하는 방법은 꽤 간단하지만 여러가지 권장하지 않는 상황이 있습니다. 이 튜토리얼에서는 2022년에 키보드 입력 이벤트를 추가하는 올바른 방법을 보여줍니다. 키보드 이벤트의 종류 키보드 이벤트를 추가하려면 document 객체에 다음 중 하나를 listen 하면 됩니다. keydown: 모든 키가 눌렸을 때 실행, 눌린 키의 코드 제공 keypress: 문자, 숫자, 기호 등 출력 가능한 키가 눌렸을 때 실행 keyup: 눌렸던 키가 놓아졌을 때 키가 눌릴 때 마다 이벤트 객체가 생성됩니다. 다음의 코드로 객체.. 2022. 8. 31.
[javascript] 자바스크립트 배열 비교 방법 (compare two arrays) 참고: https://www.30secondsofcode.org/articles/s/javascript-array-comparison 단순 비교 JavaScript에서 느슨하거나 엄격한 등가연산자(== 또는 ===)로 두개의 배열을 비교하면 대부분의 결과는 false가 됩니다. 심지어 두개의 배열이 동일한 항목을 동일한 순서로 가지고 있더라고 마찬가지입니다. 왜 이런 결과가 나오냐면 JavaScript에서 배열과 객체는 값을 비교하는게 아니라 객체의 주소를 비교하기 때문입니다. 이는 다음의 예제는 원하는 결과를 내주지 않는다는 말입니다. const a = [1, 2, 3]; const b = [1, 2, 3]; a === b; // false JSON.stringify 일반적인 해결 방법으로 많은 사람들.. 2022. 8. 26.
[javascript] 자바스크립트 정규식으로 메일 주소 검증 참고: https://sisiblog.tistory.com/244 정규식 let regex = new RegExp("([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~]*])"); 테스트 코드 const regex = new RegExp("([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~.. 2022. 8. 2.
[javascript] 자바스크립트 배열에서 최대/최소 구하는 방법 (min, max) 참고: https://stackabuse.com/javascript-get-min-and-max-element-of-array/ JavaScript를 쓰다보면 사용자에게 통계를 보여줘야 하거나 슬라이더의 경계를 설정할 경우 배열에서 최소 값과 최대 값을 알아내야 할 때가 있습니다. 이 글에서는 JavaScript 배열에서 최소/최대 값을 알아내는 방법을 알아볼 것이고 이들 사이의 속도를 비교해 보겠습니다. Math 객체를 이용해 Min, Max 얻기 Math는 수학적 계산을 위해 필요할만한 많은 유용한 메소드와 상수를 가지고있는 JavaScript의 내장 객체입니다. 이 글에서는 두개의 메소드를 살펴볼 것인데 Math.min()과 Math.max() 입니다. 두 메소드 다 매개변수로 숫자의 목록을 받고 .. 2022. 7. 5.

티스토리툴바