웹 브라우저 동작 단계

1. 사용자 요청

• 사용자가 주소 창에 URL을 입력하거나, 링크를 클릭하거나, 폼을 제출하는 등의 동작을 통해 웹 페이지를 요청합니다.

2. DNS 조회

• 브라우저는 입력된 도메인 이름(URL)을 기반으로 DNS(Domain Name System) 서버에 해당 도메인 이름을 해석하여 IP 주소를 가져옵니다.

3. TCP 연결

• 브라우저는 서버의 IP 주소를 기반으로 TCP/IP 연결을 수립합니다. 이 단계에서는 TCP/IP의 핸드셰이크 프로토콜을 사용하여 클라이언트와 서버 간의 안정적인 연결을 설정합니다.

4. HTTP 요청

• TCP 연결이 수립되면, 브라우저는 HTTP(Hypertext Transfer Protocol) 요청 메시지를 서버로 보냅니다. 이 요청은 사용자가 요청한 페이지의 종류(HTML, CSS, JavaScript, 이미지 등)와 함께 서버에 전달됩니다.

5. 서버 응답

• 서버는 받은 HTTP 요청을 처리하고, 요청에 따른 응답을 생성합니다. 이 응답은 일반적으로 HTML, CSS, JavaScript 파일, 이미지 등의 리소스로 구성됩니다.

6. 응답 처리

• 브라우저는 받은 서버 응답을 처리합니다.
• HTML 파일을 파싱하여 DOM(Document Object Model) 트리를 구성합니다.
• CSS 파일을 파싱하여 스타일 규칙을 적용하고, 렌더 트리를 구성합니다.
• JavaScript 파일을 실행하여 동적인 기능을 구현합니다.

7. 페이지 렌더링

브라우저는 DOM 트리와 렌더 트리를 사용하여 페이지를 렌더링합니다. 이 과정에서 요소의 위치, 크기, 스타일 등을 계산하여 실제 화면에 표시합니다.

8. 이벤트 처리

사용자의 동작(클릭, 스크롤, 키 입력 등)을 감지하고, 이에 대한 이벤트를 처리합니다. 이벤트 핸들러가 등록된 요소에 따라 적절한 동작을 수행합니다.

9. 반응성 유지

브라우저는 사용자의 동작 및 상태 변화에 따라 페이지를 업데이트하고, 필요한 리소스를 다시 요청하여 반응성을 유지합니다. 이 과정에서 AJAX 요청, 페이지 이동, 다른 리소스 로드 등이 발생할 수 있습니다.

Elements

Decoupling(디커플링, 탈동조화) : 경제용어로는 한 나라의 경제가 보편적이고 세계적인 경기 흐름과 독립적으로 움직이는 현상을 의미합니다. 예를 들어 글로벌 경기침체 시기에 특정 국가는 계속 성장하고 있을 때, 디커플링 현상이라고 할 수 있습니다.

리액트에서는 기존의 UI/UX 구현에서 코드가 복잡하고, 디커플링에 비효율적인 현상을 개선하기 위해 엘리먼츠를 도입했습니다.

DOM Tree를 그리기 위한 정보들을 가지고 묘사해주는 역할입니다. 엘리먼츠는 정보만 가지고 있을 뿐, 실제 DOM을 그리고 삭제하는 동작에 대한 것은 리액트가 알아서 해주고 있습니다.

Components

사용자가 선언한 컴포넌트가 마치 html 태그인 것처럼 엘리먼트의 동일한 Hierarchy에서 사용되고 있습니다.

Hierarchy(하이어라키) : 조직이나 집단 내에서 계층적인 구조

이 말은 리액트에서 엘러먼트라는 개념을 도입했기 때문에, 컴포넌트 간의 완전한 디커플링이 가능하게 되었다는 의미가 됩니다. 서로의 존재만 알 뿐, 서로 전혀 영향을 주지 않는 것이죠.

오늘의 CS 지식

타입스크립트 제네릭

타입스크립트에서 제네릭은 코드의 재사용성과 타입 안정성을 높이기 위한 기능입니다. 제네릭을 사용하면 함수나 클래스를 일반화하여 다양한 타입에 대해 동작할 수 있도록 만들 수 있습니다. 이를테면, 동일한 코드를 사용하여 여러 종류의 데이터를 다룰 수 있습니다.

