개발가능구역

IntelliJ에서 백엔드를 담당하는 파트너와 VS Code에서 프론트엔드를 담당하는 파트너를 분리했다는 가정 하에 실습을 하는 방법으로 Mock API가 눈에 보였습니다. 백엔드 서버가 완성될 때까지 기다릴 필요 없이, VS Code에서만 프론트엔드 작업을 하는 연습을 해보려 합니다! 1. 🔍 Mock API란 무엇인가요?Mock API에서 'Mock'은 '흉내 내다', '가짜의'라는 의미입니다. 즉, Mock API는 실제 백엔드 서버가 없거나 실행 중이지 않을 때, 서버의 응답을 흉내 내어 프론트엔드 기능을 미리 개발할 수 있게 해주는 가짜 통신 환경입니다.구분실제 백엔드 통신Mock API (가상 통신)통신 대상백엔드 파트너가 실행 중인 Spring Boot 서버VS Code의 JavaScrip..

이제 IntelliJ에서 Spring Boot와 Thymeleaf로 코딩하던 환경에서, 이제 VS Code를 사용해 프론트엔드(화면)와 백엔드(서버 로직)를 완전히 분리하는 세상으로 진입할 것입니다! VS Code는 써본 적이 없었어서 인터넷에 찾아보고 설치부터 하고~ 기본적인 내용 찾아보고 나온 것들 정리를 해둘까 합니다! 1. 데이터의 공통 언어: JSON (제이슨)이전에는 Thymeleaf가 데이터를 HTML 안에 심어주었기 때문에 별도의 통신 형식에 신경 쓸 필요가 없었습니다. 하지만 이제 프론트엔드와 백엔드는 완전히 남남이 되었어요.둘이 서로 데이터를 주고받기 위해 사용하는 공통 언어가 바로 JSON (JavaScript Object Notation)입니다.구분기존 Thymeleaf 방식새로운 ..

웹 애플리케이션 개발에서 보안은 아무리 강조해도 지나치지 않다. 특히 사용자 역할에 따라 접근 가능한 기능을 제한하는 역할 기반 접근 제어(Role-Based Access Control, RBAC)는 필수적이다. 이 글에서는 Spring Security를 이용하여 관리자(ADMIN), 일반 회원(MEMBER), 비회원(ANONYMOUS) 세 가지 주요 역할에 대한 접근 권한을 IntelliJ 기반 Spring Boot 프로젝트에서 설정하는 방법을, 기존 코드에서 바뀐 코드를 중심으로 자세히 설명하고, 앞전에 다뤘던 Security 설정도 다시 복습해 보았다. ❌ 전: 기존 SecurityConfig 클래스@Configuration@EnableWebSecuritypublic class Security..

앞 전 유효성 검사 글에서는 회원가입을 함께 다뤘고,이전 글에서는 초기 Security 로그인 창에서 원래 작업하던 웹 페이지로 이동하는 작업을 했다 [ IntelliJ ] Security 로그인 01 [ IntelliJ ] Security 로그인 01로그인은 개인의 계정을 입력하여 권한을 얻는 행위이다앞전 유효성 검사는 그 계정을 만들기 위한 페이지를 구현하기 위함이었고, 이제부터는 로그인을 공부해보려 한다 아직 초심자라 모르oosomall.tistory.com 이번 글에서는 회원가입한 계정으로 로그인을 실제로 하는 코드를 다룰 예정이다 🔴 목차 1. 작업 툴2. 전체 흐름3. 네비게이션 바 Thymeleaf Security 추가4. 의존성 추가5. SecurityConfig 클래스 업데이..

로그인은 개인의 계정을 입력하여 권한을 얻는 행위이다앞전 유효성 검사는 그 계정을 만들기 위한 페이지를 구현하기 위함이었고, 이제부터는 로그인을 공부해보려 한다 아직 초심자라 모르는 부분 투성이지만 차근차근 해보려 한다 🔴 목 차 1. 작업 툴2. 의존성 추가 3. SecurityConfig - 설정 클래스 - 접근 권한 설정 - 로그인 완료 설정 - 로그아웃 완료 설정 - 비밀번호 암호화 🔴 작업 툴 IDE : IntelliJ웹 서버 : ApacheUI : HTML5, Thymeleaf사용 클래스 : Config사용 DB : Oracle 🔴 의존성 추가implementation 'org.springframework.boot:spring-boot-starter-security..

사용 클래스 : Controller, Service, DTO, Entity사용 인터페이스 : Service 구현, Repository사용 DB : ORACLE사용 언어 : Java, JavaScriptUI : HTML5, Thymeleaf 🔴UI CELLPHONE: 전화번호 확인 이런 모양의 입력창을 이용할 것이다 🔴Controller@PostMapping("/check/phone")@ResponseBodypublic String phonecheck(@RequestParam("phone") String phone){ int count = service.phonecheck(phone); if (count == 0) { return "match"..

사용 클래스 : Controller, Service, DTO, Entity사용 인터페이스 : Service 구현, Repository사용 DB : ORACLEUI : HTML5, JavaScript, Thymeleaf ✅ 스크립트 큰 요약$(document).ready(function () { $("#pw_check_btn").click(function () { ... }); $("form").submit(function () { ... });});스크립트에서 이 두 개는 같은 열에 위치한다둘은 각각의 역할이 있다$("#pw_check_btn").click(...) : 패스워드 확인 버튼 클릭 시 실행$("form").submit(...) : 폼 전송 시 실행 ✅ 스크립..