dev-hpk 님의 블로그

IntersectionObserver API는 스크롤이나 뷰포트 변화를 감지해 특정 요소가 뷰포트에 진입하거나 떠날 때 콜백 함수를 실행하게 해주는 API입니다. 이를 통해 이미지 지연 로딩, 무한 스크롤, 애니메이션 활성화 등을 효율적으로 처리할 수 있습니다. 목차 1. IntersectionObserver 기본 사용법 2. IntersectionObserver 옵션 3. 주의할 점 4. IntersectionObserver 적용 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. IntersectionObserver 기본 사용법IntersectionObserver는 크게 두 단계로 구성됩니다. 첫 번째로 IntersectionObserver 객체를 생성하고, 두 번째로 해당 객체로 ..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제어떤 게임에는 붕대 감기라는 기술이 있습니다. 붕대 감기는 t초 동안 붕대를 감으면서 1초마다 x만큼의 체력을 회복합니다. t초 연속으로 붕대를 감는 데 성공한다면 y만큼의 체력을 추가로 회복합니다. 게임 캐릭터에는 최대 체력이 존재해 현재 체력이 최대 체력보다 커지는 것은 불가능합니다. 기술을 쓰는 도중 몬스터에게 공격을 당하면 기술이 취소되고, 공격을 당하는 순간에는 체력을 회복할 수 없습니다. 몬스터에게 공격당해 기술이 취소당하거나 기술이 끝나면 그 즉시 붕대 감기를 다시 사용하며, 연속 성공 시간이 0으로 초기화됩니다. 몬스터의 공격을 받으..

JavaScript에서 Throttle과 Debounce는 이벤트가 반복 실행되지 않도록 조절하는 기술로, 성능 최적화에 자주 사용됩니다. 이 두 개념을 이해하고 상황에 맞게 활용하면 브라우저 성능과 사용자 경험을 크게 개선할 수 있습니다. 목차 1. Throttle (쓰로틀) 2. Debounce (디바운스)추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ThrottleThrottle은 이벤트를 일정 주기로 실행하도록 제한합니다. 특정 시간 간격마다 한 번씩만 함수가 실행되므로, 이벤트가 자주 발생해도 일정 주기마다 함수가 실행됩니다. 예를 들어, scroll 이벤트나 resize 이벤트에 사용하면 브라우저가 과부하되지 않도록 돕습니다._.throttle(콜백함수, 시간) 사용 예시: 스..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다.각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다.신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다.한 유저를 여러 번 신고할 수도 있지만, 동일한 유저에 대한 신고 횟수는 1회로 처리됩니다.k번 이상 신고된 유저는 게시판 이용이 정지되며, 해당 유저를 신고한 모든 유저에게 정지 사실을 메일로 발송합니다.유저가 신고한 모든 내용을 취합하여 마지막에 한꺼번에 게시판 이용 정지..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제지나다니는 길을 'O', 장애물을 'X'로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다.["방향 거리", "방향 거리" … ]예를 들어 "E 5"는 로봇 강아지가 현재 위치에서 동쪽으로 5칸 이동했다는 의미입니다. 로봇 강아지는 명령을 수행하기 전에 다음 두 가지를 먼저 확인합니다.주어진 방향으로 이동할 때 공원을 벗어나는지 확인합니다.주어진 방향으로 이동 중 장애물을 만나는지 확인합니다.위 두 가지중 어느 하나라도 해당된다면..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제고객의 약관 동의를 얻어서 수집된 1~n번으로 분류되는 개인정보 n개가 있습니다. 약관 종류는 여러 가지 있으며 각 약관마다 개인정보 보관 유효기간이 정해져 있습니다. 당신은 각 개인정보가 어떤 약관으로 수집됐는지 알고 있습니다. 수집된 개인정보는 유효기간 전까지만 보관 가능하며, 유효기간이 지났다면 반드시 파기해야 합니다. 예를 들어, A라는 약관의 유효기간이 12 달이고, 2021년 1월 5일에 수집된 개인정보가 A약관으로 수집되었다면 해당 개인정보는 2022년 1월 4일까지 보관 가능하며 2022년 1월 5일부터 파기해야 할 개인정보입니다. ..

1. 폴더 구조역할별로 base, components, helpers, pages로 폴더를 구분했습니다. style.scss 파일을 제외한 나머지 scss 파일들은 css로 컴파일 하지 않기 위해서 _name.scss 형식으로 생성했습니다. @use : 각 폴더의 namespace를 사용하여 폴더에 있는 _index.scss를 불러옵니다. 최종적으로 모든 scss를 style.css로 컴파일 하기 위해 style.scss를 작성했습니다.// style.scss@use "base";@use "helpers";@use "components";@use "pages"; @forward : 폴더별 _index.scss 파일에 @forward로 scss 파일을 모아서, 다른 곳에서 쓸 수 있도록 했습니다.// ba..

1.  프로젝트 생성https://github.com/hpk5802/Fandom-K GitHub - hpk5802/Fandom-KContribute to hpk5802/Fandom-K development by creating an account on GitHub.github.com 2. 폴더 구조 contexts : 전역으로 사용할 state를 관리하는 폴더hooks : 커스텀 훅을 관리하는 폴더mock : api 연동 전 사용할 mock 데이터를 관리하는 폴더pages : 화면에 렌더링 될 Page를 관리하는 폴더router : 라우팅을 관리하는 폴더style : 스타일 시트를 관리하는 폴더utils : 기능들을 관리하는 폴더3. 기술 스택ReactJavaScriptSCSS

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다. 컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일..