📌 배열 메서드 📐 원본 배열을 변경하는 메서드 : mutable ✅ push() : 맨 뒤 요소 추가 -> 변경된 배열의 길이 리턴 ✅ pop() : 맨 뒤 요소 제거 -> 제거된 요소 리턴 ✅ unshift() : 맨 앞 요소 추가 -> 변경된 배열의 길이 리턴 ✅ shift() : 맨 앞 요소 제거 -> 제거된 요소 리턴 ✅ splice() : 원본 배열 에서 잘라내기 원본 배열 보존 안됌. 추가도 가능 ✅ reverse() : 배열 인덱스 전체를 뒤집음 ✅ fill() : 배열 요소 전체를 () 로 바꿈 📐 원본 배열을 변경하지 않는 메서드 : Immutable ✅ slice () : 원본 배열 복사 ( 원본 배열 그대로 유지 ) 배열에 대해 얕은 복사가 일어난다. 깊은 복사와 얕은 복사 -> 이..
📌객체 내부에 값으로 들어 있는 배열과 객체 , 함수도 똑같은 방법으로 접근 가능하다. 위와 같은 객체가 있다고 치자. 객체 내부에 배열 키가 수강중인과목인 프로퍼티를 접근하겠다. 위 이미지를 보면 배열에서 쓰는 push() 메서드를 똑같은 방법으로 사용해 수강중인과목이라는 키를 가진 배열 값 끝에 'c언어'를 추가하였다. 객체 내부에 있는 객체인 키가 여자친구 인 프로퍼티를 접근하겠다. 여자친구라는 키를 가진 객체에 사는 곳이라는 키를 가진 프로퍼티 추가 했다. 객체 내부에 있는 함수에 접근하겠다. 키가 기쁨인 함수를 똑같이 호출 가능하다. 📌 객체 메서드 📐 Object.keys() -> key를 모아서 배열로 📐 Object.values( ) -> value(값)을 모아서 배열로 📐 Object.a..
📌 객체 다루기 ✅ 프로퍼티를 참조(Read)하는 방법은 두 가지가 있다. 위 객체를 선언 했다고 치자. 1️⃣ Dot notation Dot notation은 객체이름에 .(점)을 붙이고 키(속성명)을 입력해주면 된다. 2️⃣ Bracket notation Bracket notation은 사용시 반드시 문자열을 입력해야 한다. 위 이미지를 보면 [ ] 안에 문자열이 들어오는걸 볼 수 있다. 키(속성명)을 문자열로 입력해야 작동된다. 만약 문자열로 입력안하면 어떻게 될까? 위 이미지와 같은 에러가 뜨게 된다. 에러가 발생 했을 땐 항상 왜 에러가 발생했는지 읽어보자. ReferenceError , not defined 참조되지않고 정의가 되지않았다. 그렇다면 age,job,여자친구를 변수로 정의해준다면 ..
📌 객체 객체 개요 JavaScript의 객체는 게임 캐릭터에 비유할 수 있습니다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 세부적인 내용은 다릅니다. 누군가는 김코딩이라는 ID와 마법사라는 직업을 가지고 있지만, 다른 누군가는 박해커라는 ID와 전사라는 직업을 가지고 있습니다. 마찬가지로 사용자가 유어클래스에 가입할 때 입력할 항목은 모두 같지만, 입력하는 정보는 사용자마다 다릅니다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있습니다. 이렇게 공통적인 속성을 가지는 경우 객체를 사용해야 합니다. ✏️ 객체란? 객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터 객체는 {..
📌 배열(Array) 개요 다량의 데이터를 다룰 수 있는 데이터 타입인 배열. ✏️ 배열(Array)이란? 배열(Array)을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다. 인덱스는 1이 아닌 0부터 번호를 매깁니다. ✅ 배열(Array)의 특징 1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다. 3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다. 📐 Array.length Array 인스턴스의 length 속성은 배열의 길이를 반환합니다. 반환값은 부..
📌 Chapter1 - Command-Line Interface ✅ Command-Line Interface 개요 컴퓨터를 조작하기 위해서는 다양한 입력(Input)이 필요합니다. 이 화면을 보기 위해 마우스를 사용하고, 메시지를 입력하기 위해 키보드를 사용합니다. 입력을 담당하는 키보드나 마우스를 입력 소스(Input source)라고 합니다. 키보드나 마우스 외에도 카메라나 마이크 등 컴퓨터에 새로운 명령을 전달하는 모든 소스가 입력 소스입니다. 반대로, 입력 소스에 의해 또는 작성된 프로그램에 의해 모니터에 화면을 나타내거나, 음악을 재생하면 소리를 스피커로 전달하여 사용자가 인식할 수 있도록 하는 일을 출력(Output)이라고 합니다. 시각적 출력을 담당하는 모니터나 청각적 출력을 담당하는 스피커..
📌 함수 개요 현실에서 발생하는 대부분의 복잡한 문제는 더 작고 간단한 문제로 나눌 수 있습니다. 복잡한 문제를 해결하기 위해서는 반대로 작고 간단한 문제를 하나씩 해결하고, 마지막에는 크고 복잡한 문제를 해결합니다. 이러한 과정을 컴퓨터는 함수라는 것을 사용해 해결합니다.함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위입니다. 논리적인 일련의 작업을 하는 하나의 단위를 함수라고 합니다. 💡 함수를 사용하는 이유 - 크고 복잡한 문제를 해결하기 위해 작은 문제 부터 해결하듯이 이런 하나의 작은 과정을 컴퓨터는 함수로 표현 할 수 있다. 즉 복잡한 문제를 해결하기 위한 논리적인 일련의 작업을 하는 하나의 단위를 함수라 한다. 또한 반복적인 동작을 묶어놨다가 사용하기에도 편리하다. 📌 함수 정의..
📌 반복문 개요 만약 컴퓨터에게 한 번에 한 가지 일만 시킬 수 있다면, 사람이 그 일을 처리하는 속도와 큰 차이가 없을 지도 모릅니다. 컴퓨터가 한 번의 일을 처리할 때마다 같은 명령을 반복적으로 해주어야 하기 때문입니다. 우리가 의도한 만큼 같은 동작을 반복하도록 할 수는 없을까요? 이것이 바로 조건문과 함께 JavaScript의 대표적인 제어문인 반복문을 사용하는 이유입니다. 이번 시간에는 코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 방법인 반복문에 대해 학습해 보겠습니다. 💡 반복문을 쓰는 이유는 컴퓨터에게 우리가 의도한 만큼 같은 동작을 시키기 위해서 📌 for문 ✅ for문 JavaScript의 대표적인 반복문인 for문에 대해서 학습해 보겠습니다. 먼..
CSS 기초 개요 HTML이 웹 페이지의 구조 담당 CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당 📌Chapter1-1. CSS와 프론트엔드 개발 CSS(Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.CSS가 개발자인 우리에게 어떤 의미가 있을까? 미래의 프론트앤드 개발자로써 앞으로 CSS에 대해 가져야 할 마음가짐을 공유하고자 한다. CSS는 좋은 사용자 경험(UX)을 제공하기 위한 도구이다. 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다. 좋은 사용자 경험(UX)은 직관적이고 쉬운 UI에서 나온다. 📌Chapter1-2. CSS 따라하기 CSS는 스타일링 도구이므로, 독립적으로 기능하지 않는다. 반..
📌조건문 개요 컴퓨터는 작성된 코드를 위에서부터 아래로 순차적으로 실행할 뿐이다. 하지만 특정한 조건에 따라 코드가 실행되도록 하는 방법이 있다. 바로 조건문이다. 조건문을 활용하면, 아침 6시가 되면 알람을 울리도록 하거나,물이 100도가 될 때까지만 가열하거나,마우스를 클릭하면 프로그램이 실행되도록 프로그래밍을 할 수 있다. ⭐ 조건문을 사용하는 이유는 컴퓨터에게 특정 조건에 따라 코드를 실행시키기 위해서 📌if문 if문의 기본 구조 - if (조건식) { true일때 실행되는 코드 } if문은 주어진 조건식의 참( true ) / 거짓( false ) 여부에 따라 실행이 결정된다. 참과 거짓을 판단하기 위한 JavaScript의 타입은 불린 타입이다. 따라서 조건식은 결과가 불린 타입이 되도록 작성..
