Front-end Developer

💡 RouteGuard는 page route간에 auth check하는 middleware 컴포넌트입니다. 도입하게된 이유❓ 로그인이 필요한 페이지를 로그인 하지 않거나 JWT 토큰이 만료된 경우에 라우팅을 시도할경우 로그인 페이지로 redirect하기 위해서 로그인 한 상태에서 페이지를 reload할 경우 JWT 토큰으로 날아간 유저정보를 가져오기 위해서 컴포넌트 로직 정리 💡 MyApp 컴포넌트는 Next.js app의 root component입니다. 는 현재 렌더링되는 page Component 를 children으로 감싸서 auth 로직을 실행시키는 middleware의 역할을한다. RouteGuard 컴포넌트는 위에서 말했듯이 페이지 routing 이벤트가 시작될 때 auth 체크 로직을 실행..

아이폰 11부터는 이미지 파일이 heic타입이기 때문에 사진을 업로드 할 때 jpeg 또는 png로 변환시켜야합니다. 파일 형식을 변환시키기 위해서 heic2any라는 라이브러리를 사용했습니다. 자세한 사용방법을 알기 원하신다면 https://alexcorvi.github.io/heic2any/ 로 들어가서 참고해주세요! 제가 어떻게 이 외부라이브러리를 사용해서 이미지 타입을 변환시켰는지 보여드리겠습니다. import heic2any from "heic2any" //heic2any라는 외부 라이브러리를 사용해서 문제를 해결했습니다. const selectFile = (e) => { const reader = new FileReader(); let file = fileInput.current.files[0..

클릭 된 버튼만 스타일링을 주는 것을 구현했습니다.🙂 버튼에 아이디 값을 주고 해당 아이디값에 스타일링을 주는 함수를 만들었습니다. 그리고 그 함수들을 각 종류 컴포넌트에 props 값으로 넘겨주어서 useEffect를 이용해서 그 컴포넌트가 실행 됬을 때 버튼을 스타일링하는 함수들이 실행되게 했습니다. import React, {useState} from 'react' import Drama from '../components/Drama' import Musical from '../components/Musical' import Classic from '../components/Classic' import Traditional from '../components/Traditional' import Da..

사용자가 원하는 위치를 직접 지도에서 줌인을 해서 찾아내는 건 생각보다 사용하기 힘들기 때문에 인풋에다가 정확한 주소(지번주소 or 도로명 주소)를 기입했을 때 그 주소에 마커가 찍히게 했습니다. Map.js 버튼에 아이디 값을 주어서 해당 아이디 값에 클릭이벤트를 주고 클릭했을 때 input 태그 아이디값을 주어서 value(주소)를 가져왔습니다. 그리고 그 주소를 좌표값으로 변환시켜서 그 좌표값을 토대로 지도를 그 중심으로 옮기고 마커를 그 좌표에 찍었습니다. 더보기 const Map = (props) => { useEffect(() => { const container = document.getElementById('myMap'); //지도 표시할 div const options = { center..

마우스를 사용하지 않는 사용자를 위해서 지도위에 줌 인 아웃을 할 수 있는 버튼을 만들었습니다. Map.js useState를 이용해서 맵 정보를 useEffect 밖을 빼내고 줌 인 아웃 함수를 버튼에 넣어서 사용했습니다. 더보기 const Map = (props) => { const [_map, setMap ] = useState(); useEffect(() => { const container = document.getElementById('myMap'); //지도 표시할 div const options = { center: new kakao.maps.LatLng(37.545642179638556, 126.98117041998981), //지도 중심 좌표 level: 8 //지도의 확대 레벨 }; ..

해당 마커의 게시물 개수가 10개 이상인 마커와 10개 미만인 마커를 구분하기 위해서 마커의 종류를 노멀마커와 핫 마커로 만들었습니다. Map.js normal 마커와 hot 마커의 이미지를 다르게 구현해서 구분했습니다. 그리고 게시물을 작성할 때 이 게시물이 hot 마커 게시물인지 normal 마커 게시물인지 알려주었습니다. 더보기 const Map = (props) => { const [ is_write, setWrite ] = useState(false); const [ is_writeModal, setWriteModal ] = useState(false); const [ hot, setHot ] = useState(false); const normalMarker = useSelector((stat..

생성한 마커를 클릭했을 때 어떻게 해당 게시물을 보여주고 게시물을 작성하게 했는지 알아보도록 하겠습니다. Map.js 생성된 마커를 클릭했을 때 서버에서 해당 마커에서 생성된 게시글을 불러오게 합니다. 그리고 사용자가 로그인을 한 상태이면 게시물 작성 버튼도 보여지게 합니다. 더보기 const Map = (props) => { const [ is_write, setWrite ] = useState(false); const normalMarker = useSelector((state) => state.marker.normal) const hotMarker = useSelector((state) => state.marker.hot) useEffect(() => { const container = docume..

리액트에서 카카오 맵 API를 가져오는 방법은 다른 블로그에 많이 올라와 있어서 따로 올리지 않겠습니다. 그리고 카카오 맵 페이지에도 친절하게 잘 설명되어있습니다.😀 카카오 맵에서 주어지는 일반 마커를 이용해서 어떻게 마커를 생성했는지 알아보도록 하겠습니다. Map.js 일단 먼저, Map을 생성하고 관리하는 코드는 모두 useEffect안에다가 넣었습니다. 그렇게해서 처음 렌더링 됬을 때 맵을 볼 수 있도록 했습니다. 새 마커를 생성하기 위해서는 일단 맵에 클릭 이벤트를 주어서 맵을 클릭했을 때 파란색 기본 마커가 클릭한 곳에 나타나게 하고, 그곳에 위치 정보(위도, 경도)를 useState를 사용해서 변수에 담아냅니다. 기본 마커에도 클릭 이벤트를 주어서 마커를 클릭했을 때 마커 생성 모달창이 보이게..