본문 바로가기

전체 글115

Fruit Seller(과일 장수) 문제 설명과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다.한 상자에 사과를 m개씩 담아 포장합니다.상자에 담긴 사과 중 가장 낮은 점수가 p (1 ≤ p ≤ k)점인 경우, 사과 한 상자의 가격은 p * m 입니다.과일 장수가 가능한 많은 사과를 팔았을 때, 얻을 수 있는 최대 이익을 계산하고자 합니다.(사과는 상자 단위로만 판매하며, 남는 사과는 버립니다)예를 들어, k = 3, m = 4, 사과 7개의 점수가 [1, 2, 3, 1, 2, 3, 1]이라면, 다음과 같이 [2, 3, 2, 3]으로 구성된 사과 상자 1개를 만들어 판매하여 최대 이익을 얻.. 2025. 3. 7.
타입스크립트를 사용해야 하는 이유 1. Static Type CheckingTypeScript를 사용하는 이유는 여러가지가 있지만,정적 타입 검사를 통해 잘못된 타입의 데이터가 입력되더라도 미리 방지 할수있기 때문에코드의 안정성을 높여주고 에러를 줄여주는 것이 큰 장점이라는 것을 배웠다. 예를 들어, 밑에 코드를 보면function greet(name: string): string { return `Hello, ${name}!`;}greet("Alice"); // 정상 동작// greet(42); // 컴파일 단계에서 오류 발생: number 타입은 string에 할당할 수 없음만약 greet 라는 함수에 string 타입이 아닌 number 타입이 들어가더라도컴파일 단계에서 오류가 발생해서 실제 서비스에서 예상하지 못한 버그가 발생하.. 2025. 3. 6.
비인가 처리: 지도 영역만 접근 제한하는 방법 🚨 이슈 내용AllowedRoute를 사용해 위치 정보를 허용하지 않았을 때 지도 부분에 안내 문구를 표시하려고 했음.하지만 ProductList 페이지 전체를 AllowedRoute로 감싸면서 검색창과 리스트까지 함께 사라지는 문제가 발생했다. 원래 의도는 지도 부분만 비인가 처리를 적용하는 것이었기 때문에, 해결 방법이 필요했음.트러블슈팅AllowedRoute를 활용해 위치 정보를 허용하지 않은 경우 지도 부분에 "위치 서비스에 동의하셔야 합니다."라는 문구를 표시하려고 했다.처음에는 Router.jsx에서 ProductList 전체를 AllowedRoute로 감싸는 방식으로 구현했는데, 위치 정보를 허용하지 않으면 검색창과 리스트까지 사라지는 문제가 발생했다.하지만 원래 의도는 검색창과 검색 리스.. 2025. 3. 4.
React-Kakao-Maps에서 모달 클릭 UX 개선 & Zustand 사용 고민 오늘은 react-kakao-maps-sdk의 CustomOverlayMap을 사용하면서 경험한 Hover 이벤트 적용과 전역 상태 관리(Zustand) vs Props Drilling에 대한 고민을 정리해보려 한다!1. CustomOverlayMap에 Hover 효과 적용하기문제 상황카카오 맵에서 CustomOverlayMap을 이용해 특정 상품 정보를 보여주는 모달을 만들었는데, 튜터님에게 사용자가 클릭할 수 있다는 느낌이 부족하다는 피드백을 받았다.🚨 문제: Hover 스타일 적용이 안됨처음에는 CustomOverlayMap의 style={{}}을 사용해 hover 시 scale(1.2)로 크기를 키워 유저들이 overlay를 하나의 버튼으로 인지할 수 있게 유도를 하고 싶었다. 하지만 React.. 2025. 3. 1.
Kakao 지도 API 적용 및 트러블슈팅 배운 점1. Kakao 지도 API를 불러올 때 Vite의 환경 변수 사용법을 준수해야 함.2. 지도 div가 존재해도 보이지 않으면 캐시 문제일 가능성이 있음.3. 스타일 속성의 값에는 공백이 없도록 조심하자. 오늘의 목표는 Kakao Developers에서 제공하는 Kakao 지도 API를 활용하여 ProductList 페이지에 지도를 구현하는 것이었다.1. Kakao 지도 API 스크립트 추가하기Kakao 지도를 사용하려면 Kakao Developers에서 발급받은 appkey를 API 스크립트에 추가해야 한다.그래서 .env 파일에 VITE_KAKAO_APP_KEY라는 환경 변수를 만들고, index.html의 script 태그에서 아래의 코드처럼 사용하려고 했었는데..하지만 이렇게 하니까 에러가.. 2025. 2. 27.
Stack of Cards(카드뭉치) 문제 설명코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다.원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다.한 번 사용한 카드는 다시 사용할 수 없습니다.카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다.기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다.예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 두 번.. 2025. 2. 21.

티스토리툴바