본문 바로가기
카테고리 없음

WIL (2023/08/20) 일

by 0to1ton 2023. 8. 20.

JavaScript 란?

 

 

웹 개발을 위한 프로그래밍 언어로, 주로 웹 페이지의 동적인 기능을 추가하고 제어하기 위해 사용

 

자바스크립트의 역사 (출처: devjennie & chancainkim1008)

자바스크립트는 1995년 넷스케이프에서 근무하던 브랜든 아이크가 10일만에 설계한 것으로부터 시작한다. 처음에는 Mocha라는 이름이었지만 4달 만에 LiveScript라는 이름으로 개명하고 다시 3달 후에는 JavaScript라는 이름이 되어 오늘날까지 이어지고 있다. 'Java와 구문이 유사해서 이름을 JavaScript로 명명했다'는 표면상의 이유를 대지만 그 속은 Java의 유명세를 타서 묻어가려고 의도적으로 그렇게 작명한 것이다.

  • 1995년 자바스크립트 탄생
    • 🌐 넷스케이프 커뮤니케이션(LiveScript → Javascript)
    • 🖥️ 브라우저 동작 스크립트 언어
  • 1999년 자바스크립트 표준화(ECMA-262) 완료
  • 2005년 AJAX 등장
    • 비동기 웹 애플리케이션 개발 가능
    • 폭발적인 UX 향상 🚀
  • 2008년 V8 엔진 출시(google)
    • super fast(코드 실행 속도 상당부분 개선)
    • 🛠️ 컴파일러, 메모리관리 시스템 👍
  • 2009년 Node.js 등장, 서버 개발 활성화
    • 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)
    • 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack
  • 2015년 ECMAScript 6(ES6) 버전 출시 🚀
  • 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
  • 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있습니다.

 

JavaScript의 특징

  1. 인터프리터 언어: JavaScript는 인터프리터 언어로, 코드를 실행하기 위해 컴파일 과정이 필요하지 않음
  2. 동적 타입 언어: 변수의 타입을 미리 선언하지 않고, 실행 중에 동적으로 결정
  3. 클라이언트-사이드 스크립트 언어: 주로 웹 브라우저에서 실행되며, 사용자의 브라우저에서 동작하는 클라이언트-사이드 스크립트 언어로 사용됨
  4. 이벤트 기반 프로그래밍: 주로 이벤트 리스너와 콜백 함수를 통해 사용자 상호작용에 응답하고 비동기적인 작업을 다룸
  5. 동적 HTML 조작: DOM(Document Object Model)을 통해 HTML 문서의 요소들을 동적으로 수정하거나 조작할 수 있음.
  6. 크로스 플랫폼: 웹 브라우저 뿐만 아니라 Node.js 등을 통해 서버 측에서도 사용될 수 있음

JavaScript의 사용 분야

  1. 웹 개발: HTML과 CSS와 함께 사용하여 웹 페이지의 동적인 기능을 추가하고 사용자와의 상호작용을 제공
  2. 웹 애플리케이션: 프론트엔드 프레임워크(React, Angular, Vue 등)를 사용하여 복잡한 웹 애플리케이션을 개발
  3. 게임 개발: 웹 기반의 게임을 개발하거나, 게임 엔진을 활용하여 게임을 제작
  4. 서버 개발: Node.js를 사용하여 서버 측에서도 JavaScript로 백엔드 서비스를 구축
  5. 모바일 애플리케이션: React Native 등을 사용하여 모바일 앱을 개발

 

Node.js란?

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 오픈 소스, 이벤트 기반, 논블로킹 I/O 모델을 사용하는 서버 사이드 자바스크립트 런타임. 이것은 JavaScript를 사용하여 서버 측 애플리케이션을 개발하고 실행하는 데 사용되며, 웹 애플리케이션 개발 등에서 사용됨

 

