[React] 리액트 form 태그 라이브러리 사용하여 회원가입 구현 react-hook-form 사용하기

회원가입 기능을 구현하려고 했을 때 form 태그를 사용하면 필요한 데이터, 사용자가 입력한 데이터만 쏙쏙 빼서 데이터를 정제하고 서버로 전달할 수 있습니다. 매우 편리한 태그입니다. 이 태그를 react에 맞춰진 라이브러리를 찾아보다가 react-hook-form을 찾게 되었습니다.React Hook Form이라고 해서 React에서 자체 지원해주는 hook인줄 알았는데 아니에요. react-hook-form이라는 라이브러리를 install 해서 사용하는 겁니다. React의 장점 중 하나는 라이브러리의 세계가 넓습니다. https://react-hook-form.com/get-started Get StartedPerformant, flexible and extensible forms with easy..

• format_list_bulleted 프론트/React Native, React
• · 2024. 11. 24.
• textsms

[오픈소스] React 프로젝트에서 사용할 만한 오픈소스와 라이브러리 10가지

오늘은 React 프로젝트에서 자주 사용하는 오픈소스와 라이브러리를 알아보려고 합니다.React 프로젝트를 시작하면서 프론트엔드를 맡게되었는데 프로젝트를 할 때마다 디자이너의 중요성을 세삼 느끼게 됩니다. 디자이너의 유무에 따라서 프로젝트의 퀄리티도 달라지고 사용자 로직에서도 더 편리함을 느낄 수 있다고 생각합니다.그래서 디자이너가 없을 땐 어떻게 해야하나 싶은데 아무래도 색감과 애니메이션이라고 생각합니다.그래서 오늘은 React 반응형 프로젝트에서 사용할 수 있는 오픈소스나 라이브러리를 알아보겠습니다. 자료아래의 자료에 따라서 어떤 오픈소스, 라이브러리가 있는지 알아보겠습니다 (이미 알고 있거나 유명한 것은 예외처리해두었습니다)참고한 자료는 아래와 같습니다. https://www.bloter.net/n..

• format_list_bulleted 프론트/React Native, React
• · 2024. 11. 13.
• textsms

[React] React Hook useReducer 파헤치기, useReducer란?(Typscript)

React로 개발할 때면 항상 Hook의 다양성을 몰라 개발의 효율성이 떨어지는 걸 느낄 수 있었습니다..그래서,React Hook을 파헤쳐보고 알아가면서 프로젝트를 진행하고 있습니다! 그와 동시에 알아가면 좋은(거의 모든) hook들을 공부하며 블로그에 정리해보려고 합니다. 오늘은 useReducer라는 것을 알아보겠습니다.   React Hook이란,React 컴포넌트에서 계속 발전되고 업데이트 되고 있는 다양한 React 기능을 사용할 수 있습니다. 내장된 Hook을 이용하거나  이를 결합하여 자신만의 Hook을 만들 수 있습니다.React Hook은 종류가 다양해서 알면 알 수록 신기하고 프로젝트의 효율성을 더 높힐 수 있을 거라고 생각합니다.종류는 다양한데 대표 Hook 들입니다.1. State..

• format_list_bulleted 프론트/React Native, React
• · 2024. 11. 7.
• textsms

[리액트] 리액트(React)의 사용 이유와 장단점

면접 연습을 하면서 면접을 많이 보러 다녔던 친구에게 면접 질문 목록을 받았답니다.. 프론트, 백, 클라우드, SQL 등 총 45개 정도 있어서 하나하나 공부하고 외우면서 포스팅도 함께할 겁니당 React란? 리액트(React)는 페이스북에서 제공해주는 프론트엔드 라이브러리입니다. 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 리액트(React)는 웹 페이지의 복잡한 UI를 효과적으로 관리하기 위해 개발되었으며, "컴포넌트"라는 개념을 중심으로 설계되었습니다. 리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였습니다. 2013년 5월에 오픈 소스화 되었습니다! 현재 많이 활용되고 있는 프론트엔드 프레임워크 중 Top 3안에 든답니다. React 특징 ..

• format_list_bulleted 프론트/React Native, React
• · 2023. 10. 10.
• textsms

[리액트 네이티브] non-std C++ exception error 해결하는 방법

non-std C++ exception 이라는 에러가 뜨면 당황할 것이다. 아까까지 잘되던 애플리케이션이 갑자기 C++에러라니 계속 리로드를 해도 같은 오류가 발생했다... 그래서 뤼튼 한테 물어봤다! https://wrtn.ai/share/fu24S41eoj react native 코드를 짜다가 non-std C++ exception이런 오류가 발... - 뤼튼 "non-std C++ exception" 오류는 C++ 예외 처리 메커니즘이 예상되지 않은 예외를 throw 한 경우 발생합니다. React Native는 JavaScript 코드를 실행하는 데 사용되는 기술이므로, 이 오류는 React Native 자체에서 wrtn.ai 뤼튼은 전체코드를 봐야한다고 했지만,, 내가 짠 코드의 파일은 한두개가..

• format_list_bulleted 프론트/React Native, React
• · 2023. 8. 9.
• textsms

[리액트네이티브] react-native 체크 박스 만들기 (Expo)

checkbox 공식 문서 https://docs.expo.dev/versions/latest/sdk/checkbox/ 위 링크에 들어가서 snack 실행해보면서 확인 Normal checkbox 이 코드를 사용함 1. install 하기 npm install expo-checkbox 2.useState ture / false값으로 set해야함 const [isChecked, setChecked] = useState(false); 3. section css를 확인 section: { flexDirection: 'row', alignItems: 'center', }, 4. paragraph, checkbox css 확인 paragraph: { fontSize: 15, }, checkbox: { margin..

• format_list_bulleted 프론트/React Native, React
• · 2023. 7. 9.
• textsms