프론트엔드 기초: React + TypeScript(3)-프로그래밍 기본 원리(C언어를 통한)

과정소개

프로그래밍의 기본 원리

1. 코드의 내부 동작 구조를 이해하기
2. 기본원리를 이해하게되면 -> 알고리즘적인 사고 가능
3. 공통적인 로직 익힐 수 있음
4. 포인터의 개념 (사용하지 않더라도 이해는 해야함)
5. 함수 포인터 (변수에 담는 것)
6. 구조체, 공용체, 열거형

객체지향 철학의 이해

타입스크립트 기초

1. 타입스크립트를 쓰는 이유 이해하기

타입스크립트 기반의 리액트

---

프로그래밍 기본 원리

왜 컴파일 기반 언어를 이해해야 할까?

• 모든 프로그래밍 언어의 동작 원리는 거의 똑같다
• 자바스크립트와 같은 스크립트 언어로는 동작 원리를 이해하기 힘든 구조이다
• C언어의 변수와 데이터 타입, 배열, 포인터 등의 동작 원리들은 자바스크립트 언어 동작의 근간을 이룬다.
• 타입을 변수와 함수에 기본으로 사용해보면 타입스크립트를 더 쉽게 이해할 수 있다.

프로그래밍의 개념

프로그래밍: 개발자가 소프트웨어를 개발하는 과정을 의미

개발의 3단계 과정

🔸프로그래밍도 예술 작품을 만드는 과정과 비슷함

🔸새로운 것을 개발하고 창조하는 과정

1. 구상
2. 설계
3. 구현

프로그래밍 언어란

🔸언어란 사람과 사람간의 통신 수단

🔸컴퓨터 언어란 사람과 컴퓨터 간의 통신 수단

🔸사람의 언어인 코드가 기계가 이해할 수 있게 통역하는것 => 컴파일

프로그래밍 언어의 종류

저급언어(기계중심)	고급언어(인간중심)
기계어 어셈블리어	C언어 C++ 자바 자바스크립트 C# 기타 등등

프로그래밍 작성 과정

크게 4가지가 있다.

1. 설계
   • 머리속으로 구상한 것을 기록하는것
   • 요리의 레시피를 만드는 작업
2. 원시코드 작성
   • 머리속으로 구상한 것을 기록하는것
   • 요리의 레시피대로 요리하는 과정
3. 컴파일
   • 원시코드는 사람이 이해하는 언어이지 컴퓨터 언어가 아님
   • 컴파일은 소스코드를 이진코드로 변환하는 과정, 즉, 컴퓨터가 이해할 수 있는 언어로 변환
4. 링크
   • 실행 파일을 만드는 과정

요즘에는 컴파일과 링크가 통합되어 이를 build라고 부른다.

---

내 생에 최초 C언어로 Hello World 출력하기

🔸#include는 import와 동일하다.

🔸<stdio.h>는 라이브러리고 printf() 함수를 사용할 수 있게 한다.

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

// 수학에서의 함수 형태
y = f(x)
y = 2x

// C언어에서의 함수 형태
int main(viod) {
	함수의 내용
}
f: main
x: viod
y: int
중괄호 안: 함수의 영역, 정의

 

C는 엄격한 문법이다.

🔸문장의 끝 세미콜론

• 컴파일 기반 언어는 문장을 마칠 때 반드시 세미콜론을 찍어주어야 한다.
• 왜냐하면 컴파일러는 세미콜론 단위로 문장을 해석하기 때문이다
• (자바스크립트는 컴파일러가 아닌 인터프리터라 세미콜론이 없어도 해석한다.)

🔸리턴값에 관하여

• return은 함수의 수행이 끝남을 의미한다.

주석문을 사용하자

🔸주석문을 사용하는 이유

• 어떤 단어나 문장에 대한 구체적인 부연설명
• 특정 코드의 수행을 임시로 막고싶을때
• 프로그래밍에서 주석은 필수이다

// 짧은 주석
/* 긴 주석
Date:
author:
remark:
*/

변수와 자료형

변수란?

🔸변수란 변경이 가능한 수를 의미한다.

🔸변수에는 어떤 값이 들어갈지 예측할 수 있다.

변수를 사용하는 이유

• 주소값을 일일이 기억하기 힘들기 때문에 변수명을 부여해서 기억
• 집 주소를 기억하지 않고 모모네로 기억하는 원리

메모리 영역

1. 코드 영역: 실행 명령어들 저장
2. 스택 영역: 지역변수 및 매개변수 저장, stack // LIFO
3. 힙 영역: 프로그래머가 직접 할당, Queue라고도 함 // FIFO
4. 데이터 영역: 전역변수, static변수 저장

콜스택 메모리의 적용

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

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

🔸원시 타입 데이터

• 불변성 immutable
• int a = 10일때 콜스택에 10의 값이 들어간 주소값이 식별자 a에 저장된다.
• 변수 식별자 a 자체는 콜스택 상의 실행 컨텍스트의 렉시컬 환경에 저장된다.

🔸참조 타입 데이터

• mutable
• 메모리 힙의 주소값이 저장된 콜스택의 주소값은 각각의 변수 식별자에 저장된다.

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

int a = 10; int b = 20; 이라는 변수가 있다고 가정할 때, int a = 20; 으로 재할당을 하게 되면 a는 b의 주소값과 같은 주소값으로 교체하게 되며 int b = 30; 으로 재할당을 하게 되면 b는 단순히 값이 바뀌는게 아니라 30값을 저장한 새로운 주소값을 할당받는다. 주소값을 저장하는 변수는 포인터 변수라고 하고 이러한 구조를 포인터 구조라고 한다.

자료형이란?

🔸선언한 변수가 어느정도의 메모리 공간을 할당할 것인지 결정

🔸음식의 종류에 따라 그릇의 용도가 바뀌는 것과 같은 원리

- 왜 다양한 자료형을 제공할까?

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

정수형 사용하기

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

실수형 사용하기

🔸실수란 소수점 이하를 가지는 수를 말한다.

🔸대표적으로 float(4byte), double(8byte)형이 있다.

문자형 사용하기

상수에 관하여

상수란?

🔸변하지 않는 수를 의미

🔸메모리 공간에 수가 존재하지만 그 값을 변경 할 수 없다.

const

🔸변수 선언에 const 기호를 붙여주면 상수화된다.

🔸🔥선언과 동시에 초기화 해야한다.

초기화: 변수를 선언한 후 처음으로 값을 할당하는 과정

const int TEN = 10;

💢const는 재할당이 불가능하다. (read only)

💢변수 선언시 할당(초기화)해주지 않으면 재당할 할 수 있는게 아니라 garbage가 들어가있다.

사용자로부터 데이터 입력

scanf

🔸사용자로부터 데이터 입력 받을 시 사용하는 함수

🔸사용법 학습보다 데이터 입력 시의 구조를 생각해보자❗

scanf("서식문자열", &변수...);
scanf(" %d", &input);
// 서식문자열 : 서식만 사용
// &변수 : 변수명 앞에 & 표기
// & : 주소연산자 라는 기호

🔥scanf() 함수를 통해 사용자로부터 10이라는 데이터를 입력 받자 &input을 통해 메모리값 주소를 찾아 할당하고 printf()함수에서 input을 찍어주는 것을 볼 수 있다.