이전 포스트에서 useForm을 활용해서 로그인을 구현하였다. useForm 사용하여 로그인 & 회원가입 구현 - 1.로그인 기존 프로젝트의 회원가입 & 로그인은 아래와 같이 global state로 유저 email, 비밀번호, 이름 등의 정보를 관리하여 한번에 signup 혹은 login API를 호출할 때, body에 json 형태로 담아 호출하는 방식으로 eight20.tistory.com 회원 가입 페이지의 경우, 한 페이지에 모든 유저 정보를 기입하게 Form을 구성하고, 회원 가입 클릭 시, 유저가 기입한 정보를 json 형식으로 전송하는 방식과, 여러 페이지에 걸쳐서 email, password 따로, 유저 이름, 휴대폰 번호등의 세부 정보를 따로 받는 방식의 두 가지 형태로 구분된다. 한 ..
React에서 useState로 Array 타입을 관리하다보면, array에 요소를 추가하거나 삭제해야되는 경우가 있다. 추가하는 경우, 아래와 같이 array.concat()을 활용하거나, setArray([...array, 추가할 요소)]의 방식을 사용한다. const addArray = (item: any) => { array.concat(item); } 삭제하는 경우, 아래와 같이 array.filter를 사용하여 요소를 삭제한다. const deleteResource = async (id: number) => { array.filter((i) => i !== id); // id와 다를 경우, 삭제한다. };
기존 프로젝트의 회원가입 & 로그인은 아래와 같이 global state로 유저 email, 비밀번호, 이름 등의 정보를 관리하여 한번에 signup 혹은 login API를 호출할 때, body에 json 형태로 담아 호출하는 방식으로 진행하였다. //ridge.ts export const signupState = newRidgeState({ email: '', password: '', name: '', username: '', hiddenUsername: '', description: '', }); //signupPage.tsx const SignUpPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] ..
개발/ReactJS 2021. 11. 10. 08:20
이전 포스트에서 useForm을 활용해서 로그인을 구현하였다. useForm 사용하여 로그인 & 회원가입 구현 - 1.로그인 기존 프로젝트의 회원가입 & 로그인은 아래와 같이 global state로 유저 email, 비밀번호, 이름 등의 정보를 관리하여 한번에 signup 혹은 login API를 호출할 때, body에 json 형태로 담아 호출하는 방식으로 eight20.tistory.com 회원 가입 페이지의 경우, 한 페이지에 모든 유저 정보를 기입하게 Form을 구성하고, 회원 가입 클릭 시, 유저가 기입한 정보를 json 형식으로 전송하는 방식과, 여러 페이지에 걸쳐서 email, password 따로, 유저 이름, 휴대폰 번호등의 세부 정보를 따로 받는 방식의 두 가지 형태로 구분된다. 한 ..
개발/ReactJS 2021. 11. 6. 08:20
React에서 useState로 Array 타입을 관리하다보면, array에 요소를 추가하거나 삭제해야되는 경우가 있다. 추가하는 경우, 아래와 같이 array.concat()을 활용하거나, setArray([...array, 추가할 요소)]의 방식을 사용한다. const addArray = (item: any) => { array.concat(item); } 삭제하는 경우, 아래와 같이 array.filter를 사용하여 요소를 삭제한다. const deleteResource = async (id: number) => { array.filter((i) => i !== id); // id와 다를 경우, 삭제한다. };
개발/ReactJS 2021. 11. 4. 08:20
기존 프로젝트의 회원가입 & 로그인은 아래와 같이 global state로 유저 email, 비밀번호, 이름 등의 정보를 관리하여 한번에 signup 혹은 login API를 호출할 때, body에 json 형태로 담아 호출하는 방식으로 진행하였다. //ridge.ts export const signupState = newRidgeState({ email: '', password: '', name: '', username: '', hiddenUsername: '', description: '', }); //signupPage.tsx const SignUpPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] ..
개발/ReactJS 2021. 11. 3. 08:20
이미지나 div 컨테이너 혹은 p태그를 상위 컨테이너 안의 중앙으로 정렬하고 싶을 때, 원래는 flex flex-col align-center... 와 같이 길게 작성하여야 된다. grid place-items-center면 중앙 정렬이 다 해결된다