❗ 보안상의 문제로 코드 부분과 대시보드 구현 부분은 없습니다.

시스템 구성도

대시보드 구현은 React를 사용해서 구현했고, CSS 프레임워크는 Styled-Component를 사용했습니다. 그리고 라이브러리는 material-ui를 사용했습니다.
백엔드 API 통신은 fetch 함수를 이용했습니다.
API는 목데이터와 서버 데이터를 사용해서 작업했습니다.

React 란?

🔗 출처 : https://react.vlpt.us/basic/01-concept.html

저번 세미나에서 부족하다고 생각했던 React란 무엇인지, 왜 React를 사용하게 되었는지에 대한 이유 먼저 말씀드리겠습니다.

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
React 공식문서 발췌 -

홈페이지에 +1 버튼이 눌리면 화면에서 1씩 더해주는 코드가 있습니다.
이것을 JS로 구현하기 위해서는 HTML에서 +1을 해주기 위한 <button> 태그에 increase라는 id를 부여하고, JS에서 document.getElementById('increase') 명령어를 통해 increase를 선택한 수 increase를 클릭하면 직접 DOM을 선택해서 innerText 속성으로 1씩 더해주는 코드를 짤 수 있습니다. 이런식으로 DOM을 직접 조작하는 작업을 한다면, 인터렉션이 자주 발생하고, 이에 따라 동적으로 UI를 표현해야 되는 작업에서 규칙이 다양해지면 관리하기 힘들 것입니다. 그래서 대부분의 경우 웹 애플리케이션의 규모가 커지면 DOM을 직접 건드리면서 작업하면 코드가 난잡해지기 쉽습니다.

처리해야 할 이벤트와 관리해야 할 상태값도 다양해지고, DOM 도 다양해지게 된다면, 이에 따라 업데이트를 하는 규칙도 복잡해집니다.

리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었습니다.

React는 Viretual DOM을 사용해서 이것을 가능하게 했습니다.
Viretual DOM은 가상 DOM입니다. 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM을 말합니다. React는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링합니다. 실제 브라우저에 보여지고 있는 DOM과 비교한 후, 차이가 있는 곳을 감지하여 실제 DOM에 패치해줍니다.
그렇기 때문에 상태가 바뀌면 필요한 부분만 새로 만들어서 보여줄 수 있게 됩니다.

React를 사용한 이유

출처 : https://hanamon.kr/컴포넌트-component란/

1. 컴포넌트 단위의 개발

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈입니다.
컴포넌트 단위의 개발의 장점은 컴포넌트를 재사용할 수 있다는 점입니다.
예를 들어 위에 보이는 코드와 같이 Title이라는 컴포넌트와 Button이라는 각각의 독립된 컴포넌트를 만들어서 App이라는 컴포넌트 안에서 불러와서 사용할 수 있습니다.
이런 재사용을 통해 개발 생산성을 향상시킬 수 있습니다.

2. SPA (Single Page Application)

단일 페이지를 가진 애플리케이션이기 때문에 한개의 HTML 파일을 가지고 있습니다. HTML 파일이 하나이기 때문에 페이지도 당연히 하나이고, 웹 사이트의 내용이 바뀌면 페이지가 바뀌는 것이 아닌 바뀐 내용만 자동으로 업데이트 해주기 때문에 새로고침을 할 필요없이 실시간으로 반영됩니다. 이렇게 되면 사용자가 볼때 화면이 깜빡이지 않고 바로 UI가 업데이트 되기 때문에 화면이 깜빡이지 않아서 사용자의 경험이 개선될 수 있습니다.
위에 있는 GIF는 React 공식문서의 GIF입니다. React로 개발된 페이지 이기 때문에 메뉴 탭을 눌러서 내용이 바뀌는데도 화면이 새로고침되지 않고 아래의 내용만 업데이트 되는 것을 볼 수 있습니다.

3. 코드 정리가 깔끔해집니다.

