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

Lina Hongbi Ko·2024년 10월 23일
0

Programmers_BootCamp

목록 보기
40/76
post-thumbnail

2024년 10월 23일

✏️ 공부해야할 때 알고 있어야 하는 것

  • 코드의 내부 동작 구조
  • 알고리즘적인 사고
  • 공통적인 로직
  • 포인터의 개념
  • 함수 포인터
  • 사용자가 정의한 타입 이해하기(구조체, 공용체, 열거형)

✏️ 왜 컴파일 언어를 이해해야 하는가

  • 모든 프로그래밍 언어의 동작 원리는 거의 똑같다.

  • 자바스크립트와 같은 스크립트 언어로는 동작 원리를 이해하기 힘든 구조이다.

  • C언어의 변수와 데이터타입, 배열, 포인터 등의 동작 원리들은 자바스크립트 언어 동작의 근간을 이룬다.

    • C언어 : 컴파일언어
    • 자바스크립트 : 인터프리터언어
  • 타입을 변수와 함수에 기본으로 사용해보면 타입스크립트를 더 쉽게 이해할 수 있다.

✏️ 프로그래밍

  • 프로그래밍 : 개발자가 소프트웨어를 제작하는 과정

  • 개발의 3단계 과정

    1. 구상
    2. 설계
    3. 구현
  • 프로그래밍 언어

    • 언어란 사람과 사람간의 통신 수단
    • 컴퓨터 언어(c언어, 자바스크립트)란 사람과 컴퓨터 간의 통신 수단
    • 컴퓨터는 컴퓨터 언어를 기계어로 해석함
    • 컴퓨터 언어를 기계어로 변환하는 과정 : 컴파일
    • 프로그래밍 언어의 종류
      • 저급언어(기계중심) - 기계어, 어셈블리어
      • 고급언어(인간중심) - C언어, C++, 자바, 자바스크립트 등
    • 프로그래밍 작성 과정
      1. 설계

        • 머리 속으로 구상한 것을 기록하는 것
        • 요리의 레시피를 만드는 작업
      2. 원시코드 작성

        • 머리 속으로 구상한 것을 기록하는 것
        • 요리의 레시피대로 요리하는 과정
      3. 컴파일

        • 원시코드는 사람이 이해하는 언어이지 컴퓨터 언어가 아님
        • 컴파일은 소스코드를 이진코드로 변환하는 과정. 즉, 컴퓨터가 이해할 수 있는 언어로 변환
      4. 링크
        - 실행 파일을 만드는 과정

        *최근에는 컴파일 + 링크 = 빌드 라고함

✏️ C언어로 Hello World 출력

  • #include = import

  • <stdio.h> → 라이브러리

  • C언어의 기본 구성 요소 : 함수 (리액트 컴포넌트와 유사)

  • 수학에서의 함수 형태

    • y = f(x) y = 2x
  • C언어에서의 함수 형태

    • int main(void) { 함수의 내용 }
      • f : main
      • x : void
      • y : int
      • 함수의 영역은 중괄호 {} 영역
  • 출력함수 printf에 대한 이해

    • C언어의 대표적인 출력함수 : printf(”Hello wolrd\n”);
    • printf는 stdio.h에 정의 되어 있는 함수
    • 자바스크립트 console.log과 같음
  • C언어는 엄격한 문법임

    • 문장의 끝 세미콜론
      • 컴파일 기반 언어는 문장을 마칠때 반드시 세미콜론을 찍어주어야 한다
      • 왜냐하면 컴파일러는 세미콜론 단위로 문장을 해석하기 때문 (한꺼번에 읽는 컴파일러의 오류 방지 위해)
      • 자바스크립트는 인터프리터 언어 → 한 줄씩 읽어서 해석하기 때문에 문제가 없었음
    • 리턴값에 관하여
      • 함수의 수행이 끝남을 의미한다.
      • 리턴값 0 자체는 의미가 없다.
    • 주석문을 사용하자
      • 주석문 사용 이유
        • 어떤 단어나 문장에 대한 구체적인 부연 설명
        • 임시로 코드 수행 막기 위해
        • 프로그래밍에서 주석은 필수
      • 주석문이 짧은 경우
        • // Hello World 문자열을 출력한다
      • 주석문이 긴 경우
        • /
          Date : 2030.12.15
          Author : younghee
          Remark : Hello World
          날짜, 작성자, 설명을 함수나
          어떤 특정 기능 앞에 적음
          /

