2024년 2월~3월 개발 회고

지금 회사에서의 1개월 반 동안 발전을 정말 많이 한 것 같다. 좋은 분들과 함께 내가 하고 싶은 일을 열정적으로 하며 개발자로 살고 있다.

 

내가 구현한 기능

- 기존의 텔레그램 API를 사용해, 데모 페이지에서 유저가 이메일 입력 시 사내 텔레그램방으로 알림이 가도록 하기

  function reportTelegram(Emaildata) {
    const today = new Date()
    const registerMessage = `Lead 생성!\r\n이메일: ${Emaildata}\r\n날짜: ${today.toLocaleString()}\r\nLocale:${router.locale}`
    api.reportTelegramBot(registerMessage)   
  }

 

- 이미지 최적화

const resizeImage = (file, id) => {
    console.log("업로드 전 사진의 크기: ", file.size / (1024 * 1024), "MB");

    const reader = new FileReader();
    reader.onload = (e) => {
        const img = new Image();
        img.src = e.target.result;
        img.onload = () => {
            const picaInstance = pica();
            const maxFileSize = 10 * 1024 * 1024; // 목표로 하는 최대 파일 크기 (10MB)
            let quality = 0.9;

            const resizeAndCheckSize = () => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = img.width * quality;
                canvas.height = img.height * quality;
            };
            resizeAndCheckSize();
        };
    };
    reader.readAsDataURL(file);
};

 

- 언어 드롭다운 UI 구현 및 언어 변경 기능 구현

언어 변경 드롭다운

 

- Currency 드롭다운 UI 구현 및 Currency 변경 기능 구현,

- Currency가 USD일 경우 자동으로 가격 왼쪽에 $가 붙게끔(ex: 3,000$), KRW면 자동으로 가격 오른쪽에 ₩가 붙게끔 구현 (ex: 100,000₩)

 

 

- 연도를 하드코딩하던 방식에서 currentYear를 받아와 적용하는 방식으로 변경

    const currentYear = new Date().getFullYear();

 

- 구글 애널리틱스 이벤트 발생하도록 코드 추가

analytics.event("enter", {})

 

- SEO (검색엔진 최적화) 참여

- 유저가 회원가입을 하지 않고도 우리 서비스의 기능을 이용해 볼 수 있는 Demo 페이지 개발

- 여러 가지 아티스트와 작품을 검색할 수 있는 Search 페이지 개발

- 드롭다운 클릭 시 화면이 좌우로 튀는 이슈 해결

- 연도를 입력하던 기존의 UI에서 연도를 선택하는 UI로 변경

- 각국의 국가전화코드 선택 가능하도록 드롭다운 구현

- UI 작업(미디어 쿼리 사용, 조건부 렌더링 등)

- 회사 이름 변경에 따른 코드 수정 작업

- i18n 라이브러리 사용, 한국어 영어 중국어 일본어로 된 json 파일 관리