기존에는 HTML과 JavaScript 파일들이 따로 있었습니다. 하지만 React는 HTML과 JavaScript를 합쳐서 JSX 문법을 사용하기 때문에 파일을 따로 관리하지 않아도 됩니다.

JSX 문법은 React에서 생김새를 정의할 때 사용하는 문법입니다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript입니다.
React는 컴포넌트 파일에서 JSX 코드를 작성하면 Babel이 JSX를 JavaScript로 변화해줍니다.
( Babel은 자바스크립트의 문법을 확장해주는 도구입니다. )

4. 인지도가 높습니다.

https://survey.stackoverflow.co/2022/#technology
위 링크를 통해서 2022년 웹 프레임워크 및 기술 설문조사 자료를 보면 JS 라이브러리 중에 가장 높은 인지도를 가지고 있는 것을 확인할 수 있습니다. 때문에 다양한 자료가 존재해서 접근하기 쉽습니다.

Styled-Component를 사용한 이유

먼저 Styled-Component는 CSS-in-JS 스타일링을 위한 프레임워크(?) 라이브러리입니다.
CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 기존 웹 사이트는 HTML과 CSS파일 JavaScript를 각자 별도의 파일로 두었는데, React 같은 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML과 CSS, JavaSCript를 모두 포함하는 패턴이 많이 사용되고 있습니다.

1. 한 파일에서 관리가 가능하다.

CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요없이 한 파일에서 관리가 가능해집니다.

styled-components 설치방법
npm 설치 명령어 : npm install styled-components
Yarn 설치 명령어 : yarn add styled-components

설치 완료 후
적용하실 프로젝트 파일에 임포트 하여 사용
import styled from 'styled-components';

2. JavaScript 환경을 최대한 활용 할 수 있다.

CSS-in-JS는 JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유할 수 있습니다. 예를 들어 React에서 props를 활용한 조건부 스타일링이 가능합니다.

3. 사용자가 늘어남에 따라 커뮤니티가 커지고 있다.

Styled-Components 공식 github
🔗 https://github.com/styled-components/styled-components

Styled-Components공식 깃허브는 (2022.9.29 기준) 375,000개가 넘는 ⭐을 받았습니다.
또한 정기적으로 유지 관리됩니다.

디렉토리 구조

📦public
 ┣ 📂data
 ┃ ┣ 📜allGroup.json
 ┃ ┣ 📜allGroupMonth.json
 ┃ ┗ 📜allGroupWeek.json
 ┗ 📜index.html

📦src
 ┣ 📂component
 ┃ ┣ 📂BoxContainer
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂DashBoardContainer
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂OnOffBtn
 ┃ ┃ ┗ 📜index.js
 ┃ ┗ 📂Title
 ┃ ┃ ┗ 📜index.js
 ┣ 📂hooks
 ┃ ┗ 📜useWindowSize.js
 ┣ 📂pages
 ┃ ┗ 📜기능별 컴포넌트 들
 ┣ 📂styles
 ┃ ┗ 📜GlobalStyle.js
 ┣ 📜App.js
 ┣ 📜index.css
 ┗ 📜index.js

디렉토리 구조는 root 폴더인 smt_master_dashboard 가 있고, 그 아래에 public 폴더와 src 폴더가 있습니다.

public 폴더는 data 폴더와 index.html이 있습니다.
data 폴더에는 가상의 백엔드 데이터인 목데이터를 사용하기 위한 파일이 들어있습니다.
index.html은 React 프로젝트에서 존재하는 단 하나의 HTML 파일입니다. React는 SPA(Single Page Application)이기 때문에 웹 페이지가 하나여서 html 파일이 하나만 존재합니다.

src 폴더에 있는 page 폴더는 기능별로 컴포넌트가 구성되어있습니다.

src 폴더에 있는 Component 폴더는 공통으로 사용될 스타일이 적용되어 있는 컴포넌트 또는 공통으로 사용되는 버튼 컴포넌트로 구성되어있습니다.

