백/프론트 연결 1

프론트 페이지 코딩을 시작하기에 앞서서, 레거시 코드를 살펴봤다.
프론트 작업 중에서 느꼈던점을 정리해 보자.

• React의 컴포넌트 구조가 관리하는게 엄청 편했다.
• 리액트 훅을 통해서 다양한 기능이 가능했다. 특히 LazyLoading 구현이 편했다.
• Typescript를 통해서 오류가 잘 안난다. 대신 배우기 엄청 힘들었다
• CSS 관리가 힘들었다. 팀장님이 알려주셨는데 첨 배우는거라 뭔지도 모르고 삽질 엄청했다.
• 자바스크립트 특유의 비동기 처리가 매우 힘들었다. Async 잘못쓰면 디버깅하는데 한참 걸린다.

다음은 페이지 구조를 복습해 보자.

import React from "react";
~~
  
interface MainProps{
 Bool_1: boolean;  
}
  

const Main: React.FC<MainProps> = ({Bool_1, B, ...}) =>{
 const navigate = useNavigate();
  ~~~
}
  
  return (
    <BackgroundAnimation>
    	<Container>
    
    	~~~
    
    	</Container>
    </BackgroundAnimation>
    
    
    );
}
  
export default main;
  
const BackgroundAnimation = styled.div`
	display: flex;
	~~
`

페이지를 만드는 리엑트 파일이다.

• import 영역
• interface 영역
• 메인
• css 설정 파일

이렇게 되어 있다.
Interface는 전체를, CSS는 페이지의 특이사항만을 넣었다.
Interface를 리팩토링 할 시간이 없었는데 따로 묶는게 좋아 보인다.

또한 React의 Hook 사용을 주의해야 한다.
매우 편리한 기능이지만 잘못 사용하면 힘들어진다.
그리고 React는 HTML같은 형식을 띄는 return()을 가지는 것이 특이하다.
하지만 컴포넌트 구조로 되어있고, CSS를 지정해 줄수 있어 바닐라 javascript보다 훨씬 쉽다.

다음은 함수를 모아놓은 페이지를 살펴보자.

import axios from 'axiof';
~~
  
axios.defaults.baseURL = 'http://api.~~'
//axios.defaults.baseURL = 'http://localhost:3000'
export const HOST = 'http://www.~~';
//export const HOST = 'http://localhost:3002';
export const request = (method, url, data) => {
	let headers = {};
    
	return axios({
      method: method,
      headers: headers,
      url: url,
      data: data
    })
}


~~~

함수를 저장해놓은 Javascript 파일들이다.

• import 영역
• 변수 설정
• 함수들

과 같은 구조로 되어 있다.
지금와서 느끼는거지만 spring은 정말 복잡한 프레임워크라는 생각이 든다.

변수 설정에서 마음이 걸리는게 하나 있다. 그것은 바로 url 설정 부분이다.

axios.defaults.baseURL = 'http://api.~~'
//axios.defaults.baseURL = 'http://localhost:3000'
export const HOST = 'http://www.~~';
//export const HOST = 'http://localhost:3002';

위와 같이 api를 불러오는 서버 사이트 주소가 노출되어 있다.

이 주소는 메서드를 적지 않아 404가 뜨지만, 틀림없이 외부에서 요청이 가능한 url이다.
걱정이 되어서 검색을 해보니

레퍼런스:https://www.dailysecu.com/news/articleView.html?idxno=2355

답변은 다음과 같다.
단순 URL 노출만으로는 심각하게 문제가 발생하지 않는다.
단지 외부에서 오는 데이터를 참조하는 것일 뿐 위험한 데이터는 반환하지 않기 때문이다.

라고 하는데, 그럼 내가 위험 데이터를 반환하는 경우가 있나? 라는것을 생각해 봤다.
생각을 해보니 개인정보 수정을 할때도 데이터를 Update하는것이라 client가 서버로 데이터를 보내는 것일 뿐, 서버에서 데이터를 반환하지는 않는다는 결론을 내렸다.

그래서 신경써야 할 부분은 다음과 같다.

1. 로그인 인증 구현
2. 공격 방어수단 가지기

1번으로는 Oauth를 활요한 쿠키/세션, 2번으로는 로드밸런싱 등이 있겠다.
아마 보안상의 이유로 세션을 활용할 거 같다. 서버가 지금도 터지려고 하지만 ..
정보가 흘러나가는것 보다는 낫다고 판단했다.
그리고 aws의 로드밸런싱에는 자동으로 공격을 막아주는 기능도 있다고 하니 기대해보자.

레거시 코드 읽는다고 생각보다 시간이 지났다. 빠르게 다음 단계를 진행하자.