우아아아아아앙

서버에 데이터를 요청하려면 Fetch, Axios를 사용해 요청할 수 있는데 Fetch는 웹 브라우저에서 기본으로 제공하는 API이고, Axios는 JavaScript에서 사용되는 HTTP 클라이언트 라이브러리이다. 먼저 프론트에서 데이터를 요청 받으려면 백서버가 있어야 한다. client와 server 폴더를 만들어주고 server폴더에 npm init으로 package.json을 생성해주자. express도 설치해주자, npm i express로 설치해주면 된다. app.js파일을 생성 후 아래와 같이 코드를 선언해보자 const express = require('express') const app = express() const cors = require("cors") app.use(cors()) ..

이벤트 루프를 알기 위해서는 자바스크립트의 동작원리를 알아야한다. 자바스크립트의 엔진구조는 위와 같이 이루어져있다. 하나하나 어떤 역할을 하는지 알아보자 Memory Heap은 메모리 할당이 일어나는 곳이다. 여기서 Heap이란 구조화 되지 않은 넓은 메모리 영역을 말한다.(객체, 변수, 함수 들이 담긴다.) Call Stack(호출스택)에는 실행될 코드가 한줄 단위로 할당 된다. Web APIS는 실행환경에 따라 다르게 불리는데 브라우저에선는 Web APIS, 노드에서는 백그라운드로 설명되며, 비동기 처리를 담당한다. Callback Queue(Task Queue, Event Queue등 다양한 형태로 설명된다.)에서는 비동기 처리가 끝난 후 실행되어야 할 콜백함수가 차례로 할당된다. Event Loo..

지난시간에 함수 선언식을 배웠었는데 이번시간에는 함수를 변수에 담아서 "값"의 형태로 사용하는 함수표현식에 대해서 적어보려고 한다. 함수표현식 함수 표현식이라는 방법으로도 함수를 표현할 수 있다. 함수명을 선언해준뒤 대입연산자를 사용하여 함수를 담아주면, 함수를 값으로 사용할 수가 있다. 함수도 값이라는 사실을 기억하자❗️ 기본형태 const 변수명 = function(){} 예를 들어 gloary라는 상수에 함수를 담고싶다면, 아래와 같이 작성할 수 있다. const glory = function(){ } glory() 지난시간에 배웠듯이 함수를 선언할때는 함수명을 작성해주었는데 위의 코드를 보면 function뒤 함수명의 자리에 함수명이 비어있음을 알 수 있다. 이처럼 함수명이 없는 함수를 "익명함수..

function 함수 함수는 중복코드의 사용을 방지하기 위해서 사용하며, 어떠한 최소단위의 동작을 만들때 사용한다. 함수를 사용하면 중복없이 코드를 여러번 호출할 수 있다. 가변적 데이터를 사용하고 싶은 경우에도 함수를 사용한다. 예약어에는 function이 있다. 함수는 예약어 function을 사용하여 만들 수 있으며 기본형태는 아래와 같다. function 함수명(매개변수){ } 함수명(인자) 매개변수(parameter) 인자(argument) 매개변수는 함수 안에서 선언하는 변수이며 함수 선언시 사용된다. 인자는 함수 호출시 넣는 값이며 함수를 호출시 사용되는 값이다. 함수가 호출되었을 때 매개변수 해당하는 인자 값이 들어가게 된다. 아래의 예제를 보면 함수의 호출부분 showMessage( ) ..

