잇뉴얼 (IT_Manual)

[웹개발] - Jinja2 사용방법 (Feat. Python Flask) ■ app.py 코드 구현 @app.route('/', methods=["GET"]) def function_name(): give_data = "String" return render_template("index.html",use_jinja=give_data) 함수 안에 'give_data'라는 변수를 생성한 다음, 데이터를 넣어준 다음, render_template를 이용하여, 'index.html'을 불러오는것과 동시에, 'use_jinja'에 'give_data'값을 넣어 'index.html'에서 사용할 수 있도록 만들어줍니다. ■ index.html 코드 구현 {{ use_jinja }} 서버에서 받은 값을 HTML에 보..

[JQuery] 제이쿼리 임포트 & 사용방법 자바스크립트를 공부하시는분이라면 '제이쿼리(JQuery)'를 들어보셨을껍니다. '제이쿼리'는 자바스크립트를 미리 작성해둔 라이브러리로 자바스크립트에서 복잡했던 코드를 간결하게 만들어주는 역할을 하는데요. // 자바스크립트 코드 document.getElementById("element").style.display = "none"; // 제이쿼리 코드 $('#element').hide(); 위의 코드를 보더라도, 제이쿼리의 코드가 간결하다는것을 확인할 수 있습니다. 단 이 '제이쿼리'를 사용하기 위해서는 코드를 임포트 해줘야 사용이 가능합니다. ▶ 제이쿼리 임포트 (import) 위의 코드를 작성하지 않는다면, 제이쿼리코드 작성시 에러가 발생할 수 있으니, 꼭 ..

[JavaScript] 자바스크립트 경고창 띄우기 ▶ 목표 웹페이지에서 버튼을 눌렀을 경우, 경고창의 띄우기 자바스크립트 코드 (HTML 내부 작성) 태그안에 태그를 작성 후, 자바스크립트 코드를 작성합니다. 자바스크립트안에 'alert_fun()'함수를 선언한 다음 웹페이지에서 '경고창'을 띄우기 위해 'alert(원하는 내용)'을 작성해줍니다. HTML 태그 버튼을 눌러주세요. 태그안에 태그를 생성해줍니다. 코드를 보면, 'onclick'이 보이는데요. 'onclick'은 자바스크립트의 함수를 불러오는 역할을 하게됩니다.

[JavaScript] 자바스크립트 배열 (Array) 배열은 많은 수의 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 좋도록 하는 데이터 타입인데요. 객체랑은 다르게, 속성은 가지고 있지 않고, 데이터들이 순서대로 저장하는데, 이 배열에 대해 한번 알아보도록 하겠습니다. ▶ 배열의 선언 const arr1 = new Array(1,2,3,4,5) const arr2 = [1,2,3,4,5] console.log(arr1) console.log(arr2) // 터미널 결과 출력 // [1,2,3,4,5] // [1,2,3,4,5] 배열은 선언하는 방법은 2가지입니다. 하나는 객체를 선언하듯이 'new'키워드 작성한 다음 'Array(데이터1, 데이터2, ... )'를 작성해주시면 되며, 아니면 ..

[JavaScript] 자바스크립트 클래스와 객체 본격적인 코드를 작성하면 많이 드는 단어가 '클래스'와 '객체'입니다. 저는 공부를 하면서 많이 헷갈린부분이 '함수가 있는데 굳히 클래스가 필요한건가?' 였습니다. 이번 포스트에서는 객체와 클래스에 대해 알아보도록 하겠습니다. ▶ 객체 (Object) const name = 'ITnual' const age = 20 const country = 'korea' 변수를 선언하는건 가장 쉽습니다. 'let'이나 'const'(상수)를 작성하고, 변수 이름을 선언한 다음, 값을 넣어 초기화를 해주면 됩니다. 허나, 관련된 데이터를 하나로 묶어서 표현할 필요가 생깁니다. 예를들면, 어떤 사람의 이름이나, 나이, 국가 같은 데이터를 묶어서 표현하는것이 아닌, 따로따..

