미리보기

[개요]

기존 신세계 S.I.Village 를 Next.js, Typescript와 같은 기술스택을 통해 재구현 하는 프로젝트

[기술선택배경]

* Next.js

Next.js 의 병렬 라우트, 다이나믹 라우트를 통한 효율적인 데이터 처리와, 서버 액션을 통해 초기 로딩속도 개선, 보안 강화 등 기존 프론트 엔드 개발과정에서 고려할 수 있는 점을 개선해보고자 선택

* Typescript

컴파일 과정에서 오류 추적 및 퍼블리싱 과정에서 제공될 response 에 빠르게 대응하고 연동 과정에서 문제를 줄이고자 선택

* TailwindCSS

디스플레이에 따른 반응형 뷰를 제공하고, 빠른 개발속도와, 유틸리티 클래스 활용을 통해 자유로은 스타일 조정을 하고자 선택.

[담당 역할]

* 팀장

* 프론트엔트 개발

[구현 사항]

* 사용자 로그인/회원가입 관련 페이지 퍼블리싱

사용자 입력 데이터 유효성 검사로직 수행, 서버액션을 통한 폼 데이터 전송

* 상품 관련(리스트/상세) 페이지 퍼블리싱

무한스크룰 적용 optional segment를 통한 현재 카테고리 출력

상품 상세 페이지 내 parrel route 적용을 통한 사용자 경험 증가

* 슬라이드 관련 공통 컴포넌트, 커스텀 훅 작성

swiper 라이브러리를 통한 슬라이드 구현

스크룰 이벤트에 따른 애니매이션을 위한 커스텀 훅 작성

회원가입 입력 데이터 유효성 검사 훅 작성

* next-auth 활용 Oauth 로그인 구현

kakao, naver Oauth 로그인을 통한 로그인, Credential 로그인을 통해 공통 세션으로 반환 작업 수행

* 서버 액션을 통한 백엔드 통신

next 서버를 통한 데이터 fetching을 통해 클라이언트 에서 노출 방지

[성과 / 학습]

* 서버 액션에 대한 이해 및 비동기 통신 처리 능력 향상

* 반응형 웹 뷰에 대한 퍼블리싱에 대한 이해

* Next 에서 제공하는 라우팅 방식들에 대한 이해, 적용

* next-auth 를 통한 Oauth 인증 방식에 대한 이해, 적용

GIT

[개요]

삼성 청년 S/W아카데미 마지막 프로젝트로 서로가 전하지 못한 말을 익명의 편지로 오후 5시에 일괄 전송하여 받을 수 있게 해주는 펜팔 서비스

[기술선택배경]

* Next.js

CSR의 초기 렌더링 속도에 대한 문제를 인식/개선하고 자체 app routing을 통해 자체 라우팅 경험을 하고자 선택

* Typescript

이전 프로젝트에서 개발 이후 의도하지 않은 오류 발생 경험을 겪으며, 정적 타입 언어를 적용해 컴파일 과정에서 문제를 해결하고자 선택

* Styled-component

프론트엔드 팀원이 많은 이유로 스타일의 충돌을 방지하고 컴포넌트 기반 스타일링이 가능하다는 이점과, 재사용할 수 있다는 장점을 활용하고자 CSS-in-JS 선택

[담당 역할]

* 팀장

* 프론트엔트 개발

* git, gerrit 활용 보조

* UI 기획 및 디자인

[구현 사항]

* 편지 보관함 (친구/랜덤)

여러 디스플레이에 대해 대응하고자 반응형 개발에 초점을 두며 퍼블리싱 수행

* 펜팔 서비스 프론트엔드 퍼블리싱

편지 작성 전송 페이지와 유사한 구조를 가져, 재사용성을 고려해 컴포넌트화를 수행

* 팀원 코드리뷰 및 수정

상대적인 경험이 많았기에 퍼블리싱 과정에서 팀원들이 놓친 부분, 어려움을 겪고 있는 부분들에 대해 코드 리뷰를 수행하고 지식공유를 통해 코드 개선

[성과 / 학습]

* Next.js 13 의 앱라우팅 방식에 대한 경험 및 이해

* Typescript 를 활용해 컴파일 타임에 오류 추적 및 처리경험

* 코드리뷰 활동을 통해 코드 품질 개선 및 지식공유활동

GIT

[개요]

신축 건물의 사전 검사 기간 결함 탐지 대행 서비스에 IoT의 실내 자율주행 및 라이다센서를 통해 결함을 찾고 보고서를 제공해주는 서비스

