미리보기

React, Next.js 기반 플랫폼 개발 및 유지 보수

Linux, Windows, Docker 서버에 프로그램 직접 배포 및 관리

프로그램 자동 실행 구축

IoT 데이터 및 공공데이터 연동

UI/UX 기획, 설계 및 구현

기술 스택 : Next.js, Emotion, TypeScript, Socket.io, Axios, PM2, Git, Figma

설명 : 분산된 사이트들을 하나의 플랫폼으로 통합 및 개선 작업

핵심 내용

• Excel 다운, Socket 연결 등 공통 기능 모듈화

  • 상태 관리 함수는 Custom Hook으로, 독립적인 함수는 Util function으로 분리

• Socket.io로 CCTV 연결

  • 영상 데이터를 Blob 형태로 변환, Canvas로 출력

  • 필요하지 않은 경우 Socket 연결 해제, 리소스 사용 최소화

• Highchart로 실시간 그래프 구현

  • Socket.io로 실시간 데이터 수신, Highcharts 그래프에 반영

  • setInterval로 그래프 타임라인 설정

  • 데이터 유형을 구분하여 그래프에 동적 추가

• 속보 알림 시스템 개발

  • 공공 데이터 포털 Open API 연결, 속보 데이터가 있을 경우에만 화면에 표시

  • 여러 속보 발생 시 순차적으로 알림 표시, 정보가 겹치지 않도록 구현

• ESLint와 Prettier & 코드 리뷰 제안

• 입력 필드, 배포 절차, 배포 현황, Git-flow 등 문서화 후 팀원들과 공유

• Figma를 활용한 UI/UX 설계 및 구현

기술 스택 : Next.js, React, NSSM, Systemd, Windows Server, Linux

설명 : 서버 재부팅 시 플랫폼이 자동으로 실행되도록 설정.

핵심 내용

• 자동 실행 설정으로 서버 안정성 강화 및 운영 효율성 향상

  • 재부팅 후 수동 실행 설정으로 인한 사용자 민원 발생

  • 운영 효율성 및 민원 해소를 위해 플랫폼 자동 실행 필요성을 인식

  • Systemd를 사용해 Linux 서버 자동 실행 설정

  • NSSM을 사용해 Windows 서버 자동 실행 설정

• NSSM Error

  • NSSM을 통해 Next.js의 app.js 파일 직접 실행, build error 발생

  • 배치 파일 작성, NSSM이 배치 파일을 실행하도록 설정

• 사용자 민원 발생률 감소, 운영 시간 절감, 개발 생산성 향상

Blog Link : https://coding-je.com/entry/윈도우-서비스로-재부팅시-자동실행-설정하기-feat-nextjs

기술 스택 : Next.js, TypeScript, Nginx, Git, Let’s Encrypt

설명 : 기존 플랫폼을 소프트웨어 품질인증(GS인증) 기준에 맞게 수정

핵심 내용

• Let’s Encrypt로 HTTPS 전환 및 인증서 자동 갱신 설정

  • Certbot 사용해 Linux 서버 HTTPS 인증서 발급

  • win-acme 사용해 Windows 서버 HTTPS 인증서 발급

  • HTTPS 인증서 Nginx 연결

  • 6개월 마다 자동으로 HTTPS 인증서 갱신되도록 설정

• Nginx, HTTPS 연결 Error

  • 인증서 연결 에러 발생, telnet으로 443 포트 확인 후 해당 포트를 열어 문제 해결

  • API 호출 시 Mixed Content 에러 발생, Nginx의 proxy_pass 통해 해결

• 에러 처리 로직 강화

  • Axios interceptors로 401 및 500 에러 공통 처리 구축, 사용자 경험 향상 및 서버 안정성 확보

• 데이터 입력 및 UI 일관성 개선

  • 입력 필드 표준 제한 기준을 찾아 엑셀로 정리 후 각 필드에 적용, 데이터 입력 오류 감소

  • 공통 UI 컴포넌트 정리, 일관된 디자인과 스타일링 적용

Blog Link : https://codingirl.tistory.com/entry/윈도우-리눅스-HTTPS-인증서-발급-방법-Lets-Encrypt

기술 스택 : React, Next.js, TypeScript, Docker, PM2, Git, Figma, Mui, Redux, react-query

