<클론코딩> 5일차 서버는 어쩌지..

수민·2023년 4월 18일

사이드프로젝트 클론코딩

트러블의 연속

지난 3일차 , 4일차의 날 고생시켰던 오류는 날 힘들게 했고 5일차라 쓰고 일수로 7일차인 오늘 동일한 오류가 계속해서 났다.

결국 찾은 원인은 한 컴포넌트였고 그 컴포넌트를 새로 작성하니 오류가 나지 않았다 .

-> 그 컴포넌트 styledcomponent로 css 작업만 되어있음 ㅠ 뭐가 문젠고 ...

결국 새롭게 컴포넌트를 작성하여 진행하였고 드디어 드디어 메인페이지끝 !!!!!!

일주일동안 메인페이지라니.. ㅠ 또륵

css 작업을 하는 내내 모바일에서 어떻게 보일지, px로 작성할지 %로 작성할지 너무 고민이 되었다-> 반응형 css 어쩌지 일단 진행!

오늘 만났던 트러블들

1) 이 컴포넌트엔 대체 무슨 문제가..?

import styled from "styled-components";

function MainRooms() {
  return (
    <STContainer>
      <STInner>
        <div className="header">
          <div className="wrap">
            <span>ROOM</span>
            <h3>객실 미리보기</h3>
          </div>
          <div className="btn">
            <a href="/rooms">MORE</a>
          </div>
        </div>
        <hr />
        <div className="cards">
          <div className="card">
            <label> 코지</label>
          </div>
          <div className="card">
            <label> 코지프리미엄</label>
            <div className="img" />
          </div>
          <div className="card">
            <label> 일출</label>
            <div className="img" />
          </div>
          <div className="card">
            <label> 일출프리미엄</label>
            <div className="img" />
          </div>
          <div className="card">
            <label> 독채</label>
            <div className="img" />
          </div>
        </div>
      </STInner>
    </STContainer>
  );
}

const STContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  top: -20px;
  width: 1300px;
  height: 485px;
  background-image: url("/image/m1_1.jpg");
`;

const STInner = styled.div`
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wrap {
      border: 1px solid black;
      display: flex;
      gap: 20px;
      span {
        font-size: 44px;
        font-weight: 700;
        color: #000000;
      }
      h3 {
        color: grey;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fc5353;
      border-radius: 20px;
      width: 83px;
      height: 32px;
      cursor: pointer;
      a {
        font-size: 20px;
        text-decoration: none;
        color: white;
        :hover {
          color: red;
        }
      }
      :hover {
        background-color: white;
      }
    }
  }
  .cards {
    display: flex;
    margin-top: 30px;
    gap: 30px;
    .card {
      width: 300px;
      border: 1px solid black;
      display: flex;
      flex-direction: column;
      label {
        font-size: 30px;
        font-weight: 600;
      }
      .img {
        height: 270px;
        width: 100%;
        border: 1px solid black;
      }
    }
  }
`;
export default MainRooms;

평생의 미스터리 일것이다 !
solved -> 그냥 새로 만듬 이게 해결책이 맞나 모르겠다

2) 서버가 없다

이 사이트의 특징은 게시판들이 회원가입을 하지 않고도 글을 작성 할 수 있다 . 하지만 관리자의 로그인이 있다는것 .. !서버없이도 구현할 수 있을 것같긴하나 이용객들이 작성하는 게시글들, 댓글, 이미지파일등등을 담아줄 서버와 데이터베이스가 없다

node.js를 공부하여 chatGPT를 활용하여 서버를 만들어볼까
firebase를 사용하자
백엔드 친구에게 부탁하자 -> 간단한 서버니까 금방 되지않을까..?

가 나의 고민목록 현재 firebase쪽으로 생각이 많이 기울었다 !!!

3) 카카오맵 연결하며 만난 오류들

현재 나는 타입스크립트 + 리액트를 사용하여 프로젝트를 진행중이다.
공식문서를 참고하여 api를 연결하였는데 문제는 공식문서에는 html파일에서 작성하는 법만 나와있었다.
-> 구글링을 통해 리액트에 맞는 방법으로 작성 그러나

이번엔 타입스크립트가 발목을 잡음.
-> 이또한 구글링
'react-app-env.d.ts'파일에 kakao의 타입을 추가함

이렇게 해결! react-app-env.d.ts파일에 window object의 타입을 정의해주면 타입을 인식해준다 라는건 배웠지만 완벽하게 이해는 못한듯.