src 폴더에 있는 style 폴더는 reset css 와 font 설정 등 전역으로 사용될 스타일 컴포넌트로 구성되어있습니다.

src 폴더에 있는 hooks 폴더는 custom hook 컴포넌트로 구성되어있습니다.

src 폴더에 있는 App.js 파일에서 모든 컴포넌트가 모입니다.

src 폴더에 있는 index.js 파일에서 App.js와 index.html을 연결해줍니다.

핵심코드

보안 문제로 코드는 생략되었습니다.

핵심 코드로 선택 이유는
React 장점이 잘 들어나는 코드였고,
map 함수를 사용 해서 배열이 추가(데이터 추가)되면 리스트에 아이템 자동으로 추가되도록 구현했던 코드였기 때문에 선택했습니다.

JavaScript의 For()과 React의 Map()을 비교해보면 React의 장점을 확실하게 알 수 있습니다.
JavaScript를 사용해서 HTML에 새로운 리스트 아이템을 추가하는 코드를 작성하려면 HTML에 새로운 리스트를 표시할 <ul> 태크를 생성하고, JavaScript의 querySelector를 사용하여 표시할 위치를 가져온 후, for문을 사용하여 하나씩 리스트에 아이템을 추가하는 코드를 작성해야합니다.
하지만 React를 사용하면 HTML안에서 Map 함수를 통해 배열의 길이만큼 동일한 UI를 자동으로 추가하도록 구현할 수 있습니다.

느낀점 & 피드백

피드백

• 최신 문법을 알게 된 좋은 계기가 되었다.
• Styled-Components로 변경할지 고민해봐야할 것 같다.
• CSS-in-JS의 장점 말고 단점도 알 수 있으면 좋겠다.
• 개발 언어가 빠르게 변화하고 있음을 느낀다.
• 대시보드 UI만 보여주는 것보다 이전 세미나와 엮어서 설명한 부분이 좋았다.

느낀점

처음에 제가 이해했던 과제는 단순히 설계서 작성과 UI 구현 뿐이었습니다.
발표 전날 직원 분들이 준비 잘 돼가냐고 슬쩍 물어보시더라구요, 그래서 UI만 보여드리는거라 준비할게 많이 없었다고 당당하게 얘기했는데... 왠걸!! 조언을 엄청 해주셨어요..ㅋㅋㅋ 아니라며, 그렇게 준비하면 안된다며...ㅠㅠㅠㅠㅠㅠㅠ 보통 구현 과제를 발표할 때는 왜 그 언어를 선택했는지, 폴더 구조는 어떻게 되는지, 어떤 코드가 핵심 코드인지를 얘기하면서 구현한 화면을 보여주는게 기본이라고 하더라구요!! 그 얘기를 듣고 오늘 자긴 글렀다 하면서 부랴부랴 PPT를 새로 제작하기 시작했습니다🔥🔥 역시 왜 쓰는지 정확하게 판단해보려고 노력하고, 깃허브나 공식 홈페이지를 찾아보는 과정에서 새로운 사실도 알게되었어요! 사실 sass보다 styled-component가 한 페이지에서 관리하기가 편해서 쓰고있었는데, 생각보다 다양한 장점이 있구나를 느꼈습니다. JavaScript와 React의 차이점을 생각해보게 되는 좋은 계기이기도 했습니다.

---

TMI 🗣

길었던 한달의 수습기간이 끝나고..!!! 마지막 발표를 마친 후 밝은 분위기로 마무리가 되었습니다! 직원분들의 조언이 아니었으면 어땠을지 너무 아찔합니다ㅠㅠ 그래도 다들 도와주신 덕분에 정직원이 될 수 있었어요🎉🎉
10월 9일 오늘 날짜를 기준으로 아직 본 업무에 들어가지는 않았지만 앞으로 어떤 업무를 할지 기대 반 걱정 반입니다! 코드를 오랜만에 쳐봤는데 어색하더라구요ㅠ 이제 수습도 끝났으니 다시 열심히 코드를 쳐봐야겠어욥 화이팅!!