본문 바로가기

전체 글402

[ONEBITE-REACT] JS 기본 - 배열 (Array) 의미 배열(Array)이란 여러개의 값을 순차적으로 담을 수 있는 자료형을 말한다. 이 점은 객체(Object)와 비슷해 보이지만 차이점이 있다. 객체(Object) 객체의 프로퍼티는 key와 value가 쌍으로 이루어진다. 객체의 key는 문자열이나 symbol이어야 하고, value에는 모든 데이터 타입이 올 수 있다. 객체는 논리적으로 연관된 데이터를 그룹화하기 위해 사용한다. 객체는 {} 중괄호를 사용하고, 키와 값은 : 콜론으로 구분한다. 객체의 값에 접근할 때는 key 값을 이용한다. 배열(Array) 배열은 key와 value가 모인 것이 아니라, value가 순서대로 모인 것이다. 즉 하나의 key에 value를 나열한 형태로 생각하면 된다. 배열은 같은 타입이 올 수도 있고, 다른 타입으.. Programing/React 2024. 3. 12.
[ONEBITE-REACT] JS 기본 - 객체 (Object) 의미 자바스크립트의 데이터 타입에는 원시 타입과 객체 타입이 있었다. 원시으로는 Number, String, Boolean, Null, Undefined 등이 있었고, 객체 타입에는 Array, Function, RegexExp가 있었다. 객체 타입은 여러가지 값을 동시에 저장할 수 있는 자료형을 말한다. 객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이하다. 예를 들어 장원영이라는 사람이 있는데, 이 사람의 이름, 나이, 사는곳, 그룹명을 하나의 변수에 담을 수 있는 것이다. let wonYoung = { name: "장원영", age: 21, location: "용산", height: 173 } 객체 생성 방법 객체를 생성하는 방법에는 여러가지가 있다. 객체 리터럴(Obejct .. Programing/React 2024. 3. 12.
[ONEBITE-REACT] JS 기본 - 스코프 (Scope) 의미 우리말로 '범위'를 뜻함. 변수나 함수에 접근하거나 호출할 수 있는 범위를 말함. 종류 지역 스코프 (Local Scope) 지역 스코프란, 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하다는 것을 의미한다. 함수 외부에서는 함수 내부에서 선언된 변수에 접근할 수 없다. 이렇게 함수 내부에서 선언된 변수를 지역 변수(Local Variable)이라 한다. function myFunction() { let a = 1; } console.log(a); 위와 같은 코드가 있을 때 콘솔에 a를 출력하면 1이 출력될 것 같지만, 아래와 같은 에러가 발생한다. 에러의 내용은 a라는 변수가 정의되지 않았다는 의미이다. 즉 let a라는 변수를 분명히 선언했고, 값으로 1을 담아 초기화 했음에도 a라는 변.. Programing/React 2024. 3. 12.
[ONEBITE-REACT] JS 기본 - 콜백 함수 (Callback Function) 의미 자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미한다. 예시를 봐야 이해가 빠르다. function main(value) { value(); } function sub() { console.log("sub"); } main(sub); // "sub" 코드해석 처음 function에서 main()이라는 함수를 선언하고 매개변수로 (value)를 담았다. 그리고 main()이라는 함수를 실행하면 value();가 실행되도록 했다. 다음 function에서 sub()라는 함수를 선언하고 매개변수는 아무 것도 없다. 그리고 sub()라는 함수를 실행하면 콘솔에 "sub"가 출력되도록 하였다. 그리고 마지막에 main()이라는 함수를 실행하는데 value라고 만든 파라미터에 sub함수 자체를 아규먼트로 .. Programing/React 2024. 3. 12.
[ONEBITE-REACT] JS 기본 - 함수 표현식(Function Expression)과 화살표 함수(Arrow Function) 의미 함수 표현식 (Function Expression) 함수 선언식을 선언하는 것이 아니라 함수를 변수에 할당하는 것을 의미한다. 함수를 변수에 할당하면 변수의 값을 계속 바꾸면서 사용하듯 함수도 값으로 취급할 수 있다. 아래는 일반적으로 함수를 선언하는 방법이다. function myFunction () { console.log("hello"); } myFunction(); 다시 아래는 함수를 변수에 담는 함수 표현식으로 같은 함수를 작성한 것이다. let myFunction = function myFunction() { console.log("hello"); } myFunction(); function으로 함수를 선언하면 호이스팅이 발생하지만, 함수 표현식으로 작성한 함수는 호이스팅이 발생하지 않는.. Programing/React 2024. 3. 11.
[ONEBITE-REACT] JS 기본 - 함수 (Function) 의미 자바스크립트에서 코드를 재사용 가능한 블록으로 묶어주는 기능이다. 같은 코드를 변수명만 다르게 해서 let age1, let age2 등으로 반복 사용하면 효율도 떨어지고 가독성이 떨어지기에 이럴 경우 하나의 코드 블록으로 묶어주게 된다. 기본형 function 함수명(파라미터1, 파라미터2, ...) { 실행할 코드 return 리턴할값; // 선택사항이고 함수 사용이 종료되고 나서 반환할 값을 설정한다. 함수를 선언하는 것만으로는 함수가 실행되지 않는다. 함수를 선언하고 사용자가 설정한 함수명()을 사용해서 함수를 실행해야 한다. function greeting () { console.log("안녕하세요") } // 함수를 선언하는 것만으로는 안의 함수가 실행되지 않는다. greeting(); .. Programing/React 2024. 3. 11.
[ONEBITE-REACT] JS 기본 - 반복문 (Loop, Iteration) 의미 어떠한 동작을 반혹해서 수행할 수 있도록 만들어주는 문법 예) 1부터 100까지 콘솔에 하나씩 출력하라. 원래대로라면 console.log(1); ... console.log(100);까지 100번 입력해야 하나, 반복문을 사용하면 for(let i = 1; i = 3) { break; } } 만약 idx가 5와 같아지는 순간 반복문이 종료되길 원하는 위와 같은 for문에서 3과 같아지는 순간 멈추게 하고 싶다면, 조건식 자체를 수정해도 되지만 조건식을 수정할 수 없는 상황에서는 위와 같이 if...break를 추가하여 idx가 3과 같거나 커질 때 break로 빠져 나오라고 코드를 작성할 수 있다. for문을 강제로 패스하는 방법 (if...countinue) if (idx % 2 === 0) {.. Programing/React 2024. 3. 11.
[ONEBITE-REACT] JS 기본 - 조건문 (Conditional Satatement) 의미 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법 예) 값이 10 이상인가? 참이면 "Yes", 거짓이면 "No"를 출력하라. 대표적으로 if, switch 조건문이 존재함. 종류 if문 기본형 if (조건) {참일 때 실행할 값} let num = 10; if (num > 5) { console.log(`${num}은 5보다 큽니다.`); } // "10은 5보다 큽니다" 로 출력됨. 거짓일 때 추가 기본형 : if (조건) {참일 때 실행할 값} else {거짓일 때 실행할 값} let num = 2; if (num > 5) { console.log(`${num}은 5보다 큽니다.`); } else { console.log(`${num}은 5보다 작습니다.`); } // "2는 5.. Programing/React 2024. 3. 11.
[ONEBITE-REACT] JS 기본 - 연산자 (Operator) 의미 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말한다. 예를 들어 덧셈 연산자(+), 곱셉 연산자(*), 뺄셈 연산자(-), 나눗셈 연산자(/) 등이 있다. 종류 대입 연산자 (=) (assignment operator) let var1 = 1; 위와 같이 변수(var1)의 기본 값으로 1을 초기화 할 때 쓰는 = 기호를 대입 연산자라고 한다. 산술 연산자 (+, -, *, / , %) (artihmetic operator) + 덧셈 연산자, - 뺄셈 연산자, * 곱셈 연산자, / 나눗셈 연산자, % 나머지 연산자(모듈러 연산자) 사칙연산 규칙처럼 곱셈, 나눗셈, 나머지 계산은 덧셈 뺄셈보다 우선순위가 높다. 덧셈, 뺄셈을 먼저 하고 싶다면 사칙연산 하듯 괄호로 묶어주면 된다. let num .. Programing/React 2024. 3. 11.
[ONEBITE-REACT] JS 기본 - 형 변환 (Type Casting) 의미 형 변환 (Type Casting) : 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함 예를 들어 10이라는 Number Type을 "10"이라는 String Type으로 변경하는 것을 말함. 종류 묵시적 형 변환 (암묵적 형 변환) 개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환을 하는 것을 말한다. 명시적 형 변환 개발자가 직접 함수 등을 이용하여 형 변환을 하는 것을 말한다. 묵시적 형 변환 (암묵적 형 변환) 묵시적 형 변환이 일어나는 경우는 아래와 같다. 1. number type + string type let num = 10; let str = "20"; const result = num + str; console.log(result); console.log(typ.. Programing/React 2024. 3. 11.

티스토리툴바