Node.js의 주요 특징

  1. 비동기 및 논블로킹 I/O: Node.js는 비동기적인 처리와 논블로킹 I/O 모델을 사용하여 동시에 여러 작업을 처리하고 블로킹되지 않는 성능을 제공. 이는 웹 애플리케이션의 확장성과 성능을 향상시킴
  2. 이벤트 기반: Node.js는 이벤트 기반 프로그래밍을 통해 이벤트에 응답하고 비동기적으로 작업을 처리. 이로 인해 높은 처리량과 확장성을 갖게 됨
  3. 단일 스레드: Node.js는 단일 스레드 모델을 사용하며, 이벤트 루프를 통해 비동기 작업을 관리. 하지만 내부적으로 멀티 스레드를 활용하여 동시성을 지원
  4. 크로스 플랫폼: Node.js는 다양한 운영체제에서 동작하며, 여러 플랫폼에서 일관된 개발 경험을 제공
  5. 모듈 시스템: Node.js는 모듈 시스템을 갖추고 있어 코드를 모듈화하고 재사용성을 높일 수 있음

Node.js의 활용 분야

  1. 웹 서버: Node.js를 사용하여 웹 서버를 개발할 수 있음. Express, Koa 등의 웹 프레임워크를 활용하여 빠르고 유연한 웹 애플리케이션을 구축 가능
  2. API 서버: RESTful API나 GraphQL을 구현하는데 Node.js를 사용하여 백엔드를 개발 가능
  3. 실시간 애플리케이션: WebSocket을 통해 실시간 기능을 갖춘 앱을 개발 가능
  4. 마이크로서비스: Node.js는 경량 마이크로서비스 아키텍처의 구현에도 매우 적합함
  5. 데이터베이스 관리: NoSQL 데이터베이스 (MongoDB 등)와 연동하여 데이터베이스 관련 작업을 처리할 수 있음

Node.js는 다양한 패키지와 모듈을 포함하는 npm(Node Package Manager)을 통해 개발 생태계를 지원하고 있으며, 개발자들이 빠르고 효율적으로 애플리케이션을 개발하고 관리할 수 있도록 도와줌

 

React.js 란?

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로, Facebook에서 개발함. React는 컴포넌트 기반 아키텍처를 기반으로 하며, 재사용 가능한 UI 요소들을 생성하고 관리하는데 중점을 둔다는 특징을 가지고 있음

React의 주요 특징

  1. 컴포넌트 기반: React 애플리케이션은 작은 컴포넌트들의 조합으로 구성됨 각 컴포넌트는 자체적으로 독립적이며, 필요에 따라 재사용하거나 조합하여 화면을 구성할 수 있음
  2. 가상 DOM (Virtual DOM): React는 가상 DOM을 사용하여 브라우저의 실제 DOM과 효율적으로 동기화함. 변경 사항을 미리 가상 DOM에 적용하고, 실제 DOM에 최소한의 변경만 반영하여 성능을 최적화함
  3. 단방향 데이터 흐름: React에서 데이터는 단방향으로 흐름. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하고, 하위 컴포넌트는 부모로부터 받은 데이터를 변경하지 않음
  4. JSX (JavaScript XML): JSX는 JavaScript 확장 문법으로, HTML과 유사한 구조로 UI 컴포넌트를 작성할 수 있도록 도와줌. JSX는 가독성을 높이고 컴포넌트 구조를 직관적으로 표현할 수 있게 함
  5. 반응적인 UI: React의 주요 목표 중 하나는 반응적인(UI가 사용자 입력에 실시간으로 응답) 사용자 경험을 제공하는 것임. 가상 DOM과 컴포넌트 기반 아키텍처를 통해 이 목표를 달성함
  6. 커뮤니티와 생태계: React는 많은 개발자와 커뮤니티의 지원을 받으며, 다양한 라이브러리, 도구, 프레임워크와 함께 사용됨. Redux, React Router, Material-UI 등 다양한 확장 기능을 활용할 수 있음

