React
1.React.js (1) Create React
React 설치하기npm 방법node.js 설치React file Tree┠─ public│ ├ favicon.ico│ ├ logo.png│ └ index.html┠─ src│ ├ App.js│ └ index.js├ .gitignore├ n
2.React.js (2) React Router v6
기존 리액트 라우터 방식 v5새로 업데이트 된 v6
3.React.js (3) React HTTP Axios
Axios 라이브러리를 활용하여 API를 호출합니다.GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거Axios 설치axios 호출 및 Method 사용 방법
4.React.js (4) React Hook (useState, useEffect)
컴포넌트에서 바뀌는 값 관리하기사용 방법import변수 선언현 user 값은 null 이다.axios get 호출로 user table 속 모든 데이터를 호출한다면,response.data 에서 호출된 값이setUser() 메서드에 선언 되어user 값은 user ta
5.React.js (5) React async await
ECMAScript2017 부터 추가되어,API 비동기 순차적으로 호출하기 위함사용 방법
6.React.js (6) React + Google 로그인
React.js (6) React + Google 로그인구글 클라우드 플랫폼 로그인https://console.cloud.google.com새 프로젝트 클릭프로젝트 이름 만들기생성된 프로젝트 속 대시보드에서 API 개요로 이동 클릭사용자 인증 정보 클릭상단에
7.React.js (7) React + Kakao 로그인
React.js (6) React + Kakao 로그인카카오 디벨로퍼 로그인https://developers.kakao.com/애플리케이션 추가하기 클릭앱 정보를 입력앱 클릭생성된 앱 키 확인활성화 설정 ON + 리다이렉트 URI 설정왼쪽 사이드바를 통해 동의
8.React.js (8) React + Naver 로그인
React.js (8) React + Naver 로그인네이버 개발자 센터 로그인https://developers.naver.com/main/애플리케이션 등록 (API 이용신청) 클릭앱 정보를 입력생성된 Client ID 확인
9.React.js (9) React + Material Ui
React.js (9) React + Material Ui프론트엔드에서 html 부트스트랩처럼 많이 사용하는리액트 Material Ui 설치 https://mui.com/
10.React.js (10) PascalCase
리액트로 개발을 하다보다면 아래와 같이에러는 아니지만 경고 로그가 종종 등장하는 경우가 있다그 이유는 오타를 없애고 혼란스러운 문장을 명확히하기 위하여 작은 약속이라고 합니다.
11.React.js (11) 웹 폰트 적용
React.js (11) 웹 폰트 적용이번 포스팅은 리액트에서 웹 폰트를 적용하는 방법에 관한 포스팅입니다.자신만에 유니크한 웹페이지와 깔끔한 디자인을 위한 font 적용은 필요합니다.리액트에서 많은 폰트 적용 방법이 있지만 확실한 방법 한 가지를 포스팅하려고 합니다.