본문 바로가기

전체 글

(33)
JavaScript - 7. 함수 ✔ 자바스크립트의 함수에 대해 정리합니다. 함수에 대해서 :) 함수는 특정 작업을 수행하는 데 필요한 기능들을 그룹핑화하기 위해 설계된 독립적인 블록이다. 함수도 일반 객체처럼 값으로 사용할 수 있어서 변수에 할당이 가능하다. (이러한 특징은 자바스크립트의 함수가 일급 함수이기 때문이다. ) 1. 함수 생성하기(= 함수 정의, 선언) : 함수를 사용하기 위해서 우선 함수를 정의(= 선언)해야 한다. 함수를 선언하는 방법은 두 가지가 있다. (생성자 함수로 선언하는 방법도 있지만, 여기서는 생략) 1) 함수 선언식(= 이름이 있는 함수, 유명함수) : 함수 선언식은 아래와 같이 함수명(myFunc)이 들어간다. function myFunc(num1, num2) { return num1 + num2 } 2)..
JavaScript - 6. 배열 ✔ 자바스크립트의 배열에 대해 정리합니다. 배열에 대해서 :) 배열은 순서대로 나열된 데이터의 집합이다. 이 배열 안에 담긴 데이터들을 요소 (또는 값)라고 하며 그 요소의 위치를 인덱스라고 한다. 1. 배열 생성하기 [배열 생성하는 방법] 1. new 연산자로 Array 객체를 생성하는 방법 2. 배열 리터럴을 이용하는 방법 const arr1 = new Array(); //new 연산자로 Array 객체 생성하는 방법 const arr2 = []; //배열 리터럴을 사용하는 방법 배열은 위와 같은 방법으로 생성한다. 위 두 가지 중에서 2번의 배열 리터럴을 이용하는 방법을 주로 사용한다. 여기서는 배열 리터럴을 이용해서 배열을 사용하는 방법을 살펴본다. 배열 리터럴은 대괄호 ([])안에 요소를 쉼표로..
JavaScript - 5. 반복문 ✔ 자바스크립트의 반복문에 대해 정리합니다. 반복문에 대해서 :) 반복문은 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 하는 실행문이다. → 조건식을 통해 반복 횟수를 설정할 수 있다. 1. while 문 : 조건이 참인 동안 계속 반복 실행되고 조건이 거짓이 되는 순간 반복문을 빠져나온다. [형태] let i = 0 //변수 초기화 while(조건식) { "실행할 코드" i++ //변수 i를 1만큼 증가 } ◎ 조건식에 반복 횟수를 정해주고 그 조건식이 참인 동안 반복 실행되고 조건식이 거짓이 되는 순간에 반복문을 빠져나온다. ◎ 조건식을 항상 참으로 설정하게 되면 무한 루프에 빠지므로 주의하며 사용 → 무한 루프는 반복 횟수를 알 수 없을 때 어떤 조건이 만족하는 동안 계속 반복을..
JavaScript - 4. 조건문 ✔ 자바스크립트의 조건문에 대해 정리합니다. 조건문에 대해서 :) 조건문을 정리하기 앞서 제어문에 대해서 살펴보자! 제어문 1. 제어문 : 주어진 조건에 따라 해당 실행문(= 조건문)을 실행하거나 반복 실행(= 반복문)을 할 때 사용한다. 일반적으로 소스 코드는 위에서 아래로 순서대로 실행된다. 하지만 제어문은 실행 순서를 주어진 조건에 따라 제어가 가능하다. 조건문 2. 조건문 1) if 문 : 조건식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행되지 않는다. [ 형태 ] if (조건식) { 조건식이 참이면 실행할 문장 } ◎ 블록 내의 문이 한 줄이면 중괄호({})를 생략할 수 있음 ◎ 반대 상황을 가정할 때 else 문과 함께 쓰임 [예제] let date..
JavaScript - 3. 연산자 ✔ 자바스크립트의 연산자에 대해 정리합니다. 연산자에 대해서 :) 연산자란 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등의 연산을 수행하기 위해 사용되는 기호를 의미한다. 이때 연산의 대상을 피연산자라 부른다. 1) 산술 연산자 (사칙연산) : 산술 연산자는 가장 기본적이면서도 자주 사용하는 연산자로 더하기, 빼기, 나누기, 곱하기를 연산한다. 이 연산자는 두 개의 피연산자를 가지는 이항 연산자이다. 종류 설명 + 두 값을 더한 결과값을 출력 - 두 값을 뺀 결과값을 출력 × 두 값을 곱한 결과값을 출력 / 두 값을 나눈 후에 그 몫을 출력 % 두 값을 나눈 후에 그 나머지를 출력 let x = 10; let y = 4; console.log('x + y =', x + y) c..
JSON Server 사용해보기 [환경] Clinet: React Server: json-server 1. JSON server json 파일을 사용해서 가짜 REST API 서버를 생성할 수 있는 도구이다. 이것은 실제 서버가 아닌 개발용 서버로 사용하는 것이 좋으며, 만약 실제 프로젝트를 개발하기 위해서는 실제 백엔드 서버를 구축해야한다. 2. JSON server 설치하기 npm 또는 yarn을 사용해서 전역으로 설치해준다. ** npm $ npm i -g json-server ** yarn $ yarn global add json-server 3. Dummy Data 만들기 가짜 서버를 만들기 위해서는 json 형식의 데이터가 필요하다. 먼저 dummy.json 이란 파일을 만들어보자! data/dummy.json { "todo..
JavaScript - 2. 변수, 상수, 자료형 ✔ 자바스크립트의 변수, 상수 그리고 자료형에 대해 정리합니다. 변수, 상수 그리고 자료형에 대해서 1. 변수에 대해서 :) 자바스크립트에서 변수는 값을 저장하는 데 사용된다. 1) 변수 생성하기 - 데이터를 일정 기간 동안 보관하고 필요시 사용하기 위한 메모리 공간을 의미한다. - 이 메모리 공간을 식별하기 위해 고유의 이름을 명시한 것을 말한다. - 변수를 생성하는 것을 변수 선언이라 한다. 2) 변수에 값을 저장하기 - 생성한 변수에 값을 저장할 수 있다. (변수 할당, 변수 정의) → 생성한 변수에 처음에 값을 저장하는 것을 초기화라고 부른다. - 변수는 저장한 값을 다른 값으로 바꿀 수 있다. (변수 재할당) - 변수를 생성하고 곧바로 값을 저장할 수 있다. → 한 줄에 여러 변수를 생성하는 것..
JavaScript - 1. 시작하기! JavaScript 목록에 올리는 내용은 공부하면서 이해한 것들을 바탕으로 작성한 거라 부족한 부분이 있는 점 양해부탁드립니다. JavaScript 사용해보기 01. JavaScript , 넌 누구야? HTML이 웹사이트의 뼈대 그러니까 모형(?)을 만드는 거라면 CSS는 그 만든 모형을 이쁘게 장식해 주는역할을 해준다. 근데 이 두 언어로 만들게 되면 사람과의 상호작용하는 그러한 기능이 없어서 뭔가 생동감이 있어 보이지 않는다. (그래서 딱딱해 보였나봐~) 그것을 사용자가 마우스로 클릭했을 때 어떠한 효과를 보여주는 역할을 하려면 자바스크립트라는 언어가 필요하다. 정리하자면 HTML, CSS이 뼈대를 만들고 이쁘게 꾸며주는 거라면 자바스크립트는 웹사이트를 사용자와 좀 더 가깝게 만들어주는 역할을 한다...