프로그래밍언어
React 잘못된 경로 페이지 만들기 (Router)
React 잘못된 경로 페이지 만들기 (Router) 프로젝트를 구현하면서 사용자가 잘못된 경로를 입력했을때 이런 페이지가 뜬다. 이대로 냅둬도 상관없긴하지만, 만약 이렇게 사용자가 주소를 잘못입력했을때 내가 원하는 화면을 보여주게 하고 싶다면 어떻게 해야할까? 바로 Router를 사용하면 된다. 이렇게 Router 경로를 * 로 설정하게 되면, localhost에서 지정한 경로들 외의 모든 경로들은 지정한 페이지로 이동하게 된다. 여기서 element에 있는 NotFound는 내가 따로 만든 NotFound.js 페이지이다. 사용자가 경로를 잘못입력하면 이 NotFound.js 페이지로 이동시켜라 라는 뜻이된다. NotFound.js 는 다음과 같이 만들었다. 참고해보시길. 사용자에게 보여지는 페이지는..
Object 를 Array로 바꾸기 (React, JS)
Object 를 Array로 바꾸기 (React, JS) 졸업 프로젝트를 진행하면서 머신러닝 쪽을 통해서 데이터 받을 일이 생겼었다. (원래는 머신러닝 > 백엔드 > 프론트엔드 순으로 전달했어야 했지만, 백엔드팀에서 기한내 구현을 못해가지고 프론트인 내가 직접 데이터를 받아 처리했다.) 대충, JSON 형식으로 캠핑장 데이터들을 전달 받는거였는데, 내가 짜둔 로직은 map 을 사용해서 JSON id 값에 따라 처리하는 코드이다. 근데 이 과정에서 머신러닝 파트 분이 Object 형식으로 데이터를 그대로 전달을 하였고, 내가 이걸 Array로 바꿔서 처리를 해야하는 상황. 대충, { { "id": 1, ... }, { "id": 2, ... }, .... ,{ "id": 50, ... } } 이런식으로 데..
React, Spring Boot연동 로그인 정보 불러오기
React, Spring Boot연동 로그인 정보 불러오기 이전 게시물 참고 https://bmy1320.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-Spring-Boot-%EC%97%B0%EB%8F%99-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C React 카카오 소셜 로그인 Spring Boot 연동 , 리액트 카카오 로그인 (프론트엔드) React, Spring Boot 카카오 소셜..
React 카카오 소셜 로그인 Spring Boot 연동 , 리액트 카카오 로그인 (프론트엔드)
React, Spring Boot 카카오 소셜 로그인 , 리액트 카카오 로그인 먼저, 이 글을 작성하는 이유를 조금 써볼려고 한다. 관심없으면, 그냥 바로 밑의 코드를 확인하면 된다. 현재 나는 학교 졸업프로젝트를 진행중이고, 그 과정에서 소셜로그인을 구현하게 되었다. 저번주22일부터 구현을 시작했는데, 진짜 생각보다 너무 어렵게 느껴졌다. 구글링을 해봐도 React와 spring boot를 연동하는 글을 별로 없었고, 거기다 우리는 백엔드 설정상 좀 더 코드를 간단하게 작성가능한 카카오 라이브러리를 사용하지 않아서 더더욱 어렵게 느껴졌다. 최종 발표가 얼마남지 않은 시점에서 이 로그인 구현이 되지않으면 프로젝트 진행이 일절 되지않는 구조였기 때문에, 압박감과 스트레스는 생각보다 엄청났다... 내가 팀장..
React - Router, useLocation 를 통해 상세페이지 구현
React - Router, useLocation 를 통해 상세페이지 구현 졸업프로젝트 중 상세페이지를 구현하는 과정에서 router랑 useLocation에 대한 이해가 필요했다. 생각보다 구글링해서 바로 해답을 얻지 못했고 어제 저녁부터 계속 고민하다가 방금 해결하여 기록을 남긴다. 같은 고민을 하고 있는 사람들에게 조금이라도 도움이 되었으면 한다. * 프로젝트 구성 1. 게시판 페이지 ( 경로 : localhost/posting ) - 글쓰기 기능을 통해 임시로 추가한 게시물이고 해당 게시물의 제목을 클릭하면 해당 게시물에 부여된 id 값에 맞는 페이지를 이동 한다. 이때 App.js 에 만들어둔 Route를 통해 해당 게시물의 id 값으로 이동할 수 있게 path 경로를 설정해준다. path ="..
React 프로젝트 시작 , 파일 정리
React 프로젝트 시작 , 파일 정리 React 프로젝트를 실행하기에 앞서, 필요한 파일들을 제외하고 다 삭제해보자. public 에서 index.html 을 제외하고 다 삭제해주자. ------------------------------------------------------------------------------------------------------------------------------ index.html 도 정리해주자. ------------------------------------------------------------------------------------------------------------------------------ src 폴더에서 index.js 를 ..
React Developer tools 설치
React Developer tools 설치 리엑트를 사용하면서 필요한 React Developer tools 를 설치해보자. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 0229baee2 on 12/14/2021. chrome.google.com Chrome 에 추가를 눌러 설치를 하면 위에 처럼 Chrome 에서 삭제로 바뀐다. 크롬의 개발자 도구를 켜서 위와 같이 Co..
React 실행과 종료 요약
React 실행과 종료 요약 1. 프로젝트 생성 create-react-app 폴더이름 npm init react-app . 2. 개발모드 실행 npm run start 3. 개발모드 종료 Ctrl + C