Docker에 Local Maria DB 구동 https://duckgugong.tistory.com/220 개발환경 백엔드 개발툴 - IntelliJ http://www.jetbrains.comwww.jetbrains.com/idea/download/#section=windows Download IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrains Download the latest version of.. duckgugong.tistory.com 우선 위에 있는 링크에 들어가서 docker desktop와 datagrip을 설치한 후에 power shell에서 아래 명령어를 입력해서 mariadb를 설치하자. # mariadb 이미지 다운로드. 최..

백엔드 개발툴 - IntelliJ http://www.jetbrains.comwww.jetbrains.com/idea/download/#section=windows Download IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrains Download the latest version of IntelliJ IDEA for Windows, macOS or Linux. www.jetbrains.com IntelliJ IEDA는 자바 + 웹 개발이 합쳐진 툴이다. 위 링크를 들어가서 다운받자. DB 접속 툴 - DataGrip www.jetbrains.com/datagrip/ DataGrip: The Cross-Platform IDE for Database..

Yup? Yup은 Form의 validation 검사를 하기 위한 라이브러리이다. 특히, 리액트에서 formik + yup을 사용해서 dynamic form과 validation을 쉽게 할 수 있다. Yup은 yup formatted object(우리의 데이터와 닮은 객체)를 생성한 후, utility function을 통해서 우리의 데이터와 formatted object가 매치되는지 확인하며 validation을 확인한다. 만약 사용자가 아래와 같은 양식처럼 데이터를 전송해야 한다고 하자. { name: string [필수값], age: int [필수값], email: email [필수값], } 이를 검증할 yup schema object는 아래와 같다. const validationSchema = Y..

Formik? React로 웹을 만들다보면 우리는 사용자에게 다양한 인풋을 받게 된다. 이때 모든 인풋을 각각의 state로 관리하면 코드가 매우 지저분해질 수도 있다. Formik을 사용하면 이러한 form에 대한 state관리가 굉장히 편해진다! (나는 리덕스로 dynamic form을 만드려고 삽질을 했었다..) Formik은 리액트 폼의 세가지 어려운 부분을 쉽게 처리할 수 있도록 도와준다! form 상태의 안밖에서 값 가져오기 유효성 검증 및 에러 메시지 폼 제출 조작 우선, 아래 명령어를 이용하여 formik을 설치하자. // npm npm install formik --save // yarn yarn add formik https://formik.org/ Formik React hooks a..

Why use? 자식 컴포넌트에서 이벤트를 발생시키지 않고 부모 컴포넌트에서 이벤트를 발생시켜서 자식 컴포넌트의 이벤트를 발생시켜서 데이터를 가져오려면 어떻게 해야할까? 부모 컴포넌트에서 ref를 만들어서 자식 컴포넌트에게 props로 넘겨주면 되지 않을까? 하지만 리액트에서 특수한 prop인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다. 이를 위해서는 몇 가지 hooks가 필요하다. React.forwardRef 리액트에서 특수한 props인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다. HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 한다. React 컴포넌트를 f..

미리 해야할 일 1. Redux와 React 프로젝트 연결 우선 아래 깃허브에서 Redux 모듈을 연결한 React 프로젝트를 설치하자. https://github.com/ejzl521/React_Redux-Router GitHub - ejzl521/React_Redux-Router: 리액트 Redux&Router 템플릿 리액트 Redux&Router 템플릿. Contribute to ejzl521/React_Redux-Router development by creating an account on GitHub. github.com 혹은 아래 코드를 붙여넣기하고 필요한 라이브러리를 설치하자 redux/module/bucket.js 리덕스 모듈 // Action const LOAD = 'bucket/LOA..