React 실습 (38) 썸네일형 리스트형 리덕스 단어 개념 정리 1. 리덕스에서 사용되는 키워드 숙지하기 리덕스를 사용하게 될 때 앞으로 접하게 될 키워드들을 미리 알아봅시다. 이 키워드들 중에서 대부분은 이전에 useReducer를 사용해볼때 접해본 개념이기도 합니다. 액션 (Action) 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션 객체는 다음과 같은 형식으로 이뤄져있습니다. { type: "TOGGLE_VALUE" } 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다. { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } { type: "CHANGE_INPUT", text: "안녕하세요" .. react 실습 오류 모음 - Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. react-router-dom 이 v5에서 v6으로 넘어가면서 route를 쓸 때 routes로 감싸야 한다고 합니다. import React from 'react'; import { Route, Routes } from 'react-router-dom'; import Menu from './components/Menu'; import loadable from '@loadable/component'; const RedPage = loadable(() => import('./pages/RedPage')); const BluePage = loadable(() => import('./pages/BluePage')); const App = () => { return ( // 이부분 ); }; export def.. 오늘의 술 프로젝트 - 작업 정리(1) [페이지네이션, 검색] 구현 # 여러 술이 있는 리뷰 게시글 목록들이 있고, 그 글들의 검색과 페이지네이션을 구현해보려고 한다. * 구현 목적: 더미데이터에서 데이터를 가져온 다음 페이지네이션과, 검색을 구현해 봤다. 1. headrImg는 다른 조원들이 만든 헤더부분이다. 2. BlogInformation은 게시글 더미데이터를 이다.(json형태로 있는 것을 가져오고 있다.) 추후에 axios 요청을 해서 서버에서 실제 데이터를 가져오는 형식으로 바꿀 것이다. 3. posts 게시글 하나하나를 컴포넌트화 한 컴포넌트 입니다. 4. 페이지네이션시 나오는 번호들을 어떻게 나오게 할지를 컴포넌트화한 부분이다. [Bolg.js] import headerImg from '../../assets/img/blog-header.jpg' impo.. yoga 프로젝트 작업일지 - 5 # 이제 클라이언트에서 로그인 하는 부분을 구현해봅시다. [ Login.js ] 1. 이전과 마찬가지로 서버단에 axios 요청을을 하기 위해 임포트 합니다. 2. 로그인 성공시 쿠키를 배포하여, 권한 관리를 해줄거기 때문에 npm에서 쿠키 라이브러리를 다운 받은 후, 임포트 합니다. 3. 서버 이동을 하기위해 navigate 훅을 임포트합니다. 4. 마찬가지로 서버쪽 url은 고정이기에 변수로 선언하고 이용할 것 입니다. import axios from "axios"; import { useState } from "react"; import { useCookies } from "react-cookie"; import { useNavigate } from "react-router-dom"; const s.. yoga 프로젝트 작업일지 - 4 # 오늘 할 것은..? 이전 포스팅에 서버단을 구현했으므로, 오늘은 클라이언트 단에 관한 포스팅을 해볼까 합니다. [ Register.js ] 1. 입력한 데이터를 저장할 용도를 쓸 useState 값. 2. 서버단에 요청을할 용도를 쓸 axios 3. 사이트 이동 용도로 쓸 useNavigate import { useState, useEffect } from 'react' import axios from 'axios' import { useNavigate } from "react-router-dom"; 1. server단에 url에 아래와 같습니다. 아래의 url로 요청할 것 이고 앞부분은 바뀌지 않을꺼기 때문에 선언해서 이용하려고 합니다. const server = { "url": "http://lo.. yoga 프로젝트 작업일지 - 3 # 들어가기에 앞서.. YogaA!를 만들면서 여러 작업에 관여하면서 기여했지만, 일단 내가 맡은 할당량만 블로그에 리뷰합니다. 그리고 디자인적인 부분의 구현은 스킵합니다. 자세한 작업을 알고 싶다면, 깃허브 주소를 남길테니 가서보시길.. 저는 로그인및, 회원 가입, 헤더, 푸터의 디자인 및 기능 추가를 맡아서 진행했습니다. 서버단 부터 구현을 들어갔습니다. 여러 미들웨어가 있고 app.js에서 라우팅하는 형태이지만, 저는 로그인 회원가입을 맡았으므로 그 부분에 코드만 리뷰합니다. [ 서버단 구현 ] {먼저 회원가입을 구현합니다} exprss를 이용하여 서버를 구현했으므로 import하고, crypto를 이용하여 해쉬를 적용했습니다 jsonwebtoken 라이브러리를 이용하여 라이브러리를 구현햇으며, s.. yoga 프로젝트 작업일지 - 2 # 시작하기 전에... 프로젝트는 이미 끝났지만 당시에는 바빠서 작업 일지를 메모장에만 적고, 여기에 적지를 못함. 지금이라도 적고자 한다. # 일단 협업을 시작하면서 github 버전관리를 맨땅에 헤딩하면서 버전관리 관련 오류를 무수히 겪었다. 그에 관련한 명령어들을 정리하고자 합니다. # 깃 허브 초기 세팅 방법 1. git bash 열기 2. git init 3. git remote add origin 프로젝트 깃 주소 >> 세팅 완료 # 수정 코드 업로드 방법 1. git add -A 2. git commit -m "메모내용작성하기" 3. git checkout 브랜치이름 4. git push origin 브랜치 이름 5. 깃허브 가서 확인 후 pull request # 새로운 브랜치 생성 방법 .. yoga 프로젝트 작업일지 - 1 저장소를 pull 하고 내가 작업을 하고 나서 push를 하려고 했는데 push가 안됨 이유는.. push를 하려고 할 때 brach를 만든 이후 해야했었음. # 브렌치 생성 git checkout -b yogabranch # 그리고 brach에 push git push origin yogabranch # 추후 관리자가 merge 했었음 이전 1 2 3 4 5 다음
