yeeed_log

로그인 창을 구현할 때 우리는 input을 이용하여 사용자의 정보를 입력받습니다. 이 과정에서 사용자의 입력정보가 유효한 정보인지 확인하기 위해 상태 값(state)을 만들어 일일이 체크를 해줘야만 했습니다. input이 몇 개 없다면 이러한 방법으로 유효성검사를 하는 것이 나쁘지 않아 보일 수도 있습니다. 하지만 검사해야하는 input이 여러 개라면 어떨까요? 회원가입과 같은 확인해야 하는 사용자의 정보가 많아짐에 따라 각 input을 관리하는 상태 값들 또한 많아지게 됩니다. form validation까지 한다면 더욱더 관리해야 하는 상태 값은 늘어나게 될 것입니다. 이러한 문제를 해결하기 위해 react-hook-form 이라는 라이브러리를 사용해 볼 수 있습니다. 이 글은 react-hook-f..

리액트에서 조건문 사용하는 방법 알아보기. 개발을 하다 보면 조건문을 사용하는 경우가 아주 많은데 나의 경우 JSX에서 if문, switch문으로 조건문을 사용하려 하니 오류가 났다. JSX에서 조건문 사용하기 상황 발생 - map메서드를 사용해서 li 컴포넌트를 렌더링 해주고 있었는데 button 안에 name이라는 props를 받는 아이콘을 상황에 맞춰 렌더링 해주고 싶었다. Object.values(Categories).map((item, idx) => { return ( ) } 첫 번째 시도: if문 사용하기 {Object.values(Categories).map((item, idx) => { return ( if(true) aaa ) } 우선 if문이 잘 나오는지 확인하기 위해 true 값을 주..

회원가입 폼을 react-hook-form을 이용하여 개발하던 도중 만난 에러 일전에 validation을 직접 useState로 상태 관리를 하며 개발한 적이 있었는데 코드도 너무 길어지고 복잡해 보여서 간편한게 없나 찾다 리액트 훅 폼을 발견하고 적용해봤지만 적용이 되지 않았다... 정확히는 register를 사용하려했는데 register로 전달된 data값이 콘솔에 찍히지 않았다 ㅜ const Input = ({ id, type, ...props }: InputProps) => { return ; }; 내가 작성했던 Input 컴포넌트. 알고보니 register에는 onChange, onBlur, ref, name 을 props로 전달하고 있었는데 일반적인 사용법처럼 props로 register을 ..

import 경로가 신경 쓰이는 1인 리액트로 프로젝트 작업 중 import 하는 부분이 신경 쓰였다. (나만 신경 쓰이는 걸까?) 뎁스가 깊어지면 깊어질 수록 경로 참조하는 게 길어지니 너무너무너무너무 보기 싫은 것... 하지만 언제나 해결책은 있다. 찾다 보니 jsconfig.json 설정을 통해 import 경로를 설정할 수 있다고 한다! jsconfig.json 가 뭐냐고 jsconfig.json란? > 해당 프로젝트 디렉토리에 jsconfig.json 파일이 있으면 루트 디렉토리임을 명시. > 소스파일을 어떻게 해석하고 처리하는지에 대해서도 설정 가능. 여기서는 경로 설정만 다룰 예정이니 자세한 내용은 링크 참고! jsconfig.json Reference View the reference fo..

개인적인 해결 방법을 적었습니다. 문제가 있다면 댓글로 알려주세요! 문제의 시작 리액트로 작업한 결과물을 깃헙에서 제공해주는 pages기능을 이용해 배포해보고자 열심히 찾아서 빌드하고 npm run deploy.... 명령어 열심히 쳐서 배포 뙇! 했는데. ... 아무것도 나오지 않았다... 분명 내 로컬환경에서 npm start 로 실행시키면 잘만나오는데!! 왜 배포하니까 안나오는거지?! 이유를 찾다 create-react-app로 개발한 리액트 프로젝트는 기본적으로 루트(/) URL을 기준으로 프로젝트가 생성된다. GitHub는 gh-pages페이지방식이 조금 이상했다. 내깃허브아이디.github.io/페이지 이게아니라 내깃허브아이디.github.io/ 레파지토리명 / 페이지 이런 방식이었다. 그래서..