분류 전체보기

[Javascript] 대화 상자 alert, confirm, prompt 사용하기

안녕하세요. 대화 상자 alert, confirm, prompt를 사용하는 방법에 대해 알아볼게요. 사용자와 상호작용하기 위한 웹 페이지를 만들기 위해서는 위에 기능에 대해 알고 있으면 좋습니다. Window.alert() alert 실행 하기 alert 메서드는 확인 버튼이 존재하면서 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다. 참고로 alert과 window.alert은 같습니다. window.alert('안녕하세요!'); alert('안녕하세요!'); alert은 인자로 대화 상자에 띄울 텍스트를 인자로 보내주면 됩니다. 주로 alert은 어떤 변경사항이 일어났거나, 사용자가 확인해야 하는 내용을 보여주기 위해 사용합니다. Window.confirm() confirm 실행 하기 confir..

[HTML] Favicon 파비콘(주소창 아이콘) 추가하기

개념정리 Favicon(파비콘) : 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지입니다. 💡 Favicon 파비콘을 이용하여 웹 페이지를 꾸밀 수 있습니다. Favicon 파비콘 추가 Code rel은 icon으로 Favicon 파비콘이라는 가지고 있습니다. href는 Favicon으로 사용할 파일의 경로를 명시합니다. Favicon 파비콘을 사용하기 위해선 위와 같은 link 태그를 head 태그 안에 삽입해주시면 됩니다.

[JavaScript] 타이머 사용하기

개념정리 delay의 단위는 1ms(1,000분의 1초)다. delay = 1ms setTimeout(Callback function, delay) : delay 이후에 Callback function을 실행한다. setInterval(Callback function, delay) : delay마다 Callback function을 반복 실행한다. setImmediate(Callback function) : Callback function을 즉시 실행한다. 위와 같은 타이머 함수들은 모두 timeoutID를 반환한다. timeoutID은 타이머를 식별할 때 사용한다. 아래와 같은 함수를 사용하면 timeoutID를 사용하여 타이머를 취소할 수 있다. clearTimeout(timeoutID) : time..

[JavaScript] console 사용하기

개념정리 console : node의 디버깅 콘솔에 접근할 수 있는 메서드를 제공합니다. console은 브라우저, Node.js 둘 다 사용 가능한 객체이다. 하지만 여기선 Node.js의 console을 예로 들겠다. 이 console 모듈은 웹 브라우저에서 제공하는 JavaScript 콘솔 메커니즘과 유사한 간단한 디버깅 콘솔을 제공합니다. - Node.js Documentation 💡 console 객체는 콘솔에 접근할 수 있게 하는 메서드다. console 사용법 console 매서드에 사용법을 순서대로 알아보자. Code - console.log console.log('안녕하세요.'); const name = 'Xsop'; const age = 21; const gender = 'men'; c..

[Node.js] Module로 변수, 함수 관리하기

개념정리 Module : 특정한 기능을 하는 함수나 변수들의 집합 💡 Module을 사용하면 비슷한 코드끼리 정리할 수 있어서 관리하기 편함. Module을 여러 프로그램에 해당 모듈을 재사용할 수 있음. Module 사용법 Code - Module.js const hi = 'Hello, World!'; function print(name, str) { console.log(`${name}, ${str}`) } module.exports = { hi, print }; Code - Index const Module = require('./Module.js'); Module.print('Xsop', Module.hi) 💡 module.exports로 모듈을 만들 수 있다. 모듈을 만들 때 객체 형식으로만 가..

[JavaScript] async, await (Promise를 간결하고 깔끔하게!)

개념정리 async : Promise를 간결하고, 코드를 깔끔하게 정리하기 위한 문법이다. 💡 async의 장점! async를 사용하면 코드가 동기적으로 실행되는 코드처럼 보인다. async 장점 Code - Promise // Promise function findAndSaveUser(Users) { Users.findOne({}) .then(user => { user.name = 'zero'; return user.save(); }) .then(user => { return Users.findOne({ gender: 'm' }); }) .then(user => { // Code }) .catch(err => { console.error(err); }); } Code - async // async, a..

[JavaScript] Promise(프로미스) Callback 지옥을 해결하는 방법!

개념정리 Promise : Callback hell 일명 콜백 지옥 현상을 해결할 수 있는 객체이다. 💡 Callback hell 일명 콜백 지옥 현상을 해결할 수 있는 객체이다. Promise 사용법 Code // Callback const condition = true; // true면 resolve, false면 reject const promise = new Promise((resolve, reject) => { if (condition) { resolve('성공'); } else { reject('실패'); } }); // 다른 코드가 들어갈 수 있음 // Promise promise .then(value => { console.log(value); // 성공(resolve)한 경우 실행 }) ..

[Python] 입력 받기(input VS sys.stdin.readline 차이점)

