[220109-220115] 집에 있는데도 집에 가고 싶을거야

 

 

1/9

📝 할 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

 

✅ 한 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

 

추가 기능 선별 회의 후 mutation 이 왜 안되는지 물어 봤다

팀원분들이랑 여러 경우를 실행해보니 3개의 인자를 넣었을 때 첫번째 인자만 콘솔에 출력되고 나머지는 undefined 가 나오는 것을 보고 혹시 인자를 하나만 넣어야 하나? 라고 생각했다

그래서 payload 라는 객체 데이터에 인자 세개를 넣어서 payload 를 인자로 넣어줬더니 제대로 작동을 하는 것을 확인할 수 있었다

근데 이제는 객체에 들어가는 id 값이 여러 개라서 계속 바꿔서 적용시키거나 그 안에서 조절을 해줬어야 했다

그래서 밖에서 id 를 빈 string 으로 지정해준 뒤 상품들을 반복적으로 결제할 때 상품 id 를 매번 지정하는 방식으로 변경했다

 

 

 

 

 

 

 

 

1/10

📝 할 일

• 워크샵 자료 제작
• 리액트 과제 1일차
• 4차 과제 리팩토링 : 배송비 결제 로직 수정

 

✅ 한 일

• 워크샵 자료 제작

목요일에 그룹 워크샵이 있어서 워크샵 자료를 제작했다

귀찮고 발표도 하기 싫었지만 우짜겠나 해야지..

그래도 좀 익숙해졌다고 자료도 후다닥 제작하고 발표도 좀 괜찮아졌다

 

 

• 리액트 과제 1일차

 

팀원 중 거의 강사님처럼 해주시는 분이 있는데 우리가 좀 해이해진 것 같다구 매일매일 리액트 과제를 내주시기로 했다

본인 공부하는 것도 바쁘고 힘드실텐데 우리들 것도 봐주시다니 고맙고 미안할 따름이었다..

첫 과제는 router 제작이었는데 최신 버전의 createBrowserRouter 를 사용해서 숙제를 제출하는 거였다

첫 과제다보니 그렇게 어렵진 않았다

 

 

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

이제 for 문이 끝나면 완료 alert 창과 장바구니 내 상품들을 다 삭제해주는 걸 해결하는 과정에서 갑자기 장바구니에 length error 가 나서 못 하게 됐다

장바구니 로직 맡은 분한테 내일 학원가서 물어봐야겠다

 

 

 

 

 

 

1/11

📝 할 일

• 리액트 과제 2일차
• 4차 과제 리팩토링 : 배송비 결제 로직 수정 찐찐마무리

 

✅ 한 일

• 리액트 과제 2일차

2일차는 state 로 모달창을 띄워주는 작업을 하는 과제였다

예전에 처음에 모달창 작업할 때는 이해도 못하고 그냥 복붙만 했었는데 지금은 나 혼자 복붙도 안하고 척척 만드는 게 너무 신기하고 뿌듯했다

공부도 많이 못하고 성장하는건지 눈에 보이지 않아서 지칠 때가 많은데 이렇게 예전과 달라진 걸 볼 때면 너무 신기한 일이다

 

 

• 4차 과제 리팩토링 : 배송비 결제 로직 수정 찐찐마무리

다른 팀원한테도 장바구니 들어가보라고 했는데 length 에러 나서 혹시 firebase 계정을 바꿨는데 그게 문제인가 싶어서 env 파일 고쳐봤는데도 안됐다

server 끈 뒤 다시 켜봤더니 된다 어이없네

 

 

결제 로직 : 배송비 상품 수정 & useMutation 리팩토링

for 문이 끝나는 속도와 비동기 함수가 끝나는 속도가 달라 비동기 처리가 다 끝나지 않았는데도 불구하고 결제 완료 alert 창과 장바구니 상품 삭제 코드가 처리되는 문제가 발생했다

뭔 난리를 쳐도 for 문 안에 api 호출이 다 끝나지 않았는데도 결제 안내 alert 창과 장바구니 삭제 로직이 발동되어서 끙끙 앓다가 강사님한테 물어봤다

⬆ 강사님이 해결해주신 코드(뭔가 나의 뒤죽박죽 로직에 맞춰 해결해준거라 쫌 찝찝쓰…)

강사님한테 여쭤보고 해결된 줄 알았더니 집에 와서 보니까 다시 중간에 console.log('끝') 이 찍히더라..

useMutation 파라피터를 한 개만 받아오는 문제에 대해 배열로 받아오니 해결되었다

