Conversation
| @@ -3,6 +3,7 @@ module.exports = { | |||
| content: [ | |||
| "./pages/**/*.{js,ts,jsx,tsx}", | |||
| "./components/**/*.{js,ts,jsx,tsx}", | |||
| "./src/**/Components/**/*.{js,ts,jsx,tsx}" | |||
There was a problem hiding this comment.
tailwind.config.js 파일 내의 content는 Tailwind CSS 클래스가 포함된 경로나 파일을 지정하는 역할을 합니다.
이때 정규 표현식을 사용하여 지정된 경로나 파일을 포함시키게 됩니다.
그리고 정규 표현식에서 "./pages/**/*.{js, ts, jsx, tsx}"를 이용해 의미를 설명하고 content 내부를 수정해 보겠습니다.
./page현재 디렉토리의 pages 폴더를 가리킴.**모든 하위 디렉토리를 의미하며, pages 폴더 아래의 모든 디렉토리를 의미함.*.{js, ts, jsx, tsx}js, ts, jsx, tsx 중 하나의 확장자를 가진 파일을 의미함.
이를 통해 content 내부를 수정해 보겠습니다.
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}"
],위 코드처럼 작성하시거나 아래처럼 작성해 주시면 됩니다.
content: [
"./{pages,src}/**/*.{js,ts,jsx,tsx}"
]
There was a problem hiding this comment.
https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles
위 문서를 참고해서 기본 스타일을 추가하는 경우 base layer를 사용해 보도록 해보세요.
layer를 사용하면 CSS의 우선순위 문제를 해결하는 데 도움이 됩니다.
CSS는 기본적으로 나중에 선언된 스타일이 우선 적용이 되지만 layer를 사용하면 그러한 문제를 해결하는 데 도움을 줄 수 있습니다.
아래의 글들을 참고해서 css layer에 대한 개념을 학습해 보시면 앞으로 많은 도움이 되실 것 같습니다.
https://medium.com/appwrite-io/css-layers-for-css-resets-f60f270aa1cd
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
There was a problem hiding this comment.
추가로 tailwind에 기본적으로 제공되는 3가지 레이어에 대해 설명드리겠습니다.
- base: 기본 스타일을 재설정하거나, HTML 요소에 대한 기본 스타일을 설정합니다.
- components: 재사용 가능한 클래스 패턴을 정의합니다.
- utilities: Tailwind CSS의 유틸리티 클래스를 생성합니다.
작성하는 스타일의 특성에 따라 각각의 레이어에 작성해주시는게 좋습니다.
| const CardSection = ({links} : {links:LinkType[]}) => { | ||
| return( | ||
| <section className={style['card--section']}> | ||
| {links?.map((link) => <LinkCard key={link.id} link={link} />)} |
There was a problem hiding this comment.
지금 links는 타입을 확인했을 때 필수 값으로 보입니다.
links에 값이 없을 때 에러를 방지하고자 옵셔널 체이닝을 사용하셨지만 현재 links는 LinkType[]으로 명시되어 있습니다.
이런 경우에 옵셔널 체이닝을 제거하시는게 좋을 것 같습니다.
| <div className={style['info']}> | ||
| <p className={style['copyright']}>©codeit - 2023</p> | ||
| <div className={style['privacy-faq']}> | ||
| <a href="./privacy.html" className={style['privacy']}>Privacy Policy</a> |
There was a problem hiding this comment.
a 태그가 아니라 next의 link를 사용하도록 개선해 주세요.
a 태그를 직접적으로 사용하시게 된다면 next의 link가 지원하는 기능들을 사용하실 수 없습니다.
| @@ -1,11 +1,11 @@ | |||
| import style from '../styles/AddLinkForm.module.css'; | |||
| import style from './AddLinkForm.module.css'; | |||
There was a problem hiding this comment.
css module을 사용할 때 보통 styles로 불러옵니다.
그 이유는 하나의 스타일을 담고 있는 것이 아니라 복수의 스타일을 담고 있다는 의미 때문인데요.
그렇기 때문에 style보다 styles라고 하는 게 더 옳을 수 있습니다.
|
질문 주신 내용에 좀 더 집중하면서 답변드리는 것이 좋을 것 같아서 그 부분에 대해 답변드리겠습니다. 질문. 답변. atomic pattern에 따르면 UI와 관련된 로직만이 PasswordInput 컴포넌트 내부에 있어야 하는데요. 그렇다면 비즈니스 로직의 두 기능은 어디에 위치하는 게 좋을까 생각해 보실 수 있는데요. SignupForm 혹은 SigninForm이라는 각각의 컨테이너에서
만약 onChange 이벤트를 이용해 로직을 작성하게 된다면 아래와 같이 작성해 볼 수 있겠네요. const isValidPassword = (password: string) => true;
const TestForm = () => {
const [formState, setFormState] = React.useState({
email: "",
password: "",
passwordConfirm: "",
});
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) =>
setFormState((prev) => ({ ...prev, email: event.target.value }));
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const {
currentTarget: { value },
} = event;
if (isValidPassword(value))
setFormState((prev) => ({ ...prev, password: value }));
};
const handlePasswordConfirmChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const {
currentTarget: { value },
} = event;
if (isValidPassword(value))
setFormState((prev) => ({ ...prev, passwordConfirm: value }));
};
return (
<form>
<input
type="email"
value={formState.email}
onChange={handleEmailChange}
/>
<input type="password" onChange={handlePasswordChange} />
<input type="password" onChange={handlePasswordChange} />
{formState.password !== formState.passwordConfirm && (
<p>패스워드가 일치하지 않습니다.</p>
)}
</form>
);
}; |
|
위의 답변처럼 코드가 작성된다면 로그인 페이지와 회원가입 페이지가 같은 인풋 컴포넌트들을 공유하게 됩니다. |
요구사항
기본
12주차
13주차
심화
주요 변경사항
스크린샷
멘토에게