설명 : 조기경보 시스템 플랫폼 웹 & 모바일 기획 및 개발

핵심 내용

• React 플랫폼 설계 및 배포까지 단독 개발

  • 웹 & 모바일 UX/UI 설계, 반응형 디자인 적용

  • 아이콘 & 공통적인 UI 요소 컴포넌트화, 재사용 가능한 구조로 구성

  • Material-UI 활용, 개발 시간 단축 및 일관된 디자인 유지

• Docker 컨테이너 생성 및 배포 환경 구성

  • 개발 & 운영 서버 날짜별로 엑셀에 기록하여 배포 관리

  • tar 압축 방식 활용, 배포 시간 하루에서 10분으로 단축

• PM2를 활용한 무중단 서버 설정

  • ecosystem.config.js를 활용, 개발 및 운영 환경 관리

  • 클러스터 모드 활용, 다중 프로세스로 애플리케이션 실행

• react-query를 활용한 데이터 관리

  • useQuery의 상태 관리 기능을 통해 데이터 관리

기술 스택 : Next.js, Tailwind, TypeScript, NextAuth, Context API, Git

설명 : 농장/목장 체험 웹사이트 개발

핵심 내용

• NextAuth를 활용한 로그인 및 회원가입 기능 구현

  • NextAuth의 Credentials 기능 사용, 백엔드와 연동된 로그인 및 회원가입 기능 구현

  • getServerSession을 사용해 서버 컴포넌트에서 토큰을 받아올 수 있도록 설정

• Context API 활용, 사용자 인증 정보 전역 관리

  • 중복된 prop 전달 없이 인증 상태 참조 가능하도록 설정

• Google maps API의 marker 활용, 지도에 농장 위치 표시

배포 URL : http://wefarm.kro.kr/

Blog Link : https://coding-je.com/entry/회고록-농림축산식품부-공공데이터-활용-창업경진대회-후기

기술 스택 : React, Typescript, react-query, ContextAPI, Axios

설명 : 주문 내역과 택배 배송 상태를 관리할 수 있는 관리자용 웹 사이트 개발

핵심 내용

• 커스텀 훅을 활용한 데이터 공통 관리

  • 페이지마다 중복되는 데이터 처리를 위해 커스텀 훅 사용

  • useQuery로 서버 데이터 페칭 및 ContextAPI로 전역 상태 관리

  • 페이지 상태에 맞춰 동적으로 처리, 로딩/에러 상태 관리

• React Profiler를 활용한 성능 개선

  • ContextAPI provider 범위 수정, 불필요한 리렌더링 제거

• Login Error

  • 로그인 후 API 요청 시, 토큰을 가져오지 못하는 문제 발생

  • axios.create가 처음 호출 됐을 때, 한 번만 실행되기 때문

  • axios의 interceptors 활용, 매 요청마다 최신 토큰을 넣도록 수정

• Title 깜빡임 해결

  • 메뉴 변경 시 Title 깜빡임 발생

  • useMemo로 컴포넌트 렌더링 시 제목을 즉시 업데이트 하도록 수정, 깜빡임 해결

• input multiple 활용한 다중 이미지 등록 구현

  • URL.createObjectURL 활용, 사진 미리보기 구현

JS & React 딥다이브

• Vanilla JavaScript로 SPA와 가상 DOM 직접 구현, DOM의 동작 원리 심화 학습

• 직접 hook을 구현하여 React Hooks의 동작 원리 학습

• useMemo, useCallback을 활용한 메모이제이션과 프로파일링 도구 활용 및 성능 최적화 경험

클린 코드 작성

• 더티 코드를 클린 코드로 수정, 안좋은 코드의 기준을 세우게 됨

• 함수형 프로그래밍과 FSD(Feature-Sliced Design) 경험

• Zustand, React Query을 활용한 리팩터링

테스트 코드

• Vitest 단위 테스트 작성, TDD

성능 분석 도구를 사용한 성능최적화와 SEO 최적화

Blog Link

• 항해 플러스, 바닐라 자바스크립트로 SPA 만들기

• 항해 플러스, React Hooks 구현하기

• 클린 코드란?

• FSD 폴더 구조란?