본문 바로가기

js26

JavaScript 문법 정리 - 변수와 상수 변수와 상수 ☀️ 변수가 무엇이고 왜 필요할까? 모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 이용한다. 🔥 변수의 5가지 주요 개념 1. 변수 이름 : 저장된 값의 고유 이름 2. 변수 값 : 변수에 저장된 값 3. 변수 할당 : 변수에 값을 저장하는 행위 4. 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 5. 변수 참조 : 변수에 할당된 값을 읽어오는 것 자바스크립트에서 변수는 var, let, const 세가지 방법으로 선언할 수 있다. var는 예전부터 사용되던 방식이며, let, const는 ES6에서 새로 도입된 방법이다. var는 같은 이름의 변수를 여러번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언.. 2024. 2. 13.
JavaScript 문법 정리 - 자바스크립트 소개 JS의 역사 1995년 넷스케이프 커뮤니케이션이라는 곳에서 LiveScript가 만들어지고 이를 JavaScript로 이름을 변경했다. 자바스크립트가 등장한 이유는 브라우저 동작 스크립트 언어가 필요했기 때문이다. 1999년 자바스크립트 표준화(ECMA-262) 완료 2005년 AJAX가 등장함으로서 비동기 웹 어플리케이션 개발이 가능해졌고 이로 인해 UX가 폭발적으로 향상되었다. 2008년 V8 엔진이 구글에 탑재되면서 브라우저 속도가 향상되었다. 2009년 Node.js가 등장하면서 자바스크립트가 브라우저에서만 사용되는 것이 아닌 서버개발도 가능하게 되었다. 즉, 프론트엔드 + 백엔드 + 데이터베이스를 모두 자바스크립트로 제어할 수 있게 되었다. 2015년 ECMAScript 6(ES6) 버전 출시 .. 2024. 2. 13.
WebSockets HTTP vs WebSockets WebSockets 덕분에 실시간 채팅, notification과 같은 real-time을 만들 수 있다. http와 websockets은 protocol이다. HTTP HTTP는 유저가 request를 보내면 서버가 응답을 보낸다. 여기서 기억해야 할 것은 http는 stateless 라는 것이다. 즉, 백앤드가 유저를 기억하지 못한다는 의미이다. 그리고 http는 브라우저에서 요청을 보내고 서버에서 응답을 받는 행위가 real-time 으로 일어나지 않는다. 왜냐하면 서버가 자체적으로 브라우저에게 무엇을 해주지 못하고 브라우저로부터 요청을 받아야 응답하기 때문이다. WebSockets 브라우저가 서버로 websockets request를 보내면 서버가 받거나 거절을 .. 2023. 10. 14.
moment.js - 자바스크립트 날짜 라이브러리 moment.js 설치 자바스크립트에서 사용되는 날짜 관련 라이브러리 중 가장 많이 사용되는 라이브러리이다. npm 이나 yarn 을 활용해서 moment.js 를 설치한다. yarn add moment 라이브러리를 설치하였으면 아래 코드로 import 해서 사용하면 된다. import moment from "moment"; moment.js 사용방법 현재 날짜 및 시간 - moment() const now = moment(); now.format(); // 2021-10-09T00:01:13+09:00 moment() 함수를 사용해 현재 날짜와 시간 객체를 생성할 수 있다. 날짜 지정 생성 - moment() const date = moment("2021-10-09"); date.format();// .. 2023. 10. 11.
JSON 이란? (기초지식) JSON 이란? javaScript Object Noation 자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 방식이다. 일반적인 JSON구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다. 자바스크립트 객체 형태와 완전히 같지는 않다. 작은 따옴표 ' ' 가 아닌 큰 따옴표 " " 만이 허용된다. { "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": [ "Radiati.. 2023. 8. 31.
Pure Redux : To Do List pure Redux로 todoList 만들기 코드는 아래와 같다. import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; const addToDo = (text) => { return { type: ADD_TODO, text }; }; const deleteToDo = (id) => { return { type: DELETE_TODO, id }; .. 2023. 8. 29.