미리보기

프론트엔드 개발

• 자사 서비스

• IS 사업

사용기술:

- javaScript

- jquery

- html5

- Sass(CSS)

내용:

1) 리뉴얼을 위한 새로운 홈 페이지 개발

ㅇ jquery를 사용 인터렉션 간소화

- 개발 기간이 짧은 프로젝트에서 jquery를 사용, jquery의 축약을 사용해 개발 시간

을 단축하고, DOM 조작 및 인터렉션을 간소화하여 개발을 진행함

ㅇ DOM 접근 JS 코드 개선

- DOM 구조에 직접 접근으로 인해 발생하는 오류 및 위험을 방지를 위해

createElement를 사용하여 DOM에 새로운 node를 생성 개발함

ㅇ 데이터 비동기 처리

- Fetch API 사용 및 API 데이터를 비동기 처리함으로써 페이지 로딩 시간을 단축함

ㅇ JS 라이브러리 활용을 통한 사용성 개선

- 통계 서비스에서 제공된 신문 수치 데이터의 가독성 개선을 위해 데이터를 시각화

라이브러리 chart.js를 사용해 개발함

2) 애니메이션과 반응형 웹 서비스를 위한 스타일 작성

ㅇ 사용자 인터랙션 구현

- 신문 목록 서비스 이용에 사용성을 고려한 UIUX 제공을 위해 slider 라이브러리를

활용하여 사용자에게 인터렉션을 제공함

ㅇ 반응형 웹을 통한 사용성 향상

- 이미지, 그래픽 데이터를 포함한 서비스에 다양한 디바이스의 따른 적절한 접근성

을 제공하기 위해 반응형 웹을 개발함

ㅇ CSS 코드 개선을 위한 레거시 스타일 지양

- CSS 스타일 유지 보수를 위해 레거시 스타일을 고려 flex, grid를 사용하여 스타일

을 작성함

3) 프로젝트 협업

ㅇ 다양한 묵(mock) 데이터를 활용하여 UIUX 협업

- API 및 DB 칼럼 규정을 통해 묵(mock) 데이터를 생산하여 예상 UI를 기획자와 디

자이너에게 공유하고 기능 및 디자인 명세를 조율함

ㅇ 디자인 요소와 개발에서의 차이를 조율

- 라이브러리 및 특정 조건에 따라 UI가 시안과 상이한 문제를 개선하기 위해 디자이

너와 UIUX를 조율하며 개발을 진행함

4) SVN 버전 관리

ㅇ SVN을 활용한 소스 코드 버전 관리 및 협업

- 프로젝트에서 소스 코드를 효율적으로 관리하기 위해 SVN을 활용 소스 코드 버전

관리함

사용기술:

- javaScript

- html5

- Sass(CSS)

내용:

1) MPA의 반복 페이지 작업을 효율적으로 개발

ㅇ HTML 코드 간소화 및 재사용성 향상

- 여러 개의 HTML 파일의 유지 보수 개선을 위해 JS에서 HTML 템플릿을 생성하여

HTML을 간소화하고 재사용성을 높여 활용함

ㅇ sanitize-html을 활용 악성 스크립트 예방 및 DOM 생성

- Input 값을 통해 HTML 태그 삽입 시 발생할 수 있는 xss 보안 문제를 방지하기

위해 sanitize-html을 사용해 안전하게 input 값 및 DOM이 생성될 수 있도록 개발함

ㅇ BEM 개발 방법론 사용

- 프로젝트 구조에서 규칙성 확보 및 개발 효율 향상을 위해 BEM 개발 방식을 사용

하여 개발함

ㅇ 코드 분리를 통한 효율적 코드 관리

- 코드의 가독성 향상ㆍ개발 효율을 위해 기능의 응집도를 높일 수 있도록 기능별 분

류 및 부가적인 기능은 util.js 파일을 생성하여 관리함

2) 일관성 있는 스타일 작성

ㅇ SASS를 통한 스타일 작성 구조 개선

- 스타일 작성 시 강력한 스타일 구조로 인해 발생하던 스타일 복잡도 및 스타일 충

돌 문제 개선을 위해, Sass의 nested 구조를 활용 스타일 구조를 개선함

ㅇ SASS를 활용 CSS 스타일 재사용성 향상

- CSS 중복 스타일 간소화를 위해 Sass 기능 mixin을 활용해 css간 파일을 모듈화

하고 extend를 사용해 재사용성을 향상시킴

ㅇ 웹 표준 검사를 통한 사용성 향상

- 디자인 요소에 의한 색상 대비 문제와 더불어 웹 표준을 미준수 문제를 해결하기

위해 w3c 검사도구로 웹 표준ㆍ사용성 검사 후 웹 표준 준수 및 사용성을 개선함

3) 프로젝트 협업

