미리보기

개발 생산성을 높이기 위해, VanillaJs로 작성된 Form,Grid 형태의 게시판을 React + TypeScript 마이그레이션

1. Numeric Input 구현

• 기능 : 사용자가 설정한 자릿수마다 설정한 특수문자를 삽입하고 최대 자릿수를 체크
• 문제 : 해당 작업을 useEffect로 컴포넌트 자체에서 처리하다 보니 비즈니스 로직과 상태가 분리되지 못함
• 해결 : useValidator, useDataFormatReverter, onDataFormatter 등 custom hook으로 비즈니스 로직 분리

2. GridTreeComponent 구현

• 기능 : 부모 요소와 자식 요소를 나누어서 렌더링하고, 부모 요소의 아이콘을 클릭하면 해당 그룹을 show/hide, 체크박스를 클릭하면 해당 그룹을 다 check/unCheck
• 문제 : RowListData가 1차원 배열로 내려오면 어떻게 부모와 자식을 구분할 것인가
• 해결 : Row 데이터 하나마다 부모 그룹을 설정하여 빈값이면 부모인 것이고, 아니라면 자식 요소라고 판단

3. GridKeyboardActive 기능 구현

• 기능 : Up, Down Key 입력 시 해당 Row의 Index를 찾아 Active 되며 해당 Element로 Scroll 이동
• 문제 : Active 될 때 Row의 상태를 변경, 전체 리렌더링되는데 특정 Key를 계속 누를 시 성능 이슈 발생
• 해결 : 컴포넌트의 props가 바뀌지 않았다면, 레렌더링을 방지하여 Row컴포넌트 성능 최적화

4. Row 한 줄과 Row 안의 Cell 하나하나마다 BackgroundColor, FontColor, FontSize Style을 설정 조건부 서식 기능 개발

5. onContextMenu 팝업 기능 개발

기존 PHP로 작성된 프로젝트 Nuxt.js 마이그레이션

1. 튜터 프로필 페이지 Iframe 기능

• 문제 : 고객분들이 항상 같은 질문을 하여 CS 부서의 업무가 증대
• 해결 : 기획 단계에서 주도적으로 참여하여 자주 묻는 질문 답변 영상을 만들자고 건의
• 성과 : CS 대응 30% 감소

2. 튜터링 신청 페이지 임시저장 기능

• 문제 : 해당 페이지 이탈 시, 작성 중이던 데이터가 날아가서 신청률이 저조해지는 문제
• 해결 : 브라우저 저장소를 통하여 저장하여, 임시 저장된 데이터가 있다면 불러오거나 새로 작성할 것인지 선택
• 성과 : 튜터링 신청률 120% 증가

3. 크로스 브라우징 이슈 CORS

• 문제 : 백엔드 쪽에서 허용 도메인을 설정하였으나, 계속하여 preflight 요청 발생하며 네트워크 통신이 되지 않음.
• 해결 : 스프링 시큐리티 CORS 허용 정책 세팅하는 법이 따로 있어서 해당 부분을 백엔드 개발자분에게 전파
• 성과 : 개발팀 커뮤니케이션 능력 증대

4. 세션 기반 인증 체계를 토큰 기반 인증 체계(JWT)로 변경

• 문제 : 세션 객체를 데이터 베이스에 저장하다보니 유저가 많아 질수록 부하가 걸릴 수 있다.
• 해결 : 브라우저 저장소에 jwtToken을 저장해놓고 인터셉터에서 확인하여 존재한다면 로그인 처리, 존재하지 않는다면 로그인 페이지로 이동시킨다.
• 성과 : 서버 부하 10% 감소 및 보안성 증대

1. 불필요한 API 요청 제거 목적 미들웨어 Redux Saga 도입 제안

• 문제 : 어떠한 요청을 하는 버튼을 빠르게 5번 클릭한다면 해당 요청을 5번 다 진행하는 문제
• 해결 : redux-saga의 주요함수 takeLatest를 이용
• 성과 : 기존에 진행 중이던 작업이 있다면 취소 처리하고 가장 마지막으로 실행된 작업만 수행하도록 변경.

