[React] 리액트 시작하기. node.js설치 및 웹팩으로 프로젝트 생성
※ 실행 환경 window 10, 에디터는 비쥬얼스튜디어코드vsCode입니다 - node.js 설치 - yarn 설치 - react 프로젝트 생성(웹팩설치) - 프로젝트 실행하기 node.js 설치 리액트를 사용하기 위해서는 먼저 node.js를 설치해줘야 한다. 아래 공식 사이트에서 받으면 된다. 구버전과 신버전 선택은 자유. 나는 최신 버전으로 설치했는데 아직 복잡한 프로젝트를 구성하지 않아서 그런지 버전으로 인한 에러는 없었다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org installing... 설치가 생각보다 오래 걸릴 수 있다. (기타..
Do it 자바스크립트 4-2. 배열 객체와 자주쓰는 메서드. 배열함수
배열객체 여러개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 됩니다. 배열(配列)은 '나눌 배'와 '열거할 열'을 사용해서 만든 글자로, 글자 뜻 그대로 하나의 저장소를 나눠서 데이터를 열거하라는 의미입니다. 기본형 let 참조변수 = [ 값1, 값2, 값3, 값4, ... 값n]; 참조변수[인덱스번호] = 값(n-1) 예를들면 let doctors = ["익준", "정원", "석현", "송화", "준완"]; 여기서 주의해야할 점은 배열의 순서라고 할 수 있는 인덱스 번호는 0부터 시작한다는 점이다. 따라서 doctors[0] 은 doctors배열의 첫번째 값을 의미하며 그 값은 "익준"이다. 요즘 뒤늦게 슬기로운 의사생활을 정주행중인데 너무 재미나다ㅋㅋㅋ 옴니버스..
Do it 자바스크립트 4-1. 객체. 자주쓰는 내장객체 Date(), Math()
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) 객체란? 자바스크립트는 객체(Object) 기반 언어입니다. 객체는 기능과 속성을 가지고 있습니다. 가령, TV에는 켜다, 끄다, 음소거하다, 볼륨을 높이다, 볼륨을 낮추다 등의 기능이 있습니다. 이렇듯 TV라는 객체에는 다양한 기능이 있습니다. 이러한 주변의 모든 사물들을 객체라고 합니다. 기본형 객체.메서드(); //객체의 메서드를 실행한다 객체.속성; // 객체의 속성값을 가져온다 객체.속성 = 값; //객체의 속성값을 바꾼다 ▶ 날짜 정보 객체 Date() let now = new Date(); let year = now.getFullYear(); //연도 let month = now.getMonth()+1; //달 let date..
Do it 자바스크립트 3. 제어문. 조건문if, 선택문switch-case, 반복문for, while. 백텍, 백틱`으로 출력하기
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 조건문(if, else if, else) 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 사용자가 입력한 숫자가 홀수인지 짝수인지 구분하기 let num = prompt("좋아하는 숫자를 입력해주세요"); //*prompt는 사용자에게 값을 입력받을 수 있는 자바스크립트 내장함수 if (num % 2 == 0) { alert("당신이 좋아하는 숫자는 짝수입니다"); //*alert는 사용자에게 간단한 메시지를 전달할 수 있는 자바스크립트 내장함수 } else { alert("당신이 좋아하는 숫자는 홀수입니다"); } ▶ 선택문(switch - case) 변수에 저장된 값과 switch문 ca..
Do it 자바스크립트 2-2. 연산자. 코딩테스트, 면접 단골 질문 tip
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) 자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다. ▶ 산술연산자 +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지) ▶ 비교연산자 >(크다), =(이상, 크거나 같다), , >=,
Do it 자바스크립트 2. 변수(var, let)와 상수(const). 호이스팅, 스코프scope by얄코
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 변수 vs 상수 변수는 언제든지 변할 수 있는 값, 상수는 고정값을 말한다. (쉽게 예를 들면 밥만 먹어도 들쭉날쭉하는 몸무게는 변수값, 절대 바뀔리 없는 내 주민등록번호는 상수값) 변수Variables는 변하는 데이터(값)을 저장할 수 있는 메모리 공간입니다. ▶변수 선언 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수 명 앞에 붙입니다. var 변수명; var 변수명 = 값; 자바스크립트 표준화버전 ES1(ECMA-262 1st deition)이 1997년 완성된 이래로 기능이 점차 추가되어 현재 ES6가 널리 사용되고 있는데 아직 ES5의 기능만 지원하는 브라우저도 일부 있다고 한다. 그런데 ES6부터는 변수를 좀 더..
Do it 자바스크립트 1. 프론트엔드 개발, 단어의 뜻과 사용 기초
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) HTML, CSS, 자바스크립트, 제이쿼리 등을 이용해 사용자(사이트 방문자)의 눈에 보이는 부분까지 개발하는 것을 프런트엔드 개발이라 부릅니다. ▶ API? Application Programming Interface의 약자로, HTML에서 제공하는 기능(함수)의 모임이라고 생각하면 됩니다. 이 API들은 자바스크립트 언어를 기반으로 제작되었으며, 이를 사용하기 위해서는 자바스크립트를 반드시 알아야 합니다. 최근에는 제이쿼리Jquery, 앵귤러(Angular)JS, 리액트(React)JS, 노드(Node)JS, 폰갭(PhoneGap) 등 자바스크립트로 제작된 다양한 라이브러리가 등장했습니다. *라이브러리는 자바스크립트 언어로 만든 프로그..