React의 활용 분야

  1. 웹 애플리케이션 개발: React는 싱글 페이지 애플리케이션(SPA) 및 멀티 페이지 애플리케이션(MPA)을 개발하는 데 사용
  2. UI 컴포넌트 라이브러리: React는 재사용 가능한 UI 컴포넌트를 구축하고 라이브러리로 공유하는데 적합
  3. 하이브리드 앱 개발: React Native를 사용하여 React 코드를 기반으로 iOS와 Android 애플리케이션을 개발 가능
  4. 정적 웹 사이트 생성기: Gatsby 등의 정적 웹 사이트 생성기와 함께 사용하여 빠르고 SEO 친화적인 웹 사이트를 구축 가능

 

 

ES란? (ECMA Script)란? 에크마

  • JavaScript의 표준화된 버전으로 언어의 규칙과 기능, 표준 사양을 정의하는 기술문서이며 이를 기반으로 브라우저와 JavaScript 엔진에서 실제 코드를 실행
  • ECMA International (정보 및 통신 시스템의 표준화 작업을 하는 산업협회)이 ECMA-262 기술규격에 따라 정의함
  • 자바스크립트의 버전을 의미

ES5/ES6 문법 차이?

ES5

  • 2009년 출시된 버전으로 5번째 버전, 대부분의 웹브라우저를 지원
  • 'strict mode'의 도입으로 업격한 문법 검사를 강화
  • 새로운 내장 객체 및 메소드가 추가됨 
    • Array.prototype.forEach: 배열의 각 요소에 대해 지정한 함수를 실행
    • Array.prototype.map: 배열의 각 요소에 대해 지정한 함수를 실행하고 새로운 배열을 반환
    • Array.prototype.filter: 배열의 각 요소를 조건에 따라 걸러내고 새로운 배열을 반환
    • Array.prototype.reduce: 배열의 요소들을 누적해서 처리하고 값을 반환
    • Object.create: 새로운 객체를 생성하고 지정한 프로토타입 객체를 설정
    • Object.keys: 객체의 속성들 중 열거 가능한 속성의 키들을 배열로 반환
    • JSON.parse와 JSON.stringify: JSON 데이터를 파싱하거나 객체를 JSON 문자열로 변환
    • Array.prototype.indexOf: 배열에서 특정 요소의 인덱스를 찾아줌
    • Array.prototype.some과 Array.prototype.every: 조건에 맞는 요소가 하나라도 있는지 또는 모든 요소가 조건에 맞는지 확인
    • Array.isArray: 주어진 값이 배열인지 확인
    • String.prototype.trim: 문자열의 양 끝에 있는 공백을 제거
    • Function.prototype.bind: 함수의 this 값을 영구적으로 설정
    • Object.keys, Object.values, Object.entries: 객체의 키, 값, 키-값 쌍을 배열로 변환
    • 반복문
      • for...in 루프: 객체의 열거 가능한 속성들을 순회합니다. 주의할 점은 프로토타입 체인 상에서 모든 속성을 열거할 수 있음
      • forEach: 배열의 각 요소에 대해 지정된 함수를 호출
      • for: 전통적인 반복문으로 주로 숫자를 증가시키는 데 사용
      • while: 주어진 조건이 true인 동안 반복
  • Getter와 Setter 함수를 정의하는 기능 추가 
  • 프로토타입 체인 관련 문제가 해결됨 

추가기능 전체

 

ES6 (ECMA Script 2015)

  • 2015년 출시된 버전으로 모던 웹 개발에 많이 사용됨
  • Arrow Function 화살표 함수 (`()` => {})와 Template Literal ( `%{}`) 등 간결하고 표현력 있는 문법이 추가됨
  • 'let' 과 'const' 를 통한 블록 스코프 변수 선언이 가능해짐
    • let: 재할당은 가능, 재선언 불가
    • const: 재할당, 재선언 불가능, 초기값이 없으면 선언 불가능
