프로젝트 과정 기록

[React] 카카오 지도 API - 키워드로 장소 검색하고 목록으로 보여주기 구현 +) Typescript

결과 코드가 궁금한 사람은 3. 구현 성공! 부분으로 바로 넘어가기 1. 사전 준비 1-1) API 키 발급받기 카카오 개발자 센터에 가서 API 키를 발급받자. 메인화면에서 '내 애플리케이션' 메뉴로 들어가 내 프로젝트 명과 정보를 등록해 키를 발급받는다. 그리고 내 애플리케이션의 플랫폼 메뉴로 들어가 API를 호출할 곳의 주소를 설정해줘야 한다. 로컬에서 React로 개발할 것이므로 localhost:3000을 설정하자. (만약 여기에 등록되지 않은 주소에서 호출하게 되면 API가 제대로 호출되지 않는다) 1-2) 라이브러리 불러오는 script 삽입하기 public 폴더의 index.html로 가서 script를 삽입한다. git에 올려도 유출 걱정이 없도록 프로젝트의 최상단에 (src 아래 X) ..

[CSS] Navbar 아랫부분의 그림자가 가려지지 않게 하는 법 +) 가상클래스, react-router-dom Outlet, MUI

개요 MUI의 AppBar 컴포넌트를 불러와서 navbar를 만들어줬더니, 아래 사진처럼 컨텐츠에 의해 Navbar의 그림자가 가려지는 문제가 발생했다. 이건 MUI만의 문제가 아니라, 모든 그림자를 가진 박스를 다른 요소와 바로 이어붙일 때 발생하는 문제일 것이다. 결론부터 말하자면 가상클래스 중 after를 이용해서 해결할 수 있었다. (네비게이션을 구현하는 전 과정을 차례대로 서술하고 있으니 해결 방법만 알고 싶은 사람은 3번만 보세요!) 목차 react-router-dom의 Outlet으로 전체에 일관되게 Nav를 추가하는 방법 material ui의 AppBar를 커스텀하는 방법 가상클래스로 그림자같은 효과를 내서 문제 해결하기 1. react-router-dom의 Outlet으로 전체에 일관되..

[MUI] material-ui <Link> 컴포넌트에 React-router-dom의 Link 적용하는 법

개요 클라이언트 사이드 렌더링을 하고 싶은데 MUI에서 제공하는 Link 컴포넌트는 일반 href을 사용해서 화면이 깜박이고 이동이 느리다. 회원가입 하기 그렇다고 react-router-dom의 Link를 사용하자니 MUI의 Link로 간편하게 스타일링한다는 장점을 잃어버리고 만다. 어떻게 하면 좋을까? 답은 바로 react-router-dom 상속하기이다. react-router-dom의 Link 적용하기 material ui의 Routing libraries 문서를 보면 Link 컴포넌트에 third-party 라이브러리의 Link를 적용하는 방법을 설명하고 있다. 요약하면 먼저 MUI의 Link 컴포넌트로 평소처럼 스타일링해준다. react-router-dom의 Link를 중복 방지를 위해 Rou..

[MUI] material ui, emotion으로 global style 설정하기

React에서 material ui (MUI) 을 설치했다면 emotion도 함께 설치했을 것이다. 이 글에서는 MUI와 emotion을 이용해 다음의 글로벌 스타일을 설정하는 방법을 알아 볼 것이다. reset css 전역 폰트 설정 MUI 팔레트 색상 등 설정 커스텀 1. reset css 설정하기 - CssBaseline MUI에서 CssBaseline 컴포넌트를 불러와 넣어주는 것만으로 간단하게 reset css 설정을 할 수 있다. index.tsx 과 같은 레벨이나 상위 레벨에 넣어주기만 하면 reset css 설정은 끝이다. import { CssBaseline, ThemeProvider } from '@mui/material'; import { Global } from '@emotion/r..