![]()
Contents JSX은 react를 사용해 개발할 때 거의 필수적으로 사용 JSX란? JS: JavaScript JSX : A syntax extension to JavaScript(자바스크립트의 확장 문법) JSX : JavaScript + XML/HTML JSX 코드 // 대입연산자 오른쪽에 html 코드가 나옴 // JavaScript코드와 HTML 코드가 결합된 JSX 코드 const element = Hello, world!; JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 JavaScript 코드로 변환하는 과정을 거침 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 됨 아래에서 JSX 코드를 JavaScript 코드로 변환하는 역..
![]()
Contents 앞에서는 기존에 있는 웹사이트에 react를 적용하는 방법에 대해 배워보았다 하지만 새로운 웹사이트를 만들 때에는 굳이 그렇게 할 필요가 없다 처음부터 react가 적용되어 있는 상태로 개발을 시작하면 되기 때문 그래서 react로 웹사이트를 개발할 때에는 주로 create-react-app을 사용 create-react-app : react로 웹애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태. 프로젝트를 생성해주는 도구 (실습) create-react-app 필요한 것 Node.js v14.0.0 이상 npm v6.14.0 이상 VS Code create-react-app은 npx 명령어를 이용하여 실행 npx : npm package를 설치한 이후에 곧바로 실행(exec..
![]()
Contents 1. (실습) HTML만으로 간단한 웹사이트 만들기 index.html 작성 소플의 블로그 소플의 블로그에 오신 여러분을 환영합니다! 2. (실습) CSS를 사용하여 웹사이트 스타일링하기 styles.css h1 { color:green; font-style: italic; } index.html에 styles.css 적용 브라우저로 열때는 다음과 같이 마우스 오른쪽 버튼 클릭 > Open with Live Server 3. (실습) 웹사이트에 React.js 추가하기 react와 react-dom ,react component 가져오기 react component 만들기 그냥 react component가 이렇게 생겼구나 하고 넘어가기 // 아주 간단한 react의 함수 컴포넌트 fun..
![]()
Contents Windows의 경우 Powershell이라는 프로그램 사용 1. Node.js와 npm 설치 Node.js(JavaScript runtime) : JavaScript로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) : nodejs를 위한 패키지 매니저 패키지 매니저가 하는 역할 : 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제를 할 수 있게 도움 * 참고로 npm은 node.js를 설치하면 자동으로 함께 설치됨 Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.o..
Contents 함수란 입력을 받아서 정해진 출력을 하는 것 입력 : 파라미터(parameters), 인자(arguments) 자바스크립트에서 함수를 정의하는 방법(두 가지) function statement 사용 // function statement를 사용 function sum(a,b) { return a + b; } console.log(sum(10, 20)); // 출력 결과 : 30 arrow function expression 사용 // arrow function expression을 사용 const multiply = (a, b) => { return a * b; } console.log(mutiply(10, 20)); // 출력 결과 : 200 react의 component 중에서 함수 ..
![]()
Contents 연산자(Operator) 대입 연산자(Assignment operator) 말 그대로 변수에 값을 대입하기 위해 사용하는 연산자 = 기호 사용 산술 연산자(Arithmetic operators) 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 나머지를 구하는 연산자(%) 지수 연산자(**) 산술 연산자와 대입 연산자 같이 사용 증감 연산자 증가 연산자(++) 감소 연산자(--) postfix 방식 (a++) 먼저 증감 전의 값을 반환하고 이후에 변수의 값이 증감 prefix 방식 (++a) 먼저 변수의 값을 증감시키고 이후에 증감된 변수의 값을 반환 관계 연산자 (Relational operators) = 비교 연산자(Comparion operators) 변수들 사이의 값 비교하기 위해..
