기록창고

회원가입, 로그인을 구현하던 중, 로그인한 유저 정보를 확인해야 하기에 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..

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...

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