코딩하는라민

[React] JSX 이해하기 📌 사용자 정의 컴포넌트 ✅ Import 상단에 다른 곳에 정의된 코드를 불러와 현재 문서에서도 사용할 수 있게 해준다. 리액트 라이브러리 불러오기 import React from 'react'; JSX 를 사용하기 위해서는 React 라이브러리를 파일로 불러와야한다. 단, cdn 으로 스크립트 태그를 넣었다면 React 는 전역변수이기 때문에 별도로 불러올 필요가 없다. CSS 파일 불러오기 import './style.css'; 이미지 불러오기 import logo from './logo.svg'; ✅ 렌더링 // HTML 파일 이 안에 들어가는 모든 요소를 ReactDOM에서 관리한다. React 에서는 일반적으로 하나의 루트 DOM 노드가 있다. 렌더링하기 위해서는 ..

[React] 리액트(React) 시작하기 / JSX와 create-react-app 📌 리액트란? 사용자 인터페이스를 만들기 위한 라이브러리이다. 다른 라이브러리들과 함께 특정 환경을 렌더링하는데 사용한다. → 프레임워크 ❌ 라이브러리 ⭕ 📌 자바스크립트와 다른점 리액트는 JSX 구문을 사용한다. JSX 구문은 자바스크립트의 구문을 확장한 HTML과 유사한 코드이다. 📌 리액트 사용하기 리액트를 브라우저 환경에서 사용하기 위해서는 html 파일에 react 와 react-dom 스크립트를 넣어줘야한다. 📌 JSX JSX 는 리액트와 함께 사용한다. 리액트에서 반드시 필요한 것은 아니다. 다만, JSX 를 사용하면 보다 코드가 더 간단해진다. JSX 는 DOM 요소를 추상화한 자바스크립트 객체인 Reac..

[JavaScript] 클래스와 접근자 프로퍼티(getter함수, setter함수) 📌 접근자 프로퍼티란? 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티이다. 접근자 함수에는 getter 함수와 setter 함수가 있다. 📌 getter 함수 getter 함수는 프로퍼티를 읽으려고 할 때 실행된다. 예를 들어서 콘솔창에 값을 출력해본다거나, 참조할 때 사용한다. class Cafe { constructor(menu){ this.menu = menu } get menu(){ return `${this._menu}를 주문하시겠습니까?`; } set menu(value){ this._menu = value; } } const cafe = new Cafe('milk'); con..

[JavaScript] 클래스 📌 클래스란? 클래스는 객체를 생성하는 일을 한다. 그냥 객체를 생성하는 것이 아닌 `재사용 가능한 객체`를 생성한다. 즉, 클래스는 마치 붕어빵틀과 같은 역할을 하는 것! MDN 에서는 클래스를 객체를 생성하기 위한 템플릿이라고 정의하고 있다. 📌 클래스는 언제 등장했나? ES6 이후 등장 ES5 의 클래스 의미와는 다른 문법과 의미를 가진다. 📌 클래스 정의 클래스를 정의할 때는 `파스칼 케이스`를 사용해야 한다. 즉, 클래스명은 대문자로 시작해야 한다. class City { ... } 📌 클래스를 정의하는 방식 클래스를 정의하는 방식에는 `class 선언 방식`과 `class 표현식 방식` 두 가지 방법이 있다. // 선언 방식 class City { } // 표현식..

[Javascript] 참조 범위를 결정짓는 스코프(scope) - 1 [ 모던 자바스크립트 딥다이브 책 혼자 스터디하기♩ ] 이번에는 let's get IT 자바스크립트 책 공부하면서 궁금했던스코프와 클로저 개념을 딥다이브 책을 통해 차근차근 공부하고자 한다.코드의 순서에 따라 실행되기도 하고, 실행되지 않기도 하는 것이 너무 궁금했다..책을 본다고 완전히 이해될지 모르겠다. 아무튼 공부해보자. 1. 스코프 스코프는 변수를 검색할 때 사용하는 규칙. 즉, 식별자를 검색하는 규칙이다. 스코프는 전역 스코프와 지역 스코프로 나뉜다. ① 매개변수 함수 안에서 선언된 매개변수는 함수 안에서만 참조 가능하다. 함수의 바깥에서 매개변수에 접근한다면 정의되지 않는다고 뜰 것. function R(x, y){ ret..

