![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/btKHzg/btrrumvM3lE/aJKECqWkcz3HxdwBgvjYS1/img.png)
로그인화면에서 회원가입 버튼을 누르면 Link 속성을 통해서 회원 가입 url로 이동하게 된다. 회원 가입에는 중복체크 버튼이 있고 비밀번호를 재입력해 확인하는 기능이 있다. 이 과정을 통과하면 가입이 가능하고 다시 로그인화면으로 돌아가는 버튼도 만들었다. 중복체크 시 호출되는 idCheck 함수부터 살펴보자. 로그인과 마찬가지로 fetch를 사용하여 해당 url에 get요청을 하여 받아온 데이터값을 비교한다. 아이디가 입력되지 않았을 경우 경고창을 띄우고 for문을 사용하여 일치하는 ID값이 있는지 확인한다. 사용가능한 아이디이면 usableID을 true로 변경해주었다 server.js에서는 해당 url에 대한 get 요청은 다음과 같이 실행하였다. 회원가입은 form태그로 작성되었다. 가입버튼을 누..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/weZPo/btrrq0Ug4Vo/kE4t2POY7mxJLunfKHRFUK/img.png)
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) 컴포넌트로 이루어진다. 게시..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cmUDpS/btrrweEgbTG/uvHQbkyYB3hIQuul1D52r0/img.png)
대학교 졸업작품으로 웹을 하나 만들기로 했는데 클라이언트는 React, 서버는 node.js express 그리고 DB는 mysql을 사용하기로 했다. 그래서 관련된 무료 강의 영상을 클론 코딩식으로 공부하면서 활용해보기 위해 스스로 무언가를 만들어봐야겠다 생각했다. 가장 간단하면서 기초가 되고 Restfull한 API 방식의 흐름을 익히기에 적당하다고 생각된게 로그인 기능이였고(보안 걱정없이) 이어서 게시판까지 만들어보았다. 간단한 프로젝트를 만들면서도 컴포넌트 파일의 위치와 구조도 잘못되었다 느꼈고 설계의 중요성을 한번 더 깨닫게 되었다. 뿐만 아니라 제작하면서 간단한 로그인 기능이지만 브라우저 내 sessionStorage를 처음 사용해보게 되었고 아이디 생성이나 로그인 과정에서 어떤 알고리즘 형식..