함수 및 클래스의 파라미터나 반환 데이터 타입 그리고 속성에서 자주 사용되는 타입이 있다면, 일반 타입 대신에 사용할 타입 변수를 지정합니다. 타입 변수는 주로 알파벳 대문자로 표현하며, 실제 사용될 때는 원래의 구체적인 타입으로 대체되는 것이죠.

제네릭의 장점은 다음과 같습니다.

1. 코드 재사용성

제네릭을 이용하면, 서로 다른 여러 타입에 대해 하나의 동일한 로직을 적용해서 사용가능합니다. 타입에 대한 규칙을 일반화시킨 것이기 때문에, 예를 들어 배열에서 반복문을 사용할 때, 배열 안에 어떤 타입의 데이터가 들어오든 하나의 로직으로 처리가 가능합니다.

2. 타입 안정성 및 추상화

타입스크립트를 유연하고 안정적으로 사용할 수 있게 도와주기 때문에, 한층 강력하고 효율적으로 타입스크립트의 능력을 이용하게 됩니다.

타입스크립트의 데이터 타입

number
string
boolean
null
undefined
any

any 타입은 일반 자바스크립트를 사용하는 것과 다른 바가 없기 때문에, 거의 사용하면 안됩니다. 어떤 변수가 어떤 타입인지 정의되지 않았거나, 타입이 자주 바뀌는 경우에만 any 를 간혹 사용할 수 있습니다.

or 연산자를 써서 다양한 타입을 받게 할 수도 있습니다.

const a : number | string = "abc"

함수의 인자에 각각 데이터 타입을 전달할 수 있고, () 오른쪽에 함수의 리턴값의 데이터 타입을 정해줄 수도 있습니다.

const addNumber = (a:number, b:number):number => {
  return a+b
}

웹 브라우저는 자바스크립트만 이해할 수 있습니다. 타입스크립트는 사람이 이해하기 쉽도록 작성된 언어이기 때문에, 실제 웹 브라우저가 읽을 때는 타입스크립트 코드를 자바스크립트로 변환되어야 합니다. tsconfig.json 파일에 타입스크립트 -> 자바스크립트 변환에 대한 설정을 입력하게 됩니다.

객체에 대한 타입은 type와 interface로 정의할 수 있습니다. 또한 타입 내부의 또 다른 타입을 생성해서 재정의해줄 수 있습니다. 한번 만들어놓은 타입은 export import 해서 다른 파일에서도 재사용할 수 있습니다.

<> 은 제네릭입니다. 어떤 타입을 사용할지 정해져 있지 않고, 리액트 hooks와 같은 다른 사람이 만들어 놓은 함수를 호출하는 순간 타입을 정해주고 싶을 때 <>안에 타입을 전달해서 쓰는 제네릭을 사용하면 됩니다.

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

async function fetchData<T>(url: string): Promise<T> {
  try {
    const response: AxiosResponse<ApiResponse<T>> = await axios.get(url);
    return response.data.data;
  } catch (error) {
    // 에러 처리 로직
    console.error('API 요청 실패:', error);
    throw error;
  }
}

async function getUserData(userId: number): Promise<User> {
  const url = `https://api.example.com/users/${userId}`;
  const userData: User = await fetchData<User>(url);
  return userData;
}

getUserData(123)
  .then(user => {
    console.log('사용자 정보:', user);
  })
  .catch(error => {
    console.error('사용자 정보 요청 실패:', error);
  });

interface OwnProps {
	info:Restaurant,
    changeAddress(address:Address):void
}

함수는 타입스크립트 데이터 타입으로 표시할 때,
함수명(매개변수: 데이터 타입): 리턴값 데이터 타입
과 같은 형식으로 데이터 타입을 작성하면 됩니다. 만약 해당 함수가 리턴를 해주지 않으면 void 라는 타입으로 지정해주면 됩니다.

기존에 미리 작성된 타입을 extends로 상속받아서 필요한 내용만 추가해서 사용할 수 있습니다. 또한 zipCode?:number 처럼 optional mark를 추가해서 있어도 되고 없어도 되는 상태로 관리할 수도 있습니다.

참조링크

React component, element, instance 끝내기
코딩에 진심인 사람을 위해 준비한 리액트 타입스크립트 | 실제 회사에서 쓰는 레벨 ver