Homile

✅ 오늘 한 일

백엔드 API와 연결

메인 공유 물품 리스트 출력

• 모든 데이터를 불러오는데 성공 한 줄 알았지만 이미지 부분이 403에러가 뜬다 오류 메시지를 찾아보니 aws 이미지를 가져오는 권한이 나에게 존재하지 않다고 한다… 이게 맞는 것인지 백엔드분들께 여쭤보기전에 한번더 여러가지 경우의 수로 해결을 할 수 있도록 도전해봐야겠다.

메인 공유 물품 리스트 필터 출력

• 카테고리는 잘 나온다
• 3중 필터로 제목과 대여여부를 판단을 같이해야한다.
  • 검색 필터는 검색된 내용이 제목에 포함되면 해당 게시글이 리스트로 출력돼야 하는데 제목 전체가 맞아야 출력되는 상황이 발생했다.
• 대여 여부 필터는 어떤 것을 하던 다 나온다.
  • API명세서와 실제 구현된 key값이 달라서 그랬음

페이지네이션 구현

• 버그: 페이지번호가 3인상태에서 카테고리를 변경할 경우 페이지번호를 1번으로 바꿔주지 않아서 무한로딩 버그 있음.

배포 및 도메인 연결

• S3 → CloudFront → Route53 → gabia

레저용품 공유 상세페이지 API 연결

• 상세페이지 내용 출력
• 대여상태 변경 (patch) 기능이 안됨 500에러
• 채팅으로 연결되지 않음 (roomId가 null로 출력)

마이페이지 내가 쓴 게시글 API 연결

🥲 어려웠던 일

• 도메인을 연결하는 과정에서 가비아에서 구매한 도메인으로 접속시 페이지가 잘 열리지 않는 일이 있다... 이유는 클라우드 프론트에서 배포방식을 캐시방식으로 잡힌것 같다.. 이를 해결해야 가비아 도메인을 사용할 수 있다.

📌 해야할 일

• 가비아 도메인 캐시배포 해결하기...
• 채팅기능 붙이기
• 발표준비

✅ 오늘 한 일

등록과 수정의 경우 일단 JSON Server로 진행했다. 후에 formdata로 API에 보내줘야한다고 하니 formdata에 대해서 알아봐야한다.

레저용품 판매점 등록 구현

• 처음에 toastui 에디터를 사용해서 사용자에게 편의성을 제공하고 싶었으나 수정을 하는 부분에서 에디터에 기본값을 불러오지 못하는 오류가 생겨서 textarea로 변경했다.
• JS로 사용할 경우 이러한 경우가 종종 발생하는 것 같다. TS로 리팩토링 할 때, 추가해봐야 겠다.
• 코드를 잘 못 작성해서 카테고리가 고정되는 상황이 발생했지만 코드를 조금 더 세밀하게 봐서 기본값을 지정해주고 변경하는 코드를 작성하지 않았다는 것을 찾아서 해결했다.
• 작성 후 등록버튼을 누를 경우 작성된 내용이 담긴 상세페이지로 이동하도록 했다.

레저용품 판매점 수정 구현

• 판매점 등록 페이지랑 흡사하지만 디폴트값을 지정해야 했다. 하지만 위에서 적은 오류가 생겨서 textarea로 변경했다 ;ㅅ;
• 수정 후 수정버튼을 누를 경우 수정된 페이지로 이동하도록 했다.

드롭다운 애니메이션 수정

• 문제: 드롭다운이 너무 길게 늘어졌다가 줄어드는 문제 있었다.
• 해결:
  • 키프레임 대신 transition을 사용했다.
  • 높이 값을 0과 15.725rem으로 주는 데 transition으로 높이 변경하는데 걸리는 시간을 지정했다.

// 기본 코드
height: ${props => props.height};
  animation-name: ${props => props.class};
  animation-duration: 1.3s;

@keyframes up {
    0% {
      height: 15.725rem;
    }
    100% {
      height: 0px;
    }
  }

  @keyframes down {
    0% {
      height: 0px;
    }
    100% {
      height: 15.725rem;
    }
  }

// 변경 코드
height: ${(props) => (props.className === "up" ? "0px" : "15.725rem")};
transition: height 1.3s;

🥲 어려웠던 일

