공부하는 블로그 ✍️

벨로퍼트와 함께하는 모던 리액트 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/ 진도 - 1.5. props 를 통해 컴포넌트에게 값 전달하기 💬 props 를 통해 컴포넌트에게 값 전달하기 props 의 기본 사용법 // Hello.js import React from 'react'; function Hello(props){ return 안녕하세요 {props.name} } export default Hello; // App.js import React from 'react'; import Hello from './Hello'; function App(){ return ( ) } props는 properties의 줄임말로, 어떠한 값을 컴포넌트에 전달해야 할 때 props를 ..

벨로퍼트와 함께하는 모던 리액트 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/ 진도 - 1.4. JSX 💬 JSX JSX는 HTML과 비슷한 형태를 가졌지만 실제로는 JavaScript이다 리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 Babel이 JSX를 JavaScript로 변환한다 Babel: 자바스크립트의 문법을 확장해주는 도구 - 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해준 - Bable을 통해 구형 브라우저 같은 환경에서도 자바스크립트가 제대로 실행할 수 있게 해 준다 ✔️ JSX 기본 규칙 import React from 'react'; import Hello from './Hello..

벨로퍼트와 함께하는 모던 리액트 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/ 진도 - 1.1. 리액트는 어쩌다가 만들어졌을까? - 1.2. 작업환경 준비 - 1.3. 나의 첫 번째 리액트 컴포넌트 - 1.4. JSX 💬 리액트는 어쩌다가 만들어졌을까? 프로젝트의 규모가 커질수록 DOM을 직접 건드리면서 작업을 진행하기 어려움이 있다 - 코드가 난잡해지고, 이로 인해 유지보수가 어려워진다 위와 같은 이유로 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다 이러한 프레임워크는 특정 값이 변경될 때, 특정 DOM의 속성이 바뀌도록 연결을 해주어서 업데이트 과정을 간소화한다 반면 리액트는 상태에 따른 업데이트가 아니라 처음부터 모든 걸 새로 만들어 준다는..

📌 Date - 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체 - Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수값으로 표현한다 💛 new Date( ) // default let date_now = new Date(); let date_now_str = Date(); console.log(date_now); // 2021-09-29T15:24:41.387Z console.log(date_now_str); // Thu Sep 30 2021 00:24:41 GMT+0900 (Korean Standard Time) console.log(typeof date_now); // object console.log(typeof date_now_str); /..

📌 Math - 수학적인 연산을 위한 속성과 메서드를 제공하는 객체 - Math는 생성자 함수가 아니고 모든 속성과 메서드는 정적이기 때문에, 언제든지 호출할 수 있다 💛 절대값 / 최대값 / 최소값 console.log(Math.abs(-2));// 2 console.log(Math.max(1, -2));// 1 console.log(Math.min(1, -2));// -2 let nums = [1, 2, 3, 4, 5]; console.log(Math.max(nums));// NaN console.log(Math.min(nums));// NaN // apply() console.log(Math.max.apply(null, nums));// 5 console.log(Math.min.apply(null,..

📌 Collection - Collection : 구조 또는 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간을 의미한다 - Collection은 내부적으로 Iterator를 가지고 있다 - 자바 스크립트에서 제공하는 Collection의 종류에는 Indexed Collection와 keyed Collection이 있다 1. Indexed Collection : index를 통해 가 element에 접근할 수 있다 (예) Array, Typed Array 2. keyed Collection : 특정 문자열, 자료형을 통해 접근할 수 있다 (예) Object, Map, Weak Map, Set, Weak Set * Iterator : 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 ..

📌 Collection - Collection : 구조 또는 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간을 의미한다 - Collection은 내부적으로 Iterator를 가지고 있다 - 자바 스크립트에서 제공하는 Collection의 종류에는 Indexed Collection와 keyed Collection이 있다 1. Indexed Collection : index를 통해 가 element에 접근할 수 있다 (예) Array, Typed Array 2. keyed Collection : 특정 문자열, 자료형을 통해 접근할 수 있다 (예) Object, Map, Weak Map, Set, Weak Set * Iterator : 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 ..

📌 생성자 - 생성자 함수 : 유사한 객체를 다중으로 만들 때 사용되는 함수를 말한다 - 일반적으로 생성자 함수의 이름 첫 글자는 대문자로 시작한다 - 생성자 함수로 객체를 생성할 때에는 new 연산자를 사용한다 - 생성자는 붕어빵 틀이고, 유사한 객체는 앙금이나 가격이 다른 붕어빵이라고 생각하자 - 생성자 내부에서 사용하게 되는 메서드를 정의할 때에는 prototype을 사용한다 (예) 생성자함수명.prototype.메서드명 = function(){ 실행문 }; 💛 생성자 function FishBread(flavor, price){ this.flavor = flavor; this.price = price; this.base = "flour"; } let test = FishBread("test", 1..

📌 배열 (Array) - 여러 개체값을 순차적으로 나열한 선형 자료 구조를 말한다 - 배열은 가장 간단한 자료 구조 중 하나로, 동일한 이름 아래 같은 속성의 값을 저장해 관리를 편리하게 하기 위해 사용한다 💛 배열 선언 및 접근 // 배열 선언 let arr_1 = [ 1, 2, 3, 4, 5 ]; let arr_2 = new Array(3); // 배열 접근 console.log(arr_1);// [ 1, 2, 3, 4, 5 ] console.log(arr_2);// [ ] console.log(arr_1[0]);// 1 console.log(arr_1[1]);// 2 console.log(arr_1[2]);// 3 arr_1[2] = 999; console.log(arr_1[2]);// 999 💛..

✅ 21. 레이블 제공 - 사용자 입력에는 이와 대응하는 레이블을 제공해야 한다 - 레이블은 모든 사용자의 입력 용도 또는 역할에 대한 설명을 위해 사용한다 (1) 레이블이 시각적으로 노출되어 있는 경우 - 청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린 리더가 “편집창” 이라고만 읽어준다 - 입력창의 용도가 달라도 “편집창”이라고만 읽어주기 때문에 무엇을 입력해야 하는지 알 수 없다 - 따라서 이에 대한 설명을 제공해야 한다 아이디 비밀번호 - 레이블과 입력 서식이 1:1 매칭인 경우 레이블을 제공하고 태그의 for값과 의 id값을 동일하게 제공한다 - 이렇게 제공하면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게 된다 성별 성별 남자 여자..