기록창고

회원가입, 로그인을 구현하던 중, 로그인한 유저 정보를 확인해야 하기에 session을 확인해야 했다. 그리고 client component에서는 SessionProvider를 통해 session을 확인할 수 있다. 그래서 다음과 같이 layout.ts를 작성했다. (사실 코딩애플 강의의 코드를 그대로 가져왔다.) // layout.ts "use client"; interface IProps { children: React.ReactNode; } import React from "react"; import { SessionProvider } from "next-auth/react"; export default function Layout({ children }: IProps) { return {child..

CSS 연습을 하던 도중, Container를 자주 쓰는 것 같아 따로 분리하기로 하였다. // Container.tsx import styled from "styled-components"; interface IProps { children: React.ReactNode; } const Div = styled.div` width: 80%; min-width: 200px; height: 200px; border: 2px solid black; border-radius: 20px; display: flex; justify-content: center; align-items: center; `; export default function Container(props: IProps) { return {prop..

카카오맵 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..

form과 input을 분리하고 싶었지만, 어떻게 하는지 몰라서 헤메고 있던 중, 좋은 글을 발견했다. 간단히 이야기하자면 form 안에서 input을 쓸 때는 register를 이용하면 되고, 분리하고 싶을 때는 useController를 이용하면 된다는 것 같다. 다음은 간단한 Login form이다. // Login.tsx import React from "react"; import styled from "styled-components"; import Logo from "../Components/Global/Logo"; import MemberInput from "../Components/Global/Inputs/MemberInput"; import { FieldValues, SubmitHandl..