• formdata를 처음 작성하다보니 테스트를 하는 과정에서 많은 오류를 발생했지만 결국 어떻게하는지 알아냈다.
• 애니메이션이 길게 늘어지는 오류가 있었지만 키프레임과 애니메이션에 대해 알아보니 해결됐다.

📌 해야할 일

• 백엔드 API와 프론트 연결
• 배포
• 발표준비

📌  코드스테이츠를 수료하고 첫 주말이다. 주말에도 나른해질 수 없다는 생각과 이전에 6개월간 해왔던 습관때문인지 일어나서 조금 빈둥거리긴 했지만 바로 공부를 시작했다. 개발자로서 취업하고 발전하기 위해서는 끊임없는 노력과 지식이 필요하다는 것을 느끼고 있기 때문이다. 

📗 오늘 학습한 내용

프로그래머스 LEVEL.0 4문제 풀이

기술면접, 일반면접 준비

이력서 수정

TypeScript 강의

• object 타입
• Array 타입
• Enum 타입
• Any 타입

📘 추가로 공부할 내용

TypeScript 

• 한 번 봤던 내용이더라도 꼼꼼히 보기위해서 정리를 하면서 보니 시간이 꽤 걸리는 것 같다.

Next.js

Redux Query

Vite

📝 중요한 내용

• TypeScript
  • 배열, 객체, enum 타입 지정 및 사용

📌 오늘은 이력서의 어휘가 이상한부분을 수정하고 조금 살을 붙여봤다. 내용이 적다는 피드백을 받았기 때문이다. 또한, 사이드 프로젝트에 대한 github readme를 조금 더 수정하고 회사들이 어떠한 스택을 많이쓰는지 찾아보았다.

📗 오늘 학습한 내용

프로그래머스 LEVEL.0 5문제 풀이

기술면접, 일반면접 준비

Github 프로젝트 README 수정

이력서 수정

• 자기소개부분 수정

TypeScript 강의

• 타입스크립트의 원시 타입은 소문자로 이루어진다
• number
  • 숫자 타입은 number하나이다. 다른 언어에 있는 double과 같은 실수등의 타입은 존재하지 않는다.
• string
  • 문자열은 ''(작은 따옴표), ""(큰 따옴표), ``(백틱)으로 지정할 수 있다.
• boolean
  • true, false를 반환하는 타입이다.

타입 추론

• 아래의 코드중 result = n1 + n2는 타입 추론이라는 내장 기능을 사용한다.
• 특정 변수나 상수에 어떤 타입을 사용 했는지를 타입스크립트가 이해해서 계산 해줍니다.

function add(n1: number, n2: number, showResult: boolean, parase: string) {
  const reuslt = n1 + n2;
  if (showResult === true) {
    console.log(resultPhrase + reuslt);  // 7.8 number로 더하고 문자로 붙임
    console.log(resultPhrase + n1 + n2);  // 52.8 string으로 더해짐
  } else {
    return n1 + n2;
  }
}

const number1 = 5;
const number2 = 2.8;
const preintResult = true;
const resultPhrase = "Result is: ";
// resultPhrase = 0;  // 타입 추론에 의한 오류 발생

add(number1, number2, preintResult, resultPhrase);

타입할당

• 함수의 매개 변수에 타입을 지정하는 방법을 사용했지만 일반 변수에 타입을 할당하지 않는다.
• 함수의 매개 변수에 타입을 지정하는 것과 같은 형식으로 변수에도 타입을 지정해 줄 수 있다.
• 변수에 타입을 지정하고 값을 할당하는 방법과 변수에 타입을 지정하고 다른 라인에서 변수에 값을 지정할수 있다.
• 하지만, 위와 같은 방법은 함수의 매개 변수에 이미 타입을 지정해뒀기 때문에 타입 추론이되어 2중으로 겹치는 코드가 된다. 이를 생각하면서 타입을 지정할 수 있으면 좋다.

let number1: number = 5;

let number1: number;
number1 = 5;    // 숫자가 아닌 다른 타입을 지정하면 오류가 난다.

📘 추가로 공부할 내용

TypeScript 

Next.js

Redux Query

📝 중요한 내용

• TypeScript
  • 타입 추론 및 할당

