[프로젝트] HNTECH 홈페이지 개발_🚒 / React, TypeScript, Redux, Vite, Material-UI

 

[Project_HNTECH Hompage Dev]

 

👉홈페이지 보러가기👈

 

---

 

<PROJECT>

 

🚒 프로젝트 소개

 

🧯 목적 : HNTECH 회사 홈페이지 제작(개발)

 

🧯기능

• 제품 정보 확인 (제품 소개 게시판)
• 자료 업로드 / 다운로드 (사진, 문서)
• 게시글 업로드 / 댓글 작성
• 관리자 페이지 - 로그인, 회사 정보 수정 등
• PDF 프리뷰어 (미리보기)
• 반응형 모바일 웹 화면

 

🧯개발 기간 : 2022.08 - 2022.10

 

 

🚒 사용 기술

 

🧯 front

• Language : TypeScript, HTML, CSS
• Library : React, Redux, Material-UI, react-dnd, react-pdf
• Tool : Redux Toolkit, Vite
• API : axios

 

🧯 back

• Spring Boot (Kotlin), MySQL, Spring Data JPA
• QueryDSL, AWS EC2, AWS RDS

 

 

🚒 결과물

 

👉 http://hntec.co.kr/

 

에이치엔테크

 

---

 

지난번 이케이투어 홈페이지 개발때와 비슷할 것이라는 안일한(?) 생각을 갖고 시작하게 되었다.

그러나 생각보다 다른 부분도 많았고 처음 구현해 보는 기능들도 상당했다.

 

특히 리덕스(Redux)와 타입스크립트, Vite을 도입하면서 이전에 진행했던 자바스크립트 기반의 리액트 개발과는 큰 차이가 있었다.

자바스크립트로만 개발하다가 타입스크립트를 사용해 보니 타입을 지정하는 것에서 어려움이 있었다.

타입스크립트로 진행하니 빌드가 느려졌다는 생각에 Vite도 도입해 보았는데 proxy 설정이 webpack과는 다르다는 것을 알지 못해  CORS 오류로 고생을 꽤 했던 기억도 난다.

또한 state를 한 곳에서 관리해 주는 리덕스는 사실 충분한 이해 없이 사용해서인지 불편한 부분도 많았다.

 

이것 저것 사용해 보고 싶은 욕심에 두 가지를 새로 도입하게 되었는데

물론 힘들었던 일도 많았지만 그만큼 더 열심히 하게 되는 장점도 있었다.

하지만 앞으로 한꺼번에 많은 새로운 기술을 도입하지 않고 하나씩 차근차근 공부해 나가며 개발을 해야겠다고 결심했다 ㅎㅎ...

 

마지막으로 가장 많이 배우고 느낀 점은  소통이 가장 중요하다는 것이었다.

처음에 각자 작업하며 어느정도 구현이 된 이후 협업을 하게 되면서 서로가 수정해야할 부분들이 많아져서 힘들었던 것 같다.

 

 

---

 

 

 

👉ez1n github 구경하기👈 

 

ez1n - Overview