IT 썸네일형 리스트형 로그인 + 게시판(2: 로그인) App.js의 구조는 다음과 같다. react-router-dom^5.2.0을 설치하여 {BrowserRouter, Route, Switch}를 import 하여 사용하였다. Switch가 6버전 부터는 Routes로 바뀌어 아직 익숙한 다운 버전을 받아 사용하였다.Header 컴포넌트는 헤더에 고정하였고 나머지 컴포넌트들을 해당 url에 따라 다른 컴포넌트들을 보여주도록 설정하였다. App.js를 제외하고 컴포넌트들의 총 갯수는 9개로 헤더에 고정할 컴포넌트 하나와 메인 컴포넌트(Main), 로그인(Login), 회원가입(AddLogin), ID/PW찾기(LoginFind), 게시글작성(BoardWrite), 게시글조회(BoardRead), 상세조회(BoardDetail) 컴포넌트로 이루어진다. 게시판.. 더보기 로그인 + 게시판(1: 배경 및 기능 설명) 대학교 졸업작품으로 웹을 하나 만들기로 했는데 클라이언트는 React, 서버는 node.js express 그리고 DB는 mysql을 사용하기로 했다. 그래서 관련된 무료 강의 영상을 클론 코딩식으로 공부하면서 활용해보기 위해 스스로 무언가를 만들어봐야겠다 생각했다. 가장 간단하면서 기초가 되고 Restfull한 API 방식의 흐름을 익히기에 적당하다고 생각된게 로그인 기능이였고(보안 걱정없이) 이어서 게시판까지 만들어보았다. 간단한 프로젝트를 만들면서도 컴포넌트 파일의 위치와 구조도 잘못되었다 느꼈고 설계의 중요성을 한번 더 깨닫게 되었다. 뿐만 아니라 제작하면서 간단한 로그인 기능이지만 브라우저 내 sessionStorage를 처음 사용해보게 되었고 아이디 생성이나 로그인 과정에서 어떤 알고리즘 형식.. 더보기 React를 활용한 고객 관리 시스템(4) 세개의 컴포넌트를 하나씩 확인해보자.첫번째로 Customer(고객) 컴포넌트이다. Customer 컴포넌트는 간단하다. props로 받은 값들을 화면에 띄워주는 역할만 한다.테이블에 마지막 Cell에는 다른 컴포넌트가 들어가는데 Customer 컴포넌트가 props로 전달받은 stateRefresh()함수와 id속성을 다시 CustomerDelete 컴포넌트에 props로 전달한다.삭제를 할 경우 id값만 전달받으면 되고 다시 새로 고객을 표시하기 위해 stateRefresh()가 전달된 것이다. 그렇다면 CustomerDelete 컴포넌트에서는 props를 어떻게 처리하는지 확인해보도록 하자. 두번째로 CustomerDelete 컴포넌트이다.이 컴포넌트 안에는 고객을 삭제하기 위한 deleteCusto.. 더보기 React를 활용한 고객 관리 시스템(3) (2)에서 server.js에서 어떻게 DB에 연결하고 POST나 DELETE요청을 처리하는지 확인했고 이번에는 클라이언트 즉 리액트에서는 어떤 코드로 작성되었고 로직과 내부 구조를 확인해보도록 한다. npx create-react-app "프로젝트명"리액트는 npx create-react-app "프로젝트명"으로 생성할 수 있다. 목표로 개발하는 고객 관리 시스템에는 3개의 컴포넌트(고객 컴포넌트, 고객 추가 컴포넌트, 고객 삭제 컴포넌트)와 App.js를 이용하여 만들 수 있다. App.js에서 중요하게 볼 부분은 리액트 훅을 사용하여 변하는 값을 useState와 useEffect를 사용하여 설정한 부분과 props에 대한 의미를 다룰 것이다. App.js의 78번째 행에서 map()함수를 사용하여.. 더보기 React를 활용한 고객 관리 시스템(2) 본 내용은 React를 활용한 고객 관리 시스템(1) 의 내용과 이어서 설명한다.우선 server.js는 어떤 역할을 하는지 살펴보자. 크게 세가지를 중심으로 살펴보면 된다. post 요청이 들어왔을때 어떻게 처리하는지, delete 요청이 들어왔을때 어떻게 처리하는지, DB는 어떻게 연결하는지. 부가적으로 cors라는 라이브러리를 설치하여 사용하였는데 cors는 Cross-Origin Resource Sharing의 약자로 웹을 개발하는 초보자의 입장으로서 한번씩 겪을 것이라고 생각된다. 이는 나중에 따로 다루도록 하고 현재는 위에서 언급한 세가지를 중심으로 server.js의 소스코드를 확인해보도록 하자. 원하는 DB에 연동하기 위해 DB에 정보가 담긴 database.json 파일을 하나 생성하여.. 더보기 React를 활용한 고객 관리 시스템(1) 리액트와 node.js express, mysql을 이용하여 간단한 프로젝트를 만들었다.(유튜브- 동빈나의 고객 관리 시스템) 클라이언트로 React를 활용하고 서버는 Node.js express, 그리고 DB는 RDS의 mysql을 사용하여 간단한 고객 관리 시스템을 개발한다. 강의 내용을 이해하고 응용하고자 클래스형 컴포넌트들로 작성한 코드들을 함수형 컴포넌트로 수정하였고 Node.js express를 서버단에 다른 포트번호를 이용하여 API 서버를 구축하여 REST API 방식으로 CRUD작업을 진행하였다. 또한 DB는 RDS를 이용하지 않고 기존에 있던 mysql workbench를 이용하여 편리하게 제작해보았다. 폴더의 구조는 다음 그림과 같다. 프로젝트 customer m.. 더보기 리액트 기초 클래스형 컴포넌트 -> 함수형 컴포넌트 처음으로 웹으로 무언가를 만들어보기 위해 리액트, node.js express를 공부하며 유튜브에서 어떤 강의를 듣던 중 클라이언트의 React 부분이 모두 클래스형 컴포넌트로 선언하며 설명하였다. 이것을 함수형 컴포넌트를 사용하여 만들어보면서 리액트를 학습하는 시간을 가져보았다.클래스형 컴포넌트에서는 다음과 같이 작성된 형태였다. 이것을 함수형 컴포넌트로 만들어 리액트 훅 useState()와 useEffect를 사용하여 변경해보았다. 수정할 때마다 여러 에러 문구가 콘솔창에 출력됐다. 위 문구이외에도 uncaught typeerror: response.json is not a function,uncaught (in promise) syntaxerror: unexpected token 결론적인 문제는a.. 더보기 AWS (Git, Node 최신 버전 설치, 리액트 프로젝트 생성) AWS EC2에서 Git을 설치하고 리액트 프로젝트를 생성하기 위해 node 최신버전을 받아보도록 하자. 먼저 Git을 설치하도록 한다. git을 설치하는 명령은 다음과 같다. sudo yum install gitgit 설치가 정상적으로 이루어졌는지 git --version으로 확인해보도록 하자 다음은 node를 설치해보겠다. node 설치 또한 어렵지 않다. sudo yum install curlcurl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -sudo yum install -y nodejsnode -v순서대로 입력해주고 마지막에 설치가 잘 되었는지 버전을 확인하도록 하자. 여기까지 모두 정상적으로 설치가 되었으면 간.. 더보기 이전 1 ··· 16 17 18 19 다음
