I T H

회원가입을 마치고, 이제 react with typescript + node.js(mongodb)환경에서의 로그인을 구현해보자! 로그인은 사용자로부터 id와 패스워드를 받아서 백앤드로 전달하고 백앤드에서 토큰을 만들어서 다시 프론트앤드로 보내주게 된다. 그리고 받은 토큰을 가지고 headers의 authorization에 토큰정보를 넣어서 백앤드로 보낸다. 백앤드에서 secret key를 이용해서 프론트에서 받은 토큰이 유효한 토큰인지 확인후 유효하다면 사용자 데이터를 보내게된다. 이번 챕터는 백앤드에서 토큰을 받아오는 부분까지, 다음챕터부터는 나머지부분을 다뤄보도록 하겠다. - Frontend [ pages / types / login.ts ] - 로그인페이지의 타입들을 모아놓은 파일 export in..

로그인 구현에 앞서 폴더 구성을 변경하고자 한다. 아래와 같이 index.jsp를 제외한 앞으로 신규 생성될 jsp 파일들은 WEB-INF/views 폴더 아래에 위치시키도록 한다. - 앞서 admin.jsp 페이지 위치가 다르게 설정되어 있었으므로 아래와 같이 컨트롤러도 수정하여 준다. - 로그인 구현을 위한 화면 UI를 작성한다. [ JSP ] WEB-INF\views\cLogin.jsp 아이디, 비밀번호 입력 창이 가운데 배치가 되도록 스타일 수정을 해주었다. 로그인 페이지 로그인 정보를 입력하세요. 아이디 비밀번호 로그인 다음으로 스크립트를 작성한다. 아이디와 비밀번호를 입력 후 로그인 버튼을 클릭하면 서버사이드 컨트롤러를 호출하여 로그인 체크를 하도록 해준다. [ JS ] webapp\resou..

Mybatis (참고) 자바의 관계형 데이터베이스 프로그래밍을 좀 더 쉽게 할 수 있게 도와주는 개발 프레임워크 복잡한 JDBC 코드를 걷어내며 깔끔한 소스코드를 유지할 수 있다. 객체(Object)와 SQL 사이에서 자동 맵핑을 도와주는 프레임워크 [ build.gradle 설정 ] spring boot 프로젝트에 mybatis 설정을 위한 의존성 추가 및 오라클 데이터베이스 연결을 위한 jdbc 의존성 추가 build.gradle 파일에 아래 내용 추가 build.gradle 파일 수정 후 프로젝트 우측 마우스 클릭 > gradle > refresh 적용 경로 ) 프로젝트 하위 // mybatis implementation 'org.mybatis.spring.boot:mybatis-spring-boo..

JSTL을 활용하여 로그인한 경우에는 로그아웃 버튼을 활성화 로그인하지 않은 경우에는 로그인/회원가입 버튼을 활성화하여 보여주도록 함. 앞서 세션 정보에 로그인 아이디를 (userId) 사용하여 체크함. [ incHeader.jsp ] - 수정 jstl 사용을 위한 선언문 태그를 이용하여 경우에 따라 보여줄 버튼을 처리 메인 상품 게시판 장바구니 마이페이지 회원관리페이지 상품등록페이지 반가워요 ${userId}님 로그아웃 로그인 회원가입 Cart (0) Favourite Search [ 로그인하지 않은 경우 ] [ 로그인한 경우 ]