~☆~ 우하하!!~ 개발블로그

https://iwoohaha.tistory.com/376 에서 로그인하여 jwt 토큰을 얻어 로컬 스토리지에 저장하고, 로컬 스토리지에 저장된 jwt 토큰값을 처리하는 과정을 살펴보았다.이번에는 로그인된 상태에서 일기 데이터를 가져오는 로직을 구현해보려고 한다.일기 데이터를 보여주는 컴포넌트는 Home 이 가장 좋을 것 같다. 이미 Home.js 에는 로그인 상태를 체크하는 로직이 존재한다....const Home = () => { const { isAuthenticated } = useAuth(); // 로그인상태 확인 후 로그인상태가 아니면 / 로 리디렉션한다. if (!isAuthenticated) { return }...Home 컴포넌트가 로딩될 때 로그인된 ..

https://iwoohaha.tistory.com/366 에 이어서 Login RestAPI 와 연동하여 jwt 토큰으로 로그인하기 기능을 구현해 볼 예정이다.우선 React 에서 로그인 상태를 전역적으로 관리하기 위해서 React Context 를 사용해보기로 하자.일반적으로 데이터는 부모로부터 자식에게로 props 를 통해서 전달되지만, 컴포넌트 계층이 깊어질수록 이 과정이 번거로워질 수 밖에 없다. 흔히 Props Drilling 이라는 현상이 발생하게 되는데, 중간 계층의 컴포넌트들이 불필요하게 데이터 전달에 관여할 수 밖에 없는 현상을 의미한다. 이런 현상을 방지하기 위해서 사용하는 것이 Context 이다.아래 코드는 인증 상태를 관리하기 위한 AuthContext 이다. src/contex..

React 앱을 실행했을 때 이 React 앱이 로그인하지 않으면 안되는 앱이라면 필수적으로 로그인화면을 거쳐야만 한다. 물론 이미 로그인된 상태라면 로그인 상태에서 볼 수 있는 초기화면으로 이동해도 되겠지만, 지금 당장은 여기까지 생각하지 않기로 하자.앱이 실행되자마자 로그인화면으로 이동하게 만들기 위해서는 라우터를 사용해야 한다.라우터는 요청에 대한 경로를 설정한다는 의미이다. React 프로젝트에서 라우터를 설정하기 위해서는 react-router-dom 패키지를 설치하는 작업부터 진행한다.react-router-dom 패키지 설치npm install react-router-domReact 프로젝트 디렉토리에서 위 명령을 실행시키면 된다. vscode 나 IntelliJ 에는 터미널 창이 존재한다...

https://iwoohaha.tistory.com/312 에서 알아본 것과 같이 React 프로젝트를 개발할 환경 구성을 모두 완료NVM -> Node.js (npm, npx)하였다면, npx 를 이용하여 React 프로젝트를 생성할 수 있는데,npx create-react-app 위 명령어를 실행시켰을 때 아래와 같이 오류가 발생할 수 있다.npx create-react-app reactdiaryCreating a new React app in /Users/dbfis/_MyProject/woohahaapps.com/reactdiary.Installing packages. This might take a couple of minutes.Installing react, react-dom, and reac..

이번 포스트는 https://iwoohaha.tistory.com/316 의 연장이다.지난번 포스트에서는 버튼을 클릭하면 단순히 알럿 메시지를 표시하는 정도의 수정이었는데, 이번에는 버튼이 도대체 몇 번이나 클릭을 당했는지를 표시해보려고 한다. 컴포넌트에서 어떤 값을 관리하기 위해서는 상태(state)를 관리해야 하는데, 'react' 로부터 useState 를 import 하는 것으로부터 시작한다.import { useState } from 'react'; node_modules 디렉토리 아래의 react 에서 export 하고 있는 컴포넌트가 무수히 많기 때문에 그 중에서 필요한 useState 만을 가져오기 위한 방법으로 { } 괄호 사이에 useState 를 사용하고 있는 것이다. 이렇게 상태관리..

https://iwoohaha.tistory.com/314 에서 실습해 본 수정의 연장선 차원에서 버튼에 클릭 이벤트를 추가하는 방법에 대해서 알아보자. 우선 클릭 이벤트 핸들러 함수를 만들어보자. function handleClick() { alert('You clicked me!'); } handleClick 이라는 이름의 함수인데, alert 함수를 사용해서 'You clicked me!' 메시지창이 표시되게 했다. 이 함수를 작성해야 하는 위치는 MyButton 컴포넌트(함수형 컴포넌트) 내부이다. MyButton 컴포넌트의 동작과 관계가 있기 때문이다.function MyButton() { function handleClick() { alert('You ..

https://iwoohaha.tistory.com/313 에서 React 프로젝트 구성 파일을 대략적으로 살펴봤는데, 이번 포스트에서는 과감하게 App.js 의 내용을 수정해 봄으로써 React 프로젝트 개발의 첫 발을 내딛어보려고 한다. React 프로젝트 분석https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝iwoohaha.tistory.com 참고 : https://ko.react.dev/learn 빠르게 시작하기 – ReactThe library for web an..

https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝트 디렉토리 하위에 .idea 이름의 디렉토리가 생성되는데(프로젝트를 오픈하고 나서 생기므로 위 스크린샷에는 잡히지 않았다) 오직 IntelliJ IDEA 를 위한 디렉토리이므로 신경쓰지 않아도 된다. public 디렉토리와 src 디렉토리를 펼쳐서 하위에 어떤 파일들이 구성되어 있는지를 볼 수 있게 해봤다.우선 public 디렉토리를 구성하고 있는 파일들을 살펴보자. public 디렉토리에는 정적 파일들이 포함되어 있는데,..