flex
를 사용하지 않더라도 각 요소의 width 값을 100%로 주면 자동적으로 세로 정렬이 만들어진다. 불필요하게 flex
를 사용해주지 않아도 된다.
<p>
의 경우 블록 레벨 요소이다. MDN에서 해당 요소에 대한 설명이다.
"블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다."
즉, width
값을 100%로 지정하지 않아도 100%를 차지한다. 만약 position 속성에 따라 조절이 필요하다면 그럴 때는 해줄 수 있으나 나의 현재 코드에서는 무의미하다는 리뷰를 받았다. width
값을 적지 않아 css
가 제대로 먹지 않았던 경험 때문에 무조건 값을 입력해버리는 경향이 있는 것 같다. 불필요한 상황이라면 사용하지 않는 조금 더 유연하고 css 작성도 신경써서 해야겠다는 생각이 들었다.
id
와 password
의 input
값을 state
로 관리한다.checkedValid
라는 유효성체크 함수를 만들고 button
의 disabled
속성을 컨트롤 하도록 작성하였다.function Login() {
const [isIdValid, setIsIdValid] = useState('');
const [isPwValid, setIsPwValid] = useState('');
const navigate = useNavigate();
const goToMain = () => {
navigate('/main-haesoo');
};
const handleIdChange = event => {
const { value } = event.target;
setIsIdValid(value);
};
const handlePwChange = event => {
const { value } = event.target;
setIsPwValid(value);
};
const checkedValid = () => {
return isIdValid.includes('@') && isPwValid.length > 6 ? false : true;
};
const handleEnter = event => {
if (checkedValid && event.key === 'Enter') return fetchData();
};
const fetchData = () => {
fetch('http://10.58.3.173:8000/users/signup', {
method: 'POST',
}
}
// Do something..
return (
<div className=login>
<button
disabled={checkedValid()}
onClick={fetchData}
className="login-button"
type="button"
>
state
에서 id
와 password
를 관리한다.id
와 password
각각에 접근해 변하는 값을 state에 할당해 줄 수 있다.truthy
한 값 또는 falsy
한 값을 리턴한다. 그 자체를 변수안에 넣어 Boolean
값을 가지게 해주어 바로 disabled
속성에 사용해준다. function Login() {
const [input, setInput] = useState({
id: '',
password: '',
});
const inputValue = event => {
const { name, value } = event.target;
setInput({ ...input, [name]: value });
};
const isFormValid = input.id.includes('@') && input.password.length > 6;
const navigate = useNavigate();
const goToMain = () => {
navigate('/main-haesoo');
};
const handleEnter = event => {
if (isFormValid && event.key === 'Enter') return fetchData();
};
// Do something ...
return (
<div className=login>
<button
disabled={!isFormValid}
onClick={fetchData}
className="login-button"
type="button"
>
const fetchData = () => {
fetch('http://10.58.3.173:8000/users/signup', {
method: 'POST',
body: JSON.stringify({
const FETCH_URL = 'http://10.58.6.234:8000/users/login';
const fetchData = () => {
fetch(FETCH_URL, {
method: 'POST',
body: JSON.stringify({
Data의 URL 주소와 같은 string으로 사용되는 부분은 변수에 저장해주고 해당 변수를 사용해주면 주소가 바뀌더라도 해당 변수의 내용만 바꿔주면 되기 때문에 유지보수 측면에서 이점이 있다.
함수 내부에 TAG_LIST객체가 들어가 있다. 이럴 경우 함수가 호출될 때마다 객체도 함께 호출되게 된다. 객체는 함수 밖으로 빼줘서 불필요한 동작을 줄인다.
export default function Aside() {
const TAG_LIST = [
{ id: '1', content: '소개 ・ ' },
{ id: '2', content: '도움말 ・ ' },
{ id: '3', content: '홍보 ・ ' },
{ id: '4', content: '개인정보처리방침 ・ ' },
{ id: '5', content: '약관 ・ ' },
{ id: '6', content: '위치 ・ ' },
{ id: '7', content: '인기 ・ ' },
{ id: '8', content: '계정 ・ ' },
{ id: '9', content: '해시태그 ・ ' },
];
return (
<aside className="info-container">
const TAG_LIST = [
{ id: '1', content: '소개 ・ ' },
{ id: '2', content: '도움말 ・ ' },
{ id: '3', content: '홍보 ・ ' },
{ id: '4', content: '개인정보처리방침 ・ ' },
{ id: '5', content: '약관 ・ ' },
{ id: '6', content: '위치 ・ ' },
{ id: '7', content: '인기 ・ ' },
{ id: '8', content: '계정 ・ ' },
{ id: '9', content: '해시태그 ・ ' },
];
export default function Aside() {
return (
<aside className="info-container">