ASAC 웹풀스택 @material 사용해서 회원가입창 만들기
[ASAC 웹풀스택]
Material-UI에서는 다양한 컴포넌트를 제공하며, 이를 사용하여 회원가입 폼을 만들 수 있습니다. 일반적으로 회원가입 폼에는 다음과 같은 컴포넌트들이 필요합니다:
TextField: 사용자의 이름, 이메일 주소, 비밀번호 등을 입력받기 위한 텍스트 필드입니다.
Button: 폼 제출 버튼입니다.
FormControl, FormGroup, FormLabel, FormControlLabel, etc: 여러 입력 필드를 그룹화하고 레이블을 추가하는 데 사용됩니다.
Checkbox or Switch: 사용자 동의(예: 이용약관 동의)를 받기 위한 체크박스나 스위치입니다.
그 외에도 UI 디자인에 따라서는 Grid, Paper, Typography 등 다양한 레이아웃 및 타이포그래피 컴포넌트들이 활용될 수 있습니다.
<Grid container spacing={2}>
폼들간의 간격
<Grid item xs={6}>
입력창의 크기
<TextField> 뜻,
<TextField
variant="outlined" // 텍스트 필드 스타일을 결정합니다. "outlined"는 테두리가 있는 스타일입니다.
required // 이 속성이 있으면, 이 필드는 필수 입력 항목임을 나타냅니다. 브라우저 기본 유효성 검사에서 사용됩니다.
fullWidth // 이 속성이 있으면, 텍스트 필드가 부모 요소의 전체 너비를 차지하게 됩니다.
id="name" // 텍스트 필드의 고유 ID입니다. 라벨과 연결되며, 접근성과 CSS 스타일링에 유용합니다.
label="Name" // 텍스트 필드 위에 보여질 라벨(설명)입니다.
name="name" // 폼 제출 시 서버로 보내질 이름입니다. 서버에서 어떤 값을 참조해야 할지 결정하는 데 사용됩니다.
autoComplete="name" // 자동 완성 기능의 동작을 제어합니다. "name"은 일반적으로 사람 이름에 대한 자동 완성을 의미합니다.
/>
[ASAC 웹풀스택]
npm install next react react-dom
npm install @material-ui/core
@material-ui/core 패키지가 react의 특정 버전(^16.8.0 || ^17.0.0)을 필요로 하지만, 현재 설치된 React의 버전(18.2.0)이 그 범위에 포함되지 않아서 발생하는 문제입니다.
@material-ui/core는 Material-UI v4를 위한 패키지로, React 16 또는 17와 호환됩니다. 반면, 프로젝트에 설치된 React의 버전은 18인 것으로 보입니다.
이 문제를 해결하기 위해서는 Material-UI v5 (혹은 그 이상)를 설치하거나, React의 버전을 낮추어야 합니다.
npm install @mui/material @emotion/react @emotion/styled
먼저 현재 프로젝트에서 React와 관련된 패키지들을 제거합니다:
npm uninstall react react-dom
그리고 나서 React 17버전과 호환되는 최신 버전을 다시 설치합니다:
npm install react@17 react-dom@17
@material-ui/core/Button 모듈을 찾을 수 없다는 것을 나타냅니다. 이는 보통 해당 패키지가 설치되지 않았을 때 발생합니다.
Material-UI를 프로젝트에 설치하려면, 다음 명령어를 사용할 수 있습니다:
npm install @material-ui/core
npm install react@latest react-dom@latest
npm install --legacy-peer-deps @material-ui/core
위 명령어는 npm에게 peer dependencies 충돌을 무시하고 계속 진행하도록 지시합니다.
하지만 주의해야 할 점은 이 방법은 잠재적으로 비호환성 문제를 일으킬 수 있으므로 가능한 한 첫 번째 방법(React 버전 업그레이드)를 시도하는 것이 좋습니다.
이 오류는 Next.js에서 필요한 모듈을 찾지 못했을 때 발생합니다. 이 문제를 해결하기 위해 다음 단계를 시도해 보세요:
- node_modules 디렉토리와 .next 디렉토리를 삭제하세요. 이 두 디렉토리는 종종 문제의 원인이 될 수 있으며, 안전하게 삭제할 수 있습니다. 이들은 필요할 때 다시 생성됩니다.
rm -rf node_modules .next
- 프로젝트에 필요한 패키지들을 다시 설치하세요:
npm install
- 그 후, 프로젝트를 다시 실행해 보세요:
npm run dev
npm update @material-ui/core
npm install --legacy-peer-deps
npm install --legacy-peer-deps
만약 직접 프로젝트에 여러 버전의 React를 설치한 것이라면, 한 가지 방법은 불필요한 버전을 삭제하는 것입니다:
npm uninstall react
그 후 원하는 버전을 다시 설치합니다:
npm install react@desired-version --save
여기서 desired-version은 원하는 React버전(예: 17.0.2)을 의미합니다.
다만 주의할 점은, ReactDOM과 같은 다른 패키지들도 함께 업데이트 해야 할 수도 있다는 것입니다. 예를 들어, 만약 ReactDOM을 사용중인데 그것이 특정버전의 React와 호환되지 않다면 같은 방법으로 ReactDOM도 업데이트해야 합니다:
npm uninstall react-dom
npm install react-dom@desired-version --save
npm install react@18.2.0 react-dom@18.2.0 --save
다른 방법으로는 npm에게 이러한 충돌을 무시하도록 지시하는 것입니다:
npm install --legacy-peer-deps
또는
npm install --force
하지만 이 두 명령어는 주의해서 사용해야 합니다. --legacy-peer-deps와 --force 옵션은 종속성 트리에서 발생할 수 있는 문제를 무시하고 강제로 설치를 진행합니다.
따라서, 가능한 경우 첫 번째 방법인 필요한 버전을 직접 설치하는 것이 가장 안전합니다.
----
인텔리제이 버전 바꾸고 제설치로 성공한 부분
npm install -g next
해당 로그에 따르면 @material-ui/core 패키지가 react@^16.8.0 || ^17.0.0를 필요로 하고 있는데, 동시에 프로젝트 루트에서는 react@18.2.0이 사용되고 있다는 것을 알 수 있습니다. 이로 인해 버전 충돌로 인한 문제가 발생하고 있습니다.
해결 방법으로는 다음 중 하나를 시도할 수 있습니다:
- 의존성 업데이트: 프로젝트의 의존성 패키지를 최신 버전으로 업데이트하여 버전 충돌을 해결할 수 있습니다. package.json 파일에서 각 패키지의 버전을 조정하고, 다시 npm install 명령을 실행해보세요.
- 버전 강제 지정: 만약 프로젝트에서 특정 버전의 패키지가 필요한 경우에는, npm install 명령에 --legacy-peer-deps 옵션을 추가하여 강제로 버전 충돌을 무시하도록 할 수 있습니다. 예를 들어:
-
npm install --legacy-peer-deps
npm install --legacy-peer-deps
[ASAC 웹풀스택]
1 of 3 unhandled errors
Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Call Stack
resolveDispatcher
..\node_modules\react\cjs\react.development.js (1476:0)
Object.useContext
..\node_modules\react\cjs\react.development.js (1484:0)
useTheme
..\node_modules\@material-ui\styles\esm\useTheme\useTheme.js (4:14)
useStyles
..\node_modules\@material-ui\styles\esm\makeStyles\makeStyles.js (222:24)
WithStyles
..\node_modules\@material-ui\styles\esm\withStyles\withStyles.js (55:0)
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (16305:0)
updateForwardRef
node_modules\react-dom\cjs\react-dom.development.js (19226:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (21636:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25738:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)
npm dedupe 명령어를 실행하여 중복된 의존성을 제거하거나
[ASAC 웹풀스택] 공부 표 정리
|
<Grid item xs={10}>
|
 |
양옆 크기변경 |
|
{/* 가운데 틈공백 */}
<div style={{ height: "20px" }}></div>
|
 |
text박스 와 sign up 박스 위아래 공백만들기 |
| 정규 표현식 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes | |
| 명령어 성공부분 | ||
| npm install --legacy-peer-deps | 해당 로그에 따르면 @material-ui/core 패키지가 react@^16.8.0 || ^17.0.0를 필요로 하고 있는데, 동시에 프로젝트 루트에서는 react@18.2.0이 사용되고 있다는 것을 알 수 있습니다. 이로 인해 버전 충돌로 인한 문제가 발생하고 있습니다. 해결 방법으로는 다음 중 하나를 시도할 수 있습니다:
|
|
| npm install -g next | ||
[ASAC 웹풀스택] / 기호는 JavaScript에서 정규 표현식을 선언할 때 사용하는 기호입니다.
/ 기호는 JavaScript에서 정규 표현식을 선언할 때 사용하는 기호입니다. /로 시작해서 /로 끝나는 사이에 정규 표현식 패턴을 작성합니다.
예를 들어, 다음은 'abc'라는 문자열이 포함된 문자열을 찾는 정규 표현식입니다:
javascript
let regex = /abc/;
따라서, /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/은 숫자(\d)가 적어도 하나 있으며(?=.*\d), 소문자 알파벳(a-z)이 적어도 하나 있으며(?=.*[a-z]), 대문자 알파벳(A-Z)이 적어도 하나 있으며(?=.*[A-Z]), 전체 길이가 8 이상인 문자열(.{8,})을 찾는 정규 표현식입니다.
[ASAC 웹풀스택] 캐릭터의미 의미
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Character_classes
Character classes - JavaScript | MDN
Character classes distinguish kinds of characters such as, for example, distinguishing between letters and digits.
developer.mozilla.org
캐릭터의미
| xyz] [a-c] |
캐릭터 클래스입니다. 포함된 문자 중 하나와 일치합니다. 하이픈을 사용하여 문자 범위를 지정할 수 있지만 하이픈이 대괄호 안의 첫 번째 또는 마지막 문자로 나타나는 경우 일반 문자로 문자 클래스에 포함되는 리터럴 하이픈으로 간주됩니다. 예를 들어 는 [abcd]와 같습니다 [a-d]. 이는 "brisket"의 "b"와 "chop"의 "c"와 일치합니다. 예를 들어 "brisket"의 "b", "chop"의 "c", "non-profit"의 "-"(하이픈)을 일치시킵니다 [abcd-].[-abcd] 예를 들어 는 [\w-]와 같습니다 [A-Za-z0-9_-]. 둘 다 "brisket"의 "b", "chop"의 "c", "non-profit"의 "n"과 일치합니다. |
| [^xyz] [^a-c] |
부정되거나 보완된 문자 클래스입니다. 즉, 괄호 안에 포함되지 않은 모든 항목과 일치합니다. 하이픈을 사용하여 문자 범위를 지정할 수 있지만 하이픈이 대괄호 안의 문자 또는 마지막 문자 뒤의 첫 번째 문자로 나타나는 경우 ^일반 하이픈으로 문자 클래스에 포함되는 리터럴 하이픈으로 간주됩니다. 성격. 예를 들어 는 [^abc]와 같습니다 [^a-c]. 처음에는 "bacon"의 "o"와 "chop"의 "h"를 일치시킵니다. 참고: ^ 문자는 input 의 시작을 나타낼 수도 있습니다 .
|
| . | 다음 의미 중 하나를 갖습니다.
"dotAll" 플래그 s를 사용하면 점이 줄 종결자와도 일치할 수 있습니다. |
| \d | 모든 숫자(아라비아 숫자)와 일치합니다. . [0-9]_ 예를 들어 /\d/or는 /[0-9]/"B2가 스위트 번호입니다"의 "2"와 일치합니다. |
| \D | 숫자(아라비아 숫자)가 아닌 모든 문자와 일치합니다. . [^0-9]_ 예를 들어, /\D/or는 /[^0-9]/"B2 is the suite number"의 "B"와 일치합니다. |
| \w | 밑줄을 포함하여 기본 라틴 알파벳의 모든 영숫자 문자와 일치합니다. . [A-Za-z0-9_]_ 예를 들어 /\w/"apple"의 "a", "$5.28"의 "5", "3D"의 "3", "Émanuel"의 "m"과 일치합니다. |
| \W | 기본 라틴 알파벳의 단어 문자가 아닌 모든 문자와 일치합니다. . [^A-Za-z0-9_]_ 예를 들어 /\W/or는 /[^A-Za-z0-9_]/"50%"의 "%" 및 "Émanuel"의 "É"와 일치합니다. |
| \s | 공백, 탭, 폼 피드, 줄 바꿈 및 기타 유니코드 공백을 포함하여 단일 공백 문자와 일치합니다. . [\f\n\r\t\v\u0020\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]_ 예를 들어 /\s\w*/"foo bar"의 "bar"와 일치합니다. |
| \S | 공백이 아닌 단일 문자와 일치합니다. . [^\f\n\r\t\v\u0020\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]_ 예를 들어 /\S\w*/"foo bar"의 "foo"와 일치합니다. |
| \t | 가로 탭과 일치합니다. |
| \r | 캐리지 리턴과 일치합니다. |
| \n | 줄바꿈과 일치합니다. |
| \v | 수직 탭과 일치합니다. |
| \f | 용지 공급과 일치합니다. |
| [\b] | 백스페이스와 일치합니다. \b단어 경계 문자( ) 를 찾고 있다면 어설션을 참조하세요 . |
| \0 | NUL 문자와 일치합니다. 이 뒤에 다른 숫자를 입력하지 마세요. |
| \cX | 캐럿 표기법을 사용하여 제어 문자를 일치시킵니다 . 여기서 "X"는 A–Z(코드 포인트 U+0001– 에 해당)의 문자입니다 U+001A. 예를 들어 /\cM\cJ/"\r\n"과 일치합니다. |
| \xhh | 문자와 코드 hh(2개의 16진수)를 일치시킵니다. |
| \uhhhh | UTF-16 코드 단위를 값 hhhh(4개의 16진수)과 일치시킵니다. |
| \u{hhhh} or \u{hhhhh} | (플래그가 설정된 경우에만 ) 유니코드 값 또는 (16진수) u문자와 일치합니다 .U+hhhhU+hhhhh |
| \p{UnicodeProperty}, \P{UnicodeProperty} | 유니코드 문자 속성을 기준으로 문자를 일치시킵니다 (예: 이모티콘 문자, 일본어 가타카나 문자 또는 중국어/일본어 한/간지 문자 등과 일치). |
| \ | 다음 문자가 특별하게 처리되거나 "이스케이프"되어야 함을 나타냅니다. 두 가지 방식 중 하나로 작동합니다.
참고: 이 문자를 문자 그대로 일치시키려면 자체적으로 이스케이프 처리하십시오. 즉, \용도를 검색하는 것입니다 /\\/.
|
| x|y | 분리: "x" 또는 "y"와 일치합니다. 파이프( )로 구분된 각 구성 요소를 대체 구성 요소| 라고 합니다 . 예를 들어 "green apple"의 "green"과 "red apple"의 "red"가 일치합니다. /green|red/ 참고: 분리는 "선택 항목 집합"을 지정하는 또 다른 방법이지만 문자 클래스는 아닙니다. 분리는 원자가 아닙니다. 더 큰 패턴의 일부로 만들려면 그룹을 사용해야 합니다 . [abc]와 기능적으로 동일합니다 (?:a|b|c).
|
캐릭터 / 구성해당 기사
| [xyz], [^xyz], ., \d, \D, \w, \W, \s, \S, \t, , , , , , , , \r_ _ _ \n\v\f[\b]\0\cX\xhh\uhhhh\u{hhhh}x|y | 캐릭터 클래스 |
| ^, $, \b, \B, x(?=y), x(?!y), (?<=y)x, (?<!y)x | 주장 |
| (x), (?<Name>x), , ,(?:x)\n\k<Name> | 그룹 및 역참조 |
| x*, x+, x?, , , x{n}x{n,}x{n,m} | 수량자 |
댓글