input과 sys.stdin.readline의 차이점 input은 입력받은 값의 개행(줄바꿈) 문자를 삭제시켜 받아옵니다. 개행 문자를 삭제시킨다는 것은 줄바꿈을 없앤다는 겁니다. 원래 문자열에서 어떤 작업을 취했으니 속도가 느려졌겠죠? 하지만 sys.stdin.readline은 개행 문자를 포함한 값을 받아옵니다. 그러면 input에 비해 속도가 어느정도는 늦어지지 않을 겁니다. 그리고 줄바꿈을 한 정보를 입력받을 때에도 유용합니다. 빠르게 정보를 받아오기 위해서는 sys.stdin.readline을 사용하면 좋습니다. 그래서 알고리즘에서 사용하겠죠? 제한된 자원안에서 목적을 빨리 수행하는 게 알고리즘이니까요. input은 매개변수로 문자열(String)을 받아, Console에 출력합니다. Cons..

[JavaScript] Class 알아보기

개념정리 Class : 객체를 만들기 위한 템플릿(function 처럼 중복을 방지하기 위해 태어남) Point! 객체를 자주 만들기 위해서 형식을 제공해줘서 중복을 방지하기 위한 템플릿 Class가 필요한 이유 Code const firstDeveloper = { name: 'Lion', age: 22, part: 'Back-End', programLanguage: ['JavaScript', 'Node.js'] } const twoDeveloper = { name: 'Jane', age: 21, part: 'Front-End', programLanguage: ['JavaScript'] } ... 반복되는 객체(여기서는 ~Developer)를 만들 때 코드의 길이가 길어지고, 중복이 많아진다. (name..

[JavaScript] 화살표 함수(this 바인딩) 알아보기

화살표 함수 Code function add1(x, y) { return x + y; }; const add2 = (x, y) => { return x + y; }; const add3 = (x, y) => x + y; const add4 = (x, y) => (x + y); function not1(x) { return !x; }; const not2 = x => !x; 화살표 함수를 사용하면 코드를 짧게 줄일 수 있다. 사용법 함수를 선언할 때 function 선언문 대신 ⇒ 기호로 함수 선언 // function function add(x, y) { return x + y; } // 화살표 함수 const add = (x, y) => { return x + y; } 함수 내부에 return문 밖에 ..

[JavaScript] 변수 선언자 var, let, const 차이점

개념정리 var : 변수 선언자이고, 해당 변수가 속한 범위(scope) 최상단으로 올려버리는 현상이 생긴다. 불필요하게 전역 변수를 선언한다. (오류발생 위험 커짐) let : 변수 선언자이고, const 변수 선언자와 같이 블록 스코프를 가지므로, 블록 밖에서는 변수에 접근을 할 수 없다. const : 변수 선언자이고, var 변수 선언자와 같이 블록 스코프를 가지므로, 블록 밖에서는 변수에 접근을 할 수 없다. let 변수 선언자와 const 변수 선언자는 서로 차이점이 존재한다. const는 한 번 값을 할당하면 다른 값을 할당할 수 없다. (다른 값을 할당하려고 하면 Error 발생) 블록이란? JavaScript에서 {}(중괄호)[Ex. function, if, for, while 문]를 블..

input text 태그를 예쁘게 디자인하는 법

안녕하세요. 오늘은 input 태그를 예쁘게 꾸미는 법을 알아볼게요. input 태그를 사용하면 굉장히 디자인이 없어서 심심해 보여요. 이거를 사람들의 눈에 잘 보일 수 있도록 예쁘게 꾸미는 법에 대해 알아봅시다. input text 태그로 작성하게 되면 굉장히 촌스럽다? 라고 표현해야 하나? 그냥 직사각형 모양이 나와서 아쉽다고 생각하실 수 있어요. 하지만 css로 내 마음대로 input 태그를 바꿔줄 수 있습니다. 본론으로 들어가기 전에 input태그에서 type에 따라 서로 달라지는데 css로 input {} 으로 하면 모든 input 태그를 선택하니까 type에 따라 선택하는 방법을 먼저 알려드리겠습니다. input[type=text] { } 위와 같은 선택자를 사용하면 input 태그에 type..

[2-2] Python 자료형 - 문자열

모든 소스코드 들은 [2-2] Data_Type_String.py 에 사용한 코드가 작성되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/Python_Basic GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 저번 시간에 이어서 Python 자료형 문자열 자료형에 대해 알아보겠습니다. Python 문자열 자료형 1번째 시간을 보시지 않았다면, 보시고 오시기 바랍니다. https://xsop.tistory.com/33 [2-1] Python 자료형 - 문자열 모든 소스코드 들은 [2-1] Dat..

[2-1] Python 자료형 - 문자열

모든 소스코드 들은 [2-1] Data_Type_String.py 에 사용한 코드가 작성되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/Python_Basic GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 Python 자료형의 문자열 자료형에 대해 알아보겠습니다. Python 같은 다양한 프로그래밍 언어에는 '자료형' 이라는 숫자, 문자열 등 자료 형태로 사용되는 것을 말합니다. 파이썬의 자료형은 총 8가지입니다. 오늘은 저번 시간에 이어서 '문자열'에 대해 알아보도록 하겠습니다. 문자열은..

티스토리 구글 애드센스 승인!(구글 애드센스 광고 삽입 방법)

안녕하세요. 오랜만에 돌아왔습니다. 오늘은 제 블로그와 관련이 없는 주제이긴 하지만, 구글 애드센스가 승인이 되서 승인이 된 이야기를 한 번 풀어보도록 하려고 합니다. 저는 구글 애드센스가 승인된 날짜가 블로그를 시작하고 나서 37일이 지나고 나서 승인되었습니다. 다른사람들은 빨리 승인된 사람도 있다고 하던데..말이죠.;; 그렇지만 저만의 애드센스 승인된 이야기를 한 번 풀어보겠습니다. 1. 구글 애드센스 신청 거부 저는 블로그에 글이 8~13개 정도 쓰고 난 다음 약 10일 정도가 지난 후에 구글 애드센스를 신청했습니다. 하지만 콘텐츠 부족으로 7월 14일에 신청이 거부되었습니다. 구글 애드센스 신청이 거부되는 날 부터 한동안 슬럼프 아닌 슬럼프가 와서 내 블로그는 거들떠 보지도 않는구나..열심히 글을..

[1] Python 자료형 - 숫자형

모든 소스코드 들은 [1] Data_Type_Number.py 에 사용한 코드가 작성되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/Python_Basic GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 Python 자료형의 숫자형에 대해 알아보겠습니다. Python 같은 다양한 프로그래밍 언어에는 '자료형' 이라는 숫자, 문자열 등 자료 형태로 사용되는 것을 말합니다. 파이썬의 자료형은 총 8가지입니다. 오늘은 그 처음 '숫자형'에 대해 알아보도록 하겠습니다. 숫자형은 무엇인가? 숫자형이란..

[2] Python 기초 문법 알아보기(반복문 for, while, 함수 def)

모든 소스코드 들은 Basic_Grammar.py 에 사용한 코드가 작성되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/Python_Basic GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 저번 시간에 이어서 두 번째 시간으로 Python 기초 문법을 알아보겠습니다. 오늘 배울 기초 문법은 총 3가지입니다. 반복문으로 for문과 while문을 알아보고, 함수로는 def문을 한번 알아보겠습니다. 모든 소스코드 들은 Basic_Grammar.py 에 사용한 코드가 작성되어있습니다. 반복문 fo..

[1] Python 기초 문법 알아보기(사칙연산, 변수, 조건문 if)

모든 소스코드 들은 Basic_Grammar.py 에 사용한 코드가 작성되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/Python_Basic GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 Python 기초 문법에 대해 알아보도록 하겠습니다. 오늘 배울 파이썬 기초 문법은 총 4가지 입니다. (내일 이어서 더 알아보도록 하겠습니다.) 간단하게 기초 문법을 알아볼것이고, 앞으로 더 Deep 하게 알아볼 것이기 때문에 간단하게 알아보는 시간으로 "음.. 이런게 있구나" 이 정도로만 생각해주시면..

Python 기본설정 하기(Python 및 Visual Studio Code 설치)

오늘은 python(파이썬)을 사용하기 위해 기본 설정을 해 보는 시간을 가져보도록 하겠습니다. 앞으로 python에 대한 내용을 장기적으로 계속 업로드할 예정이므로, 오늘은 파이썬 기본 설정을 한 번 해볼 겁니다. 오늘 할 기본 설정은 파이썬을 설치하고, 파이썬을 코딩할 에디터를 설치해보겠습니다. Python 설치 파이썬을 설치하시려면, 먼저 설치 파일을 다운로드를 해야겠죠? https://www.python.org Welcome to Python.org The official home of the Python Programming Language www.python.org 이 링크가 파이썬 공식 홈페이지입니다. 이 링크를 통해 설치 파일을 다운로드할 수 있습니다. 이 페이지가 파이썬 공식 홈페이지입니..

HTML로 웹 페이지에 사진 넣기(img 태그)

코드들은 github에 업로드되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/HTML GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 HTML에 사진을 넣어보는 시간을 가져보도록 하겠습니다. HTML은 처음에 글을 사용하기 위한 목적으로 만들어졌습니다. 하지만 HTML이 발전하고 발전하면서 HTML이 다양한 목적으로 웹 페이지가 만들어졌죠. 그래서 다양하게 HTML 코드가 사용이 되고, 여기서 사진이 필요한 웹 페이지가 생겨났습니다. (사실 글만 있으면 잘 읽히지도 않고, 집중도 잘 되지 않..