기록창고

1. 개요 프로젝트를 진행한지 2주가 되었다. 그리고 지금까지 한 것들을 보니 이제 프로젝트를 슬슬 종료하고 다음 학습 목표를 진행해도 될 것 같다. 이 프로젝트의 주제는 자기 동네의 숨겨진, 대중들에게 잘 알려지지 않은 곳을 소개하는 것이었다. 그리고 이를 위해 꼭 구현해야 할 기능은 지역 CRUD, 회원 CRUD, 지도라 생각했다. 그리고 이제부터 이것들을 구현하기 위해 했던 것들과 느낌 등을 이야기할 것이다. 2. 기술 스택 소개 프로젝트를 진행하기 위해 이용했던 기술들과 이것들에 대한 나의 수준은 다음과 같다. Client TypeScript: JavaScript에서 정적 타입을 명시할 수 있는 언어이다. 진행했던 프로젝트의 규모가 작았기에 props 타입 지정 등은 혼자서 할 수 있었으며 Red..

import styled from "styled-components"; import React, { useEffect } from "react"; import { checkValidAddress } from "../../utils/functions"; interface IProps { width: string; height: string; address?: string; name?: string; } const Map = styled.div` width: ${(props) => props.width}; height: ${(props) => props.height}; `; export default function KakaoMap(props: IProps) { useEffect(() => { window...

카카오맵 API를 이용하던 도중, 위와 같은 에러가 발생했다. window.kakao.maps에 LatLng가 없어서 그런 것 같아, console.log를 이용해 확인해보았다. console.log(window.kakao.maps); 그랬더니 정말로 LatLng가 없었다. 정말로 없어서 동작하지 않았던 것이다. 그런데 분명 처음 카카오맵 api를 이용했을 때는 에러가 발생하지 않았었는데 갑자기 이러니 당황스러웠지만, 어쨌든 이를 해결하기 위해 구글링을 해보았다. 그리고 이에 대한 원인을 찾을 수 있었다. script가 완전히 로드되기 전에 map 관련 메소드를 실행하려고 했기 때문에 에러가 발생했던 것아다. 이를 해결하기 위해서 kakao에서 제공하는 load라는 메소드를 이용하면 된다고 하여, 다음과..

1. 개요 코딩애플에서 타입스크립트 강의를 들은 후, 타입스크립트 연습과 카카오맵 API 연습을 위해 작은 프로젝트를 하나 진행하려 한다. 카카오맵 API를 이용할 것이기에 지도를 이용할 수 있는 주제를 원했다. 그래서 고민하던 중, 보물찾기처럼 자기 동네의 숨겨진, 대중들에게 잘 알려지지 않은 곳을 소개하는 것을 주제로 삼기로 하였다. 그래서 보물찾기가 영어로 treasure hunt이고 이 프로젝트는 지역을 찾는 것이기에 area hunt라고 지었다. 각 페이지의 코드만 올리고 컴포넌트나 서버 쪽 코드는 따로 올리지 않았다. 대신, 이는 아래의 깃허브에서 확인할 수 있다. https://github.com/als982001/area_hunt GitHub - als982001/area_hunt Cont..