[기술선택배경]

* React

React 자체에 친숙해지고자 최소한의 라이브러리 적용함으로써 React Hook사용 역량에 대한 심화를 해보고자 선택

[담당 역할]

* 모바일 서비스 프론트엔드 개발

* UI 기획 및 디자인

[구현 사항]

* 디자인

Figma 활용 목업 작성 및 애자일 개발방법론 과정 상 변동사항 적용

* 모바일 프론트엔드 퍼블리싱

‘재사용성’에 초점을 두고 컴포넌트 분리 이후 사용성 관련 디자인 파일 수정에 있어 원활한 수정 과정 진행

* 소켓통신 / http통신

Iot 기기와 소켓통신 상태 관리를 위해 관리 항목이 적은 프로젝트 특성상 React의 contextAPI 적용

로그인 기반 서비스로 JWT기반 인증기능 공통 스크립트로 분리

* 바닐라 CSS를 통한 스타일 작성

이전 경험에서 부족했던 CSS 에 대한 이해력 향상을 위해 CSS 프레임워크를 사용하지 않음

모바일 기기에 따른 반응형의 미흡한 문제를 통해 프로젝트 이후 부분적으로 반응형을 적용해보며 보완

* PWA

타겟 고객층이 사원 이라는 점을 고려해 웹 어플리케이션으로 적용해 서비스 제공

[성과 / 학습]

* QR 인식을 통한 Iot 기기 인식 과정에서 React 버전에 따른 라이브러리 호환성과 안정성에 대해 고민

* 바닐라 CSS 작성을 통해 스타일 적용에 대한 이해를 높임

* PWA를 통해 모바일 기기를 통해 사용자에게 UX 제공

GIT

[개요]

AI를 통해 잡은 어종, 크기를 분석해주고 캐리커쳐를 통해 게이미피케이션을 통해 낚시에 대한 흥미 제공하는 낚시 종합 서비스

[기술선택배경]

* React

한정적인 기간으로 인해 개발 과정에서 여러 정보를 참고하기에 더 큰 커뮤니티, 생태계가 있고, 서비스 특성상 종합 서비스인 관계로 확장성 부분을 고려해 선택

* Recoil

팀원들의 역량을 객관적으로 바라보고 api 사용이 간결한 장점을 통해 상태관리를 용이하게 하고자 선택

[담당 역할]

* 프론트엔드 개발

* UI 기획 디자인

[구현 사항]

* 메인 페이지 퍼블리싱

Carousel 라이브러리 활용, CSS 및 HTML에 대한 이해를 높임

* 물고기 도감 페이지 퍼블리싱

상태관리 정보를 활용해 사용자가 잡은 물고기들에 대해 greyscale 을 조정, 사용자에게 친근함을 주고자 특이하게 보일 수 있는 물고기들을 직접 캐리커쳐하여 적용

* 소셜 페이지 퍼블리싱

Instagram을 모티브로 퍼블리싱 수행, 사용자 편의를 위해 무한 스크룰 적용

* http 통신 연동

Axios를 활용해 비동기 통신을 수행하며 백엔드와 연동 과정 수행

[성과 / 학습]

* React 훅 사용 역량 향상

* axios를 통한 비동기통신 이해

* 상태관리 라이브러리 활용을 통해 JWT 관리

README

개       요 | VR을 활용해 가상환경에서 구조물, 컨텐츠를 프로토타이핑 할 수 있는 서비스

기술 / 환경 | VR, UnrealEngine4, C++

담당   역할 | 클라이언트 개발

구현   사항 | 가상 환경 내 사용자 위젯 제작, 및 기즈모 관련 기능 구현

성과 / 학습  | 3차원 환경 개발에 대한 경험 및, 협업 역량 향상

참고   링크 | UCC

• 1600 시간 웹 풀스택 교육 이수

• 1학기 | HTML, JavaScript 기반의 프론트엔드와 Java, Spring 기반의 백엔드교육

• 2학기 | Git, Jira 활용 협업 프로젝트 수행 ( 프론트엔드 수행 - React, Next.js )

• 스터디 | 협업 구성원간 원활한 의사소통력을 키우기 위해 서로 다른 직군을 지향하는 인원 간 지식공유 및 브리핑 스터디 진행

• 부울경 지역 대표 및 반장 활동 수행 [임직원 분들과 함께 교육장 환경 개선 및 타 지역 간 정보교류 활동 수행]