[프로그래머스] 프론트엔드 기초: React + TypeScript(4)

Lina Hongbi Ko·2024년 10월 24일
0

Programmers_BootCamp

목록 보기
41/76
post-thumbnail

2024년 10월 24일

✏️ 연산자

  • 정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는것
    • 예를 들어, 학생들 과목당 성적 데이터는 그자체로 의미가 없다
    • 총점 및 평균을 데이터화 해야 그 의미가 있음
  • 산술 연산자
    • 사칙 연산이 기본
    • 일상에서 많이 사용하기 때무에 이해하는데 어려움이 없음
  • 대입 연산자
    • 대엽 연산자는 오른쪽에 있는 값을 왼쪽에 대입하는 역할을 함
    • 대입 연산자와 산술연산자를 혼용해서 사용하기도 함
  • 증감 연산자
    • 증가 연산자와 감소 연산자의 줄임말
  • 관계 연산자
    • 두 개의 피연산자로 관계를 따지는 연산자로, 같은지 다른지 어느쪽이 큰지 작은지 비교하는 연산자
  • 논리 연산자
    • 두 개의 조건식 등을 결합하여 하나의 결과값을 만듦

✏️ if문

  • 분기문 = 조건문

    • 조건이란 : 어떤 의미를 이루게 하거나 이루지 못하게 하기 위해 갖추어야 할 상태나 요소.
  • if문의 기본 원리

    if(수행조건) {
        // 수행 조건에 만족되면 { } 내부로 진입해 '수행하고 싶은 일'을 수행
        수행하고 싶은 일
    }
  • 수행 조건에 관계 연산자 사용

✏️ if-else문

  • else 문을 추가함으로써 이것만 선택할 수 있는 것이 아니라 저것도 선택이 가능하다
  • if else문 기본 원리
    if(수행조건) {
        // 수행 조건에 만족되면 { } 내부로 진입해 '수행하고 싶은 일'을 수행
        수행 조건 만족시 수행
    }
    else {
        // 수행 조건에 만족이 안되면 else { } 내부로 진입하여 수행
        수행 조건 불만족시 수행
    }

✏️ if-else if문

  • else if문을 사용하면 조건 자체가 계속 늘어 날 수 있다.

  • if else if else문의 기본 원리

    if(수행조건1) {
        // 수행 조건에 만족되면 { } 내부로 진입해 '수행하고 싶은 일'을 수행
        수행 조건1 만족시 수행
    }
    else if(수행조건2) {
        // 수행 조건에 만족되면 { } 내부로 진입해 '수행하고 싶은 일'을 수행
        수행 조건2 만족시 수행
    } else {
        // 수행 ㅈ건에 만족이 안되면 else { } 내부로 진입하여 수행
        수행 조건1, 수행조건2 불만족시 수행
    }

✏️ while문

  • while문의 기본 원리
    • 반복 조건을 만족하는 동안 반복 문장을 수행한다.
    • 반복 조건을 만족하지 않으면 while문을 빠져 나간다.
      // 초기문
      while(반복 조건) //조건문 
      {
          // 반복 조건이 맞고하는 동안 반복 문장을 실해
          반복 문장
          // 증감문
      }

✏️ 이중 while문

  • 이중 while문의 기본 원리
    while(expression1) {
        while(expression2) {
            ...
        }
    }

✏️ 무한루프

  • 반복 수행이 무한히 일어나는 것
  • 키보드 → 운영체제 → 메모장 : 메모장이 계속 이벤트를 감시하며 특정 이벤트가 일어나면 실행시켜줌 (무한 루프의 적용)
  • 반복 조건이 어느 시점에 무너질 수 있도록 설계
  • 무한 루프 안에서 어느 시점에 break나 return으로 빠져 나올 수 있어야함

✏️ for문

  • for문은 while문과 다르게 변수의 초기화 연산과 증감 연산이 추가된다.
    • for 문의 기본 원리

      for(초기문; 조건문; 증감문) {
          반복하고자 하는 내용
      }
      // 초기문 -> 조건문 -> 반복하고자 하는 내용 -> 증감문

✏️ break & continue문

  • break문
    • 반복문 내부에서 특정 조건이 되면 break문을 만나게 되는데, break문은 while문을 빠져나가게 된다.
  • continue문
    • 반복문 내부에서 특정 조건이 되면 continue문을 만나게 되는데, 이때 continue문 이하의 수행은 무시하고, 다시 반복의 시작점으로 간다. (skip 하는 기능)

