문미새 개발일지

Next.js 즉, 넥스트는 React 기반의 프레임워크로, React에 비해 여러 추가 기능과 최적화를 제공하여 개발 효율성과 성능을 향상시킨다고 한다. 특히 넥스트는 리액트의 모든 기능을 제공하면서 클라이언트사이드 렌더링(CSR)이였던 리액트와 달리 서버사이드 렌더링(SSR)을 지원하고 폴더 구조에 기반한 라우팅, 정적 사이트 생성(SSG)등의 더 많은 기능을 내장하고 있다.최근 개발하는 웹 사이트의 경우 넥스트와 타입스크립트를 함께 사용하는 것이 추세라고 들어 학습하려고 한다. 넥스트의 특징넥스트의 기본 구조넥스트는 위에서 말한대로 폴더를 인식해 pages 폴더 안의 파일들이 라우팅으로 매핑되서 페이지 경로로 이어진다.예시로 pages/login.js는 /login으로 경로가 지정되어 유지보수할 때..

결제 페이지에서 배송지 변경을 위해 팝업창이 띄워져 있는 동안 기존 페이지의 기능을 막아달라는 요청을 받아 해당 기능을 구현했다.import { useLocation, useNavigate } from "react-router-dom";import AboutHeader from "../components/common/aboutHeader";import MainFooter from "../components/common/mainFooter";import BuyBtn from "../components/mart/buyBtn";import styled from "styled-components";import CertItem from "../components/mart/certItem";import { useE..

주말 동안 테스팅을 하며 버그난 부분이나 부족한 페이지들을 추가했다. 이제 기획한 부분은 다 끝났고 요청받은 페이지 수정 부분과 보안 문제만 남은 것 같다. 재희님이 보내주는 루틴 데이터에 속성 타입을 추가하여 각각 루틴의 속성이 뭐가 있는지 확인할 수 있게 수정했다. 기존에 있던 attr_key값을 없애고 객체 안에 attr_skin_relation 배열을 담아 보내줬다. 근데 이 과정에서 데이터의 구조가 바뀌었기 때문에 인터페이스의 구조를 수정해야 했다. 그리고 attr_key를 가져와 data.js에 있는 배열에서 해당 key와 동일한 인덱스의 텍스트를 가져와 화면에 출력해줬다.그에 맞게 상세 루틴도 데이터가 수정되어 인터페이스를 재수정하고 로직을 변경했다. 전체 루틴엔 속성값만 들어있으나  상세 ..

다른 필터들은 끝났고 제품 필터와 루틴 필터만 남았다. 제품 필터는 기존에 모아놨던 카테고리들을 없애고 유저의 회원가입 시의 데이터에 맞게 수정했다. 하지만 현재 서버에서 받아오는 데이터에는 기본적으로 하나의 카테고리만 들어가기 때문에 현재 작동 가능한건 중간 부분의 피부별 카테고리만 동작한다.  const filterRankingData = displayItems.filter((item) => { return subFilter ? item.category === subFilter : true; });제품 필터의 경우 현재 category의 부분이 배열이 아닌 한 가지이기 때문에, 카테고리 값이 subFilter로 가져온 value값과 동일하면 true값을 반환하며 해당 값에 맞는 제품들만 필터..

결제 페이지의 데이터가 더미로 되어있어 데이터를 수정하고 결제 성공/실패시 이동될 페이지를 간단히 구현했다.각 부분의 데이터를 가져오기 위해 axios를 중첩으로 써 데이터들을 끌어 모았다. const paymentData: PaymentData = { pg: "uplus", // PG사 pay_method: "card", // 결제수단 merchant_uid: `mid_${new Date().getTime()}`, // 주문 고유 ID amount: totalPrice, // 결제 금액 name: `${cartList[0].item.item_name}${ cartList.length > 1 ? ` 외 ${cartList.length - 1}..

오늘은 전주 실내체육관에서 취창업 설명회가 있어 행사에 참석했다.당일 행사에도 신청 가능하지만 온라인 신청일 경우 면접을 예약할 수 있는 체크란이 있어 미리 신청했었다.행사는 10시부터 5시까지 진행됐으며 다른 취업설명회처럼 부스를 돌아다니며 각 기업들에 대한 정보나 설명 등을 들을 수 있다. 중간중간에 기업 대표 분들을 모셔와 강연을 했는데 이번 행사에는 야나두 김민철 대표님과 마이크로소프트 이소영 이사님이 오셨다. 김민철 대표님이 강연하신 내용은 되게 인상깊었는데, 본인이 창업을 해 성공할 때까지의 과정을 담은 마인드 맵을 보여주셨는데 그 마인드 맵이 메이저리거 오타니 쇼헤이 선수가 작성했던 만다라트 플래너라는 것이였다.만다라트 플래너는 한가운데에 하나의 목표를 잡고 해당 목표를 달성하려면 해야 하는..

이제 처음에 기획한 부분과 이 후 필요한 기획한 부분을 거의다 구현한 것 같다. 백 쪽은 남은 부분이 거의 없어 다른 학습을 하고 있고 프론트 쪽은 기능먼저 구현하느라 UI들이 망가져있기 때문에 남은 기능 및 UI를 구현 중이다. 특별한 버그가 있지 않으면 목요일정도에 끝낼 생각을 하고 있어서 그 때까진 빡세게 해야겠다.주말부터 작업한게 많은데, 메인기능 위주로 작성하려고 한다. 이번주는 정글 때보다 열심히 한 것 같은데 좀 더 성장했기를.. 루틴과 제품 페이지에 리뷰 기능을 구현했다. 리뷰는 하단에 있으며 리뷰를 쓰려면 로그인을 해야하고 로그인이 안되어있으면 아예 리뷰 작성 칸이 보이지 않는다.리뷰는 별점과 리뷰 내용을 입력할 수 있으며 리뷰 작성 버튼을 누르면 하단에 리뷰가 렌더링된다.별점은 드래그로..

오랜만에 정글 멤버 중 전주에 사는 갱민이와 성주형을 만났다. 둘 다 전혀 변한게 없어 오히려 편안재희님의 데이터 추가로 아이템에 브랜드와 용량 데이터를 추가하여 해당 데이터도 화면에 뿌려줬다. 그리고 그동안 루틴 추가를 할 때 제품을 item_key로 하여 제대로 작동이 되는지만 확인했으나 이번에 제품 검색을 구현하여 제대로 된 루틴 추가 기능을 구현했다.이 부분을 구현하면서 너무 많은 시간이 걸렸는데 간단한 방법을 늦게 알게 되어 너무 빙빙 꼬아서 짜느라 시간 소모가 컸다.현재 제품을 작성하는 입력칸을 item_key로 작성하던걸 item_name으로 변경하게 되며 해당 값의 타입이 맞지않아 발생했고입력칸엔 제품 이름이 나오게 하되 나중에 api로 데이터를 보낼땐 item_key를 보내야 한다는 것이..