[TIL] Typescript 심화 프로젝트_금요일

유진·2023년 1월 20일
1

TIL Today I Learned

목록 보기
57/116
post-thumbnail

2023.01.20.(금)

TIL Today I Learned


Good: 이번 프로젝트 주제는 지도 서비스를 지원하는 웹사이트 만들기이다. 반려동물과 동반하는 숙박업소를 알려주는 웹사이트로 나는 마이페이지를 맡았다. 처음 해봐서 많이 배우고 싶다.

Bad: 이미지 넣는 데 3시간이 걸렸다. 왜 안 되는 걸까 다양한 방법이 있는데 해봐도 안 된다. 이유는 오류에서 보면 된다.


[ Typescript 프로젝트 ]

로그인/회원가입 페이지를 한 번도 안 해봐서 만들어보고 싶었는데 다른 대원이 하고 싶다 하여 양보했다. 메인페이지와 마이페이지가 남았는데, 이때까지 메인 페이지만 만들어서 새로운 도전을 했다. 메인페이지를 만든다. 2명이 같이 만든다. 라이브 코딩으로 CSS 틀을 먼저 잡고 개인적으로 기능을 구현하기로 했다.

  • 오류

타입스크립트에 사진을 넣는 것이다. 라이브 쉐어로 다른 팀원 VScode로 작업을 하고 있었다. 1시간 동안 어떻게 하는지 찾아보고 2시간 동안 바꿔봤는데 안 되었다.

import LogoSrc from './assets/logo.png';

​assets folder를 만들어서 사진을 넣고 진행도 해보고 tsconfig.json에 다른 것도 넣어봤다. 안 되어서 동훈튜터님께 도움을 요청했다. import를 하지 않고 다른 방법을 알려주셨다.

  • 해결법
const imgProfile = "images/profile.png";
const Mypage = () => {
  const BaseProfile = null || imgProfile;
  return (...

<Profile img={BaseProfile}></Profile>

const Profile = styled.div<{ img: string }>`
  width: 100px;
  height: 100px;
  background-size: cover;
  background-image: url(${(props) => props.img});
`;

상수로 지정해준다. 힌트를 얻었으니 더 진행해보자. null || imgProfile은 firebase에서 사진을 받아오지 못하면 기본 이미지 파일로 대체한다는 뜻이다.

타입스크립트라 {img : string} 적어줌


프로젝트 시작할 때 아이디어를 말한다. 나의 방법은 생각 나는 거 뱉어내면서 브레인스토밍으로 진행하는 것이다. 내가 말하는 거 모두 "근데 그건 아닌 것 같아요."라고 어떤 대원이 부정적인 대답을 계속했다. 본인이 생각하고, 하고싶은 게 정답인가보다. 그래서 더 이상 아이디어를 내지 않았다. 이렇게 마음이 닫혀간다. 여기서 배운 것은 그 전 팀원들에게 당연하다고 생각한 것이 당연한 게 아니였다는 점이다. 당연하게 받은 배려에 감사하고 미안했다. 다른 팀 분위기 안 좋다고 했을 때 내 일이 아니여서 자세히 몰랐는다. 다시 만나면 고맙다는 인사를 꼭 할 것이다.


​[ 12주 차 계획 ]

- 스파르타코딩클럽 계획
스파르타코딩클럽 계획

✔ 월: Typescript 기초

✔ 화: Typescript 기초

✔ 수: Typescript 기초

✔ 목: Typescript 기초

✔ 금: 심화 프로젝트

- 나의 계획

✔ 프로젝트 시작하기

□ 토요일에 젭에서 대원과 CSS 마무리하기!

profile
긍정 🍋🌻

0개의 댓글