본문 바로가기

Front-end85

JS 근본 공부 - 배열 API 연습문제 1. 배열 API 연습문제 - 배열을 사용할 때 함께 유용하게 쓰일 수 있는 API를 연습해보자. [연습문제] "use strict"; // Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; fruits.join(); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(","); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; } // Q4. make new array with.. 2020. 11. 3.
JS 근본 공부 - 배열(Array) - 배열은 프로그래밍에서 가장 많이 사용되는 자료구조다. - 배열의 개념과 활용방법을 익혀보자. 1. 배열은 무엇인가? - 배열이란 자료구조 중 하나로 여러개의 데이터를 묶어서 저장하는 방식이다. - 일반적으로 배열은 동일한 자료형의 데이터 끼리만 묶어 저장할 수 있지만, JavaScript에서는 자료형과 상관없이 데이터를 배열에 저장할 수 있다. 하지만, 이런 방식의 사용은 권장하지 않는다. 2. 자료구조와 object는 무엇이 다른가? - object는 연관된 속성과 행동이 모여서 하나의 존재를 이룬다. - 자료구조란 데이터를 저장 및 정렬하는 형식/방식을 의미하는 것이다. 3. 배열의 특징 - 동일한 자료형의 데이터를 저장한다. - 데이터가 순차적으로 저장된다. - 저장된 데이터는 index가 부여.. 2020. 11. 2.
JS 근본 공부 - Object 1. 왜 object를 사용할까? - 개발자는 값을 저장하기 위해 변수를 생성한다. 변수 1개당 하나의 값(value)만 저장할 수 있다는 특성이 있다. - 그러나 개발을 하다보면 여러 변수들을 매번 함께 사용하는 경우가 발생하며 해당 변수들을 묶음으로 관리하기가 쉽지 않다. - 여러 변수들을 묶어서 효율적으로 관리하는 방법 중 하나가 바로 object이다. 아래 코드 예시를 살펴보자. const name = "Raphael"; const age = 20; function print(name, age) { console.log(name); console.log(age); } print(name, age); - 위의 함수에서 보이는 name과 age 라는 매개변수 이외에 address와 phoneNumbe.. 2020. 11. 1.
JS 근본 공부 - class & object(객체지향) 1. class란 무엇일까? - 클래스는 현실의 대상을 데이터화 시키기 위해 연관된 정보 또는 데이터를 하나의 그룹으로 묶는 것을 의미한다. - 클래스는 속성(= fields, 변수)과 행동(= method, 함수)으로 구성되어 있다. - 그러므로 클래스는 어떤 현실의 대상을 데이터화 시키기 위한 설계도 또는 청사진이다. - 속성만으로 구성되어있는 클래스가 있는데, 이를 데이터 클래스라고 부른다. [Class 선언방법] class Person { // construcor: 해당 클래스를 이용하여 객체를 생성할 때 // 객체의 초기값을 설정하기 위해서 사용되는 생성자 함수이다. constructor(name, age) { // fields this.name = name; this.age = age; // .. 2020. 10. 31.
JS 근본 공부 - function 1. function이란 무엇일까? - function이란, 프로그램 안에서 하나의 기능을 수행하는 역할을 한다. 여러개의 function들이 모여 하나의 프로그램을 구성하기 때문에 function을 sub-program이라고 부르기도 한다. - JavaScript와 같이 절차적 언어에서는 이 funciton의 역할이 매우 중요한데, 코드가 순차적으로 실행되기 때문에 function과 function이 맞물려 작동하기 때문이다. - 그렇다면 function이란 무엇일까? function이란, 입력값(input 또는 parameter)을 받아서 각 function에 할당된 연산을 수행한 뒤 그 결과값(output 또는 return)을 반환하는 과정을 의미한다. 2. JavaScript 함수 선언 - fun.. 2020. 10. 30.
JS 근본 공부 - 연산자 1. 사칙연산 - 다른 프로그래밍 언어의 사칙연산과 동일하게 +(덧셈), -(뺄셈), /(나누기), %(나머지), *(곱셈)가 존재한다. - 제곱 연산자는 ** 이다. - 문자열 합병의 경우 +를 사용한다. 2. Increment & decrement operator (증감연산) a) pre-increment/decrement - 변수명 앞에 ++ 또는 -- 기호를 붙여주면 +1 또는 -1이 된 값이 적용된다. let counter = 2; const preIncrement = ++counter; // 위의 코드는 preIncrement = counter + 1; 과 동일하다. // 이 경우, preIncrement는 3이 되고 counter도 3이 된다. let counter = 2; const pre.. 2020. 10. 25.
JS 근본 공부 - 데이터 타입 1. 변수 선언문 - 변수란, 메모리에 값을 할당하여 읽고 쓰는 것(read & write)이 가능하게 하는 작업이다. - 변수를 선언할 때 사용하는 선언문에 따라 읽기와 쓰기를 개발자가 조정할 수 있다. 그 차이를 알아보자. a) let (mutable type) - read & write ES6에서 추가된 데이터 타입으로, 변수를 선언할 때 사용된다. let으로 선언된 변수는 저장된 값을 바꿀 수 있다. 그러므로 메모리에 값을 읽고 쓰는것이 가능하다. let variable1 = 123; variable1 = "abc"; 위의 코드에서 처럼, variable1이 갖고있는 값이 선언시에는 123(정수)였으나 "abc"라는 값으로 바꾼 것을 확인할 수 있다. 이처럼, 갖고있는 값을 변경할 수 있는 변수를.. 2020. 10. 24.
JS 근본공부 - JS의 동작원리 1. JavaScript를 사용하는 이유 - JavaScript를 사용하는 이유는 정적인 웹사이트를 동적으로 만들기 위해서다. 그렇다면 정적, 동적의 차이는 무엇일까? - 정적인 웹사이트는 링크를 이용한 페이지 이동만이 구현된 웹사이트를 의미한다. - 동적인 웹사이트는 JavaScript를 이용하여 HTML 엘리먼트를 객체화 시킴으로써, 사용자에 의한 입력에 따라 특정 event가 발생하게 되면 지정된 DOM조작을 하여 페이지를 이동하지 않고 현재 페이지의 동적인 변화를 주는 것을 말한다. 예를들어, 사진을 클릭하면 모달창이 생성되면서 더 큰 사진으로 볼 수 있는 기능 같은 것들이 여기에 해당된다. 2. JavaScript는 어떻게 동작되는 것이며, 웹사이트에서 어떻게 읽히는가? - JavaScript가.. 2020. 10. 23.
JS 근본공부 - 자바스크립트의 역사 Vanilla JS를 공부하면서 JS의 근본에 대해 궁금증이 생겼다. 이를 시작으로, 앞으로 JS의 기본이 되는 여러 개념과 정보들을 하나씩 정리해보려 한다. 1. 1993년 MOSAIC 웹 브라우저 MOSAIC은 UI가 적용된 최초의 웹 브라우저로 기본적인 HTML의 형식을 갖추고 있다. MOSAIC 브라우저를 만든 Marc Andreessen은 후에 Netscape의 창업주가 되어 간단한 HTML 형식과 CSS를 갖춘 Netscape Navigator라는 브라우저를 출시하게 된다. 당시 80%의 시작점유율을 갖고 있던 Netscape Navigator는 정적인 웹사이트였고 이를 동적으로 구현하여 사용자에게 dynamic한 경험을 선사하기위해 많은 고민 끝에 scripting언어를 추가하기로 한다. 새.. 2020. 10. 23.

티스토리툴바