본문 바로가기

코드스테이츠부트캠프

(70)
Section1 Unit10 JS/브라우저 DOM Section1 Unit10 [JS/브라우저] DOM 📌 Chapter1. DOM 기초 • DOM(Documnet Object Model)은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용해 DOM으로 HTML을 조작할 수 있다. • 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다. console.log(document.body); console.dir(document.body); → DOM 구조를 조회할 때는 DOM을 객체의 모습으로 출력하는 console.dir가 유용하다. • Tree 구조의 DOM 📌 Chapter2. DOM 다루기 CRUD(C..
Section1 Unit9 과제 JavaScript Koans Section1 Unit9 [JavaScript] JavaScript Koans ⭐️ 과제. JavaScript Koans 이번 유닛의 JavaScript Koans 과제를 진행하며, 자바스크립트의 기본 개념을 정리할 수 있었다. Javascript Koans는 1번 소개 챕터를 제외하고, 10번까지 9개의 챕터로 나눈 파일이 제공되었다. (타입, 변수, 스코프, 함수, 배열, 객체, 스프레드 문법 등) 헷갈렸던 부분들은 따로 정리하고, 문제도 최대한 다 이해하려 했다. 이번 TIL에서는 헷갈렸던 개념이랑 문제들, 따로 찾아보기를 권고했던 사항 중에 내가 잘 몰랐던 부분들을 위주로 정리를 해볼까 한다 🙂 • 03_LetConst.js Q. 재할당도 안되는 'const' 키워드를 굳이 써야하는지 이해가 안..
Section1 Unit9 JavaScript 핵심 개념과 주요 문법 - ES6 신규 문법 Section1 Unit9 [JavaScript] 핵심 개념과 주요 문법 - ES6 신규 문법 📌 Chapter4. ES6 신규 문법 이번 유닛에서 학습한 내용들은 아래와 같은 ES6 신규 문법이었다. 다른 문법은 노션에 정리해두고, 자주 사용했던 화살표 함수는 블로그에도 따로 정리를 해보았다 🙂 • spread 문법과 rest 문법 • 구조분해할당 • 화살표 함수 자바스크립트 ES6 화살표 함수 기본 화살표 함수란 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법으로, 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다. // 화살표 함수 let func = (arg1, arg2, ...argN) => fay-story.com ⭐️ 과제. JavaScript Koans 이번 과제로..
Section1 Unit9 JavaScript 핵심 개념과 주요 문법 - 자료형, 스코프, 클로저 Section1 Unit9 [JavaScript] 핵심 개념과 주요 문법 - 자료형, 스코프, 클로저 📌 Chapter1. 원시 자료형과 참조 자료형 • 원시 자료형(primitive data type) : number, string, boolean, undefined, null → 데이터를 복사 때 데이터값이 복사되기 때문에 기존의 데이터에 영향이 가지 않는다. • 참조 자료형(reference data type) : array, object, function → 데이터 복사 시 주소를 복사하기 때문에 기존의 데이터에도 영향이 간다. 📌 Chapter2. 스코프 • 스코프(scope)는 변수와 함수가 유효한 범위를 결정하는 규칙이다. 스코프는 변수와 함수가 언제, 어디서, 어떻게 사용 가능한지를 정의한..
Section1 Unit8 JavaScript 객체 Section1 Unit8 [JavaScript] 배열, 객체 - 객체 📌 Chapter2. 객체 • 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합. let user = { fristName: "Haily", lastName: "Lee", city: "Seoul" }; // 객체표기법 user.firstName // Haily → Dot notation user["city"] // Seoul → Bracket notation → 객체는 키(key)와 값(value)으로 이루어지며, 키와 값 사이는 콜론(:)으로 구분한다. → 중괄호를 이용해서 객체를 만들고, 키과 값은 쉼표로 구분한다. ⬇︎ 키 값이 동적으로 변할 때는(ex. 변수일때) Bracket..
Section1 Unit8 JavaScript 배열 Section1 Unit8 [JavaScript] 배열, 객체 - 배열 📌 Chapter1. 배열 • 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합으로, 하나의 변수에 여러 개의 데이터를 저장할 수 있다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다. // 배열 선언 let myNumber = [7, 45, 34, 123, 3]; // 배열 조회 myNumber[3] // 123 값을 조회. myNumber[3] = 200; // 값을 변경 myNumber[5] // undefined myNumber.length // 5 • console.table() 표 형식의 데이터를 테이블로 표시한다. → 이렇게 출력할 수 있는..
Section1 Unit7 Linux, Git 기초 Section1 Unit7 [Linux/Git] 기초 📌 Chapter1. Command-Line Interface • 터미널(Terminal)은 입력하는 글자와 출력되는 글자로 컴퓨터와 소통할 수 있는 CLI(Command-Line Interface) CLI로 생성한 폴더나 파일은 GUI로 확인할 수 있고, GUI로 작업한 내용도 CLI에서 확인할 수 있다. • Terminal에서 사용할 수 있는 기본적인 명령어들도 학습했다. 평소에 헷갈렸던 부분들이 많았는데, 이번 수업으로 정리를 할 수 있었다. 노션에 따로 정리는 해 두었는데, 시간나면 따로 블로그에 게시글로 쓰면 좋을듯 하다 :) 라이브 세션에서의 수업도 알차고, 재미있었다 👍🏻 • 우리는 서비스의 소비자가 아니라 공급자이기 때문에 컴퓨터에 대해..
Section1 Unit6 간단한 웹앱 만들기 - 계산기 구현 (기본) Section1 Unit6 간단한 웹앱 만들기 - 계산기 구현 (기본) ⭐️ 과제1. 계산기 구현하기 Bare Minimum Requirements ✓ clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다. ✓ 처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다. ✓ 숫자 버튼과 연산자 버튼을 눌렀을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 보여야 합니다. ✓ 숫자 버튼, 연산자 버튼, 숫자 버튼을 눌렀을 때, 화면에 숫자, 연산자, 순자의 순서로 보여야 합니다. ✓ 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 눌렀을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과의 순서로 보여야 합니다. ✓ 연산 시 script.js의 cal..

반응형