많은 서비스에서 헤더를 고정시키는 기능을 사용한다. 아래는 인프런 사이트인데, 스크롤을 내리면, 1번 헤더 : 가장 상단에 있는 교육 / 커리어 / 기업 서비스 / 지식공유 참여 부분은 따라오지 않고, 그 아래 위치하는 , 2번 헤더 : 인프런 / 강의 / 로드맵 / 멘토링 / 커뮤니티 탭이 있는 부분만 스크롤을 따라 이동하는 것을 알 수 있다. 이 기능이 궁금해서 개발자도구의 요소 탭으로 확인해보았다. 스크롤을 해서 1번 헤더가 사라지고, 2번 헤더가 고정되는 순간에, 2번 헤더에 sticky 속성이 생기는 것을 확인할 수 있었다. position : sticky 요소를 부모 요소 내에서 스크롤될 때 상대적인 위치로 유지하다가 특정 임계값에 도달하면 고정된다. 부모 요소에 대한 상대적인 위치 지정이 있..

내가 보려고 정리하는 리액트 애플리케이션에 카카오톡 공유 기능 추가하는 법 ! KaKao Developers 애플리케이션 추가등록 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 사용자에게 보여질 앱 아이콘과 앱 이름, 사업자명을 작성하고나면, 앱 아이디와 앱 키들을 확인할 수 있다. 플랫폼 등록하기 나는 React로 개발했으므로, 좌측 메뉴 플랫폼 > Web 플랫폼 등록에 들어간다. 본인이 배포한 도메인을 넣어주면 되고, 개발 모드에서 로컬에서 테스트 가능해야 하기 때문에 로컬 주소도 넣어준..

전쟁-전투 #1303 더보기 전쟁 - 전투 문제 전쟁은 어느덧 전면전이 시작되었다. 결국 전투는 난전이 되었고, 우리 병사와 적국 병사가 섞여 싸우게 되었다. 그러나 당신의 병사들은 흰색 옷을 입고, 적국의 병사들은 파란색 옷을 입었기 때문에 서로가 적인지 아군인지는 구분할 수 있다. 문제는 같은 팀의 병사들은 모이면 모일수록 강해진다는 사실이다. N명이 뭉쳐있을 때는 N2의 위력을 낼 수 있다. 과연 지금 난전의 상황에서는 누가 승리할 것인가? 단, 같은 팀의 병사들이 대각선으로만 인접한 경우는 뭉쳐 있다고 보지 않는다. 입력 첫째 줄에는 전쟁터의 가로 크기 N, 세로 크기 M(1 ≤ N, M ≤ 100)이 주어진다. 그 다음 두 번째 줄에서 M+1번째 줄에는 각각 (X, Y)에 있는 병사들의 옷색이 ..

단어 변환 #43163 더보기 문제 설명 두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다. 1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다. 2. words에 있는 단어로만 변환할 수 있습니다. 예를 들어 begin이 "hit", target가 "cog", words가 ["hot","dot","dog","lot","log","cog"]라면 "hit" -> "hot" -> "dot" -> "dog" -> "cog"와 같이 4단계를 거쳐 변환할 수 있습니다. 두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거..

AI가 그려주는 그림일기 서비스 [여름방학]의 프론트엔드를 개발 중이다. 특별한 이슈가 없다면 3월 초에는 서비스가 출시될 예정이다. React로 개발했으며, 타겟 환경은 모바일이다. 개발 중에는 테스트를 크롬 브라우저에서 하다보니, 모바일에서 실제로 일어나는 이슈 등을 확인하기 어려운데, 배포 후 모바일에서 확인 시에 하나의 문제점까지는 아니지만, 사용자 입장에서 불편할 수도 있는 사소한 이슈를 발견하였다. 지금까지 내가 진행했던 프로젝트 중에서 모바일을 주 타겟으로 잡은 경우가 거의 없어서 지금까지는 아마 발견을 못했던 것 같다. 이슈 🔨 이슈는 input 또는 textarea 태그에서 사용자가 입력하려고 클릭하여 액티브가 되었을 때, 화면이 확대되는 이슈 이다. 이 이슈의 문제는 모두 작성하고 나서..

네트워크 #43162 더보기 문제 설명 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있을 때 컴퓨터 A와 컴퓨터 C도 간접적으로 연결되어 정보를 교환할 수 있습니다. 따라서 컴퓨터 A, B, C는 모두 같은 네트워크 상에 있다고 할 수 있습니다. 컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 네트워크의 개수를 return 하도록 solution 함수를 작성하시오. 제한사항 컴퓨터의 개수 n은 1 이상 200 이하인 자연수입니다. 각 컴퓨터는 0부터 n-1인 정수로 표현합니다. i번 컴퓨터와 j번 컴퓨터가 연결되..

타겟 넘버 #43165 더보기 문제 설명 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 주어지는 숫자의 개수는 2개 이상 20개 이하입니다. 각 숫자는 1 이상 50 이하인 자연수입니다..

모음사전 #84512 https://school.programmers.co.kr/learn/courses/30/lessons/84512 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 더보기 문제 설명 사전에 알파벳 모음 'A', 'E', 'I', 'O', 'U'만을 사용하여 만들 수 있는, 길이 5 이하의 모든 단어가 수록되어 있습니다. 사전에서 첫 번째 단어는 "A"이고, 그다음은 "AA"이며, 마지막 단어는 "UUUUU"입니다. 단어 하나 word가 매개변수로 주어질 때, 이 단어가 사전에서 몇 번째 단어인지 return 하도록 solution 함수를..

전력망을 둘로 나누기 #86971 https://school.programmers.co.kr/learn/courses/30/lessons/86971 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 더보기 문제 설명 n개의 송전탑이 전선을 통해 하나의 트리 형태로 연결되어 있습니다. 당신은 이 전선들 중 하나를 끊어서 현재의 전력망 네트워크를 2개로 분할하려고 합니다. 이때, 두 전력망이 갖게 되는 송전탑의 개수를 최대한 비슷하게 맞추고자 합니다. 송전탑의 개수 n, 그리고 전선 정보 wires가 매개변수로 주어집니다. 전선들 중 하나를 끊어서 송전탑 개수가..

피로도 #87946 https://school.programmers.co.kr/learn/courses/30/lessons/87946 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 더보기 문제 설명 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로..