뇌 채우기 공간

이전 글 보기 1. 함수의 타입 설정하기 함수에는 파라미터와 리턴타입을 지정해주어야한다. 특히나 input, form에서의 타입을 지정해보겠다. import React, { useState } from 'react'; type MyFormProps = { onSubmit : (form : {name : string; description: string}) => void; } function MyForm({onSubmit}: MyFormProps){ const [form , setForm] = useState({ name: '', description : '' }) const {name, description} = form; const onChange = (e:React.ChangeEvent) => { c..

이제는 타입 스크립트가 대세! 타입스크립트를 사용하면 타입 추론을 개발할 때 오류를 줄여주고 코드를 작성하기 쉽게 도와준다. 전에는 리액트를 js로 작성했지만 이제는 타입스크립트로 하는 법을 배워야한다. 회사에서는 다 타입스크립트를 쓰기 때문에! 타입을 지정해주는 것이 자바에서는 당연한 것이었는데 자바스크립트에서는 이렇게 따로 뭔가 해야한다니. 처음에는 자바처럼 타입을 지정해주지 않아도 되는 점이 편리했는데 따로 타입 스크립트를 써야한다면 애초에 자바처럼 타입을 지정해두는게 더욱 편하지 않을까?! 리액트 앱을 시작할 때부터 타입 스크립트로 작성하는 것을 추천한다고 한다. 나는 타입스크립트에 대해서 지식이 거의 없기 때문에 일단 js로 구현하고 converting을 했지만 처음부터 ts로 작성하는 법을 배..

1. react hook form with yup https://codesandbox.io/s/react-hook-form-apply-validation-q5m00?file=/src/index.js react-hook-form-apply-validation - CodeSandbox react-hook-form-apply-validation by bluebill1049 using react, react-dom, react-hook-form, react-scripts codesandbox.io 2. position absolute align center position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 3. local환경에 ..

1. react table editable https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data tannerlinsley/react-table: editable-data - CodeSandbox tannerlinsley/react-table: editable-data using namor, react, react-dom, react-scripts, react-table, styled-components codesandbox.io https://react-table.tanstack.com/docs/examples/editable-data Examples: Editable Data Subscrib..

리액트에서 사용하는 라이브러리들 1. classnames https://www.npmjs.com/package/classnames https://chanhuiseok.github.io/posts/react-14/ [React] 리액트 classnames 활용하기 (classnames, !! 연산자) 컴퓨터/IT/알고리즘 정리 블로그 chanhuiseok.github.io 2. react-query https://maxkim-j.github.io/posts/react-query-preview https://merrily-code.tistory.com/76 https://blog.doitreviews.com/development/2021-08-27-react-query-tutorial-01/ 2021-08-..

1. react table https://www.daleseo.com/react-table/ React Table로 테이블 UI 구현하기 Engineering Blog by Dale Seo www.daleseo.com 2. react css https://hello-bryan.tistory.com/114 [React 따라하기 #13] React 에서 css 적용하기 React CSS 크게는 inline styling 과 .css 파일을 이용하는 방법이 있습니다. - inline styling 이용 class MyJob extends React.Component { render() { return ( Hello Style! ); } } html 에서 tag 안에 직접 s.. hello-bryan.tisto..

1. redux toolkit https://blog.woolta.com/categories/1/posts/204 redux-toolkit 을 사용해 redux 작성 하기 (createAction, createReducer, createSlice, createAsyncThunk) woolta 블로그 ver2.0 기술 개발 블로그 blog.woolta.com https://redux-toolkit.js.org/api/createslice createSlice | Redux Toolkit redux-toolkit.js.org 2. moment.js https://flamingotiger.github.io/javascript/momentjs/ 날짜 라이브러리 moment.js 사용법 시작하기날짜를 손쉽게 다룰..

1. ant design https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design ant design은 처음 써본다. 회사에서는 무조건 ui를 직접 만드는 줄 알았는데 이런 편리한 라이브러리를 사용하는구나. rules={[ { required: true, message: '이메일이 형식에 맞지 않습니다.', type: 'email', }, ]} 정말 좋은 것은 이렇게 타입을 이메일로 정하면 정규식을 직접 지정해주지 않더라도 이메일 형식 유효화 검사를 할 수 있다는 점이다! 오늘 시간 기록을 보니 대부분을 다른 사람들과 대화하는데에 썼다. 이제 실무를 해야하는데 일이 너무 없었다. 나한테 주어진..