react
-
Language Type(=Data Type) - 8가지 specification Type - 스펙에서 사용하는 내부 타입 Language Type(Data Type) - 자바스크립트로 개발자가 직접 작성하는 값에 해당하는 타입 - Undefined - Null - Boolean(true/false) - String(문자열) - Number(숫자) - BigInt(Number로 표현할 수 없는 큰 숫자 - Symbol(값이 외부로 표현되지 않음) - Object(위와 다르게 값이 없지만 데이터타입) ** Object 타입을 제외한 다른 데이터 타입은 primitive value라는 빌트인 타입의 값을 제공 ** primitive value란 [true/false, 123, "ABC" 형태] typeof..
react) 자바스크립트 개념 - 데이터 타입Language Type(=Data Type) - 8가지 specification Type - 스펙에서 사용하는 내부 타입 Language Type(Data Type) - 자바스크립트로 개발자가 직접 작성하는 값에 해당하는 타입 - Undefined - Null - Boolean(true/false) - String(문자열) - Number(숫자) - BigInt(Number로 표현할 수 없는 큰 숫자 - Symbol(값이 외부로 표현되지 않음) - Object(위와 다르게 값이 없지만 데이터타입) ** Object 타입을 제외한 다른 데이터 타입은 primitive value라는 빌트인 타입의 값을 제공 ** primitive value란 [true/false, 123, "ABC" 형태] typeof..
2023.10.12 -
문장[statement] - 자바스크립트 코드의 실행 단위 - 세미콜론(;)까지가 하나의 문장 return문을 사용할 때 라인을 분리하여 코드를 작성하면 라인 끝에 세미콜론이 자동으로 삽입되어 다른 결과가 나올 수 있음 (문장 분리 잘해야함) Ex) 아래와 같이 소괄호 안에 작성해서 모두 반환되게 작성해야 함. **console.log()는 자바스크립트가 아니며 브라우저 개발자 도구의 Console 창에 출력 const 변수 - const 변수에 할당한 값은 바꿀 수 없음 - list = ["영화"] 처럼 list를 재할당하여 값을 바꿀수는 없지만 [인덱스 번째]의 엘리먼트 값을 바꾸는 건 가능 ** 자바스크립트에서 상수는 전통적으로 변수 이름 전체를 대문자로 작성하는데 const 변수는 변수에 값을 재..
react) 자바스크립트 개념 - 문장, 변수문장[statement] - 자바스크립트 코드의 실행 단위 - 세미콜론(;)까지가 하나의 문장 return문을 사용할 때 라인을 분리하여 코드를 작성하면 라인 끝에 세미콜론이 자동으로 삽입되어 다른 결과가 나올 수 있음 (문장 분리 잘해야함) Ex) 아래와 같이 소괄호 안에 작성해서 모두 반환되게 작성해야 함. **console.log()는 자바스크립트가 아니며 브라우저 개발자 도구의 Console 창에 출력 const 변수 - const 변수에 할당한 값은 바꿀 수 없음 - list = ["영화"] 처럼 list를 재할당하여 값을 바꿀수는 없지만 [인덱스 번째]의 엘리먼트 값을 바꾸는 건 가능 ** 자바스크립트에서 상수는 전통적으로 변수 이름 전체를 대문자로 작성하는데 const 변수는 변수에 값을 재..
2023.10.11 -
개발자가 할 것 콘텐츠를 표현하는 html 마크업과 css 작성 import 문과 export 문 작성 function App(){...}과 return 문을 작성하는 것 App.js 파일에 코드를 작성한 후 npm start를 실행하면 react가 html 마크업과 css로 콘텐츠를 표현한다. 아래는 App.js의 기본 화면(기본 틀) import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 이렇게 브라우저에 출력
react 알아보기 (4) - react에서 개발자가 할 것개발자가 할 것 콘텐츠를 표현하는 html 마크업과 css 작성 import 문과 export 문 작성 function App(){...}과 return 문을 작성하는 것 App.js 파일에 코드를 작성한 후 npm start를 실행하면 react가 html 마크업과 css로 콘텐츠를 표현한다. 아래는 App.js의 기본 화면(기본 틀) import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 이렇게 브라우저에 출력
2023.10.11 -
react 앱 생성, 실행, 종료 Create React App(CRA) - react 앱을 생성하고 실행하는 환경을 설정해준다 - set up a modern web app by running one command >> 명령(command)을 실행하여 모던 웹앱의 실행 환경을 셋업(build)한다 - 명령이란 터미널에 아래처럼 입력해 실행하는 것을 뜻함 npx create-react-app(정해져있음) project-name(개발자가 지정) [Enter] - project-name 부분에 . 을 입력하면 폴더를 생성하지 않고 현재 폴더에 react 앱 환경 셋업 - npx 는 npm package unner (node.js를 설치할 때 같이 설치됨) react 앱 실행 환경을 셋업하고 npm start..
react 알아보기(3) - 개발환경 셋업, react 앱 실행/종료react 앱 생성, 실행, 종료 Create React App(CRA) - react 앱을 생성하고 실행하는 환경을 설정해준다 - set up a modern web app by running one command >> 명령(command)을 실행하여 모던 웹앱의 실행 환경을 셋업(build)한다 - 명령이란 터미널에 아래처럼 입력해 실행하는 것을 뜻함 npx create-react-app(정해져있음) project-name(개발자가 지정) [Enter] - project-name 부분에 . 을 입력하면 폴더를 생성하지 않고 현재 폴더에 react 앱 환경 셋업 - npx 는 npm package unner (node.js를 설치할 때 같이 설치됨) react 앱 실행 환경을 셋업하고 npm start..
2023.10.11 -
React 웹, 모바일 유저 인터페이스를 위한 라이브러리 라이브러리/프레임워크 - 애플리케이션 개발을 쉽게 하기 위한 것 - 개발의 효율성 향상 - 리액트에 다른 라이브러리(프레임워크)를 리액트에 포함시킬 수 있음 html + css + DOM + event + js 엘리먼트와 오브젝트는 다름(엘리먼트 오브젝트로 접근해야함/오브젝트 안에 엘리먼트가 있는 것) HTML5의 핵심은 마크업 중심에서 애플리케이션 중심으로 전환 음악 id : 속성 이름 music : 속성 값 음악 : 엘리먼트의 콘텐츠 node.js - javascript runtime environment npm(node package manager) - node.js 환경의 패키지 매니저 - npm 명령어를 사용하여 node.js 패키지를 설..
react 알아보기(2) - react? node.js? packge.json?React 웹, 모바일 유저 인터페이스를 위한 라이브러리 라이브러리/프레임워크 - 애플리케이션 개발을 쉽게 하기 위한 것 - 개발의 효율성 향상 - 리액트에 다른 라이브러리(프레임워크)를 리액트에 포함시킬 수 있음 html + css + DOM + event + js 엘리먼트와 오브젝트는 다름(엘리먼트 오브젝트로 접근해야함/오브젝트 안에 엘리먼트가 있는 것) HTML5의 핵심은 마크업 중심에서 애플리케이션 중심으로 전환 음악 id : 속성 이름 music : 속성 값 음악 : 엘리먼트의 콘텐츠 node.js - javascript runtime environment npm(node package manager) - node.js 환경의 패키지 매니저 - npm 명령어를 사용하여 node.js 패키지를 설..
2023.10.09 -
React? : 복잡한 코드는 숨기고 "사용자 정의 태그" 만들기 >> "부품화" class 방식 vs function(함수) 방식 온라인 플레이그라운드 : 개발환경을 세팅할 필요 없이 온라인에서 개발 ex) stackblitz 로컬에 개발환경 세팅해보자! 1. react 홈페이지 접속 https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 2. create react app https://create-react-app.dev/ Create Reac..
react 알아보기(1) - 설치React? : 복잡한 코드는 숨기고 "사용자 정의 태그" 만들기 >> "부품화" class 방식 vs function(함수) 방식 온라인 플레이그라운드 : 개발환경을 세팅할 필요 없이 온라인에서 개발 ex) stackblitz 로컬에 개발환경 세팅해보자! 1. react 홈페이지 접속 https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 2. create react app https://create-react-app.dev/ Create Reac..
2023.09.11