[개발 공부 58일차] Code Splitting, 도메인, API, HTML 자주 사용하는 태그

< 목차 >
1. Next.js | npm run dev 실행이 안 될 때
2. Code Splitting (코드 스플리팅)
3. 도메인
4. API (Application Programming Interface)
5. REST API
6. HTML | 자주 사용하는 태그
7. 금일 소감

 

 

1. Next.js | npm run dev 실행이 안 될 때

.Next 파일

 

프로그래밍 + 인터넷 창을 많이 띄워두다 보니 노트북이 너무 느려져서 이번에 맥북으로 노트북을 새로 샀다. 도착하기 전에 Next.js npm run dev로 개발자 모드를 실행했을 때, 안 열리는 적이 많았어서 컴퓨터 CPU 이슈로 구동이 안 될 때는 어떻게 해야 하는지에 대한 해결책을 튜터님이 알려주셔서 기록해두려 한다.

 

그럴 땐 위 사진과 같이 .Next 파일을 삭제하면 된다. .Next 파일은 Cache Data 등 Next를 실행시킬 때 축적되는 데이터가 저장되는 파일이다. 캐시 등의 데이터가 삭제되니, 코드 문제가 아니라 CPU 문제로 구동이 안 되면 저 파일을 삭제해 보자.

 

 

 

다음으로는 모르거나 헷갈렸던 개념을 작성해 보려고 한다.

 

2. Code Splitting(코드 스플리팅)

: 대규모 웹 애플리케이션을 구축할 때 자주 사용되는 기술로, 애플리케이션의 전체 코드를 여러 개의 작은 번들로 나누는 것

 

사용자가 처음 페이지를 로드할 때 필요한 최소한의 코드만 로드하게 되어, 초기 로딩 시간을 단축시킬 수 있다. 사용자가 애플리케이션의 다른 부분을 탐색할 때 필요한 추가 코드는 필요할 때에만 로드된다. 코드 스플리팅은 주로 JavaScript와 같은 웹 애플리케이션에서 사용된다.

 

웹팩(Webpack), 롤업(Rollup), 브라우저리파이(Browserify)와 같은 모듈 번들러를 사용하여 구현할 수 있으며, React, Vue, Angular와 같은 프론트엔드 프레임워크나 라이브러리들도 코드 스플리팅을 지원한다.

 

 

코드 스플리팅의 장점

• 향상된 초기 로딩 성능: 사용자가 실제로 방문하는 페이지 또는 사용하는 기능에 필요한 코드만 로드하기 때문에 애플리케이션의 초기 로딩 시간이 단축된다.
• 효율적인 자원 사용: 사용자의 대역폭을 절약하고, 불필요한 코드 로딩을 피함으로써 전체적인 애플리케이션의 성능을 개선한다.
• 유지 보수의 용이성: 코드베이스를 더 작고 관리하기 쉬운 조각으로 분리함으로써, 대규모 프로젝트의 유지 보수가 용이해진다.

 

코드 스플리팅은 특히 사용자 경험을 개선하는 데 중요한 역할을 하며, 웹 애플리케이션의 성능 최적화를 위한 필수 기술 중 하나로 여겨진다.

 

 

 

3. 도메인

: 인터넷에서 컴퓨터를 식별하고, 접근하기 위해 사용되는 주소 체계의 일부

 

도메인 이름은 사람이 읽을 수 있는 형식으로 표현된 인터넷상의 리소스(예: 웹사이트) 주소다. 이는 숫자로 구성된 IP 주소(인터넷 프로토콜 주소)를 대신하여, 사람들이 쉽게 기억하고 입력할 수 있도록 해준다. 도메인 이름은 계층적 구조로 되어 있으며, 여러 부분으로 나눌 수 있다.

 

 

예를 들어, "http://www.example.com"에서

• "com"은 최상위 도메인(TLD, Top-Level Domain) 또는 도메인의 가장 오른쪽 부분이다. 웹사이트의 목적이나 소유 기관의 종류, 또는 지리적 위치를 나타낼 수 있다.
• "example"은 두 번째 레벨 도메인(SLD, Second-Level Domain)이다. 특정 기관이나 조직을 구체적으로 식별한다.
• "www"는 서브 도메인으로, 가장 왼쪽에 위치한다. 사이트 내에서 특정 부분이나 서비스를 가리키는 데 사용된다.

 