prompt let a = prompt("값을 입력해주세요!!") console.log(a) 예를 들어 프롬프트 창에 "안녕하세요" 라는 값을 입력 후 확인버튼을 눌렀다면 대입연산자를 기준으로 오른쪽 값 부분( prompt("값을 입력해주세요!!"))부분이 안녕하세요라는 값으로 바뀌게 되며 a라는 주소 값으로 안녕하세요라는 내용을 담긴다(확인버튼을 누르지 않으면 내용이 담기지 않아 다음 줄 코드가 실행되지 않는다.) 다음 줄 console.log로그가 실행되게 된다. 프롬프트 창에서 사용자로부터 입력 값을 문자가 아닌 숫자를 받고 싶다면 이전시간에 학습했던 숫자형 데이터타입인 Number를 사용하여 형변환(데이터타입을 바꾸는 행위)을 해주면 된다. let input1 = prompt("내용을 입력해주세요..

먼저 자바스크립트에 대해서 알아보자. 자바스크립트는 동적요소를 만들고 싶어서 생긴언어이다. 따라서 웹의 동작을 구현할 수 있다. 자바스크립트를 사용하려면 엔진이 필요하며 런타임이 필요하다. 엔진에는 v8, chakra..등이 있다. 자바스크립트의 런타임 자바스크립트의 런타임에는 브라우저와 nodejs가 있으며 브라우저와 nodejs 둘다 자바스크립트로 구현되어있다. 여기서 런타임이란 자바스크립트가 실행되는 환경을 말한다. 브라우저에서는 화면을 조작할 수 있으며 nodejs에서는 내컴퓨터의 조작이 가능하므로 백엔드 사용이 가능하다. 자바스크립트는 인터프리터 언어로 코드를 읽을 때 한줄 씩 번역해서 출력해준다. 프로그래밍의 형태 프로그래밍의 형태로는 객체지향, 함수형, Prototype이 있는데, 대표적으로..

HTML & Internet 프로세스끼리는 public domain: 저작권이 없는 도메인 link = 본드 or 실이다. web = website internet 도시 Web 도로위의 건물하나 internet -ftp -web -email 웹의 메소포타미아 web.info.cern.ch 요청하는 컴퓨터 client Computer 응답하는 컴퓨터 server Computer web hosting 웹서버 운영을 대신해주는 업체 github web server 깃허브 웹호스팅 방법 new repository 생성 -> commit changes(수정한 내용적기) settings -> pages -> branch를 main으로 변경해주고 -> save 생성한 repository -> actions -> pa..

자바스크립트 연결시 아래줄에 defer 형식으로 연결해주는 것이 좋음 자바스크립트 작성시 ‘use strict’;작성 후 시작할 것 variable 변수 - 변수를 사용하여 값을 저장할 수 있다 - 변수에는 let이 있다 global scope -어느 곳에서나 사용가능 - 필요한 부분에서만 최소로 사용하는 것이 좋음 constant(Inmmutable data type:변경불가 데이터 타입) - 값을 선언함과 동시에 할당하게 되면 변경할 수 없다. *Inmmutable data type: 해킹을 방지할 수 있다. mutable type: let Inmmutable type: const variable types -primitive type(single item): 더 이상 작은 단위로 나눠질 수 없는 i..

자바스크립트 코딩 규칙 -스타일 가이드, 코딩 컨벤션, 코딩 스타일, 표준스타일이라고도 부름 식별자 var name = prompt(“”); *name: 식별자, 첫글자는 영문자나 언더스코어(_),달러기호($)로 시작해야 함 변수 variable -프로그램을 실행하는 동안 값이 여러번 달라질 수 있는 데이터 상수 constant -값을 한번 지정하면 바뀌지 않는 데이터 변수선언 -변수를 구별할 수 있도록 이름을 붙여 주는 것 변수선언규칙 -변수 이름은 영어 문자와 언더스코어(_), 숫자 사용 -영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없음 -변수 이름은 의미있게 작성 -여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 씀(낙타표기법 camel case) *낙타 표기법을 가장 많이 사..

메모리힙과 콜스택 메모리 힙 (memory heap) -변수, 함수 저장, 호출 등의 작업이 발생하여 저장되는 공간이다. ex) var num = 20; 는 박스하나에 num이라는 라벨을 붙이고 20을 넣어줘와 같은 의미이다. -저급언어에서는 일일이 메모리 관리를 프로그래머가 해줘야 한다, 하지만 고급언어들은 위와 같은 방식으로 처리된다. 콜스택(call stack) -메모리에 존재하는 공간 중 하나로, 코드를 읽어내려 가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간이다. -이런 방식을 LIFO(선입후출)구조라고 한다. *콜스택 과정에서 계속 콜스택 위로 쌓이기만 할 경우 콜스택의 한정된 공간의 크기를 넘어서게 되는데, 이를 스택 오버..