본문 바로가기

분류 전체보기115

[React] 리액트의 클래스형 컴포넌트 생명주기, 근데 함수형 컴포넌트와 Hook은 또 뭔데? 리액트의 생명주기와 Hook에 대해 모르니프로젝트 코드 작성이 어려워지기 시작했다.이 둘에 대해 알아보자! 1. 생명주기라이프 사이클은 컴포넌트가 사용되고 소멸될 때까지 일련의 과정을 말한다.라이프 사이클에는 mounting(생성) - updating(업데이트) - unmounting(제거)이 있으며, UI를 화면에 내보내고 다른 UI로 보이게 하고, 현재 보이는 UI를 화면에서 제거하는 과정을 가진다.이 과정 안에는 특정 시점에 자동으로 호출되는 메서드가 있다.제대로 된 기능을 수행하기 위해 이 메서드들이 필요한 순간에 필요한 작업을 한다. - 리액트 라이프 사이클 [React] 리액트 라이프 사이클라이프 사이클 = 생명 주기velog.io 2. 잘 사용하지 않는 클래스형 컴포넌트 .. 2025. 12. 30.

[Spring, React] useEffect를 사용해서 새로고침해도 저장된 고객정보가 보이도록 페이지에 반영해보자 고객 명단 화면을 띄우면 DB에 저장된 명단을 가져와 보여줘야한다.그러나 새로고침을 하거나 다시 탭에 들어오면DB에 정보가 저장되어 있어도 화면에 가져오지 못한다.그래서 이 부분을 개선해보고자 한다. 1. 환경설정프론트엔드 = React + Vite +WebStorm백엔드 = Spring + IntelliJDB = MySQL + MySQLWorkbench 2. 문제점화면sori를 추가하여 저장했다. MySQLWorkbench를 살펴보면 제대로 저장되어있다. 이제 다시 화면으로 돌아가서 새로고침을 했다. 등록됐던 sori가 사라졌다. 하지만 여전히 MySQLWorkbench에는 잘 저장되어있는 상태였다. 왜 이런 문제가 발생한걸까? 원래 코드// 화면에 보여줄 고객 목록const [rows.. 2025. 12. 18.

[Spring, React, Vite] 스프링과 리액트 연결하기_ React에서 CORS 해결하는 방법과 Spring에서 CORS 해결하는 방법, Security 해결 방법 스프링과 리액트를 서로 연결할 것이다.검색을 하면 React에서 연결하는 방법이 많이 나온다.그러나! 나는 Spring에서 연결하는 방법도 궁금하다.그래서 둘 다 알아볼 것이다. 1. 환경프론트엔드 → React + Vite React랑 Spring 연결하는 방법을 검색하면 보통 CRA 방식이 많이 뜬다. CRA는 Create React App으로 여러 도구를 하나의 권장 설정으로 통합하여 기존에 갖고 있던 React의 문제점을 해결하고 있었다. 그런데 리액트에서 사용을 중단했다. 그렇다고 안되는 것 같진 않은데, 고성능 프로덕션 앱 구축을 어렵게 하는 몇가지 제한이 있어서 CRA 사용을 중단하고 기존 앱은 프레임워크나 Vite, Parcel, RSBuild 같은 빌드 도구로의 마이그레이션을 권장.. 2025. 12. 17.

[Spring, React] 👑 VIP 초대장 만들기 💌 어디까지 했는지 확인하기. 1. 화면 고객 관리자 2. 점검하기 갑자기 경미한 수술을 받게 되어 3주간 쉬었다. 중간중간 조금씩 수정은 했지만, 수술 부위 때문에 앉아있기가 힘들어서 거의 못했고 최근에 3시간 정도 한 게 다였다. 거기다가 살도 잘 안 붙어서... 계속 피나고 남들보다 일주일 정도 더 치료를 받아야 했다. 아무튼 이제 거의 다 나았다고 자부할 수 있다!!! 멈췄던 프로젝트를 다시 시작하기 위해 내가 해야 할 게 무엇인지, 고쳐야 할 게 뭐였는지 복하려 한다! 프론트랑 백엔드 연결아직 백엔드랑 프론트를 연결하지 못했다. 관리자가 관리자 페이지에서 명단을 추가하거나, 수정하거나, 삭제하는 동작을 백엔드(스프링)에서 이뤄지도록 할 예정이다. 그리고 지금까지 해본 결과 Vue랑 생각보다 달라서 너무 무작.. 2025. 11. 26.

[React] React란? JSX 문법 정리하기 React가 무엇인지 알아보며제대로 사용하기 위해 알아야 할JSX 문법을 공부해보자! 1. 리액트(React)란?SPA를 위한 자바스크립트 라이브러리이며, 2013년 메타(구 페이스북)에서 공개했다.라이브러리란, 프로그래밍에서 자주 사용되는 코드 묶음을 모아놓은 것으로 새로운 코드를 작성하지 않고도 특정 기능을 쉽게 재사용할 수 있도록 돕는 도구이다.SPA(Single Page Application, 단일 페이지 애플리케이션)는 HTML, CSS, JavsScript를 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 HTML 파일을 조작하는 방식을 가지고 있다. (빠르다)과거에는 페이지 이동을 하게 되면 HTML, CSS, Javascript 파일을 서버와 주고받는 통신을 해야.. 2025. 10. 23.

[Spring, React] 👑 VIP 초대장 만들기 💌 어떻게 만들지 구상해보기. 연말을 맞이하여VIP 등급 이상 고객분들께초대장을 보내려고 한다!어떻게 만들지 구상해 보자. 1. 구상화면 - 고객고객님이 접속할 화면고객은 해당 페이지에서 미리 받은 비밀번호 4자리를 입력한다. 그러면 고객의 등급에 맞는 페이지로 이동한다. 등급은 총 3개로 되어있다. VIP, VVIP, DIAMOND 코드 성공 화면고객이 제대로 된 코드를 입력할 경우, 고객의 이름이 표시되면서 페이지로 이동한다. 코드 실패 화면코드에 실패하게 되면 코드를 다시 확인해 달라는 문구가 하단에 배치된다. - 관리자로그인 화면id에 따라 관리자의 권한이 달라진다. VIP 명단 관리 예시 명단의 개수는 30명으로 잡았으며 VIP 10명, VVIP 10명, DIAMOND 10명이 된다. 명단 추가add 버.. 2025. 10. 21.

이전 1 2 3 4 ··· 20 다음

티스토리툴바