GS Caltex 주유소 내곡점 디지털 전광판 화면 프로젝트

by

조금은 버겁고 부담스럽게 신규 프로젝트의 대시보드 작업을 진행하던 중, 또 임무가 주어졌다.

그것은 바로 GS Caltex 내곡점의 주차장 화면 스크린 만들기~!

상사가 티켓을 발행했고 그 내용에 맞춰서 기한 내에 작업하면 된다.

나는 완전 J 이고 기간에 쫒기는 것을 싫어하는 지라, 2틀 만에 UI, UX, 반응형, 그리고 5초마다 메세지 뿌려주고 시계 뿌려주는 작업 마무리 하고, 아직 백에서 api나 로직을 주지 않아서 fetch 하진 못했지만, 시안을 넘기면서, 굉장히 뿌듯 했던 작업에 대한 기록!

 

1. 프로젝트 (다행히) 초반에 날려 먹기

혼자 하고 있어서 다행이다…

Bitbucket을 사용하고 있고 나는 VSCode가 아니고 인텔리제이를 사용하고 있어서 별도로 아래와 같이 해주어야 한다. 전제 조건 상사가 react로 줘야 함.

  1. git clone
  2. c드라이브 마우스 우측 터미널에서 열기
  3. git clone 어쩌구 저쩌구 타이핑
  4. intellij 켜기
  5. npm install
  6. npm start 하기

먼저 dev-master 브랜치 만들기

first commit 잘 되나 확인하기!!!!! 이거 필 수!!!

그리고 작업하기…!

그래서 그날 했던 것 혹시나 잊어 먹을 까봐 저녁까지 땀내며 앉아서 다시 복구 하고 감…ㅋㅋㅋ

 

하던 중~

추적되지 않는 xml 파일이 있습니다가 떠서 git ignore에 넣음

그리고 그냥 master에 잘 merge가 되어 있는것 같아서 다른 브랜치 하나 만들고 dev-master 시원하게 날려버렸다.

 

중간에 드는 생각.. 알고리즘 공부!!!

오랜만에 map돌리고 데이터 다루는데, 그 사이 UI랑 라이브러리 썼다고.. axios로 뿌리기만 해서

알고리즘 기억 안남 ㅠㅠ 다시 알고리즘도 들어야 겠다 ㅠㅠ

 

2. 데이터 바인딩 시 줄바꿈이 필요할때

구글에서 한글 서체 각 폰트 크기 별로 불러왔고, 큰 프로젝트 하던 중에 소소한 프로젝트 하려니 재미있게 하고 있던 중에 줄바꿈이 그냥 <br> 따위? 로 되는 것이 아니였다. 그래서 찾아낸 것. 물론 갓지피티 사용ㅋㅋ

<p key={index} style={{ whiteSpace: 'pre-line' }}>
    {message.replace(/<br\s*\/?>/gi, '\n')}
</p>

<p key={index} style={{ whiteSpace: 'pre-line' }}> {message.replace(/<br\s*\/?>/gi, '\n')} </p>는 JSX를 사용하여 React 애플리케이션에서 HTML <p> 엘리먼트를 렌더링하는 코드입니다. 이 코드의 주요 내용은 다음과 같습니다:

  1. key={index}: key 속성은 React에서 배열 내 요소를 식별하는 데 사용됩니다. map 함수로 배열을 순회할 때 각 요소에 고유한 key를 제공해야 합니다. index를 key로 사용하는 것은 보통 배열의 순서를 나타내는 간단한 방법입니다.
  2. style={{ whiteSpace: 'pre-line' }}: 이 부분은 CSS 스타일을 설정하는 부분입니다. whiteSpace: 'pre-line' 스타일은 HTML 요소 내의 공백과 줄 바꿈 문자를 유지하도록 합니다. 따라서 message 문자열 내의 줄바꿈 문자(\n)이 화면에 줄 바꿈으로 표시됩니다.
  3. {message.replace(/<br\s*\/?>/gi, '\n')}: message 문자열 내의 HTML <br> 태그를 정규 표현식 /<br\s*\/?>/gi를 사용하여 찾아서 줄 바꿈 문자(\n)로 대체합니다. 이렇게 하면 HTML 태그가 제거되고 줄 바꿈 문자로 대체됩니다.

따라서 이 코드는 Message 배열의 각 요소를 <p> 엘리먼트로 렌더링하고, whiteSpace: 'pre-line' 스타일을 사용하여 줄 바꿈 문자를 유지하도록 설정한 후, HTML <br> 태그를 \n로 대체하여 줄 바꿈을 화면에 나타냅니다.

 

3. setTimeout 말고 setInterval

setTimeout은 써봤는데 setInterval은 또 처음 써보네! 물론 이걸 사용하려면 useEffect와 cleanup function을 사용해서 똥?을 자주 치워 줘야한다.ㅋㅋ 프로젝트 하면서 항상 느끼는것 payload에 맞춰서 api 불러오는거는 뭐 그냥 저냥 무난하게 하는것이고 가장 중요한 것은 그것을 어미 즉 부모에 부르느냐, 자식한테 부르느냐 인데, 보통 어미한테 처리를 해야지 자식까지 알아서 재렌더링이 된다. 또한 useEffect의 사용… 참 아는 것 같으면서도 되게 만들때 어려운것..! 많이 해보고 많이 에러를 마주하고 기록해야겠다.

