<Yeonny0723/> <Yeonny0723/>

문제 배경 코드 컨벤션 상이 30여 개가 넘는 사내 시스템을 개별 담당자가 관리하며, 상이한 코드 컨벤션으로 유지 보수에 많은 비용이 들어가던 이슈. 산재되어 있던 공통 컴포넌트 / 로직 산재되어 있던 컴포넌트 / 훅 / 유틸리티 함수로 신규 개발 및 운영에 있어 반복적인 공수가 들어가던 이슈 패키지 버전 상이 프로젝트 별 호환되지 않는 패키지 버전을 사용하며 코드 통일성을 해치던 문제. 목표 공통 로직(컴포넌트/훅/유틸함수)을 별도의 레포지토리로 분리하고, 독립적으로 빌드가 가능해지게 구성하여 다른 애플리케이션에서도 확장해서 사용할 수 있게 함을 목표로 함. 목표 달성을 위하여 다음 방법을 고민했음. (1) 깃 서브 모듈, (2) npm 패키지 개발. 각각의 방법이 저마다의 어려움이 있어 결론적으론 사..

배경 사내 원격 IIS 서버에 처음으로 Gitlab CI를 도입해 CI/CD 파이프라인을 구축하며, 참고할 수 있던 소스가 너무 적고 산재되어있어 누군가에겐 도움이 될까 싶어 참고했었던 링크 및 마주쳤던 오류 사항을 정리해보았습니다. 개발환경 Visual Studio 2019 Asp.net 5.0 React 17 (Vite) 시스템 확장을 고려해 Vite 번들링 툴을 선택하여 Asp.net > ClientApp 프로젝트를 별도로 구성. 배포환경 사내 원격 IIS 서버 문제점 (1) 기존 수동 배포 프로세스의 번거로움 소스코드 수정 → commit → 솔루션 정리 → 빌드 → 게시 (대규모 프로젝트의 경우 대기시간 김) → 기존 파일 수동 백업 → 운영 중인 풀 중단 → 게시된 파일 붙여넣기 → 풀 재 구..