✏️ 함수

  • 함수는 나누어서 처리하기 위한 목적

    • 코드의 가독성 향상
    • 코드의 유지 보수 및 확장 용이
  • 함수형 기반 언어의 동작 구조

    • 대부분의 프로그래밍 언어는 함수의 집합체
    • 함수들이 서로 연동하여 유기적으로 동작
  • 함수의 종류

    • 표준 함수 - 언어에서 기본적으로 제공해주는 함수
      • 함수를 라이브러리화 시켜서 편리하게 사용할 수 있게 함 ex) printf()
    • 사용자 정의 함수 - 사용자가 자신이 원하는 기능을 직접 만들 수 있다
      • 표준 함수의 기능에는 한계가 있음 ex) 우리가 정의하는 함수
      • 정형화된 완구(표준 함수)와 가변적인 레고(사용자 정의 함수)같은 완구의 차이
  • 기본 형태

    • 데이터 타입 - 함수가 리턴하는 값의 타입
    • 함수 이름 - 함수 기능과 밀접한 이름으로 만드는 것이 좋음
    • 인수 목록 - 함수에 필요한 값을 전달할 때 사용 (인수=매개변수=전달인자=파라미터)
    • 함수의 내용 - 중괄호 {} 사이의 영역 안에서 작성
      자료형 함수이름 (인수목록)
      {
          함수의 내용
      }
      // eg
      int Add(int a, int b)
      {
          return a + b;
      }
  • 함수의 호출과 프로그램 흐름

    • 함수 호출 및 반환되는 흐름을 순서대로 표현
  • void 타입
    • 타입이 없음
    • 결과값을 리턴 하지 않는 함수의 리턴 타입으로 주로 사용됨

✏️ 변수의 범위

  • 지역 변수

    • 코드에서 지역의 의미
    • 같은 이름이라도 다른 영역의 함수에 속해 있으므로 독립된 다른 변수이다.
    • 스택 메모리에 존재하는 시간 - 언제 생성되고 언제 소멸 되는가?
    • 함수 호출 순서와 소멸 순서는 반대
    • 함수의 매개 변수도 스택 메모리에 할당 되는 지역변수이다.
  • 전역 변수

    • 함수 바깥 쪽에 선언된 변수
    • 전역 변수는 사용이 불가피한 경우에만 사용할 것 → 관리 어려움 → 사용 지양!
    • 전역 변수는 프로그램 시작하자마자 메모리 상에 올라가서 프로그램이 종료될 때 메모리 상에서 소멸됨
    • 전역 변수는 메모리 공간 중 데이터 영역이라는 곳에 저장됨(지역 변수는 스택에 저장됐지?)
  • static 변수

    • 사전적으로 ‘정지된’ , ‘고정상태의’ 뜻을 갖는다.
    • 지역 변수처럼 중괄호 영역에서 선언되지만, 중괄호를 벗어나도 메모리 상에 고정되어 소멸하지 않는다. (생성은 내가 원하는 곳에서 어떤 특정 함수에서 생성할 수 있으나, 프로그램이 종료될때 전역변수와 동일하게 소멸됨 _ 메모리 상 데이터 영역에서 관리됨)
    • 메모리 생명 주기

✏️ 배열 1

  • 배열이란 같은 속성을 가진 것들을 나열해 놓은 것을 말한다.

  • 배열은 요소가 순서대로 여러개 모인 것이다.

  • 배열의 요소는 같은 속성을 지니고 있어야 한다.

  • 왜 배열을 사용해야 하나

    • 만약 정수형 변수 100개를 선언 한다면, 이는 힘들기 때문에 간단히 합쳐서 선언할 수 있음
    • int a[100];
  • 배열의 선언 구조

    ex) int array[5]

    • 배열의 타입 : 배열 요소들의 타입을 나타낸다
    • 배열 이름 : 각 배열 요소에 접근하기 위한 배열 이름을 나타낸다
    • 배열 길이 : 변수의 개수를 나타낸다
    • 배열의 인덱스로 접근
      • 배열의 첫 번째 인덱스는 무조건 0부터 시작
    • 배열의 초기화 : int array[5] = {1, 2, 3, 4, 5};
    • 배열의 길이 생략
      • 초기값의 개수를 보고 컴파일러는 배열이 길이를 계산한다
    • 배열의 복사
      • 같은 타입 끼리 복사 가능
      • 배열도 배열 끼리 복사 가능
      • c언어는 아래와 같이 변수 복사 하듯이 복사하면 에러가 발생한다(자바스크립트는 에러 발생 x) → 원래 원리는 이러함
      • 배열은 요소 끼리 복사해야 한다(값 복사)
        int arr1[5] = {1, 2, 3, 4, 5};
        int arr2[5];
        arr2 = arr1;
        // error C2106 에러 : 배열은 상수이기 때문에
        // 대입 연산자를 통해 값을 넘겨 받을 수 없음

