본문 바로가기

코딩

24.10.08 day76 Next.js Next.js 즉, 넥스트는 React 기반의 프레임워크로, React에 비해 여러 추가 기능과 최적화를 제공하여 개발 효율성과 성능을 향상시킨다고 한다. 특히 넥스트는 리액트의 모든 기능을 제공하면서 클라이언트사이드 렌더링(CSR)이였던 리액트와 달리 서버사이드 렌더링(SSR)을 지원하고 폴더 구조에 기반한 라우팅, 정적 사이트 생성(SSG)등의 더 많은 기능을 내장하고 있다.최근 개발하는 웹 사이트의 경우 넥스트와 타입스크립트를 함께 사용하는 것이 추세라고 들어 학습하려고 한다. 넥스트의 특징넥스트의 기본 구조넥스트는 위에서 말한대로 폴더를 인식해 pages 폴더 안의 파일들이 라우팅으로 매핑되서 페이지 경로로 이어진다.예시로 pages/login.js는 /login으로 경로가 지정되어 유지보수할 때.. 더보기
24.10.02 day75 브라우저의 데이터 저장방식 브라우저의 데이터 저장 방식은 여러 가지가 있으며, 다음과 같은 형태로 구분할 수 있다.쿠키(Cookies)쿠키는 웹사이트가 사용자의 컴퓨터에 저장하는 작은 데이터 파일이며, 주로 사용자 인증, 세션 관리, 개인화된 설정 등을 위해 사용된다.특징보통 한 쿠키당 4kb 이내의 크기를 가진다.만료 날짜가 설정 가능하기 때문에, 만료 날짜가 지나면 자동으로 삭제된다.서버와 클라이언트 간에 전송이 가능하며 http로 요청할 때 자동으로 포함된다.세션 스토리지(Session Storage)세션 스토리지는 사용자가 웹 페이지를 열어둔 동안만 데이터를 저장하며, 페이지가 닫히면 데이터가 사라진다.특징세션 스토리지의 데이터는 브라우저 탭이 열려 있는 동안만 유지되며, 브라우저를 새로 시작하면 전부 날아간다.세션 스토리.. 더보기
24.10.01 day74 자투리 수정 결제 페이지에서 배송지 변경을 위해 팝업창이 띄워져 있는 동안 기존 페이지의 기능을 막아달라는 요청을 받아 해당 기능을 구현했다.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.. 더보기
24.09.30 day73 작업 일지 주말 동안 테스팅을 하며 버그난 부분이나 부족한 페이지들을 추가했다. 이제 기획한 부분은 다 끝났고 요청받은 페이지 수정 부분과 보안 문제만 남은 것 같다. 재희님이 보내주는 루틴 데이터에 속성 타입을 추가하여 각각 루틴의 속성이 뭐가 있는지 확인할 수 있게 수정했다. 기존에 있던 attr_key값을 없애고 객체 안에 attr_skin_relation 배열을 담아 보내줬다. 근데 이 과정에서 데이터의 구조가 바뀌었기 때문에 인터페이스의 구조를 수정해야 했다. 그리고 attr_key를 가져와 data.js에 있는 배열에서 해당 key와 동일한 인덱스의 텍스트를 가져와 화면에 출력해줬다.그에 맞게 상세 루틴도 데이터가 수정되어 인터페이스를 재수정하고 로직을 변경했다. 전체 루틴엔 속성값만 들어있으나  상세 .. 더보기
24.09.26 day72 필터 구현, 무한스크롤, 폴링, 화면 처리 다른 필터들은 끝났고 제품 필터와 루틴 필터만 남았다. 제품 필터는 기존에 모아놨던 카테고리들을 없애고 유저의 회원가입 시의 데이터에 맞게 수정했다. 하지만 현재 서버에서 받아오는 데이터에는 기본적으로 하나의 카테고리만 들어가기 때문에 현재 작동 가능한건 중간 부분의 피부별 카테고리만 동작한다.  const filterRankingData = displayItems.filter((item) => { return subFilter ? item.category === subFilter : true; });제품 필터의 경우 현재 category의 부분이 배열이 아닌 한 가지이기 때문에, 카테고리 값이 subFilter로 가져온 value값과 동일하면 true값을 반환하며 해당 값에 맞는 제품들만 필터.. 더보기
24.09.25 day71 작업 일지 결제 페이지의 데이터가 더미로 되어있어 데이터를 수정하고 결제 성공/실패시 이동될 페이지를 간단히 구현했다.각 부분의 데이터를 가져오기 위해 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}.. 더보기
24.09.24 day70 취업 설명회 오늘은 전주 실내체육관에서 취창업 설명회가 있어 행사에 참석했다.당일 행사에도 신청 가능하지만 온라인 신청일 경우 면접을 예약할 수 있는 체크란이 있어 미리 신청했었다.행사는 10시부터 5시까지 진행됐으며 다른 취업설명회처럼 부스를 돌아다니며 각 기업들에 대한 정보나 설명 등을 들을 수 있다. 중간중간에 기업 대표 분들을 모셔와 강연을 했는데 이번 행사에는 야나두 김민철 대표님과 마이크로소프트 이소영 이사님이 오셨다. 김민철 대표님이 강연하신 내용은 되게 인상깊었는데, 본인이 창업을 해 성공할 때까지의 과정을 담은 마인드 맵을 보여주셨는데 그 마인드 맵이 메이저리거 오타니 쇼헤이 선수가 작성했던 만다라트 플래너라는 것이였다.만다라트 플래너는 한가운데에 하나의 목표를 잡고 해당 목표를 달성하려면 해야 하는.. 더보기
24.09.23 day69 작업 일지 이제 처음에 기획한 부분과 이 후 필요한 기획한 부분을 거의다 구현한 것 같다. 백 쪽은 남은 부분이 거의 없어 다른 학습을 하고 있고 프론트 쪽은 기능먼저 구현하느라 UI들이 망가져있기 때문에 남은 기능 및 UI를 구현 중이다. 특별한 버그가 있지 않으면 목요일정도에 끝낼 생각을 하고 있어서 그 때까진 빡세게 해야겠다.주말부터 작업한게 많은데, 메인기능 위주로 작성하려고 한다. 이번주는 정글 때보다 열심히 한 것 같은데 좀 더 성장했기를.. 루틴과 제품 페이지에 리뷰 기능을 구현했다. 리뷰는 하단에 있으며 리뷰를 쓰려면 로그인을 해야하고 로그인이 안되어있으면 아예 리뷰 작성 칸이 보이지 않는다.리뷰는 별점과 리뷰 내용을 입력할 수 있으며 리뷰 작성 버튼을 누르면 하단에 리뷰가 렌더링된다.별점은 드래그로.. 더보기

티스토리툴바