[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

[Typescript] Typescript 웹 프로젝트 폴더 구조 정리(feat.Redux(리덕스) + 챗GPT)

이제 요구사항 모두 작성했고, 깃허브 레파지토리, 프로젝트 생성까지 마무리 했습니다. 매번 새로운 프로젝트를 확인할 때 폴더구조를 제일 먼저 보게 되는데 내 프로젝트가 아닌 이상 폴더구조를 파악하는데 시간이 오래 걸리는 편이었습니다. 물론 파악을 하는 하루 종일 걸리는 건 아니었지만, 이게 어디에 있지? 어디서 import한거지?를 찾는 데 투자한 시간이 아깝다고 느껴졌습니다. 그래서 일단 타입스크립트 프로젝트를 생성할 때 어떤 폴더구조를 찾는지 궁금했습니다. 또한 프로젝트에서 Redux(리덕스)도 사용해보고자 하며 폴더구조에 대해 알아보겠습니다. 기본적인 타입스크립트의 폴더 구조처음 프로젝트를 생성했을 때 볼 수 있는 폴더 구조 입니다.위와 같이 src/, index.html, package.json,..

• format_list_bulleted 프론트/Javascript, Typescript
• · 2024. 10. 31.
• textsms

[Redux] 리덕스란? - 리덕스 개념 및 사용방법

이번에 프로젝트를 진행하면서 리덕스를 사용해보라고 하더라구요! 근데 사용해본 경험이 없어서 이번에 정리하면서 알아보고 제대로 사용해보려고 합니다. 리덕스의 개념과 사용하는 이유, 사용 방법에 대해 알아보겠습니다 먼저..! 리덕스를 사용하기 전에 리덕스 문서를 한번 살펴봐야겠죠? 저는 사용할 때 문서를 한번이라도 꼭 읽어보는게 좋다고 생각해요 https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org Redux란? 리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 리덕스는 앱을 만들면서 상태관리할 수 있는 거라고 이야기를 들은적이 있어요. 앱의 ..

• format_list_bulleted 프론트/프론트엔드
• · 2024. 1. 21.
• textsms

[JSP] JSP에서 포워드(forward)와 리다이렉트(redirect), 특정 페이지로 이동 방법

jsp란? JSP( Java Server Pages) 란 Java 기반의 웹 애플리케이션를 생성하는 서버 사이드 스크립트 언어입니다. HTML 코드에서 Java 코드를 넣어 동적 웹 페이지를 생성하는 웹 애플리케이션 도구 입니다. JSP는 Servlet을 보다 간편하게 작성할 수 있도록 하기 위한 기술로, 실제로는 JSP 파일은 서블릿으로 변환되어 실행됩니다. ** Servelt : 웹 페이지를 동적으로 생성하기 위해 서버측 프로그램 페이지 이동방법 포워드(forward) 포워드(forward)는 현재 실행 중인 페이지와 같은 웹 애플리케이션 내의 다른 리소스를 요청을 전달하는 방식입니다. URL은 변경되지 않으며, 이미 생성된 request, response 객체가 그대로 전달 됩니다. RequestD..

• format_list_bulleted 프론트/프론트엔드
• · 2023. 10. 20.
• textsms