-
Notifications
You must be signed in to change notification settings - Fork 51
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
경북대 FE 이은경_1주차 과제 Step1 #40
Open
dmsrud1218
wants to merge
46
commits into
kakao-tech-campus-2nd-step2:dmsrud1218
Choose a base branch
from
dmsrud1218:dmsrud1218
base: dmsrud1218
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
46 commits
Select commit
Hold shift + click to select a range
df4bbe3
Update README.md
dmsrud1218 338ef14
feat : CRA기반 프로젝트 생성
dmsrud1218 98de71a
Merge branch 'dmsrud1218' of https://github.com/dmsrud1218/react-gift…
dmsrud1218 09c1c9a
README.md 충돌 merge해결
dmsrud1218 e491edf
refactor(App.tsx) : typescript변환 수정
dmsrud1218 e16e497
feat(package-lock.json)
dmsrud1218 da4a595
refactor(index.tsx) : typescript변환 수정
dmsrud1218 6903a48
refactor(reportWebVitals.ts) : typescript변환 수정
dmsrud1218 df8f1c5
refactor(setupTests.ts) : typescript변환 수정
dmsrud1218 7332109
Remove(App.js) :js파일 삭제
dmsrud1218 6308857
Remove(reportWebVitals.js) :js파일 삭제
dmsrud1218 f2b6939
Remove(setupTests.js) :js파일 삭제
dmsrud1218 d728127
feat(tsconfig.json): tsfonfig세팅
dmsrud1218 7187ef5
feat(tsconfig.paths.json):경로 세팅
dmsrud1218 27cc3eb
Chore :ESLint 설정 및 수정
dmsrud1218 e30856d
Chore : prettier 설정 수정
dmsrud1218 abd22e1
Chore: gitignore수정
dmsrud1218 3259cfa
Chore : 파일삭제로 인한 import 수정
dmsrud1218 23e882a
Remove : 불필요한 파일들 삭제
dmsrud1218 38bc5d9
Chore : root에 있는 중복파일과 병합후 수정
dmsrud1218 e97b15e
Remove : 중복파일 제거
dmsrud1218 451c2fb
Remove : 불필요한 파일 삭제
dmsrud1218 7e8bab5
feat : storybook 설치 및 추가
dmsrud1218 383d66e
Chore : storybook추가로 인한 수정
dmsrud1218 6e22753
Revert "Chore : storybook추가로 인한 수정"
dmsrud1218 5ff6bba
Chore : 폴더 구조 설정 및 추가
dmsrud1218 0426e3e
Remove : 사용하지 않을 폴더 삭제
dmsrud1218 905bc6e
docs : readme 추가 및 수정
dmsrud1218 c37ab45
feat(button.stories) 추가
dmsrud1218 3cac1de
README.md 수정
dmsrud1218 e90d97a
Doce : README.md 수정
dmsrud1218 79131b1
feat: CRA 기반으로 프로젝트 재생성
dmsrud1218 9209375
feat: 절대경로 alias 설정
dmsrud1218 8fb00e7
ESLint 추가
dmsrud1218 1b2fc46
feat: prettier 추가
dmsrud1218 0f914e9
feat : 추가 설정
dmsrud1218 6c4fa0a
feat : gitignore추가
dmsrud1218 9eafcd4
Remove : 불필요한 파일 제거
dmsrud1218 7f2907e
Remove :불필요한 파일 삭제 및 정리
dmsrud1218 2734432
Remove : 불필요한 파일 지우기
dmsrud1218 066ae32
feat : 절대경로 추가설정
dmsrud1218 bac1dca
feat : 스토리 추가 및 설정
dmsrud1218 a2083ac
재제출 test
dmsrud1218 7727111
재제출 추가 설치
dmsrud1218 2289298
Chore : 주석설명 달기추가
dmsrud1218 5f606b6
Chore : 코드 수정
dmsrud1218 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
module.exports = { | ||
env: { | ||
browser: true, | ||
es2021: true, | ||
node: true, | ||
}, | ||
extends: [ | ||
'plugin:@typescript-eslint/recommended', | ||
'airbnb/hooks', | ||
'airbnb-typescript', | ||
'prettier', | ||
'plugin:storybook/recommended', | ||
], | ||
parser: '@typescript-eslint/parser', | ||
parserOptions: { | ||
project: './tsconfig.json', | ||
ecmaFeatures: { | ||
jsx: true, | ||
}, | ||
ecmaVersion: 'latest', | ||
sourceType: 'module', | ||
}, | ||
plugins: [ | ||
'react', | ||
'@typescript-eslint', | ||
'react-hooks', | ||
'json-format', | ||
'simple-import-sort', | ||
'@emotion', | ||
'prettier', | ||
], | ||
rules: { | ||
'react/react-in-jsx-scope': 'off', | ||
'simple-import-sort/imports': 'error', | ||
'simple-import-sort/exports': 'error', | ||
'@typescript-eslint/consistent-type-imports': 'warn', | ||
'@typescript-eslint/no-unused-vars': [ | ||
'error', | ||
{ | ||
argsIgnorePattern: '^_', | ||
}, | ||
], | ||
'import/extensions': ['off'], | ||
'import/no-extraneous-dependencies': ['off'], | ||
'react/jsx-filename-extension': [ | ||
'warn', | ||
{ | ||
extensions: ['.tsx', '.js', '.jsx'], | ||
}, | ||
], | ||
'@typescript-eslint/no-use-before-define': ['off'], | ||
}, | ||
ignorePatterns: ['**/build/**/*', '.eslintrc.js', 'craco.config.js'], | ||
settings: { | ||
'import/resolver': { | ||
typescript: {}, | ||
}, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
/.vscode | ||
/node_modules | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"singleQuote": true, | ||
"semi": true, | ||
"tabWidth": 2, | ||
"trailingComma": "all", | ||
"printWidth": 100, | ||
"arrowParens": "always" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import type { StorybookConfig } from '@storybook/react-webpack5'; | ||
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; | ||
import path from 'path'; | ||
|
||
const config: StorybookConfig = { | ||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
addons: [ | ||
'@storybook/addon-links', | ||
'@storybook/addon-essentials', | ||
'@storybook/preset-create-react-app', | ||
'@storybook/addon-onboarding', | ||
'@storybook/addon-interactions', | ||
], | ||
webpackFinal: async (config) => { | ||
config.resolve?.plugins?.push( | ||
new TsconfigPathsPlugin({ | ||
configFile: path.resolve(__dirname, '../tsconfig.json'), | ||
}), | ||
); | ||
|
||
return config; | ||
}, | ||
framework: { | ||
name: '@storybook/react-webpack5', | ||
options: { | ||
builder: { | ||
useSWC: true, | ||
}, | ||
}, | ||
}, | ||
docs: { | ||
autodocs: 'tag', | ||
}, | ||
staticDirs: ['../public'], | ||
}; | ||
export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import type { Preview } from '@storybook/react'; | ||
import '@/styles'; | ||
|
||
const preview: Preview = { | ||
parameters: { | ||
actions: { argTypesRegex: '^on[A-Z].*' }, | ||
controls: { | ||
matchers: { | ||
color: /(background|color)$/i, | ||
date: /Date$/i, | ||
}, | ||
}, | ||
}, | ||
}; | ||
|
||
export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,41 @@ | ||
# react-gift-react-foundation | ||
FE 카카오 선물하기 1주차 과제: React 기초 | ||
|
||
## Requirements | ||
- Create React App을 기반으로 프로젝트를 생성 | ||
- Typescript로 프로젝트가 동작되게 세팅하고, 절대 경로로 Import 할 수 있게 alias를 설정 | ||
- tsconfig에 어떤 항목들로 구성되어 있는지 살펴보고, 필요하다 생각되는 설정들이 있다면 자유롭게 작성 | ||
- ESLint, Prettier를 추가하고 본인만의 Lint 룰을 세팅하기 ( 가장 대표적인 룰은 eslint-config-airbnb이지만 꼭 적용할 필요는 없다) | ||
- emotion 스타일 라이브러리를 추가하고, reset css를 적용 | ||
- gitignore를 추가하고, 프로젝트에 불필요한 코드들은 정리 (ex. 사용하지 않는 icon 등) | ||
- 본인만의 폴더 구조 기준을 세우고 반영하기 | ||
- 본인만의 기준으로 일관된 코드를 작성 | ||
- 기능 단위로 나누어 커밋 | ||
|
||
### 폴더구조 | ||
src/ | ||
├── assets/ //로컬 환경의 이미지들 | ||
├── components/ //공용으로 쓰이는 react 컴포넌트 | ||
├── hooks/ //React hooks | ||
├── interfaces/ //typescript 의 type | ||
├── pages/ //각 페이지별 컴포넌트들 | ||
├── services/ //api관련, 통신관련 | ||
├── stores/ //상태관리 | ||
├── styles/ //공용으로 쓰이는 스타일 | ||
├── utils/ //유틸리티 함수들 | ||
├── App.tsx | ||
└── index.tsx | ||
|
||
## 1주차 질문 | ||
1. webpack은 무엇이고 어떤 역할을 하고 있나요? | ||
JavaScript 애플리케이션을 위한 정정 모듈 번들러 입니다. | ||
-> 정적 모듈 번들러 : HTML, CSS, Javascript 등 웹 애플리케이션을 지원하는 각각의 모듈을 병합된 하나의 결과물로 만드는 도구 | ||
|
||
2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요? | ||
JSX는 자바스크립트의 JS와 XML의 X를 합친 말이며 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장입니다. | ||
브라우저는 JSX를 해석하지 못하기 때문에 바벨이라는 도구를 사용하여 JSX를 변환 컴파일링 해주어야 합니다. | ||
Comment on lines
+34
to
+36
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요? | ||
useState, useEffect 등을 이용해서 State를 관리합니다. | ||
- 컴포넌트에서 상태는 useState를 사용하여 관리하고, 상태를 여러 형태로 변경해서 사용해야하면 useReducer를 사용하여 관리합니다. | ||
이처럼 여러방법을 이용해서 상태변화를 체크해줍니다. | ||
Comment on lines
+38
to
+41
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 요것은 참 많은 내용이 얽혀있다고 생각하는데요, 조금 더 고민할 거리라면... 상태가 변화하면 무슨 일이 벌어질까요? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
const path = require('path'); | ||
|
||
module.exports = { | ||
webpack: { | ||
alias: { | ||
'@': path.resolve(__dirname, 'src'), | ||
}, | ||
}, | ||
}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
사실 이 질문은 파고 들어가면 한참 걸리는 내용이긴 합니다.
아래 두 가지 질문에 대한 대답을 생각해 보시면 조금 더 깊이있게 공부하실 수 있을 것 같아요!