리액트

기존 리액트 프로젝트에 타입스크립트 적용

기존 리액트 프로젝트에 타입스크립트 적용기 📌 적용 이유 당연히 해야하는 일이라 생각했다. 이제는 타입스크립트의 시대. 타입스크립트를 적용해본 프로젝트가 제대로 없었다. 이 경험을 시작으로 많은 경험을 쌓고 싶다. 🙈 적용전 이미 프로젝트가 배포도 된 상태이고 기능 구현이 어느정도 되어서 타입스크립트 변환으로 생길 오류들때문에 약간 걱정되기도 했다 얼마나 많은 오류를 뱉어낼지... 😋 그리고 배포에도 문제가 생길까봐 두렵기도 했지만, 어차피 넘어야할 산 하루 빨리 넘어보자. 누가 이기나 해보자 아주. 📌 기존 파일들 🤣 기존 패키지 파일들이다. 이 파일들을 이제 하나씩 jsx => tsx 로 변경시켜줘야 한다. 📌 설치 npm install --save typescript @types/node @type..

TIL #2 - React Life Cycle (생명 주기)

TIL #2 - React Life Cycle (생명 주기) 📌 오늘 공부 내용 🔱 리액트 라이프 사이클 📜 목표 리액트 라이프 사이클에 대해 이해한다. 어떠한 메서드들이 있는지 알아둘 것 이 개념이 왜 중요한 지에 대해 안다. 🗨️ 라이프 사이클이란? 단어의 뜻으로 유추해봐도 알 듯이 어떠한 것의 태어나고 죽는 그 과정을 말한다는 것을 얼핏 알 수 있다. 그러면 이 용어가 리액트에서 어떻게 사용 되는걸까? 리액트는 컴포넌트 단위로 개발을 진행한다. 클래스형 컴포넌트, 함수 컴포넌트를 사용하게 되는데 컴포넌트들은 자신만의 생명주기를 가지고 태어나고 소멸하게 된다. 이 각 컴포넌트의 라이프 사이클을 이해하고 다루는 것은 개발을 진행함에 있어 매우 중요하다. 그러기 위해서는 컴포넌트 생명주기에 관여하는 대표..

React 잘못된 경로 페이지 만들기 (Router)

React 잘못된 경로 페이지 만들기 (Router) 프로젝트를 구현하면서 사용자가 잘못된 경로를 입력했을때 이런 페이지가 뜬다. 이대로 냅둬도 상관없긴하지만, 만약 이렇게 사용자가 주소를 잘못입력했을때 내가 원하는 화면을 보여주게 하고 싶다면 어떻게 해야할까? 바로 Router를 사용하면 된다. 이렇게 Router 경로를 * 로 설정하게 되면, localhost에서 지정한 경로들 외의 모든 경로들은 지정한 페이지로 이동하게 된다. 여기서 element에 있는 NotFound는 내가 따로 만든 NotFound.js 페이지이다. 사용자가 경로를 잘못입력하면 이 NotFound.js 페이지로 이동시켜라 라는 뜻이된다. NotFound.js 는 다음과 같이 만들었다. 참고해보시길. 사용자에게 보여지는 페이지는..

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 ="..