![]()
1. Bottom Sheets이란? Bottom Sheet이란 사진에서와 같이 특정 컴포넌트가 아래에서 위로 올라오는, Bottom에 위치한 Sheet이라고 볼 수 있다. 앱에서 페이지 이동을 하지 않으면서 새로운 정보를 보여주어야 할 때 사용되고, 모달창 만큼이나 자주 사용되는 방식이다. 이렇게 컴포넌트가 올라오고 내려오는 방식을 어떻게 React에서 구현할 수 있는지 알아보도록 하자. 2. 구현 과정 현재 내가 구현하려는 건 지도에서 다음과 같이 특정 정보를 담기 위해 Bottom sheet을 React로 만드는 것이다. 필요한 조건은 다음과 같다. 1. 자연스러운 애니메이션 효과2. 특정 위치에서 컴포넌트의 이동이 멈추기3. 닫기, 중간에 위치하기, 완전히 화면을 감싸는 세 가지 경우를 가지기4..
![]()
1. Kakao Developer 등록하기 kakao map 페이지에 가이드가 나와있는데 이걸 따라가도록 하겠다.(공식 문서가 짱이야...) 먼저 Kakao Developers에서 계정을 등록해야 한다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 간단 회원가입 및 로그인을 완료한다. 이후 내 애플리케이션 > 애플리케이션 추가하기 를 클릭하여 실행할 프로젝트의 간단 정보를 등록한다 앱이 추가되었다. 이렇게 추가된 앱을 클릭해서 여러 정보를 가져오고 여러 설정을 해야한다. 앱을 누른 후 우측..
💡 Styled component를 사용하다가, 특정 컴포넌트를 불러와서 위에 스타일을 덧씌우고자 했다. 하지만 스타일은 변하지 않았고 저번에도 같은 경험이 한 번 있었기에 원인을 생각해보았다. 문제 발생 import { styled } from "styled-components"; const Container = styled.button` background-color: white; border: none; `; const Button = ({ children, onClick }) => { return {children}; }; export default Button; 이것은 Button 컴포넌트이다. 배경과 border를 지우기 위해 만들었다. (globalstylesheet로 reset css를 하..
