[waffle] Triple-Jack 팀 중간정리 - Frontend

프레임워크 : React

 

React 선정이유 : 웹개발을 처음 배울 때 React를 수강했기 때문에 별다른 이유는 없었습니다.

 

진행과정 

• 1. Html, Css 구성
• 2. 페이지 구성, 라우트  
• 3.React Hook 작성
• 4. AJAX 통신

큰 진행과정은 위와 같습니다 .

 

웹개발을 처음 해보는 과정이라 서툰 부분이 엄청 많았고 고생했던 부분이 많았습니다 .

 

Html, Css 구성

html,css는 처음 웹페이지를 개발해보기 때문에 보편적으로 쓰는 속성을 썼는지는 모르겠습니다. 

모바일, PC에서도 사용하기 위해 미디어쿼리를 사용했습니다.

 

대표적으로 로그인 페이지 입니다.

그리고 폼 속성을 사용하지 않았었는데 폼 속성을 사용하는 중에 이점이 엔터키로 입력을 받을 수 있었습니다.

 

 

 

 

미디어 쿼리를 사용하고, flex 속성을 이용해서 자동으로 크기가 늘어났다 줄어드는 걸 만들었습니다.

 

 

위 사진은 모바일 사이즈, 아래 사진은 PC 사이즈 입니다.

 

페이지 구성, 라우트

일단 기초 페이지는 로그인, 홈, 탑승자, 운전자, 가입화면으로 구성되어 있습니다 .

 

그에 맞게 라우팅 시켜주었습니다.

 

그리고 컴포넌트화 시켜서 보기 쉽고 간편하게 줄였습니다 .

 

React Hook 작성

useState를 가장 많이 사용했지만 너무 많아서 useEffect만 설명하겠습니다.

회원 가입 과정을 만드는 과정중에 모든 정규식 조건을 만족하게 되면 가입하기
버튼이 활성화 됩니다.

 

하지만 그 변경상태를 useEffect에 의존성배열 특징을 활용하여 체크하고 모든 정규식을 

만족하면 가입하기를 활성화 시키게 만들었습니다.

const navigate = useNavigate();

useEffect(() => {

if (numberState && idState && pwState && isPwcheck) {

setSignUpCheck(false);

} else {

setSignUpCheck(true);

}

}, [numberState, idState, pwState, isPwcheck]); //모든 인풋칸에 맞는 값일 때 가입버튼 활성 변수

입력을 할때마다 useState로 인해 상태가 바뀌고 useEffect가 체크

 

AJAX 통신

저는 axios 라이브러리를 사용하여 보다 간편하게 작성하였습니다.

 

처음 사용해보는 거라서 API가 무엇인지도 몰랐고, API를 효율적으로 사용하기 위해 
apis.js 라는 객체 생성 파일도 만들었습니다 .

 

처음 웹을 공부하고 개발하는 과정이라 서투른 부분이 많아서 걱정이 되기도 합니다.

아무래도 배운만큼 보이겠지만 지금으로는 많이 부족한 것 같습니다.

 

특히, 웹개발을 하면서 동기,비동기의 중요성을 크게 깨닫는 중간 정리가 된 것 같습니다 .