2. 웹 앱 기반 브라우저(Chrome, Safari)에서 트러블 슈팅 개선

• 문제 : Input태그 type을 'number'로 설정하였으나, IOS 에서특수문자가 혼용된 키보드가 적용되는 현상
• 해결 : Input태그에 attribute를 추가 inputmode="numeric" pattern="[0-9]*"
• 성과 : 사용자 UX 개선

3. media query사용하여 반응형 PC / Mobile 웹페이지 개발

1. 메인 페이지 검색바에 상품 최근 검색어를 노출하는 기능 개발
2. 검색어 순위 변동시 랭킹을 변경하는 기능 개발
3. media query사용하여 반응형 PC / Mobile 웹페이지 개발
4. 각종 UI/UX 작업

사용기술

• Typescript, ReactNative, StyleSheet

구성

• 백엔드3, 프론트1 (본인 100%)

기능

• Shorts Reels
• FCM
• apk 빌드
• 소셜 로그인 (Kakao, Naver, Google)
• Naver Map
• 랜덤 닉네임 생성 및 인증
• JWT token 인증
• 캐루셀

문제

• Apple 소셜 로그인 이메일 정보 비공개 시 처리 이슈 발생
• 메인 페이지에서 Shorts 화면을 동영상으로 보여줄 시 성능 이슈 발생
• 네이버 맵에서 지속적으로 사용자의 위치를 받아오다 앱을 내렸을 때 위치를 받아 오지 못하는 이슈

해결

• 동일한 PhoneNumber의 경우 가입방지
• 최초 렌더링 화면은 섬네일로 교체하고 클릭 시 영상 재생
• 포어그라운드 이용하여 React-native AppState check

사용기술

• ReactQuery, Graphql

구성

• 개인

기능

• ProductList
• Product Detail
• 제품 담기
• cart 페이지에서 해당 제품과 개수 선택시 결제액 보여주기

도입계기

• 기존에 ReactQuery를 사용하지 않으면, Product List API 값으로 리스트와 상세페이지를 보여주고 있는데 리스트와 상세페이지를 들어가고 나올 때마다 API를 요청함
• 필요하지 않은 프로퍼티의 데이터도 받아서 불필요한 요청을 함.

학습내용

• clientState와 ServerState의 상태 분리하여 상태관리
• Stale time 관리로 불필요한 API 방지하는 법
• OverFetching, UnderFetching 개념

사용기술

• Next.js, PWA

구성

• 개인

기능

• 노션 이력서를 웹,데스크탑,모바일에서 볼 수 있음.

도입계기

• 데스크톱 앱을 만들려면 일렉트론이라는 기술로 따로 만들어야 하는 불편함이 있어 웹, 모바일, 데스크톱까지 한 번에 개발할 수 있는 PWA로 개발

학습내용

• 데스크톱 앱
• 웹이기 때문에 심사를 거치지 않고, 빠른 코드 푸시 가능
• 푸시알람 가능
• 백그라운드 동기화

인원 : 프론트엔드 개발팀

• 자바스크립트 (실행컨텍스트, 콜스텍, 호이스팅, this, 스코프체인, 클로저, 이벤트루프)
• 문자인코딩 (아스키코드, 유니코드, base64, 문자열과 숫자형)
• 네트워크 (계층, 프록시,HTTP, CORS)
• 브라우저 렌더링 (파싱, 레이아웃, 페인트, 고속스크롤불가영역)
• 리액트(리액트 직접만들기, 렌더링방식, 순수하게 유지하기, 리렌더링조건, hook, context와 전역상태관리자차이, useCallBack, useMemo, ref, useEffect, SyntheticEvent, Fiber)

인원 : 2명
JavaScript Deep Dive 요약1

• var와 let, const의 선언시 undefined 초기화 차이로 인한 호이스팅 상관관계
• immutable과 mutable의 차이
• 얇은복사와 깊은복사 차이
• 스코프체인
• 실행컨텍스트
• 클로져