✏️ 변수와 자료형1

  • 변수란 무엇인가

    • 변수란 변경이 가능한 수를 의미
    • 변수에는 어떤 값이 들어갈지 예측할 수 없음
  • 변수를 사용하는 이유

    • 메모리 상에 올라가 있는 수많은 데이터를 어떻게 구분할 수 있을까?
    • 메모리의 주소값을 사람이 일일히 다 기억할 수 있을까?
  • 주소값을 기억하기보다는 의미있는 이름을 기억하는 것이 쉽다

  • 우리가 사용할 메모리 공간에 이름을 부여한 것이 변수이다

  • 친구의 집을 집주소로 기억하지 않고, 철수네로 기억하는 원리

  • 메모리 영역

    • 메모리에는 크게 코드 영역, 스택 영역, 힙 영역, 데이터 영역 총 4가지로 구분
      • 코드 영역 : 실행 명령어를 저장
      • 스택 영역 : 지역변수 및 매개변수 저장
      • 힙 영역 : 프로그래머가 직접 할당(시스템큐 → 어플리케이션큐)
      • 데이터 영역 : 전역변수, static 변수 저장
  • 콜스택 메모리의 적용

    • 우리가 지금껏 사용한 지역변수 및 매개변수 등은 모두 스택 메모리를 사용

    • void Test(int a)
      {
      char h = ‘A’;
      int c = 1;
      double d= 3.14;
      }

    • d → d → b → a로 스택에서 나옴

  • 콜스택, 메모리 힙의 데이터 저장 구조

    • 원시 타입 데이터
      • 변수 a에는 10이 저장된 콜스택 메모리의 주소값이 저장
      • 변수 식별자 a 자체는 콜스택 상의 실행 컨텍스트의 렉시컬 환경이라는 곳이 저장된다.
    • 참조 타입 데이터
      • 메모리 힙의 주소값이 저장된 콜스택의 주소값은 각각 b, c, d에 저장된다.
  • 원시 타입 재할당

    • 변수 a에 20을 재할당하면 본인의 메모리에 있는 값을 변경하는 것이 아니라 기존에 20을 저장하고 있는 메모리의 주소값을 교체한다.
    • a에 저장된 주소값은 20을 가리키고 있던 b에 저장된 주소값과 동일해진다.
    • 변수 b에 30을 재할당하면 변수 b가 가리키는 메모리의 값을 20에서 30으로 교체하는 것이 아니라, 새로운 메모리를 확보하여 30을 저장하고 변수 b가 가리키는 주소값을 교체한다.
    • 주소값을 저장하는 변수를 포인터 변수라고 하는데 이러한 구조가 포인터 구조이다.
  • 가비지 컬렉터

    • 더이상 참조되지 않는 데이터는 가비지 컬렉터에 의해 적절한 시점에 메모리에서 해제한다.

✏️ 변수와 자료형2

  • 자료형이란

    • 선언한 변수가 얼마만큼의 메모리 공간을 할당할 것인지 결정
    • 음식의 종류에 따라 그릇의 용도가 다른 것과 같은 원리
  • 기본 자료형의 종류 및 표현 범위

    • 정수형
      • char - 1바이트
      • short - 2바이트
      • int - 4바이트
      • long - 4바이트
    • 실수형
      • float - 4바이트
      • double - 8바이트
      • long double- 10~16바이트
  • 왜 다양한 자료형을 제공하는 것일까?

    • 효율적인 메모리 공간을 활용하기 위해서
  • 실습

    • 정수란 0을 포함한 부호가 있는 수

  • 변수 앞에 자료형을 사용해서 알맞는 메모리를 사용하도록 한다(모자란 메모리는 오류를 발생시킴)

✏️ 상수

  • 상수란 무엇인가

    • 상수는 변하지 않는 수를 의미
    • 메모리 공간에 수가 존재하지만 그 값을 변경 할 수 없다.
  • const 키워드

    • 변수 선언에 const 키워드를 붙여주면 상수화된다 ex) const int TEN = 10;
    • 주의할 점은 선언과 동시에 초기화 해야 한다 (선언만 해도 쓰레기값이 들어가있음) ex) const int TEN;
      TEN = 20; // error: assignment of read-only variable ‘TEN’

✏️ 사용자로부터 데이터 입력

  • scanf

    • 사용자로부터 데이터 입력 받을시 사용하는 함수는 scanf이다.
    • scanf 사용법 학습이 목적이 아니라 데이터 입력시 구조를 생각해보자
      • scanf(”서식 문자열”, &변수….)

  • 사용자가 입력한 10이라는 값은 운영체제의 시스템큐에 전달됨 → 이 데이터는 우리의 어플리케이션 input이라는 변수의 메모리에 전달되야함 → 그런데 운영체제 안에 많은 어플리케이션과 변수들은 아주 많다 → 그래서 정확하게 정확하게 전달하려면 메모리 주소값을 이용 → 따라서 C언어는 주소연산자 &를 사용함
  • 그러나 자바스크립트는 주소 연산자를 사용하진 않음
  • 하지만 원리는 같고 c언어는 명시적으로 쓰는 것임

🍏🍎 느낀점 : 오늘은 약 1년전에 배웠던 c언어를 다시 복습해보면서 자바스크립트와 연관지어서 생각할 수 있는 시간이었다. 기본부터 차근차근 다시 익숙해지는 중,,!

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

0개의 댓글