프로그래머스 - 시소 짝꿍 (Map과 조합으로 중복 제거하기)
·
Learn/Algorithm
https://school.programmers.co.kr/learn/courses/30/lessons/152996# 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr문제 이해시소에는 중심으로부터 2m, 3m, 4m 거리에 좌석이 있고, 두 사람이 탈 때 무게 × 거리가 양쪽 다 같으면 시소 짝꿍이다.예를 들어:180kg이 4m에 앉고, 360kg이 2m에 앉으면: 180 × 4 = 360 × 2 = 720 (짝꿍!)180kg이 3m에 앉고, 270kg이 2m에 앉으면: 180 × 3 = 270 × 2 = 540 (짝꿍!)주어진 몸무게 배열에서 시소 짝꿍이 몇 쌍인지 구하면 된다. 접근 방법1. 이중 for문 (O..
프로그래머스 - 마법의 엘리베이터 (구현 + 숫자 다루기)
·
Learn/Algorithm
https://school.programmers.co.kr/learn/courses/30/lessons/148653 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr문제 이해이 문제는 특정 층에서 0층으로 내려가는데 필요한 최소 버튼 횟수를 구하는 문제다. 핵심 조건:버튼: -1, +1, -10, +10, -100, +100 등 (10의 거듭제곱 형태)버튼 1번 = 마법의 돌 1개 소모목표: 최소한의 버튼으로 0층 도달예시 분석:16층 → 0층방법1: -1 6번 + -10 1번 = 7번방법2: +1 4번 + -10 2번 = 6번 ✅왜 방법2가 더 효율적일까? 16의 일의 자리가 6이니까, 20으로 올린 후 -10 ..
네이버 블로그·카페 댓글 추첨 방법
·
Test/네이버 블로그 댓글 추첨기
블로그·카페 이벤트 추첨, 아직도 손으로 하시나요?네이버 블로그나 카페에서 이벤트를 진행하다 보면 늘 같은 고민이 생깁니다.댓글이 100개가 넘는데 일일이 복사해서 엑셀에 붙여넣기?같은 사람이 여러 번 댓글 달았는데 어떻게 걸러내지?추첨 과정을 영상으로 찍어야 하는데 화면 녹화까지 해야 하나?결론부터 말하면, 이제 5초면 끝납니다. 네이버 블로그 댓글 추첨기 - Chrome 웹 스토어블로그 댓글을 쉽고 빠르게 추첨하세요.chromewebstore.google.com기존 방법의 문제점1. Windows 전용 프로그램의 한계Mac 사용자는 아예 사용 불가설치 파일 다운로드 → 설치 → 실행 → 설정 과정이 복잡2010년대 UI로 사용성 떨어짐최대 가능 당첨자 수 등 제한 존재 🤯2. 수동 엑셀 작업의 비효..
지속 가능한 프론트엔드 단위 테스트 작성법
·
Learn/FrontEnd
프론트엔드는 테스트가 필요 없다?!프론트엔드 애플리케이션의 복잡성과 중요성이 증가하면서, 단위 테스트의 필요성을 주장하는 목소리가 점점 커지고 있습니다. 하지만 자주 변경되는 UI로 인해 쉽게 깨지는 테스트 코드를 보며, 프론트엔드 단위 테스트가 과연 효율적인지 의문을 품는 시선도 여전합니다. 저는 여러 프론트엔드 프로젝트 경험을 통해 단위 테스트는 필수라는 결론에 도달했습니다. 단위 테스트는 리팩토링, 코드 품질 유지, 오류 예방에 중요한 역할을 하며, 코드베이스가 커지고 협업 인원이 늘어날수록 필요한 작업입니다. 프론트엔드라고 다를 것은 없죠. 하지만 열심히 작성한 테스트가 UI 변경 한 번에 와르르 실패하는 것을 보며 컴포넌트, 즉 UI에 집중된 단위 테스트는 절대 지속될 수 없음을 깨닫게 되었습니..
StepBy AWS S3 + CloudFront 도입기
·
Learn/software
JavaScript SDK란?StepBy는 고객사에서 생성한 가이드를 코드로 직접 실행할 수 있는 기능을 제공합니다. 이를 통해 안정적으로 인앱 가이드를 테스트하고 배포할 수 있습니다.이를 위해 JavaScript SDK 파일을 제공하고 있으며, 고객사는 태그를 통해 손쉽게 자신의 애플리케이션에 삽입해 사용할 수 있었습니다. 이 SDK 파일(index.min.js)은 StepBy 서비스와 고객사의 애플리케이션 간 연결을 담당하는 핵심적인 구성 요소였습니다. 하지만 SDK 파일을 어떻게 서빙할지 결정하는 과정에서 여러 고민과 시행착오를 겪었고, 최종적으로 AWS S3와 CloudFront를 조합한 방식으로 문제를 해결했습니다. 이번 글에서는 AWS S3와 CloudFront를 도입하며 겪었던 기술적 고민..
IntersectionObserver로 매끄러운 인앱 가이드 만들기
·
Learn/FrontEnd
StepBy는 고객사의 웹 서비스에서 동작하는 인앱 가이드를 제공하는 서비스입니다. 고객사 별 다양한 예외 상황에 효과적으로 대응하기 위해 노력하고 있으며, 이를 위해서는 브라우저의 기본 동작을 이해하는 것이 무엇보다 필수적입니다. 이번 글에서는 특정 요소가 화면에 ‘보이는지’ 여부를 판단하는 과정에서 마주한 예외 상황에 대해 공유하고자 합니다. IntersectionObserver의 동작 방식을 이해하고, 각종 예외 상황을 어떻게 해결했는지 이야기합니다. 보이냐, 보이지 않느냐. 그것이…튜토리얼을 경험하는 사용자는 진행 중에도 웹 페이지와 상호 작용 할 수 있습니다. 이때 인앱 가이드에서 가리키고 있던 요소가 상호 작용을 통해 화면에서 ‘보이지 않게’되면, 인앱 가이드 역시 이를 감지해 적절한 UI를 ..