인자 문제를 해결하니 동시에 각 api 호출에 대해 mutateAsync 로 await 를 해주니 api 호출 문제도 해결되었다

 

참고 문헌 : https://oyg0420.tistory.com/entry/React-Query-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://itchallenger.tistory.com/587

 

 

 

 

 

 

1/12

📝 할 일

• 리액트 과제 3일차
• 백준 단계별 문제 하나라도 풀기
• 노마드 코더 리액트 마스터 crypto tracker 1 실습
• 개발 블로그 정리 & 작성

 

✅ 한 일

• 리액트 과제 3일차

이번 과제는 기존에 css 로 작업했던 것을 styled-components 로 리팩토링 작업을 해보는 것이었다

요새 리액트 노마드 코더 덕분에 스타일 컴포넌트를 많이 사용해서 어렵진 않았다

그리고 상속이나 확장 등 여러 기능을 쓰지 않았기 때문에 간단했다

 

 

attr 속성 안에 넣을 img 방법으로 public 폴더에 있는 image 파일을 import 해서 넣으려다가 갑자기 절대경로로 불러오는 방법이 안되길래 해당 이미지 파일을 src 로 가져왔다가 그것도 안 먹었다

그래서 그냥 attr src 에 '/logo192.png' 를 해줬더니 그냥 바로 해결됐다^^ 어이없다 증말

근데 절대 경로에 있는 이미지 파일을 import 하려면 라이브러리를 설치해야 한다고 하더라 나중에 이런 일이 생기지 않았으면 좋겠다

 

 

• 백준 단계별 문제 하나라도 풀기

let filePath = process.platform === "linux" ? 0 : "./input.txt";
let input = require("fs").readFileSync(filePath).toString();
input = Number(input);

let num = input;
let i = 0;

while (true) {
  let sum = Math.floor(num / 10) + (num % 10);
  num = (num % 10) * 10 + (sum % 10);
  i++;
  if (input === num) break;
}

console.log(i);

요새 알고리즘 문제를 하나도 풀지 않아서 좀 불안한 마음에 시간 있을 때 하나라도 풀자라는 심정으로 시작했다

아마 바빠서 일주일에 한 문제 풀까말까 하겠지만 티끌모아 태산이고 안하는 것보단 낫겠지 싶다

근데 오랜만에 푸니까 하나도 모르겠다..

1110번 더하기 사이클 문제인데 머리론 이해했고 어떻게 풀지는 알 것 같은데 로직을 막상 실행해보면 원하는대로 나오지 않아 답답하다

일단 위 답은 구글링해서 푼 문제고요^^..

 

해설 :

주어진 수에서 십의 자리와 일의 자리수를 구해 더하고

새로운 수의 십의 자리는 주어진 수에서 일의 자리수(일의 자리에 10 곱해서 십의 자리 만들기)

새로운 수의 일의 자리는 주어진 수를 더한 값의 일의 자리

주어진 수가 새로운 수와 같을 때까지 반복

 

 

 

• 노마드 코더 리액트 마스터 crypto tracker 1 실습

이제 차트 라이브러리를 적용하여 코인 시세를 차트 형태로 보이게 하는 것까지 해보려고 하는데 뭔 에러가 저렇게 나요;; 너무 당황했다

오류를 번역도 해보고 구글링도 해보고 몇 시간을 대가리를 싸매며 알아본 걸로는 코인파프리카에서 제공해주는 api 의 무료 플랜은 지난 24시간만 반영해준다고 한다

 

그래서 시간을 23시간으로 고쳤더니 작동을 하는 것을 확인할 수 있었다

아 왜 갑자기 플랜이 생기냐고요~~~~ 코인 파프리카 요 쪼잔한 넘들…

 

 

• 개발 블로그 정리 & 작성

4차과제 하느라 에러가 많이 나서 덕분에 개발 블로그에 정리할 것도 많았다^^

컨텐츠가 많은 건 좋지만 너무 정리하기가 힘들다^^

뭐 이런 것도 나중에 도움이 다 되겠지…ㅎㅎ

 

 

 

 

 

 

1/13

📝 할 일

• 리액트 과제 4일차
• 노마드 코더 리액트 마스터 crypto tracker 2 실습
• 4차과제 추가 기능 구현 시작

 

✅ 한 일

• 리액트 과제 4일차

오늘은 객체 데이터의 타입을 지정해보고 품절이 아닌 상품들만 출력되도록 만들어줬다