도메인 이름 시스템(DNS, Domain Name System)은 이러한 도메인 이름을 컴퓨터가 이해할 수 있는 IP 주소로 변환하는 역할을 한다. 이 시스템 덕분에, 우리는 복잡한 IP 주소를 기억할 필요없이, 웹사이트에 쉽게 접근할 수 있다.

 

 

 

4. API (Application Programming Interface)

: 다른 소프트웨어와 상호작용하는 방법을 정의한 규칙과 명세의 집합

 

핵심적으로, API는 두 프로그램이 서로 통신할 수 있도록 하는 인터페이스 역할을 한다. 자바스크립트에서 API를 사용하는 주된 상황은 크게 2가지로 나눌 수 있다.

1. 웹 API: 브라우저가 제공하는 API로, DOM 조작, HTTP 요청 (예: 'fetch' API), 이벤트 핸들링 등 웹 애플리케이션 개발에 필요한 다양한 기능을 수행할 수 있도록 돕는다. 웹 API를 통해 개발자는 브라우저의 기능을 활용하여 사용자에게 동적인 웹 페이지를 제공할 수 있다.
2. 외부 API: 서드 파티 서비스가 제공하는 API로, 특정 서비스의 데이터나 기능을 자신의 애플리케이션에서 직접 사용할 수 있게 한다. 예를 들어, 소셜 미디어 데이터를 불러오거나, 지도를 표시하거나, 날씨 정보를 가져오는 등의 작업이 이에 해당한다. 이런 외부 API를 사용하면 복잡한 기능을 직접 구현하지 않고도, 간단한 HTTP 요청을 통해 해당 기능을 애플리케이션에 통합할 수 있다.

 

 

자바스크립트에서 API는 웹 브라우저 내장 기능이나 외부 서비스의 기능을 사용할 수 있게 하는 규칙과 명세의 집합이며, 비동기 통신을 통해 데이터를 주고받는 방식으로 작동한다.

 

자바스크립트에서 API 사용은 대체로 다음 두 가지 패턴 중 하나를 따른다.

1. 비동기 통신: 대부분의 API 통신은 네트워크 요청을 포함하므로, 자바스크립트의 비동기 처리 패턴(콜백, 프로미스, async/await)을 사용하여 구현된다. 이는 웹 페이지가 서버로부터 데이터를 받아오는 동안에도 사용자와의 상호작용이 멈추지 않도록 한다.
2. 인터페이스 규약: API를 사용할 때는 해당 API가 요구하는 요청 형식을 준수해야 하며, 응답 데이터도 API 문서에 명시된 형식으로 받게 된다. 따라서, API를 사용하기 전에는 해당 API의 문서를 읽고 이해하는 것이 중요하다.

 

 

5. REST API

: 웹 서비스를 개발하는 데 널리 사용되는 아키텍처 스타일

네트워크상의 두 시스템 간의 상호작용을 용이하게 하기 위해 설계되었다.

 

아래와 같은 REST API 원칙들은 웹 서비스가 간단하고, 유연하며, 확장 가능하도록 만들어준다. 따라서 REST는 다양한 플랫폼과 언어에서 사용될 수 있는 범용적인 API 디자인을 가능하게 한다.

 

REST API 핵심 요약

1. 자원 기반 통신

: 인터넷상의 자원(데이터 또는 서비스)을 표현하기 위해 URI(Uniform Resource Identifier)를 사용한다. 각 자원은 고유한 URI를 가지며, 클라이언트는 이 URI를 통해 자원에 접근할 수 있다.

 

2. 상태가 없는(stateless) 통신

: 상태가 없는 통신을 사용한다. 즉, 서버는 클라이언트의 요청 사이에 상태 정보를 유지하지 않는다. 각 요청은 독립적이며 필요한 모든 정보를 포함해야 한다.

 

3. 표준 HTTP 메소드 사용

: 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하기 위해 표준 HTTP 메소드를 사용한다. 주로 사용되는 메소드는 GET(읽기), POST(생성), PUT(업데이트), DELETE(삭제)다.

 

4. 표현을 통한 자원의 조작

