코딩일기

2023-05-25(화) Chapter1. 고차 함수 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다. 고차 함수(higher-order function)에 대해 설명할 수 있다. 고차 함수를 자바스크립트로 작성할 수 있다. Chapter2. 내장 고차 함수 배열 내장 고차 함수 filter, map, reduce에 대해서 이해할 수 있다. filter, map, reduce에 대한 이해를 기반으로 나머지 고차 함수를 스스로 학습할 수 있다. forEach, find, sort, some, every 고차 함수를 쓰는 이유를 설명할 수 있다. 고차 함수를 활용하여 프로그램을 작성할 수 있다. Chapter3. 고차 함수의 중요성 추상화(abstraction)에 대해 설명..

2023-05-22(월) React State && Props State = 살면서 변할 수 있는 값 = 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 = 내부에서 변화하는 값 Props = 변하지 않는 외부로부터 전달받은 값 = 컴포넌트의 속성을 의미합니다. = 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 = 객체 형태이고 읽기 전용(함부로 변경될 수 없는)이다 How to use props Props 사용하는 방법 1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링한다. unction Parent() { return ( I'm the parent ); }; function Child() {..

2023-05-18(목) 리액트란? = 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리입니다. 리액트의 3가지 특징 = 리액트는 선언형이고, 컴포넌트 기반이고, 다양한 곳에서 활용할 수 있다는 특징이 있습니다. 선언형(Declarative) = 명시적이다./ 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다. 개발자가 코드만 보고도 실제 웹 어플에 모습을 한눈에 알아볼 수 있다. 컴포넌트 기반(Component-Based) = 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에,..

Fetches 과제 복습 1번과제 fetch메서드를 이용하여 newsURL을 받아서 .then 메서드를 사용하여 parsing하고 그 parsing받은 값으로 다시 fetch메서드를 사용하여 weatherURL을 받아서 패싱하고 리턴하면 news와 weather에 접근이 가능해진다. const newsURL = 'http://localhost:4999/data/latestNews'; const weatherURL = 'http://localhost:4999/data/weather'; function getNewsAndWeather() { // TODO: fetch을 이용해 작성합니다 // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다 return fetch(newsURL) //new..

2023-05-12(금) Section 2 Unit2 - [JavaScript] 객체 지향 프로그래밍 자바스크립트는 프로토타입(Prototype) 기반 언어입니다. 여기서 프로토타입은 원형 객체를 의미합니다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { console.log(`${this.name}은 잠에 들었습니다`); } } let kimcoding = new Human('김코딩', 30); // 실습해보세요 Human.prototype.constructor ===..

2023-05-11(목) Section 2 Unit2 - [JavaScript] 객체 지향 프로그래밍 객체 지향 프로그래밍이란? = 데이터와 기능을 한 곳에 묶어서 처리하는 프로그래밍 방식 = 속성과 메서드가 하나의 "객체"라는 개념에 포함되어, object와는 다르게 class라는 이름으로 부릅니다. 클래스와 인스턴스란? = 설계를 하기 위해 필요한 설계도를 클래스 라고 말하며, 그 설계도를 바탕으로 만들어진 자동차들을 인스턴스 객체, 줄여서 인스턴스라고 부른다. 인스턴스를 만드는 방법은 new 키워드를 사용하여 만듭니다. 그리고 일반적인 다른 함수와 구분하기 위하여 보틍 대문자로 시작하며 일반명사로 만듭니다. ex) function Car(brand, name, color) { // 인스턴스가 만들어..

2023-05-10(수) Section 2 Unit1 - [JavaScript] 고차 함수 Chapter1. 고차 함수 개념학습: 기초 개념을 학습합니다. 퀴즈: 학습한 개념의 이해도를 확인합니다. 연습문제: 연습문제를 풀고 제출합니다. Chapter2. 내장 고차 함수 개념학습: 기초 개념을 학습합니다. 퀴즈: 학습한 개념의 이해도를 확인합니다. 연습문제: 연습문제를 풀고 제출합니다. Chapter3. 고차 함수의 중요성 개념학습: 기초 개념을 학습합니다. 퀴즈: 학습한 개념의 이해도를 확인합니다. 연습문제: 연습문제를 풀고 제출합니다. ---------------------------------------------------------------------------------------------..

Unit 5 [JavaScript] 기초 Number 타입 - JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입입니다. 정수(integer)와 실수(float)를 모두 표현할 수 있습니다. 100; // 정수를 표현할 수 있습니다. -100; // 음수를 표현할 수 있습니다. 100.123; // 실수를 표현할 수 있습니다. typeof 100; // 'number' typeof -100; // 'number' typeof 100.123; // 'number' Math 내장 객체 좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용합니다. Math 내장 객체의 대표적인 메서드에 대해서 알아보겠습니다. Math.f..