interface 는 지겹도록 만들어줘서 그렇게 어렵진 않았다

 

 

• 노마드 코더 리액트 마스터 crypto tracker 2 실습

학원에 나와 해당 강의들을 같이 수강하고 있는 팀원들에게 지난 24시간만 데이터를 불러올 수 있는 문제에 대해 물어봤더니 니꼬쌤이 만든 다른 api 를 부르면 된다고 해서 해결됐다ㅎ..

 

그리고 data 쪽에 났던 에러들은 타입을 지정해주지 않아 생긴 오류같다

map 으로 돌린 끝에 as any 를 추가해주니 해결됐다

 

 

그리고 니꼬쌤이 추가로 내주신 숙제는 price 페이지 정보 보여주기, 캔들스틱 차트로 바꿔보기를 수행했다

 

 

 

• 4차과제 추가 기능 구현 시작(찍먹)

차트 문제 해결하느라 배송지주소 저장 추가 기능에 쓸 드림코딩 firebase 설치 강의 본 것 빼구 암것두 못함ㅎ

 

 

 

 

 

 

 

1/14

📝 할 일

• 리액트 과제 5일차

 

✅ 한 일

• 리액트 과제 5일차

평소같았음 토요일은 항상 쉬는데 과제덕분에 공부를 하게 되어서 좀 뿌듯..ㅎ

오늘은 class 를 이용해서 인스턴스로 비슷한 구조의 다른 데이터들을 생성하고 화면에 출력해주는 과제를 수행했다

아무래도 class 부분이 취약해서 드림코딩 강의를 봤는데도 잘 모르겠어서 다른 과제를 푸는 팀원에게 물어봐서 풀었다

class 를 다시 한번 봐야겠다ㅠ

 

 

 

 

 

 

 

1/15

📝 할 일

• 리액트 과제 6일차
• 4차 과제 추가 기능 : 그리드 정렬 시작!

 

✅ 한 일

• 리액트 과제 6일차

오늘은 framer-motion 라이브러리로 간단한 슬라이더 만들기 과제를 했다

이번엔 해당 라이브러리 공부를 위해 노마드코더의 강의를 첨부해주셨다

강의를 보고 따라치지 않고 그냥 한번 쭉 본 뒤 혼자 작성해봤다

라이브러리는 복잡한 로직의 기능들을 쉽게 구현할 수 있게 해줘서 좋지만 내가 하드코딩으로 로직을 짜서 만들어보라고 하면 못할 것 같다

뭔가 너무 라이브러리에 의존하는 건지 걱정될 때도 많다

 

 

구현하다보니 니꼬쌤과 다르게 이전 버튼 누르다가 다음 버튼을 누르면 현재 박스가 왼쪽으로 가고 다음 박스가 오른쪽에서 오는게 아니라 현재 박스가 오른쪽으로 가는 현상이 발생한다

니꼬쌤 코드와 똑같이 했는데도 고쳐지지가 않았다

그래서 과제를 내주신 분한테도 pr 하면서 물어보고 다른 팀원한테도 물어봤는데 내주신 분도 잘 모르겠다고 하시구 다른 팀원도 똑 같은 문제가 발생해서 뭐때문인지 모르겠다ㅠ

해결하지 못했으니 강사님께 여쭤봐야 할 것 같다

 

 

• 4차 과제 추가 기능 : 그리드 정렬 시작!

드디어 리팩토링도 끝나고 문제가 있었던 노마드 코더도 마무리가 되어서 추가 기능 중 가장 쉬운 것부터 시작했다

그리드 정렬은 뭔가 훅도 써야할 것 같고 컴포넌트도 많이 나눠야 할 것 같아서 일단 기능 구현이 되도록 하드코딩으로 스타일링을 제외하고 기능구현을 먼저 완료했다

해당 기능은 내가 구현한 검색 페이지와 다른 분이 구현한 카테고리 페이지에 넣어야 하는 거라 재사용할 수 있도록 신경을 써야 했는데 코드가 3줄밖에 되지 않아 훅으로 만들만 한 부분이 아니라서 이걸 훅으로 만들어야 할지에 대한 고민도 생겼다

그리고 생각해보니 그리드가 스타일링만 바뀌는 게 아니고 구조가 아예 바뀌는 거라 기존에 하나의 상품에 대한 컴포넌트를 쓸 수 있을지에 대해 고민도 많이 생겼다

이 부분에 대해서는 팀원한테 조언을 구해봐야 겠다