- Nextjs 를 메인 프레임워크로 개발중 입니다.
- Nextjs 스터디는 참고 자료의 저작권에 의해, 당분간
Github대신Notion을 활용합니다. (비공개) - 블로그 v2 (개발중)
- 🏙 Deepnatural 에서 Front-End 를 담당하고 있습니다.
NextJS환경의 신규 서비스 개발- 생성형 AI 서비스,
Lave프로젝트를 개발중 입니다. - 학습 데이터 구축을 위한
레이블러 콘솔 v2를 개발 (Lave개발을 위해 개발 중지 상태)
- 생성형 AI 서비스,
데이터 가공 작업도구개발NextJS환경의 작업도구 개발Vue 2환경의 작업도구 개발
- 🤗
React와Typescript를 좋아합니다. - 🤔 요즘은 코드의 가독성 & 전달력 을 높일 수 있도록
Custom Hook (React),Composable (Vue)설계에 대한 고민중 입니다. - 🫠 2024년에는
Three.js스터디와 블로그 Profile 페이지를 3D 로 구현하는 것을 목표중 하나로 선정하였습니다.
- 언어:
- 프레임워크:
- 비동기처리:
- 다국어:
- 테스트유닛:
- 비전개발:
- 다이어그램 툴:
- 정보처리기사 (2019. 8. 16 취득)
- 근무 지역: 서울 신논현
- (개발중) 신규 서비스,
Lave- Lave 링크: https://lave.ai
- 생성형 AI 서비스
- 챗봇 서비스
- 한복 프로필 이미지 생성 서비스
- 프레임워크:
Nextjs - 상태관리:
@reduxjs/toolkit,redux-saga - 스타일시트:
styled-components - UI 프레임워크:
@chakra-ui - 현재 구현된 기능
- 새로운 상태관리 구조 고안 및 적용
- API state:
Redux - Layout state:
React Context API
- API state:
Google Oauth2연동 및인증 Token상태 관리i18next와dayjs연동으로 다국어 지원 기능 강화redux-saga를 사용하여 주기적인 데이터 조회polling기능 구현Google Analytics 4연동- 챗봇 서비스 개발 완료 및 출시
- 새로운 상태관리 구조 고안 및 적용
- (개발중지) 신규 서비스,
레이블러 콘솔 v2구현- 신규 서비스를 구현하며, 장기적으로는 기존의
Vue2플랫폼의 마이그레이션 까지 예정 입니다. - 프레임워크:
Nextjs - 상태관리:
@reduxjs/toolkit,redux-saga - 스타일시트:
styled-components - UI 프레임워크:
@chakra-ui - 현재 구현된 기능
- 서버 응답에 따라 동적으로 입력 요소 렌더링
- 중첩 레이아웃 및 레이아웃 조합
accessToken및refreshToken을 활용한 세션 유지i18next와Google Spreadsheet를 사용한다국어styled-components에디자인 시스템적용Github actions를 사용한CI/CD
- 신규 서비스를 구현하며, 장기적으로는 기존의
- 모바일 광고 메시지 수집 작업도구 구현
- 텍스트를 수집하는 작업도구 입니다.
- 프레임워크:
Nextjs - 주요 기능
- 텍스트 입력
- 유형 카테고리 선택 (예: 통신사, 보험)
- 심전도 그래프 라벨링 작업도구 구현
- 심전도 그래프 라벨링 작업도구 입니다.
- 프레임워크:
Vue2 - 주요 기능
Y 축좌표값 데이터를SVG 그래프로 변환SVG 그래프의 특정 좌표 선택- 선택한
Y축태깅 - 태그 제약조건 (예:
T_on 라벨-T_off 라벨의 순서) - 그래프의
X축,Y축개별확대/축소 - 그래프
X축이동 - 그리드 배경
- 이미지 수집 작업도구 구현
- 복수의 사진 업로드 작업도구 입니다.
- 프레임워크:
Nextjs - 주요 기능
- 이미지 최대 사이즈
- 개별 이미지 업로드 진행률에 대한
로딩바제공 - 업로드 실패 시, 해당 이미지들만 일괄 재업로드
- 모든 이미지 업로드 완료 시, 제출 가능
- 기계독해 작업도구 구현
- 숫자, 날짜 연산 및 원문의 특정 택스트 추출 작업도구 입니다.
- 프레임워크:
Vue2 - 주요 기능
- 숫자의 자리수(쉼표) 표기
- 숫자를 한글로 변환 (예: 1억 2천 3백)
- 작업자가 입력한
수식(텍스트)를 함수로 변환하여 연산 (예:a * (a / b),(a - b) / (a + b)) - 원문 클릭 시,
완전한 문장으로 추출 - 원문에 존재하는 모든 숫자에
하이라이트
Canvas API를 이용한Line기능 추가Canvas API로 구현된 작업도구에Line을 그리는 기능을 추가 하였습니다.- 프레임워크:
Vue2 - 주요 기능
Line의 좌표값 추출- 확대/축소 에 대한 좌표값 보정
- 작업도구 공용 단축키 구현 (제출, 검수, 반려, 보류 등..)
Rxjs를 사용하여 observer 패턴 사용- 프레임워크:
Vue2 - 주요 기능
- 상황별 단축키 Observer 구독 및 해제
- 감성분류2 작업도구 구현
- 화자의 발화에 대하여 어떠한 감성인지 분류하는 작업도구 입니다.
- 프레임워크:
Vue2 - 주요 기능
원문에서 특정 발화 선택 -> 감성 태그 선택으로 각 발화에 대한 감성을 지정합니다.- 발화에 감성 선택 시, 다음 미지정 발화 자동 선택
- 방향키를 이용한 발화 선택 가능
- 단축키로 발화 선택 가능
- 선택한 발화가 화면 중앙에 위치하도록 자동 스크롤 이동
- 감성 분류가 누락될 시, 제출 불가
- 감성분류1 작업도구 구현
- 원문의 부분 택스트에 태그를 하여, 해당 텍스트의
태그,텍스트,start/end index를 추출하는 작업도구 입니다. - 프레임워크:
Vue2 - 주요 기능
원문의 부분 텍스트 드래그 -> 태그 선택으로 원문에 태그 삽입- 태그를 지정한 텍스트는 다음과 같은 구성으로 가공 합니다.
text: 원문에서 선택한 텍스트start: 원문 기준, 텍스트의 시작indexend: 원문 기준, 텍스트의 끝index
- 원문의 부분 택스트에 태그를 하여, 해당 텍스트의
- 문서분류 작업도구 구현
- 원문을 읽고,
주제,인물,조직/기관,제품에 대한 분류 작업도구 입니다. - 프레임워크:
Vue2 - 주요 기능
- 태그 클릭으로 문서에 대한 상세 분류 작성
- 태그 카테고리는
통합 태그와하위 태그로 구성되며,통합 태그선택/해제 시,하위 태그일관 선택/해제 - 각 태그 카테고리의 개수 제한
- 원문을 읽고,
- 자유대화1 작업도구 구현
- 원문을 읽고, 작업자는 화자 2명의 대화를 창작하는 작업도구 입니다.
- 프레임워크:
Vue2 - 주요 기능
- 발화 입력 기능
- 교차 대화 방식을 위한 화자의 턴 변경 (자동)
- 발화 사이에 지정된 태그 입력 (태그 목록 클릭)
- 화자의 턴 개수에 대한 제출 조건 (미충족 시, 제출불가)
- 특정 태그에 한해 사용 개수 제한 및 제출 조건 (미충족 시, 제출불가)
- 각 발화의
trim보정
[-Project-study-time-checking] 토이 프로젝트: 2022. 05. 10 ~ 2022. 05.29
- 근무 지역: 부산 사상
- MES (생산 관리 시스템) 구현 (Vue2)
- 회사 홈페이지 구현 (Vue2)
Nextjs에 관심이 있으며SEO에 초점을 둔 블로그 개발을 진행하며 SSR, CSR, SSG 를 혼합하여 사용해보고 있습니다.- 단일 기능의 Custom Hook 으로 분리하여 구현, 조합하는 방식을 시도중입니다.
Three.js스터디를 진행중이며, 3D 인터렉션 블로그 구현을 첫번째 목표로 세웠습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent