혼공JS
-
[#혼공챌린지] 혼자 공부하는 자바스크립트 6주차 미션카테고리 없음 2021. 8. 16. 19:58
공부내용 정리 Chapter 09: 클래스 Chapter 10: 리액트 기본 미션 클래스, 인스턴스, 생성자, 추상화가 무엇인지 설명하기 클래스 객체를 안전하고 효율적으로 만들 수 있는 방법 중 하나. 인스턴스 클래스를 기반으로 만든 객체 생성자 클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드 추상화 수많은 정보를 갖고 있는 현실의 객체를 컴퓨터에 데이터화시키기 위해, 필요한 정보만을 사용해 객체를 표현하는 것. 선택미션 p.400 확인문제 2번 정리해서 인증샷 여러가지 프로그램에 들어있는 객체를 생각해보세요. 예를들어 배달 어플리케이션이라면 가게, 메뉴, 주문 내역, 리뷰, 회원 등의 객체를 생각해볼 수 있습니다. 또 이러한 객체의 속성을 생각해볼 수도 있습니다. 가게 객체라면 이름, 주소..
-
혼자 공부하는 자바스크립트 10장 - 리액트자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 16. 19:33
리액트 리액트는 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와준다. 리액트 라이브러리를 사용하면 대규모 프론트엔드 웹 앱을 체계적으로 개발할 수 있으며, 리액트 네이티브를 활용해 스마트폰에서도 빠른 속도로 작동하는 애플리케이션을 만들 수 있다. 리액트 라이브러리 사용 준비하기 가장 기본적인 방법은 HTML에서 react.development.js, react-dom.development.js, babel.min.js 세 개의 자바스크립트를 읽어들이는 것이다. 앞의 두개는 리액트를 사용하기 위해 필요하고, babel은 리액트 코드를 쉽게 작성할 수 있게 해준다. 리액트 라이브러리는 단순한 자바스크립트가 아니라, 리액트를 위해서 개발된 자바스크립트 확장 문법(JSX)을 사..
-
혼자 공부하는 자바스크립트 9장 - 클래스자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 16. 19:31
클래스의 기본 기능 C를 제외한 다양한 프로그래밍 언어는, 객체를 우선적으로 생각해서 프로그램을 만드는 객체 지향 프로그래밍 언어가 많다. 클래스라는 문법은 객체를 효율적이고 안전하게 만들어 객체 지향 패러다임을 쉽게 프로그래밍에 적용할 수 있도록 돕는다. 추상화 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념과 기능을 간추려내는 것 대부분의 프로그램은 "우리가 어떤 데이터를 활욯하는가?" 라는 생각으로 부터 시작된다. 현실의 객체는 데이터가 될 수 있는 수많은 속성을 갖고 있기에, 현실의 모든 정보를 컴퓨터 내부에 입력하는 것은 불가능에 가깝다. 프로그램을 만들 땐 필요한 요소만 사용해 객체를 표현하는데, 이를 추상화라고 한다. 학생 성적 관리 프로그램을 만든다고 치자. 우선 학생이라는 객체가 필..
-
[#혼공챌린지] 혼자 공부하는 자바스크립트 5주차 미션자바스크립트/혼공챌린지 2021. 8. 8. 23:55
공부내용 정리 Chapter 07: 문서 객체 모델 Chapter 08: 예외 처리 기본 미션 p.315의 을 실행한 후 출력되는 고양이 이미지 인증샷 http://placekitten.com/너비/높이의 형태로 URL을 입력하면 적절한 크기의 고양이 이미지를 얻을 수 있는데, img 태그의 src 속성과 결합해 고양이 이미지를 출력할 수 있다. 인덱스는 0부터 시작하므로, 만일 1을 더해주지 않는다면 첫번째 이미지는 너비가 0이 되어 정보를 표출하지 못하게 될 것이다. 너무 귀엽다... const heigth = (index + 1) * 100을 추가하고, src를 http://placekitten.com/${width}/${height};로 설정해보았다. 너무 귀엽다...(2) 선택미션 p.352 누..
-
[#혼공챌린지] 혼자 공부하는 자바스크립트 4주차 미션자바스크립트/혼공챌린지 2021. 8. 1. 19:36
공부내용 정리 Chapter 05: 함수 Chapter 06: 객체 기본 미션 202쪽의 예제를 실행하여 2021년이 윤년인지 확인하는 결과 인증샷 윤년의 특징: 4로 나누어 떨어지는 해는 윤년이다. 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다. 하지만 400으로 나누어 떨어지는 해는 윤년이다. 이러한 윤년의 특징을 isLeapYear()라는 함수로 구현한다. 숫자인 년도를 매개변수로 입력했을 때 윤년이면 true, 윤년이 아니면 false를 리턴한다. true, false를 리턴하는 함수는 보통 isOO()라는 이름으로 만든다. 내가 짠 식 const isLeapYear = (year) => { if (year % 4 === 0 && (year % 100 !== 0 || year % 400 =..
-
혼자 공부하는 자바스크립트 6장 - 객체자바스크립트/혼자 공부하는 자바스크립트 2021. 8. 1. 18:03
객체 이름name과 값value으로 구성된 속성property을 가진 자바스크립트의 기본 데이터 타입 자바스크립트에서 여러 자료를 다룰 때는 객체를 사용한다. 여러 자료를 다룰 수 있는 배열 역시 객체이다. typeof []를 실행하면 object를 출력한다. 객체는 중괄호{}로 생성하며, 키: 값의 형태의 자료를 ,로 연결해서 입력한다. const person = { name: "Bob", age: 32, handsome: true, interests: ['music', 'skiing'], bio: function() { alert(`${this.name} is ${this. age} years old. He likes ${this.interests[0]} and ${this.interests[1]}...
-
혼자 공부하는 자바스크립트 5장 - 함수자바스크립트/혼자 공부하는 자바스크립트 2021. 7. 31. 00:49
함수 함수 호출 함수를 사용한다. 매개변수 함수를 호출할 때 괄호 내부에 넣는 자료 리턴값 함수를 호출해서 최종적으로 나오는 결과 익명함수 함수는 코드의 집합을 나타내는 자료형이다. 중괄호 내부에 코드를 넣어 사용하기 때문이다. function () {} 함수를 사용하면 좋은 점: 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다. 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다. const 함수 = function () { console.log("함수 내부의 코드입니다 ... 1"); console.log("함수 내부의 코드입니다 ... 2"); console.lo..
-
[#혼공챌린지] 혼자 공부하는 자바스크립트 3주차 미션자바스크립트/혼공챌린지 2021. 7. 25. 15:55
공부내용 정리 Chapter 04: 반복문 기본 미션 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 비파괴적 처리 처리 후에 원본 내용이 변경되지 않는다. const a = "안녕"; const b = "하세요"; const c = a + b; c; // "안녕하세요" a; // "안녕" b; // "하세요" a와 b의 내용이 변경되지 않았다. 파괴적 처리 처리 후에 원본 내용이 변경된다 const array = ["사과", "배", "바나나"]; array.push("귤"); // 4 array; // (4) ["사과", "배", "바나나", "귤"] array의 원본 내용이 변경되었다. 과거엔 컴퓨터 메모리의 부족으로, 프로그래밍 언어 및 라이브러리는 메모리를 절약해 사용하는 방식으로 설계되었..