프론트엔드 14

함수형 컴포넌트에서 react-beautiful-dnd 적용하기

drag and drop의 기능이 필요해 라이브러리를 찾던 중 react-beautiful-dnd 라이브러리를 찾았는데 클래스형으로는 예제가 있지만 함수형은 없는 것같아 검색했습니다. 코드샌드박스에 누군가 잘 올려준 게시물 덕분에 해결 https://codesandbox.io/s/9z5tn?file=/src/index.js vertical-list - CodeSandbox vertical-list using react, react-beautiful-dnd, react-dom codesandbox.io 저같은 경우 App.js에서 에게 props로 [pageList, setPageList]를 넘겨주고 이를 pageList 컴포넌트에서 받아 react-beautiful-dnd로 렌더하는 식입니다. impor..

어떻게 된거냐면요

안녕하세요 일주일만입니다. 진행중이던 프로젝트를 엎어야 할것같아 글을 남깁니다. 말하자면 긴데 짧게 얘기하면 결국 저의 공부부족이 아닐까 싶네요. 진행하던 프로젝트의 Front-end는 React, Back-end는 Spring Boot 였습니다. 프로젝트의 목적은 Front-end쪽보다는 Back-end쪽을 공부하고 싶었던것이고 최대한 경험해보지못한 것들로 하나하나 찾아가면서 진행하는것을 목표로 삼았기 때문에 spring보단 spring boot, maven보다는 gradle, jsp보단 react로 결정했는데요. 구글 로그인 api를 연동하는것을 시작으로 며칠간 고통을 좀 겪었습니다. 결국 토큰값을 받아내는것은 해냈는데 페이지를 redirect하는 과정에서 Client Side Rendering(CS..

axios 사용한 리액트 컴포넌트

안녕하세요 오랜만에 글 쓰네요. Spring Boot + React로 작은 프로젝트를 진행중에 있는데 얼마전에 기본적인 프론트는 끝냈다고 생각하고 백쪽을 다듬으려고 하던찰나에 useEffect가 무한루프에 빠졌다는 사실을 알아채리고 조금씩 수정하려다가 다시 다 엎고 시작했습니다. 우선 전에 썻던 코드를 보시죠 import React, {useEffect, useState} from "react"; import Header from "./Header"; import Article from "./Article"; import {getFetch} from "../util/getFetch"; import {postFetch} from "../util/postFetch"; export default functio..

현재 진행중인 React 프로젝트 엿보기

현재 가맹점과 테마를 파라미터로 힌트리스트를 조회해오는 정도로 완성했습니다. 이제 해야할건 윗쪽 '번호' 에 힌트리스트 마지막번호+1이 나오고 '키'부분엔 랜덤한 키값이 들어가게끔 해야합니다. 또 아래에 있는 힌트리스트의 Key, 힌트1, 힌트2를 누르면 값을 복사하거나 수정할수있게 그리고 오른쪽엔 x버튼을 만들어 삭제 기능도 만들게끔 해야합니다. 로그인해서 점주가 자신의 가게 힌트를 관리할수있도록 분기처리도 해야합니다.. 아직 갈길이 멀지만 조만간 완성해보겠습니다 !!