Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[2주차] 이성진 학습 PR 제출합니다. #13

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[2주차] 이성진 학습 PR 제출합니다. #13

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f085ee3
[2주차] 이성진 학습 PR 제출합니다.
leesj0188 Oct 5, 2024
f1bcd33
[2주차] 이성진 학습 PR 제출합니다.
leesj0188 Oct 8, 2024
f4f53ea
1차 수정본 입니다.
leesj0188 Oct 9, 2024
fd4489c
2차 수정본 입니다.
leesj0188 Oct 10, 2024
0d21772
최종본
leesj0188 Oct 10, 2024
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
8 changes: 4 additions & 4 deletions week02/이성진/[2주차] 이성진.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function App() {
}
```

1. **JSX에서 JS문법을 사용할 때는 항상 중괄호 {} 로 감싸주어야 한다.**
2. **JSX에서 JS문법을 사용할 때는 항상 중괄호 {} 로 감싸주어야 한다.**

```jsx
function App() {
Expand All @@ -54,7 +54,7 @@ function App() {

```

2. **JSX는 스타일을 지정할 때에도 {}로 감싸 주어 표현한다.**
3. **JSX는 스타일을 지정할 때에도 {}로 감싸 주어 표현한다.**
- 이때, {key : value} 형태로 감싸주고 style = { { color : blue } } 이런식으로 표현한다.

```jsx
Expand All @@ -73,10 +73,10 @@ function App() {
export default App;
```

1. **JSX는 반드시 하나의 부모태그가 감싸는 형식이어야 한다**.
4. **JSX는 반드시 하나의 부모태그가 감싸는 형식이어야 한다**.
- React 내에서 Virtual DOM이 내부의 요소들의 변화를 감지할 때, 효율적인 비교를 위해 DOM 트리를 구성해야 한다. 따라서 코드를 작성할 때 **<div>** 로 감싸주어야 한다.

2. **모든 프로퍼티의 표기는 CamelCase로 작성한다.**
5. **모든 프로퍼티의 표기는 CamelCase로 작성한다.**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다른 네이밍 규칙에는 어떤 것이 있을까요??
컴포넌트 명명 규칙은 무엇일까요 ?

- JSX에서는 데이터가 객체로 전달되기 때문에 HTML 대신 **카멜 케이스** 네이밍 규칙을 사용한다. ex) **classname (x) className**
leesj0188 marked this conversation as resolved.
Show resolved Hide resolved

## state , props
Expand Down
24 changes: 24 additions & 0 deletions week02/이성진/todo/.gitignore
View file
Open in desktop
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?
8 changes: 8 additions & 0 deletions week02/이성진/todo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
38 changes: 38 additions & 0 deletions week02/이성진/todo/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
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',
},
},
settings: { react: { version: '18.3' } },
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]
13 changes: 13 additions & 0 deletions week02/이성진/todo/index.html
View file
Open in desktop
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