본문 바로가기

리액트

(3)
[React] 1. React 시작하기(2) - React의 주요 특징 1. React 시작하기(2) 리액트의 주요 특징 실전으로 들어가기 앞서 리액트의 가장 큰 특징을 알아보고 넘어 가려 한다. 1. 리액트(React)란? - React는 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용된다. - 웹, 모바일 앱 등의 view layer를 처리하는 데 사용된다. - 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다. 2. 리액트의 특징 1. 컴포넌트(Component) - 리액트는 컴포넌트 기반의 라이브러리이다. - 웹 페이지에서 컴포넌트는 화면을 이루는 작은 요소들이다. - 컴포넌트들은 여러 화면에서 사..
[React] 1. React 시작하기(1) - 환경 설정 *글 출처는 버릴것이 없는 갓대희님 글 입니다. [React] 1. React 시작하기 0. 프론트 프레임워크 선택에 대한 고찰 - React를 시작하기 앞서, 왜 리액트를 공부하기로 생각했었는지에 대해 간단히 작성 해두려 한다. - 이 부분도 상당히 길다보니, 무시하고 바로 환경 설정부터 보시려면 > [클릭] 1. 프론트 개발 언어의 변화 - 내가 알고있는 범위 한정이겠지만, 프론트 만큼 변화가 빠른 언어, 프레임워크는 없는 듯 싶다. - 데충 스쳐 지나갔던, 프론트 관련 키워드만 모아봐도 하기 예시 정도가 된다. ex) jsp, jquery, mustache, jstl, velocity, Freemarker, vanilla js, vue.js, react - 한때는 혁명이라고 생각 했던 jquery에..
[React] React Datepicker 시간 선택 커스텀 조건은 다음과 같다 - 예약 시간은 9:30-5:30 사이에 결정 (임시) - 사용 시간은 최소 30분에서 최대 2시간 * 즉, 5:00 시작이라면 5:30까지 사용 가능 정리하면, 종료 시간의 최대값은 시작 시간의 2시간 이후로 하되, 5:30을 넘어가면 안된다 React Datepicker crafted by HackerOne reactdatepicker.com 다행히도 React Datepicker의 공식문서(?)는 매우 친절해서, 수십 가지 경우의 수에 맞는 예제를 볼 수 있었다 결론적으로 구현한 코드는 다음과 같다 (SDatePicker는 DatePicker를 커스텀 한 것이고, 한글화 및 set(get)Hours 등의 함수들은 import해주면 된다) const ReserveMain = () ..