ㅇ 기능 및 디자인 명세를 위해 스크럼 구성

- 단방향으로 적용되던 업무 프로세스에서 불명확한 기능 명세에 따른 수정 이슈ㆍ개

발 시간의 증가 문제를 개선하기 위해 스크럼 및 협업 툴(slack)을 활용 작업 효율을

개선함

ㅇ 디자인 툴 변경을 통한 협업(PS -> Figma)

- 팀원들의 의견 공유를 높이기 위해 Figma를 활용 디자이너, 프론트 개발자, 기획자

가 하나의 협업 툴(Figma)을 사용하며 UIUX에 대해 의견을 공유ㆍ협업함

4) SVN 버전 관리

ㅇ SVN을 활용한 소스 코드 버전 관리 및 협업

- 프로젝트에서 소스 코드를 효율적으로 관리하기 위해 SVN을 활용 소스 코드 버전

관리함

사용기술
- react.js

- axios

- styled-component

- redux, contextAPI

- restful API

- html

- css

내용:
1) 새로운 기능을 위한 컴포넌트 개발

ㅇ 재사용성 및 컴포넌트 구조 개선을 위한 컴포넌트 세분화

- 댓글 관리 ‘Comment 컴포넌트’ 내의 결합도가 높아져 발생하는 중복 랜더 문제를

해결하기 위해 컴포넌트의 구조를 개선, 컴포넌트를 세분화해 가독성을 높이고 재사용

이 가능하도록 개발함

ㅇ 하위 컴포넌트의 구조 개선 route 사용 새로운 페이지 개발

- 특정 피드 아이템에 대해 외부에서 접근할 수 없는 문제가 발생하여, 이를 개선하

기 route를 설정하여 개별 피드 아이템 컴포넌트마다 특정 경로를 부여하고 피드 아이

템에 외부에서도 접근할 수 있도록 개발함

ㅇ 성능 개선을 위한 최적화 hooks 사용

- 서비스 성능을 개선을 위해 중복 render가 일어나는 원인을 파악하고

useCallback, useMemo, react.Memo 사용 렌더링과 성능을 개선함

2) 데이터 일관성을 위한 상태 관리

ㅇ 빠른 상태 업데이트를 위한 redux 사용

- 빠르게 전역에서 반영돼야하는 ‘피드 아이템’의 ‘좋아요’와 ‘저장’ 상태가 업데이트

시 전역에서 관리될 수 있도록 redux를 사용하여 개발함

ㅇ 전역 상태 관리로 통합 popup, toastMessage 관리

- 중복으로 사용되는 popUp, toastMessage 컴포넌트에 대해 코드 간소화ㆍ구조 개

선의 필요성을 파악하고, contextAPI를 사용해 전역에서 사용될 수 있도록 개발함

ㅇ contextAPI를 사용한 리랜더의 발생 문제 해결

- contextAPI의 consumer를 통해 제공되는 상태가 트리거 발생 시 불필요 랜더 되

는 성능 문제를 개선하기 위해 contextAPI의 기능을 같은 기능 단위로 세분화하여 개

발함

3) 스타일 모듈화를 위한 스타일 작성(CSS-in-JS)과 애니메이션 라이브러리 사용

ㅇ 스타일 리팩토링을 통해 JSX 코드 개선

- 프로젝트의 개발 영역이 늘어남에 따라 발생하는 JSX 코드의 복잡성 및 스타일 충

돌의 문제를 해결하기 위해 styled-component를 도입하여 기존의 CSS를 CSS-in-JS

형태로 리팩토링함

ㅇ 스타일 모듈화를 통해 컴포넌트의 재사용성 향상

- 컴포넌트의 재사용성과 확장성을 개선하여 개발의 효율을 높이기 위해

styled-compnent를 사용하여 스타일을 모듈화함

ㅇ 애니메이션을 사용한 부드러운 UIUX 제공

- CSS-in-JS 적용 시 React-spring을 활용하여 UIUX의 사용성을 개선함

4) 클라이언트 서버 간 비동기 데이터를 위한 API 통신 (rest API)

ㅇ axios를 사용해 API요청 간소화

- fetch API 통신의 복잡성을 개선하기 위해 axios를 사용 API 통신 로직을 간소화

하고 API 요청받은 데이터를 간결히 처리할 수 있도록 개발함

ㅇ 비동기 처리를 통해 클라이언트 데이터의 공백을 방지

- 서버로부터 데이터를 받을 시 발생하는 데이터 공백으로 인한 사용성 저하를 예방

하기 위해 await async를 사용해 비동기 처리 될 수 있도록 개발함

ㅇ restAPI를 사용

- restAPI에서 사용되는 규칙을 이해하고, get post put patch delete를 사용하여

코드가 어떤 API를 요청하는 것인지 알 수 있도록 명시적으로 개발함

