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

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(..

문제 설명수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ...2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ...3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해 주세..

문제 설명 r, e, v 뒤에 나오는 값을 더하여 나온 최종 숫자에서 앞자리를 월로 뒷자리를 일로 출력r, e, v 뒤에 나오는 숫자는 1부터 10까지입니다. 이를 넘어가는 숫자가 나올 경우 앞 숫자만 뽑아냅니다.문자열: adr10bb1d9ia10e33b7u88k3j1a3v11v9 나의 풀이function solution(data){ // match()를 통해서 정규식으로 원하는 값 추출 // [rev]: "r", "e", "v" 중 하나의 문자 // 10 or 0 ~ 9 사이의 숫자 data = data.match(/[rev](10|[0-9])/g) // 예상 값 -> ['r10', 'e3', 'v2', 'v1', 'v9'] let result = 0; for(l..

문제 설명 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해 보세요. 제한사항 2

문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자..

개인 프로젝트에서 Commit시 제목을 입력할 때 Commit Convension을 활용하고 있는데 매번 다른 블로그를 참고해서 작성하는 것보다 익숙해질 때까지 제 블로그를 참고하기 위해 작성합니다!Feat : 새로운 기능을 추가하는 경우Fix : 버그를 고친경우Docs : 문서를 수정한 경우Style : 코드 포맷 변경, 세미콜론 누락, 코드 수정이 없는경우Refactor : 코드 리펙토링Test : 테스트 코드, 리펙토링 테스트 코드를 추가했을 때Chore : 빌드 업무 수정, 패키지 매니저 수정Design : CSS 등 사용자가 UI 디자인을 변경했을 때Rename : 파일명(or 폴더명) 을 수정한 경우Remove : 코드(파일) 의 삭제가 있을 때. "Clean", "Eliminate" 를 사용..