유쾌하고, 유익하게

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 객체지향 프로그래밍 객체지향 프로그래밍은 데이터(속성)와 기능(메서드)을 의미하는 코드를 하나의 단위(객체)로 묶으며, 이러한 단위들의 집합으로 프로그램을 표현하는 방식이다. 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. 클래스는 세부 사항(속성)이 들어가지 않은 청사진으로, 세부사항을 입력하면 객체(인스턴스)가 된다. 객체의 속성은 클래스(실체)의 고유한 세부사항(또는 특성)(예. 자동차 -> 브랜드, 모델명, 가격, 색상 등)이며, 구체적인 속성은 특정 클래스를 다른 것들과 구별하여 인식할 수 있게 한다. 객체의 매서드는 해당 클래스의 기능(또는 동작)(예. 자동차 -> 전진, 후진, 조향..

SEB_FE_45 Section2. Unit 2. 클래스와 인스턴스 in 객체지향 프로그래밍 클래스(class)란? 자바스크립트에서 클래스는 ES6에서 도입되었다. 자바스크립트는 프로토타입의 객체지향 프로그래밍 언어이다. 클래스란 특정 객체를 생성하기 위해 변수와 매서드를 정의하는 틀(template)이며, 이는 같은 종류의 집단(객체, object)에 속하는 속성(변수)과 행위(매서드)를 정의하는 것이다. 클래스는 같은 종류의 집단(객체) 생성에 사용되는 패턴 혹은 청사진(blueprint)이다. 인스턴스(instance)? 인스턴스는 클래스(청사진, blueprint)를 바탕으로 한 객체(오브젝트, object)를 의미한다. 모든 인스턴스는 오직 클래스에서 정의된 범위 내에서만 작동하며 런타임에 그 ..

코드스테이츠 프론트엔드 부트캠프 45기 Section1 회고 부트캠프를 시작하고 한달이 지났다. 커리큘럼을 따라오다 보니 여기까지 와있네!? 시간 참 빠르다~! 오늘의 커리큘럼이었던 section.1 회고 블로깅! KPT(KEEP / PROBLEM / TRY) 방식으로 노션페이지에 블로깅을 진행하였다. 블로깅 후에는 동기들의 글도 서로 보면서 응원하는 시간도 가져서 의미있는 시간이었다. 온라인에 비대면 수업이라 함께한다는 느낌을 받기 어려운데, 코드스테이츠는 페어프로그램이나 그룹회고 그리고 이런 블로깅에 서로 응원해주시 등을 통해 함께 한다는 느낌을 받게 해주는 것 같다. 아래는 노션페이지에 작성한 나의 1달간의 회고 내용이다. ※ 초기 목표! 수업 출석률 95%달성하기 건강 관리하기(10kg 체중 감량..

SEB_FE_45 Section1. Unit.9 JavaScript 핵심 개념과 문법(Koans) JavaScript에서 호이스팅(hoisting)이란? 출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다. 함수 선언식으로 작성한 함수에서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 단, 선언과 초기화를 함께 수..

SEB_FE_45 Section.1 Unit.9 JavaScript 핵심 개요와 주요문법 1 - 코드스테이츠 1. 원시자료형과 참조자료형 구분 원시자료형 참조자료형 값(value)의 종류(type) number, string, boolean, null, undefined, Symbol 배열(array), 객체(object), 함수(function) 변수 할당 메모리공간에 값 저장 메모리공간에 주소값 저장 다른 변수에 할당 원시값 자체가 복사됨 주소값이 복사됨 변경가능 여부 변경불가(immutable) 생성된 원시값은 읽기전용 값임 변경가능(mutable)한 값 복사 값 자체를 복사 (대체로 값의 크기가 일정하기 때문에 새로운 공간확보 및 복사 용이) 주소값을 복사 (값의 크기가 일정하지 않기 때문에 매번..

SEB_FE_45 Section.1 Unit.8 배열과 객체 2 1. 객체 가. 객체의 개념 객체란 회원주소록과 같이 하나의 변수(회원 정보)에 의미있는 데이터들(이름, 주소, 연락처, 생년월일 등)을 묶음으로 관리할 수 있는 데이터 타입이다. 객체의 구성은 아래 코드블럭과 같다. //객체의 구조 let object = { property1 : value, property2 : value, ..., propertyn : value } // {} : 중괄호로 묶여있다. // 속성(property)과 값(value)로 나눠져있다. // 속성 : 값의 묶음을 쌍이라 한다. // 속성과 값의 구분은 콜론(:) 으로 한다. // 여러 (속성값)쌍이 있는 경우에는 쉼표(,)로 구분한다. 만약 회원 정보를 배열로 작..

SEB_FE_45 Section.1_Unit.8 배열과 객체 1. 배열 가. 배열의 개념 배열이란 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입이다. 배열은 순서(index)가 있는 값(요소, element)이다. 요소를 할당할 때에는 [대괄호]를 사용한다. let a = [1, 2, 3, 4, 5] //[1,2,3,4,5] 는 값(element)이다. //각 값에는 순서(index)가 존재하며, index는 0부터 센다. a[1] === 2 // 배열변수[인덱스]로 해당 인덱스의 요소를 조회할 수 있다. a[1] = 1 // 1번째 요소를 1로 바꾼다. // a=[1,1,3,4,5] 가 된다. a.length === 5 // 배열변수의 길이를 확인할 수 있다. 나. 다양한 매서드 매서드 설명 ..

SEB_FE_45 Section1. Unit5. JavaScript 기초(함수) 학습 목표 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다. 매개변수와 전달인자에 대해 설명할 수 있다. 함수에 return문이 필요한 이유를 이해한다. 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다. 1. 함수 함수란 논리적인 일련의 작업을 하는 하나의 단위이다. 함수의 사용은 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행하는 것이다. 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 '함수를 정의한다.'고 한다. 1) 함수 선언문 2) 함수 표현식 : 함수를 변수에 할당하는 형태 3) 호출 함수 내부에 있는 코드를 실행하기 위해서는 호출이 필요하다. ..

