Skip to content

[22기] 최현진 - 2주차 과제 #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
50 changes: 48 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,48 @@
# study-frontend
프론트엔드 스터디를 위한 레포지토리입니다.
# 조사해보기

---

### React(리액트)

자바스크립트 라이브러리 중 하나로, 사용자 인터페이스를 만들기 위해 사용된다.

싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. (싱글 페이지 애플리케이션: 새로운 페이지를 작성하지 않고 현재 페이지를 동적으로 다시 작성하여 사용자와 소통하는 웹 애플리케이션)

**사용 이유**

1. 가상 DOM 사용 → DOM 업데이트 최적화

실제 DOM 대신 가상 DOM을 변경한 후 실제 DOM과 비교하여 변경사항이 있는 부분만 실제 DOM에 적용

2. 컴포넌트 기반 → 효율적인 코드 관리

UI를 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발을 진행


### Client Side Rendering

웹페이지를 클라이언트(브라우저)에서 렌더링하는 방식

SSR(Server Side Rendering)과 같이 페이지 전체를 새로 렌더링하는 것이 아니라, 사용자의 요청에 따라 변화된 부분만 렌더링하기 때문에 빠른 상호작용이 가능하다.

### 선언적 프로그래밍 vs 명령형 프로그래밍

**선언형 프로그래밍**

프로그램이 어떤 방식으로 동작하는지가 아닌, 어떻게 보여지는지 설명하는 것

**명령형 프로그래밍**

프로그램의 상태와, 상태를 변경시키는 알고리즘을 설명하는 것

### 브라우저가 웹페이지를 표시하는 과정

사용자가 선택한 자원(Resource)을 서버에 요청(Request) → 서버로부터 받은 응답(Response)을 브라우저에 렌더링(Render)

1. 사용자가 웹페이지의 URL 주소를 입력
2. DNS 서버가 URL에서 도메인 네임을 찾아 해당하는 IP 주소와 사용자가 입력한 URL 정보를 전달
3. HTTP 프로토콜이 전달받은 IP 주소와 URL 정보를 이용하여 HTTP 요청 메시지를 생성
4. TCP 프로토콜이 HTTP 요청 메시지를 IP 주소에 해당하는 서버로 전송
5. 웹 서버가 HTTP 요청 메시지를 해석하여 URL에 해당하는 데이터를 찾음
6. 찾은 데이터를 HTTP 응답 메시지로 생성하여 TCP 프로토콜을 통해 사용자 컴퓨터로 전송
7. 브라우저가 HTTP 응답 메시지를 해석하여 웹페이지를 렌더링
34 changes: 34 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
extends: ["eslint:recommended", "google"],
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...reactHooks.configs.recommended.rules,
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]
13 changes: 13 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading