티스토리

MemoJung

검색하기

블로그 홈

MemoJung

memo-code.tistory.com/m

JungCw 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[React/Node] 마켓컬리 클론코딩 12 - 메일 인증 메일 인증 기능 마무리한 줄 알았으나 뭔가 찝찝해서 둘러보니 메일 인증 구현한 걸 정리하지 않았다.. 10번 게시물에서 이어지는 글!https://memo-code.tistory.com/45 마켓컬리 클론코딩 10 - 로그인/로그아웃로그인/로그아웃 (로그아웃 버튼 css를 까먹었다..) 처음해보는 작업이라 그래도 좀 오래 걸릴거라 생각했지만, 예상보다 많이 걸린 작업이었다.온갖 에러와 정보 사이에서 어찌저찌 만들기는memo-code.tistory.com 이 부분의 목적은 이메일의 여부를 확인하기 위한 인증 딱 한가지그래서 특별히 프론트엔드 측에서 손볼건 없다. 그냥 코드 확인을 위한 input만 '인증 코드 받기'버튼을 클릭하면 생기도록 하면 된다. {codeInput && ( .. 공감수 1 댓글수 1 2024. 6. 11.
[React/Node] 마켓컬리 클론코딩 11 - 장바구니 페이지 장바구니 페이지 장바구니 페이지에 기본적으로 필요한 기능은 '장바구니 담기(생성)'와 '장바구니 보기(읽기)'이다.장바구니를 보려면 일단 상품을 추가해야하기에 상품 상세 탭에서 '장바구니 담기'를 클릭하면 추가하도록 설계해야한다. ♡ 장바구니 담기상세 페이지 코드 중 장바구니 담기 버튼 부분이다.해당 버튼 태그에 onClick 구문을 통해 클릭시 addcart 함수를 거치도록 하였다. addcart의 내용은 다음과 같다.const ItemDetail = () => { ... const isLoggedIn = sessionStorage.getItem("isLoggedIn") === 'true'; const nickname = sessionStorage.getItem("ss_nickname"); ... .. 공감수 0 댓글수 1 2024. 6. 9.
[React/Node] 마켓컬리 클론코딩 10 - 로그인/로그아웃 로그인/로그아웃 (로그아웃 버튼 css를 까먹었다..) 처음해보는 작업이라 그래도 좀 오래 걸릴거라 생각했지만, 예상보다 많이 걸린 작업이었다.온갖 에러와 정보 사이에서 어찌저찌 만들기는 했지만 확신이 없다. 잘못 이해한 부분이 있을지도 모르지만 일단은 그 과정에서 배운 것들을 차례차례 정리해보려한다. 로그인 관리 방식은 세션을 이용해서 구현하기로 하였다.전에 했던 로그인 방식은 단순히 로그인 정보를 가지고 일치하는지를 판단하는것이 전부였는데, 이는 보안적으로도 문제가 있지만 새로고침이나 페이지 이동을 하면 로그인 상태가 유지가 안된다는 문제가 있었다.상태 유지를 위해서 사용할 수 있는 방법에 쿠키가 있는데, 쿠키는 클라이언트 측에 저장하여 사용하며 새로고침등을 해도 삭제되지 않는다.하지만 서버에서 관.. 공감수 0 댓글수 0 2024. 5. 16.
[React/Node] 마켓컬리 클론코딩 9 - 회원가입 페이지 회원가입 페이지 다른 페이지를 손보려다가 아무래도 로그인이 된 상태를 기반으로 하는 것이 좋을거같다고 판단했다.회원정보를 토대로 로그인하는 것은 구현해두었으니, 회원 정보를 만드는 회원가입 페이지를 생성하였다. import React, { useEffect, useState } from "react";import { useDispatch, useSelector } from 'react-redux';import { fetchUsers } from '../redux/actions/userAcions';import { useNavigate } from "react-router-dom";import axios from "axios";import "../css/SignUp.css";const SignUp = ().. 공감수 0 댓글수 0 2024. 4. 23.
[React/Node] 마켓컬리 클론코딩 8 - Redux 추가 이번 프로젝트는 물론 사용해보지 않은 것들을 다뤄보면서 배우고자 하긴 하였지만, 이미 자잘하게 배우고 있기에 Redux와 같은 도구는 조금 이후에 다뤄볼 생각이었었다. express를 연결하고 DB를 연결해 데이터를 활용하도록 작업을 하던 도중 Cannot read properties of undefined (reading 'src') TypeError: Cannot read properties of undefined (reading 'src') 이런 에러를 접하고 말았다. 그냥 기존의 js파일에 저장되어 있던 데이터들을 불러오는 방식을 단지 DB에서 가져오는 방식으로 바꾸었을 뿐인데, 전혀 상상치도 못한 에러였다. 처음에는 변수명이라던가 뭔가 실수한 부분이 있나 의심하다가 결국 내 생각이 닿은 곳은.... 공감수 0 댓글수 0 2024. 4. 17.
[React/Node] 마켓컬리 클론코딩 7 - node.js express 연결 프론트엔드의 가장 기본적인 부분들을 만들어놨기 때문에 이제는 DB의 연결에 도움을 줄 백엔드를 생성하려고 한다. 초기에는 java spring를 이용해서 해볼 생각도 했지만, 아직 배우지 않은 프레임워크를 사용하기 보단 이미 익숙한 프레임워크와 언어로 제작을 하고, 손도 못대본 쿠키나 세션 등을 다뤄보았으면 한다. (파일의 구조나 코드들의 업그레이드 역시 신경써보려고 한다.) express 연결이미 사용한 경험이 있는 express를 이용할 것이다.기존에는 index.js라는 한 파일안에 다 모아두었었는데, 이번에는 데이터량이 많기도 해서 관리가 어려울 것 같아 분리시켜보았다. (전부 server폴더 내부의 파일이다.)const express = require('express');const app = e.. 공감수 0 댓글수 0 2024. 4. 2.
[React/Node] 마켓컬리 클론코딩 6 - 로그인 페이지 로그인 페이지 이번 게시물은 딱히 내용이 없어서 그냥 건너뛸까 하다가, 이 다음으로 백엔드 쪽을 들여다볼 예정이라 임시로 마무리한다는 느낌으로 작성하기로 하였다. import React, { useState } from "react";import { useNavigate } from 'react-router-dom';import user from "../elements/User";import "../css/Login.css";const Login = () => { const [id, setId] = useState(''); const [pw, setPw] = useState(''); const navigate = useNavigate(); const checkUser = (e) =>.. 공감수 0 댓글수 0 2024. 3. 28.
[React/Node] 마켓컬리 클론코딩 5 - 리뷰 및 문의 페이지 리뷰 페이지 문의 페이지 import React from "react";import { review } from "../images/imgidx";import WeekItem from "../images/WeekItem";import "../css/Review.css";const Review = (props) => { let item = props.item - 1; return ( 상품 후기 {review.map((idx)=>( ))} .. 공감수 0 댓글수 0 2024. 3. 28.
[React/Node] 마켓컬리 클론코딩 4 - 상세 페이지 제품 상세 페이지(상품 설명 이미지 부분 제외) 기존의 메인 페이지와는 별개의 페이지이기 때문에 파일을 수정하였다. import './App.css';import { BrowserRouter, Route, Routes } from "react-router-dom";import Header from './components/Header';import Home from "./pages/Home";import ItemDetail from './pages/ItemDetail';const App = () => { return( }/> }/> );}expo.. 공감수 0 댓글수 0 2024. 3. 22.
[React/Node] 마켓컬리 클론코딩 3 - 메인페이지2 일단 지난번에 고려했던 이미지를 다른 방식으로 정리하는데에는 실패했다.import 없이 src만 가지고 객체를 만드려했으나, 이미 전에 경험한대로 로컬에 저장되어있는 이미지는 import없이는 깨져서 나오기 때문에 의미가 없었다. 일단은 기존대로 하되, 다른 방법이 있나 찾아보긴 해야겠다. 메인 페이지 - 메인 배너 부분, 아이템 슬라이드 1. 메인 배너메인 배너를 만들기 위해 Banner.js 파일을 components 폴더에 추가하였다.배너에 사용될 이미지를 images 폴더 아래에 BannerImg.js 파일에 추가하고, css 폴더 아래에 Banner.css 파일을 생성하였다. import React from "react";import BannerImg from "../images/Banner.. 공감수 0 댓글수 0 2024. 3. 18.
[React/Node] 마켓컬리 클론코딩 2 - 메인페이지1 메인페이지 - 상단 헤더 부분 (로고, 검색창, 메뉴 등) 구조 import './App.css';import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./pages/Home";const App = () => { return( }/> );}export default App; import React from "react";import Footer from "../components/Footer";import Header from "../components/Header";import Main from ".... 공감수 0 댓글수 0 2024. 3. 11.
마켓컬리 클론코딩 1 '간단한 게시판 만들기'를 통해 큼직한 기능을 구현해보았으니 이번에는 좀 더 세부적으로 구현해보는데에 초점을 맞추려한다.마켓컬리의 홈페이지를 최대한 비슷하게 구현해보기로 하였고, 아무래도 깊이 있게 알지 못하는 부분이 많기 때문에 일단 단순하게라도 만든 다음 할 수 있는대로 다양한 방식을 적용시켜보려한다. https://github.com/ChangwooJ/kurly GitHub - ChangwooJ/kurlyContribute to ChangwooJ/kurly development by creating an account on GitHub.github.com 프로젝트 기간2024.03.07~2024.05.27프로젝트 스택FEReact, JavaScriptDBNode+Express, MySql(일단은 프.. 공감수 0 댓글수 0 2024. 3. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.