코딩공부

Template Strings let year = 1993; let month = 12; let day = 31; console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`); // +를 사용하지 않고 쓸 수 있음. 변수를 넣어줘도 되고, function의 리턴값을 바로 쓸 수도 있음. Null '값'이 없다. 라는 것을 의도적으로 표현할 때 씀. Undefined 값이 없다는 것을 확인하기 위해 씀. let codeit; console.log(codeit); // undefined codeit = null; console.log(codeit); // null => null이라는 값을 의도적으로 지정해줌 console.log(null == undefined); // tr..

String console.log(String(10) + String(5)); // 결과값: 105 Number console.log(Number('10') + Number('5')); //결과값: 15 * 숫자가 아닌 애들을 숫자로 형변환 할 때, NaN * Boolean을 숫자로 바꿀 때, true는 1로, false는 0으로 바뀜. Boolean '', 0, NaN -> false로 형변환 자동형변환 1. 산술연산자 console.log(4 + '2'); // + 연산자의 경우, 둘 중 어느 하나라도 문자열이면 다른 하나도 문자열로 인식 console.log(4 - true); // Boolean도 숫자로 자동 변환 console.log(4 / '2'); // 2가 Number로 자동 변환 2. 관..

숫자형 1. 덧셈 console.log(1+8); 2. 뺄셈 console.log(7-2); 3. 곱셈 console.log(2 * 9); 4. 나눗셈 console.log(6 / 2); 5. 나머지 console.log(7 % 3); 6. 거듭제곱 console.log(2 ** 3); - 괄호 안은 괄호부터 - *, / 연산기호부터 계산 (기본적인 사칙연산과 같음) 문자열 1. 따옴표로 둘러싸인 것은 모두 문자열. 반드시 같은 따옴표로 감싸줘야 함. 2. 역 슬래시 (\) 중복되는 따옴표 앞에 써주면, 문자열로 인식해줌. 3. console.log(`He said "I'm iron man"`) 백틱(``) 으로 감싸줘도 됨. 4. 문자열 연산에서 + 더하기 기호를 사용하면 문자열이 연결됨. 불린(Boo..

; [세미콜론, Semi-colon] 코드의 끝 부분이 마침표 역할. 자료형(Data type) 숫자(Number) 1. 정수(Integer) 2. 소수(Floating Point) 문자열(String) " " ' ' 따옴표 통일해줘야 함! 불린(Boolean) true false 어떤 조건에 의한 결과값으로 주로 사용됨. 추상화(Abstraction) : 복잡한 것들을 목적에 맞게 단순화하는 것! 추상: 여러가지 사물이나 개념에서 공통되는 특성이나 속성따위를 추출하는 과정. 추상화 -> 목적을 명확히, 불필요한 것들은 숨기기, 핵심만 드러내기 변수(Variable) 값을 담기 위해 이름이 붙은 상자라고 생각하면 됨. 변수선언: let 변수이름; let 변수이름 = 값; 등호(=)는 연산할당자라고 부름...

빌드하기 : Build 과정에는 transpiling 과 bundling 과정이 있음. npm run build -> 개발된 프로젝트 빌드하기 npx serve build -> 빌드한 것 로컬에서 실행하기 Babel이라는 사이트에서 순수 자바스크립트 언어로 바꿔줌. Transpiling 과정임. 번역된 코드는 번들링을 통해 웹 브라우저가 다운받기 좋은 형태인 묶인 형태로 나옴.

인라인(in-line) 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용. Property 이름은 CSS 속성 이름으로, property 값은 CSS 속성값으로 씀. 이 때, property name은 대시 기호 없이 카멜케이스로 써야 한다. import diceImg from './assets/dice.png'; const style = { borderRadius: '50%', width: '120px', height: '120px', }; function Dice() { return ; } export default App; 이미지불러오기 이미지는 import 구문을 통해서 불러오고 불러온 이미지 주소를 src 속성으로 사용. import diceImg from './assets/dice.pn..

State : 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 함. 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것. state 사용법 1. useState 함수 활용하기 import { userState } from 'react'; //... const [num, setNum] = useState(1); //... destructing 문법으로 작성. useState 함수가 초기값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴하기 때문. 첫 번째 요소(num)가 state고, 두 번째 요소(setNum)가 state를 바꾸는 setter함수. 보통 첫 번째 변수는 state의 이름을 지어주고, 두 번째 변수는 state이름 앞에 set을 붙인 다음..

Properties(속성) : JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에서도 속성을 지정할 수 있음. 리액트에서 컴포넌트에 지정한 속성을 props라고 함. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달됨. components에 가면 props에서 볼 수 있음 컴포넌트 함수는 파라미터로 props 객체를 받는다. 그래서 HandIcon 함수의 파라미터로 지금 value를 받고 있음. App.js 에서 value값으로 지정해주는 애들에 따라서 이미지가 바뀌게 됨. 결과: Children : JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 childr..

JSX 문법 자바스크립트와 html을 섞어쓸 수 있는 자바스크립트의 확장판. 자바스크립트에서 html을 편리하게 활용할 수 있는 문법. js의 확장문법이다 보니 주의할 점이 있음. 속성명을 모두 외울필요는 없음. i. HTML과 다른 속성명 1. 속성명은 카멜케이스로 작성 JSX 문법에서도 태그에 속성을 지정해줄 수 있다. 단 여러 단어가 조합된 몇몇 속성을 사용할 경우에는 카멜케이스(camel case)로 작성해야한다. ex) onClick, onBlur, onFocus, onMouseDown 단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜케이스가 아니라 기존의 HTML문법을 그대로 작성한다. 2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다. JSX문법도 ..

* node.js 설치가 먼저! 커맨드 요약 1. 프로젝트 생성 create-react-app npm init react -app or 폴더를 VSCode로 열고 터미널에서 npm init react-app . 2. 개발모드 실행 npm run start 3. 개발모드 종료 ctrl+C 리액트 개발자 도구 크롬 -> React Developer Tools 설치 -> inspect -> components