본문 바로가기

코딩

24.09.20 day68 작업 일지 오랜만에 정글 멤버 중 전주에 사는 갱민이와 성주형을 만났다. 둘 다 전혀 변한게 없어 오히려 편안재희님의 데이터 추가로 아이템에 브랜드와 용량 데이터를 추가하여 해당 데이터도 화면에 뿌려줬다. 그리고 그동안 루틴 추가를 할 때 제품을 item_key로 하여 제대로 작동이 되는지만 확인했으나 이번에 제품 검색을 구현하여 제대로 된 루틴 추가 기능을 구현했다.이 부분을 구현하면서 너무 많은 시간이 걸렸는데 간단한 방법을 늦게 알게 되어 너무 빙빙 꼬아서 짜느라 시간 소모가 컸다.현재 제품을 작성하는 입력칸을 item_key로 작성하던걸 item_name으로 변경하게 되며 해당 값의 타입이 맞지않아 발생했고입력칸엔 제품 이름이 나오게 하되 나중에 api로 데이터를 보낼땐 item_key를 보내야 한다는 것이.. 더보기
24.09.19 day67 작업 일지 주말과 추석을 쭉 쉬고 블로그 쓰려니까 너무 힘들다. 다시 열심히 해야될듯..프로젝트를 슬슬 마무리를 지으려고 해서 추석 때 틈틈히 작업을 좀 해두었고  오늘부터 다시 재희님과 작업을 병행하며 데이터를 연동했다.먼저 휴일에 메인페이지 하단의 배너 슬라이드 부분을 구현했다.import { useEffect, useState } from "react";import styled from "styled-components";import ad1 from "../../../img/adBanner/1.jpg";import ad2 from "../../../img/adBanner/2.jpg";import ad3 from "../../../img/adBanner/3.jpg";import ad4 from "../../.... 더보기
24.09.13 day66 작업 일지 오늘 백엔드를 맡은 재희님과 api연동 및 기획 변경이나 추가할 점에 대해 회의했다.본인은 이번 회의로 각자 테스팅 방식이나 백엔드에서 서버를 띄워서 프론트도 테스팅이 가능하게 할 수 있냐 물어보려 했었는데, 전날 밤을 꼴딱 새서 디비랑 클라우드로 띄워 서버가 켜있는 동안 프론트도 테스팅이 가능하게 구현해놓았더라 역시 킹갓재희덕분에 오늘 회의가 짧을까 싶었는데 의외의 에러들 때문에 회의시간을 꽉꽉 채워버렸다 일단 백과 프론트가 처음에 기획을 할 때 전달받을 데이터가 어떤 값이 있는지, 어떻게 전달되는지 미리 결정하고 그대로 했었어야 했는데 기획할 때 이 부분이 진짜 어려운 것 같다.백은 백대로 erd를 구성하고 디비 설계를 하려면 초반 기획이 확실하게 정해져야 했고 프론트는 정해진 데이터 값을 토대로 코.. 더보기
24.09.11 day65 작업 일지 랭킹 페이지에서 UI로 만들어논 필터의 기능을 구현하려 코드를 봤는데 컴포넌트가 좀 깊게 들어가 있었다.ranking => rankingList => rankingFilter => main, subFilter까지 총 4중으로 깊게 들어가 있어 데이터를 어떻게 전달해야 할지 고민을 좀 많이 했다.구현은 props로 전달하는 방식으로 했지만 코드가 4중으로 컴포넌트를 타고 들어가는 방식이라 너무 조잡해보이긴 했다. 그래도 리덕스로 하지 않은 이유는 구글링하며 찾아봤더니 상태관리를 이용하면 코드를 타고가지 않아도 데이터값을 가져올 수 있지만 특정 값만 상태관리를 위해 리덕스로 구현하는건 props에 비해 클린 코딩이 되지 않는다고 하더라. import styled from "styled-components";.. 더보기
24.09.10 day64 작업 일지 루틴 페이지의 필터 드롭다운을 변경했다.어제 회의로 정렬 필터를 가격 오름차순, 내림차순, 평점 오름차순, 내림차순 총 4개를 적용하기로 했다.이 후 데이터에 따라 더 추가할 요소가 있으면 추가할 예정이고 이대로만 진행해도 크게 문제는 없을 것 같아 나중으로 미뤄두려고 한다.import "../../scss/about/filterList.scss";import sortFilter from "../../img/sort.png";import goodOff from "../../img/goodOff.png";import goodOn from "../../img/goodOn.png";import star from "../../img/star.png";import { items } from "../../data/.. 더보기
24.09.09 day63 작업 일지 오늘은 에러 수정이나 데이터 값 변경을 위한 코드 수정이 전부였다.회원가입에 닉네임 중복과 이메일 중복을 깜빡해서 오늘 재희님과 회의를 통해 추가해줬다.중복체크 버튼을 추가해주려고 했는데 기존의 구조가 좀 틀어질 것 같아 다음 페이지로 가는 버튼에 중복체크를 걸어서 해당 중복체크를 통과해야 넘어갈 수 있게 수정했다. 그러나 기존에 다음으로 넘어가던 버튼이 회원가입의 최상위 컴포넌트에 있기 때문에 코드를 하위 컴포넌트로 끌고와야 했다.import styled from "styled-components";import Signup1 from "../components/signup/signup1";import Signup2 from "../components/signup/signup2";import Signup.. 더보기
24.09.06 day62 작업 일지 useNavigate와 useLocation을 이용해 경로 연결을 해줬다. SPA의 경우에는 이동이나 뒤로가기가 직접 경로를 넣기에 좀 복잡할 수 있다고 useNavigate의 기능을 이용하면 편하다고 했다.import styled from "styled-components";import Signup1 from "../components/signup/signup1";import Signup2 from "../components/signup/signup2";import Signup3 from "../components/signup/signup3";import BackHeader from "../components/common/backHeader";import { useState } from "react";.. 더보기
24.09.05 day61 작업 일지 특정 루틴을 눌렀을 때의 루틴 페이지에 데이터를 받을 준비를 했다.import { useEffect, useState } from "react";import AboutHeader from "../components/common/aboutHeader";import DetailHeader from "../components/detail/detailHeader";import DetailInfo from "../components/detail/detailInfo";import axios from "axios";const DetailRoutine: React.FC = () => { const [data, setData] = useState(null); useEffect(() => { axios .. 더보기

티스토리툴바