SEB_FE_45 Section1. Unit5. JavaScript기초 1. JavaScript JavaScript 는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다. 이에 HTML파일과 함께 브라우저에서 실행해야 작동한다. 혹은 Node.js라는 런타임을 컴퓨터에 설치해 실행할 수 있다. 코드스테이츠에서는 학습툴로 StackBlitz을 통해 실습을 진행하였다. ※ 용어 설명 - REPL(Read-Evaluate-Print loop) : 읽고(Read), 평가하고(Evaluate), 출력(Print)을 반복(loop)하는 가장 간단한 개발 환경 - 프로그램 : 작업(task) 수행을 위한 코드모음 - 프로세스 : 프로그램 실행의 결과물 - console.log() : 개발자 도구 콘솔이나 ..

SEB_FE_45 Section1. Unit.4. HTML/CSS 활용 복습 및 페어프로그램 1. HTML/CSS 전반 복습 구조를 만드는 마크업언어인 HTML과 스타일언어인 CSS HTML은 태그들의 묶음이며, CSS는 HTML 요소를 선택자로 불러와 디자인 요소를 입힌다. 태그를 활용하여 HTML 내에서도 CSS 적용이 가능하지만, 권고하지 않는다. 그 이유는 각 언어별 역할이 있기 때문이며, 에러나 수정이 필요한 경우 빠른 피드백을 위해 별도 파일로 관리 및 업데이트 하는 것이 용이하다. HTML 태그 작성시 시멘틱 요소 사용이 권고되고 있다. HTML 또한 언어이기 때문에 데이터를 가장 잘 표현할 수 있는 요소를 선택하기 위한 고민이 필요하다. 이를 통해 개발자와 개발자, 개발자와 컴퓨터가 더 원..

SEB_FE_45 Section1. Unit 4. HTML / CSS 활용 1. 레이아웃 레이아웃이란 각각의 요소를 목적에 맞게 배치하는 것이다. 이를 위해 와이러프레임 작업을 먼저 수행해야 한다. 와이어 프레임이란 레이아웃의 뼈대를 그리는 단계이다. 와이어프레임은 선과 도형을 이용하여 인터페이스를 시각적으로 표현하는 것이며, 레이아웃과 제품의 구조를 단순하게 보여주는 용도이다.(전환효과, 애니메이션, 사용자 경험에 대한 판단은 고려하지 않는다.) 와이어프레임 단계이후에는 목업(Moke-up)을 만들어야 한다. 목업이란 대부분의 산업에서 실물크기의 모형을 의미한다. 와이어프레임과 목업이 없는 HTML은 도면없는 건물과 같다고 볼 수 있다. HTML 구성은 컨텐츠의 흐름 방향에 따라 차례대로 진행한다. 컨..