프론트엔드 개발자 엄성준 블로그

기존에도 React로 만든 프로젝트를 여러 번 배포해 보았지만, 주로 Vercel, GitHub, Spotify 같은 플랫폼을 이용해 흔히 '클릭 한 번'으로 쉽게 배포하는 방식만 경험했습니다. 그런데 많은 사람들이 AWS를 사용해 배포한다는 이야기를 듣고, 저도 직접 AWS를 활용한 배포를 경험해보고 싶어 이번에 도전해 보았습니다. 저는 아래 블로그 글을 참고해 배포를 진행했는데, 설명이 매우 친절하게 되어 있어 이 글만으로도 충분히 배포 과정을 따라갈 수 있었습니다. https://velog.io/@ijy1995/AWS-S3%EB%A1%9C-REACT-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 AWS S3로 REACT 배포하기AWS S3로 REACT 배포velog.io 느낀 점..

WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.현재 블로그의 콘텐츠는 WiniLogis 관리자 사이트를 통해 관리되지만, 단순 텍스트만 입력할 수 있다는 문제가 있어 다른 플랫폼에서 운영하는 블로그에 비해 가독성이 떨어지는 문제가 있었습니다. WiniLogis 관리자의 블로그 글 작성 시 가독성 문제를 해결하기 위해, 텍스트 에디터를 도입하여 글을 편집할 수 있도록 개선한 방법에 대해 작성하려고 합니다.먼저 React 프로젝트와 잘 어울리는 텍스트 에디터를 찾기 위해 여러 정보를 조사했습니다. 아래 글을 통해 다양한 텍스트 에디터의 종류를 확인하고, 각 에디터의 장단점을 비교하여 최종적으로 적용할 에디터를 결정했습니다.https://code-b.dev/bl..

먼저 이벤트 루프(Event Loop)에 대해서 알기 전에 JavaScipt의 특징인 Single Thread(싱글 스레드)에 대해서 알아보겠습니다.스레드(Thread) & 프로세스(Process)프로세스(Process): 실행 중인 프로그램 자체를 의미합니다. 운영체제에서 하나의 독립된 작업 단위로 관리됩니다. 각각의 프로세스는 자신만의 메모리 공간을 가지고 독립적으로 실행됩니다.스레드(Thread): 프로세스 내에서 실행되는 작은 작업 단위입니다. 한 프로세스는 여러 개의 스레드를 가질 수 있고, 스레드들은 같은 프로세스 내에서 메모리 공간을 공유하며 동시에 실행될 수 있습니다.싱글 스레드(Single Thread) & 멀티 스레드(Multi Thread)싱글 스레드: 하나의 스레드에서 모든 작업을 ..

다른 블로그 글과 공식 문서를 참고하면서 여러 가지 명령어를 시도했지만 잘되지 않아 어려움을 겪었습니다. 그러나 ChatGPT를 통해 간단하게 배포할 수 있는 방법을 알아냈고, 이를 공유합니다.1. EAS CLI 설치먼저 EAS CLI를 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요: *Mac일 경우 sudo를 앞에 붙여주시면 됩니다.npm install -g eas-cli2. EAS 초기화EAS CLI를 사용하기 전에 프로젝트를 EAS에 연결해야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하여 초기화합니다:eas init3. Expo 계정 로그인EAS를 사용하려면 Expo 계정에 로그인해야 합니다. 아직 로그인하지 않았다면 다음 명령어를 사용하세요:eas login4. EAS Update를..

이전에 WiniLogis의 메인 페이지 성능을 개선하기 위해 Google Lighthouse를 사용하여 Core Web Vitals 점수를 체크한 적이 있습니다. 이 과정에서 지적받은 주요 문제 중 하나는 현재 페이지에서 사용 중인 PNG와 JPG 이미지들을 차세대 이미지 포맷으로 교체하라는 것이었습니다.이 문제를 해결하기 위해 여러 블로그와 자료를 참고하면서 HTML의 태그에 대해 알게 되었고, 이를 적용하게 되었습니다. 태그를 활용하면, WebP 형식을 지원하지 않는 브라우저에서는 기존의 PNG나 JPG 이미지를 표시할 수 있으며, WebP를 지원하는 브라우저에서는 요소를 통해 WebP 이미지를 로드할 수 있습니다. 이 방법을 통해 페이지 성능을 개선하고, 다양한 브라우저 환경에서도 최적화된 이미..

AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다. 이러한 방식으로 구현된 Slider는 초기 로드 시 많은 자원을 소모하여 페이지 로딩 시간이 길어졌습니다. 이로 인해 사용자 경험이 저하되었고, Google Lighthouse 평가에서도 성능 점수가 낮게 나오는 문제가 발생했습니다.이 문제를 해결하기 위해 React-Swiper를 도입하여 Slider 문제를 개선했습니다.React-Swiper로 교체 전React-Swiper로 교체 후React-Swiper Code {5 {data.map((carInfo) => { return (..

웹 브라우저 접속 시 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분을 통해 분기처리를 해야 하는 로직을 작성해야 했습니다. const navInfo = performance.getEntriesByType( "navigation" )[0] as PerformanceNavigationTiming; console.log(navInfo); console.log(navInfo.type);먼저 navInfo의 console.log입니다.navInfo 데이터에서 제가 사용한 값은 type 속성입니다.type은 아래와 같은 규칙을 따릅니다.링크이동: navigate뒤로 가기: back_forward새로고침: reload이 정보를 활용해서 분기처리할 생각입니다.

문제 설명주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해 주세요.제한사항nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다.nums의 각 원소는 1 이상 1,000 이하의 자연수이며, 중복된 숫자가 들어있지 않습니다.입출력 예numsresult[1,2,3,4]1[1,2,7,6,4]4나의 풀이function solution(nums) { // combinations 모든 경우의 수 배열을 구해주는 custom 재귀함수 function combinations(arr,..

문제 및 풀이 과정const data = "a10b9r1ce33uab8wc918v2cv11v9";/* match()를 사용하면 정규표현식을 사용할 수 있음 */function solution() { let result = 0; // data.match(/[0-9]/g); // ['1', '0', '9', '1', '3', '3', '8', '9', '1', '8', '2', '1', '1', '9'] // data.match(/['rev'][0-9]/g); // [ 'r1', 'e3', 'v2', 'v1', 'v9' ] // console.log(data.match(/([rev])(10|[0-9])/g)); // match()를 이용해서 정규식을 활용하는데 [rev]각각의 문자 r, e, v뒤에 ..

문제 상황 AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다. 대부분의 환경에서는 문제가 발생하지 않았지만, iOS 환경에서는 input이나 textarea를 통해 글자를 입력할 때 키보드가 올라오면서 화면의 너비를 인식하지 못해 키보드에 화면이 가려지는 문제가 발생했습니다.   문제 해결이 문제를 해결하기 위해 CSS와 JavaScript를 사용하여 화면의 높이가 변할 때 동적으로 vh(viewport height) 값을 재설정하는 방법을 사용했습니다. 구체적인 코드는 다음과 같습니다./* css */#viewContainer { height: 100vh; height: calc(var(..