: 클라이언트는 서버와의 상호작용을 통해 자원의 특정 표현(예: JSON, XML)을 주고받는다. 서버는 요청받은 자원의 표현을 클라이언트에 전달하고, 클라이언트는 이를 조작하여 요청을 보낼 수 있다.

 

5. 무상태성과 캐시 사용

: 무상태성을 기반으로 하며, 이로 인해 응답은 독립적이고 캐시가 가능해야 한다. 캐시 사용은 네트워크 트래픽을 줄이고 성능을 향상시킬 수 있다.

 

6. 시스템 간의 분리

: 클라이언트-서버 아키텍처를 따른다. 이는 클라이언트와 서버가 서로 독립적으로 진화할 수 있게 하며, 각각의 컴포넌트를 쉽게 교체하거나 업그레이드할 수 있게 한다.

 

 

 

6. HTML | 자주 사용하는 태그

이건 웹 페이지의 기본 구조, 콘텐츠, 양식 등을 정의하는 데 필수적이다. 중요하고 자주 사용되는 HTML 태그를 알아보자

 

문서 구조와 메타데이터

• <!DOCTYPE html>: 문서의 HTML 버전을 선언한다.
• <html>: HTML 문서의 루트 요소
• <head>: 문서 메타데이터 요소를 포함하는 부분
• <title>: 문서의 제목을 정의한다. 브라우저의 title bar나 page tab에 표시된다.
• <meta>: 문서의 메타데이터를 설정 (ex. 문자 집합, 뷰포트 설정 등에 사용됨)

 

콘텐츠 구조

• <body>: 문서의 본문을 나타낸다. 실제 콘텐츠를 포함한다.
• <h1> ~ <h6>: 제목 태그로, <h1>이 가장 높은 레벨이다.
• <p>: 문단을 정의한다.
• <br>: 줄바꿈을 생성한다. 닫는 태그가 없다.
• <hr>: 수평선을 생성하여 내용 구분에 사용된다.

 

하이퍼링크와 이미지

• <a>: 하이퍼링크를 생성한다. 'href' 속성을 사용하여 링크 주소를 지정한다.
• <img>: 이미지를 삽입한다. 'src' 속성으로 이미지의 경로를 지정한다.

 

리스트

• <ul>: 순서 없는 리스트 생성
• <ol>: 순서 있는 리스트 생성
• <li>: 리스트 항목을 나타낸다.

 

테이블

• <table>: 테이블 생성
• <tr>: 테이블의 행 정의
• <td>: 테이블의 셀 정의
• <th>: 테이블의 헤더 셀 정의

 

양식

• <form>: 사용자 입력을 위한 양식 생성
• <input>: 사용자 입력 필드 생성. type 속성으로 다양한 입력 타입(텍스트, 비밀번호, 체크박스 등) 지정 가능
• <label>: input 요소의 라벨 정의
• <textarea>: 여러 줄의 텍스트 입력 필드 생성
• <button>: 버튼 생성. type 속성으로 버튼의 기능(제출, 리셋 등) 지정 가능

 

섹션과 그룹핑

• <div>: 컨텐츠를 그룹화하는 데 사용되며, CSS로 스타일링 할 때 주로 사용
• <span>: 텍스트를 그룹화하는 데 사용되며, 주로 인라인 요소에 스타일을 적용할 때 사용
• <header>, <footer>, <section>, <article>, <aside>: HTML5에서 도입된 구조적 태그들로, 문서의 다양한 부분을 의미론적으로 구분하는 데 사용

위 태그들은 웹 페이지를 구성할 때 기본적으로 자주 사용되며, 효과적인 웹 개발을 위해 이들의 기능과 사용 방법을 잘 이해하는 것이 중요하다.

 

 

 

7. 금일 소감

그동안 공부하며 정확히 몰랐거나 헷갈리는 개념을 정리해봤다. 확실히 정리하며 이해하니 좀 더 뇌에 남는 느낌이 든다. 근데 아직 REST API와 같이 분명 여러 번 보고 심지어 정리까지 하면서도 이해가 정확히 되지 않는 개념들이 있다. 이건 오늘 심화 팀 프로젝트 회의 이후에나 좀 더 알아보면서 공부해야겠다. 이번 주에 있을 심화 프로젝트도 파이팅!!!