🍔 소개 2023년 4월 10일부터 7월 10일까지 3개월 동안, 프론트엔드 개발자로 인턴십을 진행했다. 소속된 팀은 "정보관리팀"으로, 회사 내부 시스템 개발 및 운영을 담당하는 팀이다. 정규직 전환 후 두 달이 지났으며, 이번 글에서는 인턴 기간 동안 진행했던 프로젝트와 얻은 경험을 회고하고자 한다. 🍔 목표 이번 인턴십을 통해, 이전까지 경험하지 못한 협업을 경험하고, 스스로가 만들 수 있는 가치에 대한 인식을 키워보고 싶었다. 🍔 프로젝트 및 업무 내용 프론트엔드 개발자로 입사하였음에도 팀 특성상 다양한 프로젝트를 접하고 도구를 다룰 수 있었고, 이를 통해 개발 자체를 목적이 아니라 수단으로 사용하는 시간이 되었던 것 같다! 자회사 홈페이지 제작 (https://sparrowfasoo.com/kr..

🍑 배경 사이드 프로젝트에서 글 사이에 이미지를 넣고 관리할 수 있는 게시판 CRUD 기능을 만들어야 했다. 이미지, 게시글 작성 관리 방식에 대규모 수정이 여러 번 있었고… 최종 선택한 방식과 함께 접근했던 방식을 정리해보고 싶어서 포스팅을 작성한다..! 🍑 생각했던 방법들… 이미지를 선택할 때마다 s3 스토리지에 이미지를 저장하고 → 응답으로 넘겨준 주소를 img 태그로 추가하여 프론트에 보여주는 방법 글 작성을 완료하기도 전에 이미지 업로드 → 완료 전 취소한다면 낭비가… 이미지 및 글 전체 다 전송 일반적으로 웹 서버에서 request body 사이즈 제한을 걸어서 운용하기에 대용량 또는 여러 파일 업로드 시 문제를 쉽게 만난다… 일반적으로 스토리지는 공용 사용을 위해 서버와 별개로 구축한다고 함..

🍎 배경 현재 사이드 프로젝트로 커뮤니티 앱 개발을 진행 중이다. 기존의 jwt 토큰 기반 인증/인가 방식에서 Session Cookie 기반의 방식으로 변경하게 되었다. 구현해야 할 기능과 각 방식의 장단점을 고려하여 선택을 내렸고, 그 과정 얻은 지식과 결정 과정을 공유하고자 한다. 🍎 읽기 전 용어 정리 간단하게 짚고 넘어가면 이해에 도움이 될 것 같다. 인증 == Authentication ≒ 로그인 인가 == Authorization ≒ 로그인된 상태에서 일어나는 일을 허락해 주는 것 🍎 Session Cookie 인증/인가 방식 사용자가 로그인을 시도한다. 사용자의 실제 인증 정보를 서버 측 세션 저장소에 저장한다. 사용자에게 저장된 세션 정보의 식별자인 session id를 발급한다. 발급한..

🍋 배경 아래 이미지와 같이 콘텐츠를 동적으로 바꿀 수 있고 & 보여주는 시점으로부터 3초 후 언마운트되는 스낵바를 개발하였다. 모든 스낵바 컴포넌트에 마운트 된 3초 후 언마운트되는 로직을 적용하는 것과 같이, 특정 컴포넌트에 반복적으로 적용할 로직이 있는 경우, 그 코드를 응집화 시킬 수 있는 방안에 대해 고민해보았다. 🍋 결과물 🍋 수정 전 다음은 스낵바 컴포넌트를 생성하고 사용하는 구문이다. content prop으로 내부 콘텐츠를 동적으로 받아올 수 있으며, 스낵바를 보여주고 싶을 때 Main 구문 내 activateSnackbar 함수를 호출하여, 그 시점으로부터 3초가 지난 시점에 스낵바가 자동으로 unmount 된다. // 스낵바 컴포넌트 선언 function Snackbar({conten..

🍋 배경 별도의 api 서버를 두고 호출해서 사용하는 리액트 정적 페이지 배포를 진행하던 중, 새로 고침 시 404 오류가 뜨는 이슈를 맞닥뜨렸다. (IIS 서버에 api 서버 및 정적 페이지가 배포된 상황이었고, 정적 페이지는 example.com/registration 이라는 상세 도메인을 가진 상황) 🍋 원인 URL이 해석되는 장소로 많이들 들어보셨겠지만 두가지 장소, 서버 사이드 & 클라이언트 사이드가 있는데... 서버 사이드 렌더링 방식을 단순화하자면... 유저가 특정 url 로 접속 → 서버로 요청을 보내고 → 구성했던 페이지를 보여준다. 리액트 라우터가 지원하는 클라이언트 사이드 라우팅은, 유저가 특정 url 로 접속 → 서버는 빈 index.html 파일 및 스크립트 파일을 전달하고 → 이..

🥝 맥락 홈페이지 방문 IP 별 관심있는 페이지 정보를 분석하고, 분석한 정보를 바탕으로 관심 제품 추천 메시지를 노출시킬 수 있는 팝업 모듈을 개발하는 프로젝트를 기획부터-개발하였다. (프로젝트 상세 설명은 추후 포스팅에 이어집니닷) 🥝 문제 IP 별로 부여한 맞춤형 메시지를 수기로 추적하고 갱신시키는 작업은 번거롭고 이는 곧 비용을 의미하기에, 메시지 유효일을 선택하고, 선택한 유효일이 지난 시점 기준 자동으로 메시지를 삭제시키는 스케쥴링 작업을 적용해보았다. 🥝 환경 사내 홈페이지 및 데이터베이스 서버는 Kinsta(*워드프레스 웹사이트 및 데이터베이스 호스팅 서비스)를 통해 운영되고 있었다. 장점. 높은 자유도 - 웹사이트 빌더 중 하나인 워드프레스는 빠른 초기 웹사이트 구축을 가능하게 함 - K..