요새 개발로 핫한 회사들은 모두 리액트 기반 프레임워크들을 사용합니다.

그 중에서는 여러 이유로 서버 사이드 렌더링을 하고자 Next.js를 사용하곤 하는데요.

전자정부프레임워크에서도 서버 사이드 렌더링과 타입스크립트를 지원하는 예제가 많이 있었으면 합니다.

앞으로 수 많은 프레임워크와 기술들이 도래할텐데, 그 때마다 프론트엔드단은 분리해서 여러 스택으로 붙일 수 있는 예제가 있다면

미래 많은 개발자분들이 여러 방향으로 커밋해주지 않을까요?

향후 전자정부프레임워크의 발전을 위해서 작은 의견 내봅니다.. :)

CSS는 중복하여 작성하는 부분이 너무 많아 주로 SASS 등의 전처리기 등을 대신 이용합니다
예를 들어 src/css/page.css에 작성된 내용입니다

.Plogin {padding-bottom: 100px;}
.Plogin h1 {color: #222; font-size: 48px; font-weight: 500; letter-spacing: -2px; line-height: 48px; text-align: center;}
.Plogin .txt {margin-top: 43px; color: #666; font-size: 20px; line-height: 30px; text-align: center;}
.Plogin .login_box {position: relative; width: 690px; margin: 54px auto 0; padding: 70px 95px ; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
.Plogin .login_box .group {display: block; width: 320px;}

해당 내용을 SCSS의 대표적인 기능인 Nesting을 활용하여 작성하면 다음과 같습니다

.Plogin {
  padding-bottom: 100px;
  h1 {
    color: #222; font-size: 48px; font-weight: 500; letter-spacing: -2px; line-height: 48px; text-align: center;
  }

  .txt {
    margin-top: 43px; color: #666; font-size: 20px; line-height: 30px; text-align: center;
  }

  .login_box {
    position: relative; width: 690px; margin: 54px auto 0; padding: 70px 95px ; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;

    .group {
      display: block; width: 320px;
    }
  }
}

CSS를 사용했을 때보다 선택자를 덜 적을 수 있고 구조가 잘 드러나게 됩니다.
적용하기 어렵지 않고 기존 CSS를 SASS, SCSS 등으로 변환하는 도구도 많이 나와있으니 활용하면 좋을 것 같습니다.

연락처 Contact

[email protected]

추가 요청 기능명 Feature Name

vue 템플릿 추가 건의

기능 상세 설명 Feature Description

상당히 좋고 우수한 표준프레임워크에서도 드디어 리액트 템플릿을 만들어주셔서 건의드려봅니다.
유지보수를 하기에 공공기관에서는 JSP와 더불어 종종 vue도 채택되곤 하는 것 같습니다.

뷰는 간단하고 직관적인 문법과 구조를 가지고 있어
이로 인해 개발 생산성이 향상되고, 필요한 기능들을 빠르게 구현할 수 있습니다.

단가를 맞추기에는 퍼블리셔 분들이 vue나 react 소스를 읽어야할 때가 있는데,
react보다 vue를 선호하는 경향이 있기도 합니다.

또 뷰는 가볍고 빠른 성능을 자랑합니다.
가상 DOM (Virtual DOM)을 사용하여 효율적인 렌더링을 구현하므로 큰 규모의 프로젝트에서도 높은 성능을 유지할 수 있습니다.

따라서 위와 같은 이유로 vue 템플릿 추가를 하는게 어떤지 건의드려봅니다.

솔루션 상세 Solution Details

No response

솔루션 관련 URL Solution-related URLs

No response

연락처 Contact

[email protected]

추가 요청 기능명 Feature Name

css 프레임워크 도입 건의

기능 상세 설명 Feature Description

css 프레임워크 도입 건의합니다.

사전 정의된 유틸리티 클래스 세트를 따르면
코드베이스가 일관성을 유지하는 경향이 있으므로 대규모 프로젝트를 진행하는 팀에 특히 유용한 것으로 사료됩니다.
또 다양한 화면 크기에서 잘 작동하는 인터페이스를 쉽게 만들 수 있는 반응형 디자인 유틸리티가 포함되어 있습니다.
그 중 Tailwind는 강력한 커뮤니티와 생태계를 보유하고 있습니다.
수많은 플러그인, 확장 기능, 리소스를 사용할 수 있어 다른 도구 및 기술과 쉽게 통합할 수 있습니다.

따라서 tailwind css 적용 검토 건의합니다.

솔루션 상세 Solution Details

No response

솔루션 관련 URL Solution-related URLs

No response

연락처 Contact

[email protected]

오류 내용 Error Description

README 의 빌드 확인 CI Icon 클릭 시 Actions로 이동이 되지 않고 있습니다.

클릭 시 빌드 확인된 Github Actions 페이지로 이동이 되어야 할 것 같습니다.

오류 재현 방법 How to reproduce the error

1. Node.js CI Icon 클릭
2. 단순 icon 파일 경로로 이동 됨

환경정보 Environmental Information

• OS정보 Operating System:
• 표준프레임워크 버전 eGovFrame Version:
• JDK(JRE) 정보:
• WAS 정보:
• DB 정보:
• 기타 환경 정보 Other environmental information:

어느 브라우저를 사용했나요? Which browser did you use?

Chrome

에러 로그 Error Logs

No response

도커로 빌드/실행을 할 수 있도록 dockerfile을 만들어주세요.

Front-end 기술로 많이 사용되는 React 뿐만 아니라, Vue 의 경우에도 매우 널리 사용되고 있습니다.

Vue3용 Simple Homepage Template이 추가된다면 표준프레임워크 적용 시

Front-end Framework 선택의 폭이 넓어져 좋을 것 같습니다.

안녕하세요.
package.json에서 설정된 dependencies 중에 테스트용으로 사용되는 라이브러리들을 확인했습니다.

• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event

해당 테스트 라이브러리는 개발시에만 사용되기에 devDependencies로 이동하는 것이 권장된다고 생각합니다.

• 관련 Pull Request를 등재하였습니다.

javascript 뿐 아닌 typescript와 react의 조합도 많이 사용되고 있으므로 typescript 버전도 추가되면 좋을 것 같습니다.

연락처 Contact

[email protected]

추가 요청 기능명 Feature Name

빌드 툴 변경 건의

기능 상세 설명 Feature Description

현재 react-template는 CRA가 빌드환경으로 되어있습니다.
최근 Vite를 통한 빌드 환경이 화두가 되고 있으며 아래 이미지는 최근 npm trends 입니다.

CRA를 통해 설치되는 react-scripts보다 vite가 더 많이 사용되고 있으며,
내부 구현이 Rust로 구현되어 있어 CRA보다 Vite의 빌드 속도가 빨라 개발자가 더 편하게 개발 내용을 확인할 수 있습니다.
React template도 Vite로 빌드 될 수 있도록 건의 드립니다.

솔루션 상세 Solution Details

vite 관련 깃허브 주소는 https://github.com/vitejs/vite 이고 cookbook과 같은 다양한 예제를 https://github.com/vitejs/awesome-vite에서 찾아볼 수 있습니다.

솔루션 관련 URL Solution-related URLs

No response