React_Album 프로젝트(1)

몇년 전...썩혀 두었던 프로젝트 하나를 열어본다. 이 프로젝트를 썩히긴 아까워서 지금 배우고 있는 리액트로 변환해볼까? 란 생각이 들었다. 기존 프로젝트는 HTML, CSS, Jquey로 구성되어 있다. 자, 이 프로젝트를 리액트로 변환해보자!

1. useState를 이용한 onChange 이벤트 핸들링 1.1 각 상태값마다 useState 함수 호출하기 ✔️ 1.2. 상태값을 객체로 묶어서 useState 함수 호출하기 2. 렌더링 성능 최적화 3. 버튼 활성화 4. 버튼 스타일링

지난 시간에 마무리 지었던 전체 코드를 다시 한번 살펴보자.이 코드에서 button 밑의 hint 부분부터 먼저 수정해줄 것이다."Click to get a hint"를 누르면 특정 주소의 컴포넌트로 연결되도록 하기 위해서 리액트 라우팅 라이브러리가 필요하다. 리액트

현재 로그인 버튼의 기능은 id와 password를 둘 다 입력했을 때 버튼 색상이 활성화 되는 것이다.이 기능에 더해 버튼을 클릭했을 때의 페이지 전환을 해줘야 된다.페이지 전환을 위해서 useNavigate를 사용할 줄 알아야 한다.react-router-dom은

HTML과 내부 CSS와 jQuery로 구현했던 코드이다. 우선 HTML 틀과 jQuery 기능을 리액트 형식으로 바꿔보겠다. Hint 컴포넌트에 스타일을 선언하기 위해 먼저 아래의 명령어를 터미널에 입력하여 설치하도록 하자. npm i styled-componets

Carousel 설치 및 적용 1. 포토북 형태로 디자인 1.1. 왼쪽 페이지와 오른쪽 페이지로 나누자. 1.2. CSS로 스타일을 입힌다. 2. 이미지 관련 데이터 불러오기 3. Carousel 이미지 적용 4. 다크 모드와 로그아웃 기 4.1. 다크 모드 구현 4.

1. 데이터베이스 생성하기 2. 이미지 관련 데이터를 데이터베이스에 저장 2.1. PHP로 data.json 파일 읽어오기 2.2. PHP로 테이블 생성하기 2.3. 테이블에 이미지 관련 데이터 넣기 2.4. 이미지 관련 데이터 삽입 전체 코드 3. 이미지 관련 데이터

👀 에러: JSON.parse()⭐️ 에러 원인 💖 해결 방안 Album 전체 코드 지난 이미지 데이터를 위한 서버 구현하기(7)에서 이미지 데이터를 DB에 저장하고, 이미지 데이터를 검색하는 API를 작성했다. 이번에는 프론트에서 이미지 데이터를 검색하는 API

로딩 화면 | 이미지 관련 데이터 처리 성공 | 이미지 관련 데이터 처리 실패 | 서버 Off일때 | 서버 On일 때 | useEffect에서 then 메서드와 catch 메서드 안을 보면 setLoading(false)을 볼 수 있다. then부터 말하자면,

타입스크립트의 중요성을 뒤늦게 알고, 유튜브 강의로 기본적인 학습을 마치고 프로젝트에 적용해보기로 나섰다.먼저 타입스크립트를 적용하기 위해 설치해보도록 하자.npm i typescript설치가 되는 건가 싶더니 에러가 발생하였다.나는 리액트 프로젝트를 이미 생성한 뒤에