본문 바로가기

개발공부

 (105)
JSX의 장점 및 사용법 [처음 만난 리액트 #10] 3강. JSX [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트로 개발할 때 JSX를 사용하는 것은 필수는 아니지만, JSX를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장함 JSX의 장점 장점1. 코드의 간결성 JSX 사용함 Hello, {name} HTML의 div 태그를 사용해서 name이라는 변수가 들어간 인사말을 표현 = JSX 사용 안함 React.createElement('div', null, 'Hello, ${name}'); React의 createElement 함수를 사용하여 동일한 작업을 수행 (type, ..
JSX의 정의와 역할 [처음 만난 리액트 #9] 3강. JSX [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com JSX란? ● JavaScript를 줄여서 JS라고 많이 표기함 -> JSX는 JavaScript와 연관이 있음 ● A syntax extension to JavaScript 자바스크립트의 확장 문법 ● JavaScript + XML/HTML JSX 코드 const element = Hello, world!; ● 대입연산자 = : 오른쪽에 있는 값을 왼쪽의 변수에 대입하는 역할 ● = 왼쪽의 자료형 const와 변수명 element는 흔히 사용하는 JavaScript 문법 ● = 오른쪽에..
create-react-app 크리에이트 리액트 앱 [처음 만난 리액트 #8] 2강. 리액트 시작하기 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트 없이 html, css, JavaScript 만으로 웹사이트를 만들 수 있지만, 리액트를 적용했을 떄 다양한 장점이 있기 때문에 리액트를 사용하는 것! 1. 실습으로 html 만을 사용해서 간단한 웹사이트를 만들어보고, css를 사용해서 스타일을 입히기 2. 완성된 웹사이트에 리액트를 적용해보고, 리액트 앱을 생성해주는 크리에이트 리액트 앱에 대해 알아보기 create-react-app (CRA) 리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어있는 상태로 프..
직접 리액트 연동하기 [처음 만난 리액트 #7] 2강. 리액트 시작하기 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트 없이 html, css, JavaScript 만으로 웹사이트를 만들 수 있지만, 리액트를 적용했을 떄 다양한 장점이 있기 때문에 리액트를 사용하는 것! 1. 실습으로 html 만을 사용해서 간단한 웹사이트를 만들어보고, css를 사용해서 스타일을 입히기 2. 완성된 웹사이트에 리액트를 적용해보고, 리액트 앱을 생성해주는 크리에이트 리액트 앱에 대해 알아보기 HTML만으로 간단한 웹사이트 만들기 HTML은 웹사이트의 전체 뼈대를 구성 스타일 없이 뼈대만 있는 간단한 웹사이트..
리액트의 장점과 단점 [처음 만난 리액트 #6] 1강. 리액트 소개 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트의 장점 장점1. 빠른 업데이트 & 렌더링 속도 업데이트: 웹 사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것 메뉴를 누르고 새로운 내용이 뜨기까지 시간이 오래걸리면, 사용자가 기다리지 못하고 나가버릴 수도 있기 때문에 빠른 업데이트는 웹사이트에서 중요 Virtual DOM React는 빠른 업데이트를 위해 내부적으로 Virtual DOM을 사용 DOM이란? Document Object Model 웹페이지를 정의하는 하나의 객체 하나의 웹사이트에 대한 정보를 모두 담고 있..
리액트는 무엇인가? [처음 만난 리액트 #5] 1강. 리액트 소개 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 리액트는 무엇인가? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리란? 프로그래밍 언어에서의 라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것 사용자 인터페이스(User Interface, UI)란? 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해 주는 것 ex) 웹사이트에서의 버튼, 텍스트 입력창 등 버튼을 누름으로써 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여줌으로써 사용자들이 반응하는 것 UI..
개발환경 설정하기 - Node.js와 npm / VS Code 설치 [처음 만난 리액트 #4] 리액트를 배우기 위해 필요한 기초 지식 정리 📄 & 실습 환경 구축 💻 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com ● macOS에서는 Terminal이라고 하는 명령줄 기반 인터페이스 사용 ● Windows에서는 PowerShell이라는 프로그래밍 사용 후에 설치할 VS code에서는 터미널이 내장되어있기 때문에 별도로 외부의 Terminal이나 PowerShell을 사용할 필요가 없음 Node.js와 npm 설치하기 Node.js (JavaScript runtime) JavaScript로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 n..
JavaScript의 연산자/함수 [처음 만난 리액트 #3] 리액트를 배우기 위해 필요한 기초 지식 정리 📄 & 실습 환경 구축 💻 [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com JavaScript의 연산자 (Operator) 대입 연산자 (Assignment operator) 변수의 값을 대입하기 위해 사용하는 연산자 (=) 대입연산자는 항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러감! let a = 10; let b = 20; consol.log(a); //출력 결과: 10 consol.log(b); //출력 결과: 20 사칙 연산자 산술 연산자 ● 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) ● 나머..

티스토리툴바