[React] 리액트 새 프로젝트 생성 방법 및 빌드
·
FrontEnd/React
1. Node.js 및 npm 라이브러리 설치하기 https://nodejs.org/ko/download/ Node.js — Node.js® 다운로드Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  해당 사이트에서 본인 환경에 맞게 설치를 합니다. 2. React 컴파일 환경 만들기 $npm install -g create-react-app 명령 프롬포트(cmd)를 관리자 권한으로 실행하여 create-react-app 을 설치합니다. 3. create-react-app으로 프로젝트 생성하기 $npx create-react-app  필자는 프로젝트명이 fe_bis이기 때문에 npx create-react-..
[JavaScript] 함수
·
FrontEnd/JavaScript & jQuery
함수 함수는 function이라는 키워드를 사용하여 선언하며 function에 저장한 코드를 호출한다. function 함수명(){ 자바스크립트 코드; } 참조 변수명 = function() { 자바스크립트 코드; } 함수명(); 또는 참조 변수명(); 함수 정의 실습 예제 (1) 함수 정의문과 함수 변수를 선언하고 호출하는 실습 예제입니다. 함수 정의 실습 예제 (1-2) 함수 정의 실습 예제 (3) 함수정의(선언) 함수 정의 실습 예제(4) 함수정의(선언) 함수 정의 실습 예제 (5) 함수정의(선언) 함수 정의 실습 예제 (4) 함수선언(정의) 함수 활용 실습 예제 (1) 함수를 사용하여 값을 받아서 해당 값까지의 누적된 합을 구하는 예제를 실습해봅시다. 누적된 합을 구하는 예제 함수 활용 실습 예제..
[JavaScript] 객체(Object)
·
FrontEnd/JavaScript & jQuery
객체란? 자바스크립트는 객체 기반 언어이며 객체는 기능과 속성을 가지고 있다. 스피커로 예시로 들자면 기능은 스피커를 키거나 끄고, 소리를 음소거하거나 높낮이를 조절하는 기능이 있습니다. 이렇게 기능은 동작하는 것을 말하며 메서드라고도 합니다. 속성으로는 스피커의 너비나 높이, 색상, 무게 등을 속성에 포함됩니다. 객체.메서드(); 객체.속성; 또는 객체.속성 = 값; 객체.메서드 : 객체의 메서드를 실행한다. 객체.속성 : 객체의 속성값을 가져온다. 객체.속성 = 값 : 객체 속성의 값을 바꾼다. 자바스크립트로 속성과 메서드를 적용한 예시 Speaker.width; (Speaker의 너비) 또는 Speaker.color; (Speaker의 색상) // Speaker의 속성값을 가져옵니다. Speaker..
[JavaScript] 제어문 (3) - 반복문 while문, do while문, for문, 중첩 for문, break문, continue문
·
FrontEnd/JavaScript & jQuery
반복문 말 그대로 코드를 반복하기 위해 사용하는 문법들을 말합니다. 예시로 "안녕하세요"라는 문구를 출력하는 것을 100번 작성한다고 생각해봅시다. 한줄씩 "안녕하세요"를 출력문을 계속 100번 쓰는 것은 비효율적입니다. 코드만 길어지고 더러워지기 때문에 이러한 경우에 반복문을 사용하여 코드를 간결하게 할 수 있습니다. 반복문의 종류로는 while문, do~while문, for문이 있습니다. while 문 while문은 조건식을 만족할 때까지 코드를 여러번 반복하여 실행할 수 있습니다. var 변수 = 초기값; while(조건식){ 자바스크립트 코드; 증감식; } while문의 기본 형태 예시이며, while문의 실행순서를 예시를 들어보겠습니다. while문 괄호 안의 조건식을 판별하고, 조건이 맞다면 ..
[JavaScript] 제어문 (2) - 선택문 switch문
·
FrontEnd/JavaScript & jQuery
switch 문 여러 케이스들 중에서 해당값이 일치하는 경우에 해당하는 코드문을 실행합니다. 만약, switch 변수의 값이 값1과 동일하다면 코드 1이 코드문이 실행됩니다. 값1이 아닌 swtich 변수의 값이 값2와 동일하면 코드2가 실행됩니다. 마찬가지로 값3과 동일하면 코드3, 값4와 동일하면 코드4가 실행되며, 그 외의 값일 경우 default로 처리되어 코드 5가 실행됩니다. var 변수 = 초기값; switch(변수){ case 값1 : 코드1; break; case 값2 : 코드2; break; case 값3 : 코드3; break; case 값4 : 코드4; break; default : 코드5; } switch문 실습 예제 prompt를 사용하여 포털사이트 이름을 입력값을 받아서 swi..