AngularJS2에서 React로 변경
AngularJS2로 프로젝트를 시작하려 했으나, 주위 친구들과 네이버 D2글을 읽어보니 근래에는 React의 인기가 가장 좋은것 같아 React로 변경을 하였다. 네이버도 15년 쯤에 메일함 화면 수정을 하면서 React와 Redux로 넘어갔었다. 처음에 UI 작업만 진행하면 될 줄 알았는데 JSP코드와 Javascript 두 군데를 중복으로 수정해야 하며, Javascript에 뷰와 로직이 모두 들어있는 문제를 보고 새로운 프레임워크를 검토하다 React를 선택했다고 한다.
( 메일함 구현이 초기 페이지 렌더링은 서버에서 JSP로 진행하고 이후 동작은 AJAX 통신으로 동작하는 SPA(single page application) 이기 때문에 JSP 파일과 Javascript에 그리는 코드가 중복됨 )
일단 React의 장점과 도입이유를 모른체 일단 공부를 시작하게 되었다.
React 작업환경 설정
일단 이해도 못한 상태로 또 환경설정을 하였다. 나중에 문제가 생기거나 하면 이 부분 공부를 해야지....
( 참고 사이트 : https://velopert.com/814)
마구잡이 시작
1) 개발하고 싶은 화면 Component 나누기
2) 설정툴바 그려보기
- 고작 빈 껍데기만 있는 반응형 GNB만 만들고 끝....
- HTML 기본 지식도 없으니까 일단 기능도 없는 UI 먼저 그려보기
- CSS 작업 ( hover, active 등 기본 작업 )
- 반응형 css 작성 (http://happyer16.tistory.com/43)
- 버튼 Hover 디자인 적용
TOP IDE에서는 Hover 디자인을 어떻게 적용할 수 있을까?
- React 홈페이지를 참조하여 만들어 보려 했으나 시작도 안함
- 만들면서 느낀 점
TOP IDE로 이런것들 ( @media, 특정 이벤트 시 디자인을 적용 ) 을 지원하려면 어떻게 해야될까 ?
Logic으로 코드를 작성하면 되겠지만 이러면 뭔가 뷰만 따로 관리 못하는 느낌? 그리고 웹에서 저 배치를 바꾸 는 과정을 좀더 제대로 공부해서 렌더링이 어떻게 이루어지는 확인이 필요할 것 같다. 왜냐하면 TOP IDE를 이 용하여 개발하면 현재 WidgetChangeAction?을 통해 만든것과 성능적으로 비교가 필요할 것 같다. ( Layout을 교체하는거라면 새로 통신이 이루어질텐데 너무 비효율적일 것 같고 )
'React > 프로젝트' 카테고리의 다른 글
| 1일차 - AngularJS2 환경 구축 (4.8.토) (0) | 2017.04.08 |
|---|