let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared
const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared
  • 클래스 문법이 추가되었으며, 객체 지향 프로그래밍을 더 쉽게 할 수 있음
  • 모듈화 기능이 도입되어 코드를 모듈 단위로 구성할 수 있게 됨
  • Promise와 async/await 등의 비동기 처리를 좀 더 간편하게 다룰 수 있는 기능이 추가됨, callback hell (콜백 지옥)을 피하고 비동기 코드를 보다 간결하게 작성 가능
  • 디스트럭처링 할당: 객체나 배열의 속성이나 요소를 추출하여 변수로 할당함. 배열이나 객체의 값을 쉽게 추출하여 변수에 할당할 수 있는 디스크럭처링 할당 (destructuring assignment) 문법을 도입
  • 확장된 객체 리터럴: 객체 생성과 수정을 더 간편하게 할 수 있음
  • Set과 Map: 중복 없는 요소의 집합과 키-값 쌍을 다루는 데이터 구조
  • Symbol: 고유하고 변경 불가능한 값을 생성하는 심볼 타입을 도입
  • for...of 루프: 컬렉션을 순회하는 데 사용하는 루프
  • Arrow function: 화살표 함수로 더 간결하게 함수를 작성할 수 있음
  • Proxy와 Reflect: 객체의 동작을 가로채거나 변경할 수 있는 기능을 제공
  • 반복문
    • for...of 루프: 컬렉션(배열, 문자열, Map, Set 등)의 각 요소를 순회. for...of는 열거 가능한 프로퍼티만 순회하며, 프로토타입 체인은 무시
    • Map.prototype.forEach와 Set.prototype.forEach: Map과 Set에서 사용할 수 있는 각 요소에 대한 반복 메소드
    • Array.prototype.forEach: ES5에서도 제공되었지만 ES6에서는 더 간결한 for...of과 함께 사용 가능
    • for...in 루프: ES5에서도 제공되었지만 프로퍼티 순회 시 프로토타입 체인의 속성도 열거함
    • for...in과 Object.keys: 객체의 속성을 열거하는 데 사용. Object.keys는 객체의 열거 가능한 속성들을 배열로 반환

추가기능 전체

WIL

  • 월요일 오전 항해 99 본 코스가 시작되고 1주일이 지났다.
  • 아침에 눈 뜨고 밤에 잘 때까지 계속 강의를 듣고 문제를 풀고 다른 수강생들이랑 이야기를 나누며 하루하루를 보내고 있다.
  • 외부일정은 스케줄하지 않고 온전히 여기에만 집중을 하고 있는 심플한 라이프를 살고있다.
  • 사람이 1주일 동안 온전히 집중하면 얼마나 많은 것들을 배울 수 있는지 깨닫게된 기회기도 하다.
  • 공부는 체력이라는 말이 있는데 체력관리의 중요성을 느낀다. 피곤할 때는 확실히 공부 능률이 떨어지고 기분이 안좋아진다. 앞으로 남은 93일 동안 체력안배를 잘 해야겠다. - 피곤할 때는 충분히 휴식을 취하고 개운해진 정신, 몸으로 다시 학습을 해야겠다.
  • 첫 1-2주는 기초, 3-5주는 주특기를 배우는 시간이다. 이 때 정말 열심히 해두어야지 다음 프로젝트를 할 때 고생하지 않을 것 같다.
  • 각자 자신만의 목표와 이유를 가지고 열심히하시는 분들이 정말 많아 나도 그 긍정적인 기운을 받아 나름 열심히 하고 있는데 다들 원하시는 목표를 달성하셨으면 좋겠다. 
  • 다음주에는 알고리즘을 아주 열심히 하는 한주인데 아직 나는 1주차 강의를 다 못 들었으니 강의를 열심히 듣고 알고리즘도 열심히해서 스시 장인이 자유자재로 생선을 손질하듯 나도 코드를 손질하는 논리력, 구현력을 키우고 싶다. 
  • steady and slow wins the race라는 말을 참 좋아하는데 항해99가 끝나는 시점에 평생 함께할 수 있는 좋은 친구들을 사귀고 스스로 배움에 있어서 후회하지 않게 순간순간 최선을 다하고 싶다.
 
 
 
 
 
추가
addition, supplement, add (sth to sth), supplement
 
 
 
 
 
 

티스토리툴바