setInterval은 JavaScript에서 주어진 시간 간격으로 함수를 반복적으로 실행하는 타이머 함수 중 하나입니다. 이 함수를 사용하면 일정 시간마다 지정한 작업을 수행할 수 있습니다.

setInterval 함수는 다음과 같이 사용됩니다:

const intervalId = setInterval(callback, delay);
  • callback: 일정 시간 간격마다 실행할 함수 또는 코드 블록입니다.
  • delay: 함수가 실행될 주기(밀리초 단위)입니다.

setInterval 함수가 실행되면 callback 함수가 delay 시간 간격으로 계속해서 호출됩니다. setInterval 함수는 해당 작업을 중지하려면 반환된 intervalId를 사용하여 clearInterval(intervalId) 함수를 호출하여 중지할 수 있습니다.

예를 들어, 다음 코드는 1초(1000밀리초) 간격으로 콘솔에 메시지를 출력하는 간단한 예제입니다:

const intervalId = setInterval(() => { console.log(‘반복 작업 실행’); }, 1000); // 5초 후에 작업 중지 setTimeout(() => { clearInterval(intervalId); console.log(‘반복 작업 중지’); }, 5000);

 

그리하여 만들어진 코드

// React와 관련된 필요한 모듈을 가져옵니다.
import { Message, CarPlate } from ‘./data’;
import { useEffect, useState } from “react”;

// React 함수형 컴포넌트인 “Screen”을 선언합니다.
const Screen = () => {
// “index”라는 상태 변수와 “setIndex”라는 상태 업데이트 함수를 선언합니다.
// “index”는 현재 표시할 메시지의 인덱스를 추적합니다.
let [index, setIndex] = useState(0);

// “useEffect”를 사용하여 부수 효과를 처리합니다.
// 이 효과는 컴포넌트가 렌더링될 때 한 번 실행됩니다.
useEffect(() => {
// “setInterval” 함수를 사용하여 5초마다 콜백 함수를 호출합니다.
const interval = setInterval(() => {
// “setIndex”를 사용하여 “index” 상태 변수를 업데이트합니다.
// 업데이트 함수는 현재 “prevIndex”를 기반으로 다음 메시지의 인덱스를 계산합니다.
setIndex((prevIndex) => (prevIndex + 1) % Message.length);
}, 5000); // 5초 간격으로 콜백 함수가 호출됩니다.

이 부분은 좀 어려워서 갓지피티 없었으면 큰일 날 뻔했다.. 몰라도 어찌저찌 해내는게 참으로 은혜고 신기하다..

// “return” 문 내에서 “clearInterval” 함수를 사용하여 “setInterval”을 정리합니다.
// 이러한 정리 작업은 컴포넌트가 언마운트되거나 다시 렌더링될 때 메모리 누수를 방지합니다.
return () => {
clearInterval(interval);
};
}, []); // 빈 배열은 “useEffect”가 컴포넌트가 처음 렌더링될 때만 실행됨을 의미합니다.

// 화면에 반환되는 내용입니다.
return (
<div className=”wrap”>
<div className=”text-logo”>
<h1><img src={process.env.PUBLIC_URL + “/gslogo.png”} alt=”GS Logo” />GS Logo</h1>
<h2><span>에너지플러스</span> 허브 내곡 </h2>
</div>
<strong>{CarPlate}</strong>
{/* 메시지 배열의 각 요소를 매핑하여 화면에 렌더링합니다. */}
{/* “index” 변수를 사용하여 현재 메시지를 선택하고 “replace”를 사용하여 줄바꿈 처리합니다. */}
<p style={{ whiteSpace: ‘pre-line’ }}>
{Message[index].replace(/<br\s*\/?>/gi, ‘\n’)}
</p>
</div>
)
};

// “Screen” 컴포넌트를 내보냅니다.
export default Screen;

느낀점

이렇게 소소하게 GS Caltex 내곡점에 뿌리는 프론트 작업 UI와 소소한 데이터 렌더링 작업을 초안을 마쳤다.
해당 브랜드의 color pallete를 사용하여 디자인 작업을 마무리하고 5초마다 TBA (To Be Arranged의 약자) 되는 작업을 맞추고 아래 시계 넣으라고 해서 
current time을 넣었다. 그리고 나서 해당 작업이 in progress인지 그리고 testing인지 간략히 적어서 submit하라고 해서 그렇게 했음!
10.1 인치 vertical mode 즉 가로모드에 맞춰서 작업했고 혹시나 몰라 세로모드 반응형 작업도 해 놓음~!
지금 하고 있는 신규 대시보드 프로젝트에 비해 소소한 작업이였지만, 빠른 시간인 2틀 안에 마무리 해서 뿌듯하고 만족감을 느낄 수 있었다. 
다시 백 투 대시보드.. 홧팅!
올해 GS랑 제대로 엮여 있는듯..! 
마무리 하고 GS Caltex 내곡점에 기름 넣으러 가야지~!

Leave a Comment