📌 코드스테이츠를 수료하고 맞이하는 첫 날이다. 이제부터 개발자로서 구직에 나서야 한다는게 아직도 믿기지가 않다. 하지만, 나는 할 수 있을 것이다!! 해내고 말겠다!! 그동안 열심히 해왔고 앞으로도 취업을 하더라도 멈추지 않고 좋은 개발자가 되기 위해 학습하고 노력할 것이다..!!

📗 오늘 학습한 내용

프로그래머스 LEVEL.0 10문제 풀이

기술면접, 일반면접 준비

이력서 수정

• 자기소개부분 수정

TypeScript 강의

• 강의를 2주전부터 조금씩 듣긴했지만 정리를 하지않아서 처음부터 다시 듣고있다.(플젝하느라.. 정리하다가 콜받는 경우가 많았다..)
• 타입스크립트 컴파일 (tsc 타입스크립트 파일명)
• !(느낌표) 요소를 무조건 얻는다. (null을 받아오지 않을 것을 알려줌)
• as HTML태그Element로 어떤 유형의 요소인지를 알려줄 수 있다.
• 타입지정 - 변수명 뒤에 콜론을 붙인뒤 타입을 명시한다. 

const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")!;

function add(num1: number, num2: number) {
  return +num1 + +num2;
}

📘 추가로 공부할 내용

TypeScript 

Next.js

Redux Query

📝 중요한 내용

• TypeScript
  • 장점 및 단점
  • 컴파일
  • 타입지정

✅ 오늘 한 일

반응형 전역 설정

• 하나의 페이지에서 컴포넌트를 바꿔야 하는 경우에는 react-responsive 라이브러리를 사용하여 컴포넌트를 바꾸는 형식으로 진행할 수 있었지만 단순히 크기만 변동하는 것이라면 미디어 쿼리로 크기만 바꿔주면 되기 때문에 아래와 같은 라이브러리를 찾게 되었다. (react-responsive를 전역적으로 사용하는 방법도 있을 것이다.)
• styled-media-query를 사용한 반응형
  • 위의 라이브러리를 사용해 보려했다. 하지만, 스타일드 컴포넌트에 전역으로 설정할 수 있어서 사용하지 않았다.
• Styled-Component를 사용한 반응형 구현
  • 아래와 같은 코드로 Theme.js 파일에 사이즈를 지정했다.
  • 사용시 미디어 쿼리에 프롭으로 내려주어 지정된 크기를 숫자대신 변수로 사용할 수 있다.

// Theme.js
// 사이즈 지정
const size = {
  desktop: "1141px",
  tabletL: "1140px",
  tabletS: "860px",
  mobile: "786px",
};

// 테마 프로바이드
export const Theme = {
  desktop: `(min-width: ${size.desktop})`,
  tabletL: `(max-width: ${size.tabletL})`,
  tabletS: `(max-width: ${size.tabletS})`,
  mobile: `(max-width: ${size.mobile})`,
};

// 미디어쿼리 사용 파일
  @media ${(props) => props.theme.tabletL} {
    width: 53.5rem;
  }
  
  @media ${(props) => props.theme.tabletS} {
    width: 36rem;
  }
  
  @media ${(props) => props.theme.mobile} {
    width: 26.75rem;
  }

• 파비콘 / 탭 이름 수정
  • public -> index.html에서 파비콘과 탭에 나올 페이지 이름을 수정했다.
• 게시글 카드에 대여가능 여부에 따른 동그라미의 색상을 변경해주는 것을 구현했다.

메인페이지 반응형 구현

• 모바일용 Nav Dropdown 구현
• 모바일용 Footer 구현
• 모바일용 게시글 카드 구현

공유장터 목록 페이지 반응형 구현

• 게시글 카드 크기변경
• 모바일용 카테고리, 검색, 대여상태 구현

🥲 어려웠던 일

• 미디어 쿼리를 전역으로 설정해서 처음 사용하다보니 적응하는데 시간이 걸렸지만 적응되니 하나하나 크기를 기억하지 않고 프롭스로 변수명을 작성하면 되니 편해졌다.

📌 해야할 일

• 레저용품 판매점 등록 구현
• 레저용품 판매점 수정 구현
• 백엔드 API와 프론트 연결