ApptiveDev · hyunjinch · Mar 22, 2025 · Mar 22, 2025 · Mar 29, 2025 · Mar 29, 2025
diff --git a/.gitignore b/.gitignore
@@ -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?
diff --git a/README.md b/README.md
@@ -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 응답 메시지를 해석하여 웹페이지를 렌더링
diff --git a/eslint.config.js b/eslint.config.js
@@ -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 },
+      ],
+    },
+  },
+]
diff --git a/index.html b/index.html
@@ -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>