본문 바로가기

강의 실습/한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지63

콜백함수 콜백함수 : 함수의 매개변수로 함수를 넘겨준 것. // 기분에 따라서 다른 동작을 하는 함수 function checkMood(mood, goodCallback, badCallback) { // 함수표현식 개념 이용하여 cry 함수를 badCallback 매개변수에 담음 if (mood === 'good') { // 기분 좋을 때 하는 동작 goodCallback(); } else { // 기분 안 좋을 때 하는 동작 badCallback(); } } function cry() { console.log("ACTION :: CRY"); } function sing() { console.log("ACTION :: SING"); } function dance() { console.log("ACTION :: D.. 2023. 12. 5.
함수표현식 & 화살표 함수 함수 : 비원시형 자료형(값의 분류), 값이기 때문에 변수나 상수에 담을 수 있음. 1. 함수 표현식 // 함수 표현식 let hello = function () { // 함수를 값에 담을 때, 함수의 이름 지정하지 않아도 됨 return "안녕하세요 여러분"; } console.log(hello); // f hello() {} : 함수를 담고 있다. // : "Function" const helloTest = hello(); // 이렇게 함수 사용 가능 console.log(helloTest); // 안녕하세요 여러분 호이스팅 : 함수 선언식으로 선언된 함수는 프로그램 실행 전, 코드 최상단으로 끌어 올려진다. 함수 선언식은 호이스팅O, 함수 표현식은 호이스팅X. 함수 표현식은 함수가 선언되기 전엔 접.. 2023. 12. 4.
함수 함수 : 중복되는 동일한 동작을 하는 코드를 하나로 묶어서 사용. // 2개의 직사각형의 면적을 계산하고, 계산 결과를 콘솔에 출력하는 프로그램 let width1 = 10; let height1 = 20; let area1 = width1 * height1; console.log(area1); // 200 let width2 = 30; let height2 = 15; let area2 = width2 * height2; console.log(area2); // 450 위처럼 중복되는 코드들을 함수를 사용하면 효율적으로 줄일 수 있다. 1. 함수 선언과 호출 // 함수 선언식, 함수 선언 방식의 함수 생성 function getArea() { // 함수가 할 일 명시 let width = 10; let .. 2023. 12. 4.
조건문 조건문 : 어떤 연산 결과의 참, 거짓에 따라 각각 다른 명령을 실행하도록 해주는 문법. 1. if문 if 조건식이 일치하면 해당 명령 실행. else if 조건식은 if의 조건식이 거짓일 때 비교하여, 일치하면 해당 명령 실행. else는 위 조건이 다 거짓일 때 실행. let a = 3; if (a >= 7) { console.log("7 이상입니다."); } else if (a >= 5) { console.log("5 이상입니다."); } else if (a >= 4) { console.log("4 이상입니다."); } else { console.log("4 미만입니다."); } 2. switch문 보통 조건이 많을 때 사용한다. // 국가코드 2자를 입력받아 국가명 반환 // if문 예시 let .. 2023. 12. 3.
연산자 1. 대입연산자 변수에 값을 넣는 역할을 한다. let a = 1; 2. 산술연산자 사칙연산을 할 수 있도록 한다. let a = 1; let b = 2; console.log(a + b); // 3 console.log(a - b); // -1 console.log(a * b); // 2 console.log(a / b); // 0.5 console.log(a % b); // 1 3. 연결연산자 2개 이상의 문자열을 이어붙이는 연산. 문자형과 숫자형을 더하면 묵시적 형변환이 일어나, 숫자형이 문자형으로 변환된다. let a = "1"; let b = "2"; console.log(a + b); // 12 let a = "1"; let b = 2; console.log(a + b); // 12 4. 복합.. 2023. 12. 2.
자료형과 형 변환 1. 자료형 자료형 : 값을 성질에 따라 분류한 것. * Data Types → Primitive Data Type - Number, String, Boolean, Undefined, Null → Non-Primitive Data Type - Object, Array, Function 1) 자바스크립트의 자료형 Primitive Type(원시타입) : 한 번에 하나의 값만 가질 수 있음. 하나의 고정된 저장 공간 이용. ex) let number = 12; Non-Primitive Type(비원시 타입) : 한 번에 여러 개의 값을 가질 수 있음. 여러 개의 고정되지 않은 동적 공간 사용. ex) let array = [1, 2, 3, 4]; 원시타입 자료형을 살펴본다. #1 숫자형 let age = 2.. 2023. 11. 30.
변수와 상수 변하는 것 & 절대 변하지 않는 것 1. 변수 변수 : 프로그램이 실행되는 도중에 계속해서 바뀌는 값을 저장하기 위한 것. 값에 이름 붙여 부르고 싶을 때 사용. // let 키워드 let age = 25; // 변수 선언 console.log(age); // 25 출력 age = 30; // 값 바뀜 console.log(age); // 30 1) 변수 명명 규칙 - 기호를 사용할 수 없다. '_', '$'는 변수명에 사용 가능. let ^age = 25; // X - 변수명은 반드시 숫자가 아닌 문자로 시작해야 한다. let 6age = 25; // X - 예약어를 피하자. (if 등) let if = 25; // X 2) var 키워드 중복 선언이 가능하다. // var 키워드 var age = 2.. 2023. 11. 29.
Hello World 자바스크립트 안녕! 1. 자바스크립트 언어 소개 1) 자바스크립트는 무엇일까? 프로그래머들이 가장 많이 사용하는 언어 1위! 2021년도, 영어권 최대 프로그래밍 Q&A 사이트 Stackoverflow의 조사 결과 - 자바스크립트 64.96% 웹사이트는 HTML, CSS, Javascript 3가지 언어로 만들어짐 HTML5 : 요소들의 배치와 내용을 기술하는 언어, 색이나 크기 등의 디자인 수행X CSS : 색, 크기, 애니메이션 등을 정의하는 스타일링을 위한 언어 Javascript : 웹사이트의 활력을 부여하는 언어 (웹을 움직이는 근육) 2) 자바스크립트가 실행되는 곳 자바스크립트 엔진이 실행. 웹 브라우저에 포함되어 있음. (Safari - Apple, Firefox - Mozilla, Chro.. 2023. 11. 28.
React 소개 1. 도대체 React는 무엇일까 React는 자바스크립트의 UI 라이브러리 지금은 Meta가 된 Facebook이 개발한 오픈소스 2. React를 얼마나 많이 사용할까? 2020 JS FLAVOR 에 따르면, 2016 1위, 2017 1위, 2018 2위, 2019 1위, 2020 2위 사용 기업 : 인스타그램, 페이스북, 넷플릭스, 디스코드, 트위치, 트위터, 티스토리, 라프텔, 에어비앤비 등 3. React를 배우면 뭘 만들 수 있나? React의 파생 기술은 React Native를 이용하여 데스크탑, Android, IOS에서 동작하는 어플리케이션을 개발할 수 있음 4. React를 어떻게 배워야 하나? Javascript → Node.js(리액트 동작 환경) → React.js 참고강의 : .. 2023. 11. 27.

티스토리툴바