렛츠기릿 자바스크립트 #6 계산기 만들기 - 함수 사용하기 책 + 저자 유튜브 강의(인프런) + 추가로 모르는 내용들 필기 추가하면서 공부 1. 순서도 그리기 ① 숫자1, 2 / 연산자 를 저장할 변수를 각각 생성 ② 숫자를 누르면 연산자가 입력된 유무에 따라서 숫자1에 저장할지, 숫자2에 저장할지 결정하고 변수에 숫자 저장 ③ 연산자 버튼을 누르면 숫자1의 유무에 따라 연산자를 저장하거나 경고창을 띄운다 ④ = 버튼을 누르면 숫자2의 유무에 따라 연산자를 결과에 출력하거나 경고창을 띄운다 기본원리 - 숫자1이 존재해야 연산자가 존재 가능하고, 연산자가 존재해야 숫자2가 존재 가능하다. 2. 변수 생성하고 버튼에 이벤트리스너 달기 ① 변수 생성 let numOne=''; let numTwo=''; let..

렛츠기릿 자바스크립트 #5 끝말잇기 게임 만들기 책 + 저자 강의 + 추가로 모르는 내용들 필기 추가하면서 공부 책 저자 강의(제로초) 1. 순서도 그리기 §. 순서도 그리기가 왜 중요할까? - 프로그래머는 코딩을 하는 것도 중요하지만 절차를 세우고 오류를 수정하는 것. - 순서도를 통해 코드를 수정하고, 코드를 토대로 순서도를 보완해가자. §. 프로그램의 절차를 만들 때의 원칙 ① 절차의 개수는 고정 ② 절차는 항상 같은 내용 → 구체적인 내용보다는 포괄적인 내용 ex) 4명, A, B,...(x) → 다음 사람(o) ③ (최대한) 모든 가능성 고려 ④ 예시는 절차를 검증하는 데 사용 → 구체적인 예시 - 분기점 : 판단을 요구하는 절차에서 Yes/No로 화살표 순서도가 갈라지는 부분 - 거슬러 올라간..

렛츠기릿 자바스크립트 책 #4 함수, 객체 §. 함수 1. 함수 - 함수 : 특정한 작업을 수행하는 코드 - 선언한다 : 함수를 만드는 행위 [ 함수를 만드는 세 가지 방법 ] ① 함수 선언문 : function 키워드 뒤에 함수 이름을 넣는 방식 function a() { } ② 함수 표현식 : 상수나 변수에 대입하는 방식 const b = function() { } ; ③ 화살표 함수 : 화살표 기호를 사용해 함수를 만들 수도 있다. const c = ( ) = > { } ; - 호출한다 : 함수를 사용하는 행위. - 선언한 함수 이름 뒤에 () 를 붙이면 함수가 실행됨. > function a( ) { } → 함수 a 선언 a() ; → 함수 호출 : a 뒤에 () 를 붙임 (없음) → 함수가 정의..

렛츠기릿 자바스크립트 책 #3 객체, 배열 객체 - 자료형의 일종. 다양한 값들을 모아놓은 또다른 값. - 배열, 함수, 배열이나 함수가 아닌 객체로 구성. 배열 - 대괄호로 값들을 감싼 것. - 요소 : 배열 안의 값들. - 인덱스 : 0부터 시작하는 자릿수 - 값들의 자료형은 모두 같지 않아도 됨 - 배열 안에 다른 배열을 넣을 수 있음(이차원 배열) - 배열 안에 다른 변수를 넣을 수 있음 - 배열 내부의 값은 중복 가능하며, 빈 값도 가능. - 배열의 개수 : .length - 빈 값도 있는 개수로 친다. - 마지막 요소의 값 찾기 * 인덱스는 0부터 시작이므로 길이에서 1을 빼면 인덱스 크기가 된다. 배열에 요소 추가하기 → 대입 - 배열 앞의 괄호 숫자는 배열의 개수 - 배열의 마지막 요소 다..

렛츠기릿 자바스크립트 책 #2 변수, 조건문, 반복 변수 - 변수 : 값을 저장하고 저장한 값을 불러올 수 있음. - 선언 : 변수를 만드는 행위. - 선언문 let / const / var - 초기화 : 변수를 선언함과 동시에 값을 대입하는 행위, 결괏값은 항상 undefined로 출력 - empty : 변수 선언 시 값을 대입하지 않을 수도 있음 > let ramin < undefined - 변수명 🔵 : 한글, 한자, 유니코드, $, _ ❌ : 숫자로 시작, 예약어 - 웹 브라우저를 새로고침하면 선언한 변수가 초기화되는데, 다시 변수를 콘솔에 입력하면 정의되지 않았다고 에러 뜸 - 선언한 변수를 다시 선언하면 에러 뜸 - 선언문과 코드 식의 차이 let 으로 변수 선언 하면 결괏값이 없어 undef..