✏️ 배열 2

  • 문자열 변수
    • 지금까지 우리가 사용했던 printf(”Hello World”)와 같은 문자열은 모두 상수
    • 문자열에 이름을 붙여주면 변수로 사용 가능
      char str[12] = "Hello World";
      // 문자열을 세어보면 총 11개인데, 11+1로 1개 더 설정한 이유는
      // 문자열의 끝에 null 문자가 추가되기 때문
    • null 문자에 관하여
    • 문자열 끝에는 null 문자가 반드시 추가된다.
    • 왜 필요할까? ex) char str[100] = “beautiful”;
      • 문자수는 9개, 배열의 개수는 100개, 91개 공간이 빈다.
      • 91개 공간에는 쓰레기 값으로 채워져 있다.
      • 사람은 문자와 쓰레기값을 구분하지만, 컴퓨터는 구분이 불가능하다.
      • 쓰레기값과 구분해주기 위해 null을 붙여준다(beautiful₩0)

✏️ 포인터

  • 우리가 알고 있는 변수 선언시 메모리 구조

    • 메모리는 주소를 통해 메모리에 접근하여 값을 읽고 쓸 수 있다. 스크린샷
    • 문자타입 1바이트, 정수타입 4바이트, 실수타입 8바이트
  • 포인터는 포인터 변수의 줄임말로 메모리의 주소값을 저장하고 있는 변수이다.

  • 보통 주소값을 저장한다는 표현을 반대로 해당 메모리를 가리킨다 라고도 표현한다.

  • 어느 특정 메모리 주소를 가리키거나 향하고 있다는 뜻이다.

  • 포인터 사용방법

    • 포인터 변수 선언시 일반 변수명 앞에 * 기호만 붙여주면 된다. 주소값만 저장하겠다는 의미
    • & 기호를 통해 변수의 주소값을 얻을 수 있다
    • 포인터 변수 pB가 b의 주소값을 가리킨다 라고 표현
      int b = 100;
      int *pB = &b;
      // 주소값을 할당하지 않으면 에러 발생

✏️ 포인터와 배열

  • 배열 이름의 의미

    • 배열의 이름은 해당 배열의 첫 번째 요소의 주소값을 갖는다. 즉 첫번째 요소의 주소값을 가리키는 포인터라는 의미이다.
    • arr은 이 배열을 가리키고 있는 포인터임을 알 수 있다.
    • arr은 &arr[0]의 값은 일치한다.
  • 배열의 이름이 포인터지만 일반 포인터와 차이점이 있음

    • 배열의 이름 == 포인터
    • 배열의 이름은 주소값을 갖는 포인터지만 상수이므로 주소값을 변경할 수 없다.

✏️ 함수와 포인터

  • 기본적인 함수의 인자 전달 형태

    • 기본적인 함수의 인자 전달형태는 복사이다.
      • 전달하는 변수 : 실인수 / 전달받는 변수 : 형식인수
      • 실인수(a) → 형식 인수(b) : a에서 b로 복사시 a에도 값이 존재하고 b에도 값이 존재한다 (값을 공유X / 메모리는 가지고 값만 복사됨)
  • 배열형의 인자는 포인터형으로 받는다

    • 1-5개 정도까지는 전달인자를 사용할 수 있으나 그 이상은 난잡함
    • 배열을 전달인자로 사용하면 여러개의 값을 넘길 수 있다.
    • 어떻게 배열을 전달하고 받을 것인가? 바로 포인터로!
      • 값에 의한 복사 / 참조에 의한 복사 → 참조에 의한 복사(포인터) 이용
      • 배열 전체를 복사하는 것보다 포인터를 사용하면 메모리 낭비를 막음
  • 자바스크립트도 내부에서 포인터로 복사하는 것임

profile
프론트엔드개발자가 되고 싶어서 열심히 땅굴 파는 자

0개의 댓글