5) Git 버전 관리

ㅇ Git 저장소를 사용한 협업

- 프로젝트에서 소스 코드를 효율적으로 관리하기 위해 Git을 활용 소스 코드 버전 관리함

사용기술:
- next.js
- react.js

- react-query, axios

- styled-component

- redux, contextAPI

- restAPI

- html

- css

내용:
GPT 기반 인공지능 챗봇 서비스 ‘메스와이저(MESwiser)’

- (메스와이저 챗봇) 카테고리별 적용이 가능한 GPT 채팅 솔루션

- (메스와이저 어시스턴트) 사용자의 대용량 업로드ㆍ입력URL 데이터 분석을 통한 업무지원 솔루션 시스템

1) 아토믹 디자인 패턴(Atomic Design Pattern)을 적용하여 공용 컴포넌트 개발

ㅇ 아토믹 디자인 패턴 활용

- 새로운 컴포넌트 개발 시 다양한 ‘버튼 컴포넌트’ 생성으로 인한 유지 보수 어려움을 개선

하기 위해 버튼 컴포넌트들을 1개의 아토믹 버튼 컴포넌트로 통합 관리함

ㅇ 개발의 효율을 개선하기 위한 hooks 개발

- 클라이언트의 API 요청 반복 코드를 줄이고 재사용성을 높이기 위해, react-query 기반

의 use() 형태 hooks를 개발하여 코드를 개선함

- 모달창의 복잡한 사용 조건과 코드로 인한 유지 보수 및 가독성 문제를 개선하기 위해,

modal을 통합 관리하는 contextAPI를 개발 구조를 개선함

ㅇ 사용자 경험을 높이기 위한 성능 개선

- 사용성 저해 요인과 리랜더로 인한 성능 문제를 해결하기 위해 불필요한 소스를 삭제하

고, lazy loading을 사용하여 코드를 분리해 로직을 개선함

2) 전역 상태 관리를 통해 props관계 개선 및 local, session storage를 활용

ㅇ 전역상태 관리를 위한 redux 활용

- 서비스 전역에 사용되는 상태(사용자 정보, login token)를 redux를 활용 전역에서 관리

할 수 있도록 개발함

ㅇ props drilling 개선을 위한 contextAPI 사용

- 컴포넌트 구조의 상세화로 인해 props drilling의 문제(유지 보수의 어려움, 오류, 리랜더

등)를 개선하기 위해, contextAPI를 사용하여 개선함

ㅇ 개발 협업을 통한 코드 관리 효율화

- 팀 내 동일 서비스 개발 시 상태 및 기능을 전역으로 관리하며, 공통 내용에 대해 코드의

중복을 최소화하여 서비스를 개발함

3) 스타일을 효율적으로 관리할 수 있는 스타일 작성(CSS-in-JS)

ㅇ styled-component 활용 스타일 모듈화

- 결합도가 높은 컴포넌트의 관계에서 CSS가 사용되며 스타일 중복의 문제ㆍ가독성 저하로

인한 유지 보수의 문제를 개선하기 위해 styled-component를 사용하여 스타일을 모듈

화하여 개발함

ㅇ MUI 도입을 통해 디자인 일관성을 확보

- 시안에 맞는 UI 개발 효율과 eventHandle, DOM 조작의 효율을 향상 시키기 위해 MUI

를 도입하여 규칙적인 UIUX를 통해 일관성을 확보함

ㅇ MUI 도입을 통한 작업 효율 향상

- 백엔드와 사전에 예상 DB 칼럼 값을 참고할 수 있도록 협의 후 묵(mock) 데이터와 MUI

를 사용하여 클라이언트 예측 UI를 제공함

4) 클라이언트 서버 간 비동기 데이터 API 통신 (rest API)

ㅇ react-query를 사용해 서버에 불필요한 요청을 최소화

- API 요청으로 인한 성능 저하 문제를 개선하기 위해 react-query를 사용해 캐시 데이터

를 관리, API 요청 받은 데이터의 변화가 감지될 때만 API 요청이 되도록 개발함

ㅇ swagger API 명세 활용

- API 개발 및 사용에 지연을 줄이기 위해 백엔드에서 API 개발 시 작성한 API 명세를 사

용하며 백엔드 개발자와 적극적으로 소통함

ㅇ debouce를 사용해 API 요청 과부하 개선

- 과도한 API 요청 시도 시, 네트워크 과부하를 막기 위해 debounce를 사용해 연속 이벤

트 중 마지막 요청만 처리될 수 있도록 개발하여 과부하를 예방함

5) Git 버전 관리

ㅇ Git 저장소를 사용한 협업

- 프로젝트에서 소스 코드를 효율적으로 관리하기 위해 Git을 활용 소스 코드 버전 관리함