[JavaScript] 자바스크립트 함수 선언과 호출 코드들의 집합을 '함수'라고 합니다. 변수에 값을 할당하는것 처럼, 함수안에도 코드를 작성해놓고, 계속 사용할 수 있게 만드는데요. 함수를 선언하는 방법과 호출하는 방법을 다뤄보겠습니다. ▶ 함수 선언 function 함수명(매개변수들...) { // 이 함수에서 실행할 코드들 작성 return 반환값 } 함수 구성 설명 함수명 사용자가 원하는 이름을 지정할 수 있다. 단, 예약어로 지정된 이름은 사용할 수 없습니다. 매개변수들 함수 밖에서 함수안으로 특정 값을 넣고 싶을때 사용 코드 함수 안에 다양한 코드를 작성해 원하는 결과값을 만들어냄 return 코드가 다 끝나고 함수를 호출한곳에 값을 보내주는 역할 함수를 선언할려면, 'function'으로 ..

[JavaScript] 자바스크립트 반복문 프로그램안에, 코드를 반복적으로 실행해야 될 경우가 있습니다. 이러한 반복적인 일을 하나하나 코드로 작성하기에는 너무 오래걸릴수가 있으므로, 반복적으로 코드를 실행해야될 경우, '반복문'을 이용하면, 코드가 좀 더 간결해질껍니다. ▶ for 문 for (초기 변수; 조건식; 증감식) { 반복한 코드 작성 } for 문0 설명 예시 초기 변수 변수를 선언하고 값을 할당 let i = 0; 조건식 for문이 작동하는 조건 지정 i < 10; 증감식 변수 증가 혹은 감소 (잘못 작성하면 무한루프[무한반복]에 빠질수 있음) i++ for (let i = 0; i < 10; i++) { console.log(`${i} 번째 코드를 실행합니다.`) } // console...

[JavaScript] 자바스크립트 연산자 데이터와 데이터를 처리해서 결과값을 반환하는 역할이 바로 '연산자' ▶ 문자열 붙이기 '+'를 이용한 문자열 붙이기 let str1 = "Hello" let str2 = "javaScript" result = str1 + " " + str2 console.log(result) console.log("Hello"+"JavaScript") '+'를 이용하여, 문자열을 붙일수 있습니다. 변수에 문자열을 넣은 다음, '+'로 붙일수도 있고, 문자열을 바로 붙일수도 있습니다. 백틱(`)을 사용하는 템플릿 리터럴 (Template literals) let str = "javaScript" console.log(`${str} 백틱을 사용한 템플릿 리터럴`) // consol..

[JavaScript] 자바스크립트 데이터 타입 변수를 선언할때, 'let','const'키워드로 선언을 하지만, 할당되는 값에 따라 데이터 타입이 달라지는데요. 데이터 타입중 기본형 또는 원시형 (primitive) 타입이라 불리는 number, string, boolean, null, undefined에 대해 한번 포스팅 해보겠습니다. ▶ number - 숫자 데이터 let num = 7 console.log(num) console.log(typeof(num)) // typeof - 해당 변수의 데이터 타입을 확인할 수 있다. 'let'키워드로 'num'변수를 선언한 다음, 해당 변수에 '7'숫자를 입력했습니다. 그리고 'console.log'로 값을 출력하면 당연히 '7'이라는 숫자가 출력됩니다. ..

[JavaScript ] 자바스크립트 코드결과를 보기 위한 Console.log() 코드를 작성하게 되면, 에러가 발생했을시에, 어디서 에러가 발생했는지 확인을 하기 위해, 에러가 난 부분의 결과값을 눈으로 볼 수 있는 함수가 있습니다. 바로 'console.log()'함수인데요. 이 함수는 컴퓨터에 'Node.js'가 설치되어있으면, 터미널에서 'node 파일명.js'를 입력하면 함수안의 매개변수(Parameter)를 보여줍니다. // 문자열 출력 console.log("Hello JavaScript") // 매개변수(파라미터) 출력 function sum (a,b) { return a+b } result = sum (1,2) console.log(result) // 혹은 console.log(sum(..