미리보기

에이비엠랩은 기술 트렌드에 민감하게 반응하며, 빅데이터와 인공지능을 활용하여 대학생 시장에 파급력을 전달하는 디지털 마케팅 및 콘텐츠를 제공하며 높은 고객 및 서비스 이해도를 바탕으로 대학교/기관/기업을 위한 웹/앱 서비스를 제공하는 IT 기반 스타트업입니다.

[자사사이트]

php로 개발되어있던 자사사이트를 nextjs로 리뉴얼했으며 퍼블리셔의 경험을 살려 인터렉션, 애니메이션을 제안해 사이트에 생동감을 주었습니다. 이외에도 홍보를 위한 디자인랩, 채용사이트를 제작하였으며 채용포지션은 금일날짜와 비교해 노출여부를 판단하는 코드를 넣는 등 유지보수와 확장성을 고려해 제작했습니다. 또한 기존 외부 메일링크로 통하는 문의하기 기능을 nodemailer를 사용해 사이트내에서 직접 메일전송을 가능하도록 만들었습니다

[자사서비스]

자사서비스인 엔퍼센트 어드민에 타입스크립트를 도입하여 더욱 안정성 있는 웹사이트로 개선작업을 하였으며 코드품질 향상을위해 재사용이 가능하다고 판단되는 코드는 컴포넌트로 분리하는 코드리팩토링을 진행하였습니다.

[외주프로젝트]

이외 SI 프로젝트에서는 Next.js와 React.js를 활용하여 전체적인 웹 애플리케이션을 구축했습니다. 서버 데이터는 TanStack Query를 사용해 캐싱하여 불필요한 네트워크 요청을 줄였고, 확장성을 고려해 Zustand 또는 Recoil을 활용해 전역 상태를 관리했습니다. 특히 외부 API를 호출하는 부분에서는 Next.js의 서버 컴포넌트를 적극적으로 활용하여 요청 횟수를 최소화함으로써 API 호출 비용을 절감했습니다. 메타 태그, Open Graph(OG) 태그 등을 적용하고 동적페이지에서도 next/head를 활용해 개별 페이지별로 적절한 메타 데이터를 설정하는등 SEO를 소홀히 하지않았습니다.

사용 기술

• Reactjs, Nextjs, tanstack-query, zustand

이커머스 관련 기업 (Website)

[F&F 커머스 사이트 제작 및 유지보수]

• 카페24를 통한 세르지오타키니, 수프라, 듀베티카 사이트 구축 및 유지보수

• 현업과 개발팀이 같은 목표를 향해 협업할 수 있도록 기술을 쉽게 풀어서 설명하고 현실적인 대안 제시

[아레나 사이트 제작]

• 카페24를 통한 사이트제작

• 기업의 독특한 요구사항이나 컨셉에 부합하는 맞춤형 서비스를 제공해 클라이언트의 니즈를 충족 시킴.

• 기존사이트의 데이터를 이전하는 마이그레이션 작업

[각종 랜딩페이지 작업]

• 퍼블리싱 담당

• SEO 고려와 웹 표준, 접근성에 신경쓰며 다수의 랜딩페이지 작업 수행.

• 기획자와의 지속적인 소통을 통해 사이트 인터렉션 및 기능 개선에 기여.

사용 기술

• HTML, CSS, jQuery

• Stack

  • Nextjs

• Description

  • 토큰을 이용한 로그인기능 구현

  • 장바구니 금액계산

  • 포트원 결제연동

• Experience

  • API 요청 시마다 최신 토큰을 요청 헤더에 자동으로 추가하고, 응답에서 발생하는 오류를 처리하는 로직을 구현한 코드입니다. 요청을 보낼 때마다 GetStorage("isUser")로 토큰을 가져와 Authorization 헤더에 추가하고, 응답에서 401 오류(로그인 만료)가 발생하면 사용자 정보를 삭제하고 로그인 페이지로 리다이렉트합니다. 이를 통해 인증된 사용자만 요청을 보낼 수 있도록 하며, 로그인 상태를 유지합니다.

• Stack

  • Reactjs

• Description

  • 기존 프로젝트의 TypeScript 마이그레이션 작업을 수행하여 코드 안정성과 유지보수성을 향상시켰습니다

  • 기존 JavaScript 코드에서 타입 안정성을 보장하도록 타입 정의 및 제네릭 적용을 진행했습니다

  • ESLint 및 Prettier 설정을 적용하여 일관된 코드 스타일 유지 및 개발 효율성 개선했습니다

  • 마이그레이션 과정에서 발생할 수 있는 런타임 오류를 사전에 방지하고, 불필요한 any 타입을 최소화하여 코드 품질을 향상시켰습니다

• Experience

  • JavaScript에서 TypeScript로 전환하는 과정에서, 타입 추론, 유틸리티 타입, 인터페이스 확장 등을 활용하여 코드 개선하였고

    기존 API 호출 로직을 TypeScript 환경에서 최적화하고, API 응답 타입을 정의하여 안정적인 데이터 핸들링을 구현했습니다, 점진적으로 TypeScript를 도입하는 전략을 수립하고, 단계별 마이그레이션 플랜을 운영하여 무리 없이 전환을 완료하였습니다.

사이트 제작 및 유지보수

• Stack

  • Nextjs를 활용한 웹 애플리케이션 개발

• Description

  • 관리자 페이지에서 게시판 내용 등록

  • 유튜브 API 데이터 연동하여 인기순으로 노출

  • pdfjs를 통한 첨부파일 다운로드

  • 에디터를 적용하여 직관적인 게시글 작성 환경 제공

• Experience

  • 캐싱하여 관리하는 방식으로 API 요청 횟수를 줄이고, 안정적으로 데이터를 제공하는 방식을 구현했습니다. 이를 위해 Next.js 서버 컴포넌트에서 일정 주기로 유튜브 데이터를 가져와 저장하고, 클라이언트는 해당 데이터를 조회하도록 하여 불필요한 API 호출을 최소화했습니다.

    최신 데이터를 유지하면서도 API 호출 제한을 효과적으로 관리할 수 있도록 설계했습니다. 이를 통해 API 비용 절감과 성능 최적화를 동시에 달성하는 경험을 했습니다.

시즌1: 자바스크립트 딥다이브 완독을하고 개인 노션에 이를 기록했습니다 (Notion)

시즌2: 리액트 기본기를 다지며 강의 목표를 함께 두고 사이드프로젝트를 제작하였습니다(Github)

깃허브링크

의도적으로 성능을 저하시키는 코드를 만들어 이를 개선하는 작업을 진행하고있습니다.

성능측정은 lighthouse를 통해 이루어지며 개선과정을 readme에 기록하고 있습니다.