FE

📖 [JS] 객체

자바스크립트에서 객체는 데이터와 기능을 함께 저장할 수 있는 구조적인 단위입니다.객체는 키와 값으로 구성된 속성(Property)들의 모임입니다. 키는 문자열 또는 심벌이고, 값은 어떠한 데이터 타입이든 될 수 있습니다.자바스크립트에서 객체는 여러 관련 정보를 하나의 단위로 묶는 데 유용합니다.   // 객체 리터럴 사용let person = { name:"john", age: 30, greet: function() { console.log('Hello, ' + this.name); }};// name, age와 같은 객체의 정보값들을 객체 property 또는 객체 속성이라고 부릅니다.  여기서 `person` 객체는 `name`, `age`라는 두 개의 속성(propert..

📖 [JS] 콜백 함수

콜백 함수는 자바스크립트의 독특한 개념입니다.정의상으로는 자신이 아닌 다른 함수에 인수로서 전달된 그런 함수를 뜻하는 말입니다. function main(value) {}function sub() { console.log("sub");}main(sub); 위 코드를 확인해 보면 main과 sub라는 함수가 있습니다. 위에 선언된 main 함수는 value라는 매개변수를 받고 있고,아래에 있는 sub 함수는 매개변수는 없고 콘솔에 sub라는 문자열을 출력하고 있습니다. 이때, main 함수를 호출하면서 인수로는 sub라는 값을 전달하였습니다. 이 sub라는 값이 지금 무슨 값일까요?이 sub라는 값은 위에 선언해 둔 sub 함수입니다. sub라는 함수를 값으로써 main이라는 함수의 인수로 전달해 줬습니다..

📖 [JS] 함수 표현식과 화살표 함수

자바스크립트 함수의 독특한 문법인함수 표현식과, 화살표 함수에 대해 알아봅시다.     function funcA() { console.log("funcA");}let varA = funcA;console.log(varA);varA();  let varA라는 변수를 만들고 초기값으로 funcA라는 함수를 담아 주도록 하겠습니다.이때, funcA라는 함수를 호출해서 결괏값을 변수에 담은 것이 아니라funcA라는 함수 자체를 변수에 담았습니다.    console에 출력해보면 위 사진과 같은 값이 출력됩니다.즉, 함수도 숫자나 문자열과 같은 하나의 "값"으로써 취급하기 때문에 let varA = funcA처럼 함수 자체를 변수에다가 담아 놓을 수 있습니다.이렇게 함수를 어떤 변수에 담게 되면, funcA라는..

📖 [JS] 함수

let width1 = 10;let height1 = 20;let area1 = width1 * height1;let width2 = 30;let height2 = 40;let area2 = width2 * height2;console.log("면적: ", area1);console.log("면적: ", area2);  중복으로 작성된 유사한 기능을 하는 코드들은동작하는 데는 큰 문제가 없을 수 있겠지만,이렇게 동일한 기능의 코드를 일일 매번 타이핑해야 하며,향후 코드를 수정할 경우에 문제를 야기할 수 있습니다.   따라서 자바스크립트에서는 "함수"라는 것이 존재합니다. getArea(10, 20);getArea(30, 40);console.log("면적: ", area1);console.log("면적:..

Web 기초 지식

이번 포스팅에서는 HTML, CSS, JavaScript 등등 Web을 구성하는 요소에 대해 정리해보았습니다. 기본적으로 웹 페이지는 HTML로 구현된다. HTML은 "Hyper Text Markup Language"의 약자로 웹 사이트의 페이지의 제목, 문단 등의 웹의 모습을 기술하기 위한 마크업 언어이다. Web의 구조등 정적인 컨텐츠 밖에 표현할 수가 없다. 마우스 포인터가 하이퍼링크 위로 이동하면 하이퍼링크 텍스트 색상이 바뀌거나, 서브메뉴가 열리는 등의 효과는 HTML 과 함께 사용되는 PHP나 JavaScript 같은 스크립트를 함께 사용해야 가능하다. CSS는 (Cascading Style Sheets)는 마크업 언어 등의 보조적인 역할을 수행한다. 실제 화면에 표기되는 색상, 크기, 폰트 ..

챗 GPT로 웹 페이지 만들기

이번 포스팅에서는 이전 포스팅인 "챗 GPT 사용하기"에 이어서 챗 GPT를 사용하면서 직접 HTML/CSS/JavaScript를 다뤄보는 포스팅입니다. https://serin99.tistory.com/33 챗 GPT 사용하기 🤔 ChatGPT란? ChatGPT는 OpenAI에서 개발한 인공지능 서비스입니다. GPT는 ‘Generative Pre-trained Transformer’의 약자로 머신러닝을 통해 방대한 데이터를 생성하는 AI입니다. 위와 같은 GPT의 3.5, 4 버전의 A serin99.tistory.com 챗 GPT에 질문을 할 때 자신이 원하는 결과물에 대해 상세하게 질문을 하는 것이 좋습니다. (한 구역의 폰트의 색상, 크기, 여백 등의 정보들을 상세히 기제) 또한 챗 GPT를 이용..

Flask 사용해보기 2

간단하게 웹 서버를 구축하기 위해 환경 구성을 위하여 세부 폴더와 소스코드를 작성한다. from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/header') def header(): return render_template('header.html') @app.route('/link') def link(): return render_template('link.html') @app.route('/text') def text(): return render_template('text.html') @app.route..

Flask 사용해보기

플라스크는 파이썬으로 작성된 웹 프레임워크이다. 파이썬을 이용해서 간단하게 웹 서버를 구축할 수 있는 장점을 가진 프레임워크이다. 환경 구축하기 플라스크 패키지 설치를 위해 pip을 이용하여 pip install flask 위와 같은 코드를 입력한다. (Python 버전에 따라 Python 3.5 이상일 경우 pip -> pip3으로 작성해야 한다.) from flask import Flask app = Flask(__name__) @app.route('/') def home(): return "Hello World!" @app.route('/mypaage') def mypage(): return 'Hello, MY Page!' if__name__ == '__main__': app.run(debug = ..