현재 재직 중인 회사에서는 프론트엔드 개발을 위해 인스웨이브사의 WebSquare5라는 프레임워크를 사용한다. 오늘 기초 강의를 수강한 후 연습 삼아 2023/24 시즌 EPL 팀 기록 웹페이지를 개발해보았다.
WebSquare5로 만들어본 화면
별도로 백엔드 서버를 띄우진 않고, 데이터는 JSON 파일로 준비해놓고 하긴 했지만 대략적으로 WebSquare5를 사용하면 어떤 방식으로 개발을 해야하는지 알 수 있는 시간이었다.
개인적인 소감
웹 개발을 하는데 있어서 자유도가 낮은 프레임워크를 선호했던 나로서는 참신한 경험이었다. 오늘 해본 것을 주저리주저리 이야기해보자면 다음과 같다.
UI 컴포넌트를 GUI에서 선택해서 하나씩 배치하고, 필요하면 id와 class를 부여하고, 컴포넌트에 onClick 이벤트 등을 걸고, DataCollection으로 데이터 틀을 만들어놓고 거기에 Submission을 통해 서버에서 받은 데이터를 담아서 화면 상에 활용하고, 등등...
위 화면을 그리기 위해서 직접 작성이 필요했던 Script 코드는 단 몇 줄 뿐이었다. 대부분은 GUI에서 작업이 진행되었다. 물론 실무에서는 좀 더 스크립트 코드 작성량이 많긴 하겠지만, 기존에 JQuery, React, Vue 등의 라이브러리/프레임워크로 개발할 때 비해서 거의 코드 작성량이 5%? 10%? 이상 줄어드는 것 같다.
아무튼 어떤 개발 언어, 프레임워크로 개발하느냐보다 더 중요한 것은 유저를 만족시킬 수 있는 프로덕트를 만드는 것이 IT개발팀의 사명이 아닐까.
'Dev > javascript' 카테고리의 다른 글
| [javascript] 정규식(RegExp)으로 문자열내 반복되는 특정 단어 시작 인덱스 배열 생성하는 방법 (0) | 2024.07.14 |
|---|---|
| [javascript] 헷갈리기 쉬운 substring(), substr() 메서드 사용법 비교 (0) | 2024.07.13 |
| [javascript] 문서 객체 모델(dom)을 조작하여 css 적용하기 (0) | 2024.02.13 |
| [javascript] 간단한 조건문 처리는 삼항 조건 연산자로 대체 가능 (0) | 2024.02.01 |
| [javascript] swiper.js 롤링이 처음으로 돌아가는 방법 (0) | 2024.01.03 |
| [javascript] new 연산자란 (0) | 2023.12.16 |
| [nextjs] tailwindcss 사용할 때 globals.css에 있어야 하는 코드 (0) | 2023.12.09 |
| [javascript] 비교연산자 ==와 === 차이 비교 (0) | 2023.11.15 |