728x90 반응형 SMALL react.js11 계정 생성 페이지구현 마지막으로 계정 생성코드를 작성해 보겠습니다.! 지금까지 TodoList를 작성하고, 로그인을 하고 로그아웃을 했지만 계정생성페이지를 만들지않아 계속 postman 을 통해서 계정을 만들어주었습니다.ㅠㅠ 계정생성이 불가능했으면 로그인 기능은 화중지병입니다. 따라서 이제 로그인, 유저에 대한 기능을 위한 계정 생성페이지를 구현해보겠습니다!! 로그인 하는 버튼 하단의 링크를 클릭해서 계정 생성 페이지로 라우팅 한 후 계정 생성 완료 시 로그인 페이지로 돌아가는 간단한 로직을 구현해 보겠습니다 계정생성 로직 ApiService에 signup 메서드를 추가해주고, 이 메서드를 이용해 백엔드의 signup 요청을 해주도록 하겠습니다. export function signup(userDTO){ return call.. 2021. 12. 16. 로그아웃과 글리치 해결 로그아웃 서비스 로그인 기능은 완료되었는데 로그아웃 기능이 현재 없습니다. 로그아웃 기능은 어떻게 만들까요? 우리는 로그인을 위해 엑세스 토큰을 로컬 스토리지에 추가했습니다. 로그아웃은 이를 반대로 해주면 됩니다. 로컬 스토리지에 존재하는 액세스 토큰을 제거하고 로그인 페이지로 리디렉트 하는것입니다. ApiService.js 비록 백엔드 서버에 요청하는 로직은 아니지만 코드관리를 위해 로컬 스토리지에 관련된 모든 것은 ApiService에 작성햬왔고 계속하겠습니다. signout 함수를 만들어보겠습니다. export function signout(){ localStorage.setItem(ACCESS_TOKEN, null); window.location.href = "/login"; } 그러나 아직 로그.. 2021. 12. 16. 액세스 토큰 저장 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 것이 저의 로직이됩니다. 백엔드에 API콜을 할 때마다 로컬 스토리지에서 액세스 토큰을 불러와 헤더에 추가해 줍니다. 첫 번째로 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 코드를 작성해 보겠습니다. apiservice.js 의 로그인하는 함수를 수정해 주어야 합니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { if(response.token){ //로컬스토리지에 저장 localStorage.setItem("ACCESS_TOKEN",response.token); //token이 존재하는 경우 Todo화면으로 리디렉트 w.. 2021. 12. 15. 로그인 페이지 구현내용 로그인 페이지 구현 메인 페이지 리디렉션 로직 구현 로그인을 위한 API서비스 메서드 작성 로그인 API서비스는 /auth/signin 이었습니다. 이 경로를 이용해 로그인하는 메서드를 ApiService에 작성해주겠습니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { console.log("response : " , response); alert("로그인 토큰 : " + response.token); }); Login 컴포넌트를 수정했습니다 . Login 컴포넌트는 이메일과 패스워드를 받는 인풋 필드와 로그인 버튼으로 이뤄져 있습니다. 사용자가 이메일과 패스워드.. 2021. 12. 15. 프론트엔드란? + node.js 간단설명 프론트엔드란 말 그대로 사용자 바로 앞에서 사용자와 상호작용하며 애플리케이션 로직을 수행하고 백엔드 서버로 요청을 요청하는 역할을 합니다!! 웹서비스에서 클라이언트 또는 프론트엔드라는 웹 브라우저를 뜻합니다. 사용자는 자신의 컴퓨터에서 브라우저를 실행합니다. 브라우저는 인터넷을 이용해 서버에 있는 자원(HTML, JavaScripte,Css 등)을 사용자의 컴퓨터로 다운로드 한 후 브라우저에서 실행킵니다! Node.js ? Node.js가 등장하기 전 자바스크립트는 브라우저 내에서만 실행할 수 있었습니다. 자바스크립트는 브라우저상에서 HTML 렌더링의 일부로 실행하거나 , 자바스크립트 콘솔을 이용해 실행해야 했습니다 . 다시말씀드려서, 자바스크립트는 브라우저 밖에서는 실행할 수 가 없었습니다. 그러나 이.. 2021. 12. 2. 서비스통합(백엔드와 프론트엔드 통합하기) 서비스 통합 크로스오리진 리소스 셰어링 스프링 @Configuration 을 이용한 CORS 문제해결 fetch를 이용한 프론트엔드와 백엔드 통합 현재 저는 독립적으로 동작하는 백엔드 애플리케이션과 독립적으로 동작하는 프론트엔드 어플이 하나씩있습니다! 이제는 두 어플리케이션을 통합해 하나의 기능을 하는 웹 애플리케이션을 완성할 차례입니다! 이제는 프론트엔드에서 백엔드에 API를 요청하는 코드를 작성해보겠습니다 우리는 이제 JS의 fetch API를 이용해서 Todo 아이템 CRUD를 하게 할게요! 하지만 이때 CORS문제에 만닥뜨리게 된다. 이 문제는 보안과 관련되어 있어 백엔드에서 해결해 줘야합니다. 우리가 개발하는 애플리케이션을 통해 CORS가 무엇이고 이를 어떻게 해주어야할까요!? App컴포넌트에 .. 2021. 12. 1. Todo 수정 프론트엔드 개발의 마지막으로 Todo아이템 수정 부분을 만들어봅시다! Todo아이템을 수정하는부분에서는 체크박스가 있구 그 title을 수정하고 ㅇ싶을때 입니다! 둘다해보겠습니다! TOdo컴포넌트에 readOnly 플래그가 있어 readOnly 가 true 인 경우 아이템 수정이 불가능 하고 , false인 경우 아이템을 수정할 수 있다. 사용자가 어떤 아이템의 title을 클릭하면 해당 input field는 수정할 수 있는 상태, 즉 readOnly가 false인 상태가 된다. 사용자가 Enter키 또는 Return키를 누르면 readOnly가 true인 상태로 전환된다. 체크박스 클릭 시 item.done 값을 전환한다. true -> false, false -> true ReadOnly Mode .. 2021. 12. 1. Todo 기능(추가, 삭제) 리스트들이 나오는걸 확인했다. 이제 그 리스트들을 추가해 줄 수 있도록 해주는 화면을 만들어봅시다! 첫번째로 텍스트를 입력받을 컴포넌트와 그걸 추가하는 버튼 내지 엔터키가 필요합니당 그러기 위해 다음코드를 입력하여 생성해주도록 합니다! 그리고 해당 기능을 위해 TodoAdd라는 js파일을 하나더 생성했습니다! import React from "react"; import { TextField, Paper, Button, Grid } from "@material-ui/core"; class AddTodo extends React.Component { constructor(props) { super(props); this.state = { item: { title: "" } }; } render() { ret.. 2021. 12. 1. [React] Invalid hook call. Hooks can only be called inside of the body of a function component.. 에러 해결방법 + 3000번 포트 죽이기 문법적 오류에 관해 발생하는 것이 아닌 시스템 또는 환경설정에 관해 발생할때 유용할듯..? 1. 터미널에서 npm ls react 를 통해 동시접속되어있는것을 확인하자 문제가 있다면 npm dedupe 를 통해 중복을 삭제해주고 찜찜하면 npm uninstall 를 통해 삭제 후 npm install를 통해 설치해주자 2. 버전을 확인하자 리액트 17.0.2를 사용중이거나 17버전 위라면 간혹 발생한다. npm install --save react@^16.14.0 react-dom@16.14.0 이걸 고대로 복붙해서 16.14로 맞춰주자 어디가나 16버전을 채택많이하더라... 3. 포트 3000 번이 아닌 것을 사용하고 있을 경우 이런 경우도 있다. 3000번이 켜져있어서 3001로 우회하거나 새로 만들.. 2021. 11. 30. 리액트로 간단한 컴포넌트 만들어보기 첫번째로 Todo 컴포넌트를 만들어볼것이다. 간단한 체크박스와 라벨을 랜더링하는 컴포넌트다. src디렉터리 아래에 Todo.js파일을 생성하자 저는 따로 js파일을들을 모아주기위한 js 폴더를 만들었어요! import React from 'react'; class Todo extends React.Component{ render(){ return ( Todo 컴포넌트 테스트 ); } } export default Todo; 현재 인덱스.js는 app컴포넌트가 렌더링 되고있다. 따라서 Todo컴포넌트를 화면에 출력하려면 App컴포넌트의 render함수에 Todo컴포넌트를 추가해야한다. import logo from './logo.svg'; import './App.css'; import Todo from .. 2021. 11. 30. Node.js와 NPM설치 앞으로 자바스크립트 라이브러리인 React.js 를 이용해 프론트엔드를 개발한다. React.js를 사용하려면 Node.js라는 자바스크립트 런타임 환경을 이용해야한다. 설치를 해줍시다 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 여기서 다운로드를하자. NPM은 node.js의 패키지 관리 시스템이다. 우리는 NPM을 이용해 node.js 라이브러리를 설치한다. NPM은 노드제이에스를 설치하면 함께 설치된다. 설치후 CMD 커맨드 라인에서 npm version 명령어로 버전 정보를 확인해줍시당! 지금은 16.13버전이.. 2021. 11. 29. 이전 1 다음 728x90 반응형 LIST
