# ?️ 자바(스프링부트) & HTML 로 TODO-LIST 만들기 ### 준비물 #### 스프링부트(STS) #### JAVA 1.8 이상 1. 스프링부트 실행 2. 왼쪽 **package Explorer** 창에서 오른쪽 클릭 => **new** => **spring-starter-project** 클릭 (프로젝트를 처음 만드는 것이라면 바로 spring starter project 보이는데 이거 바로 누르면 됩니다.) 3. 프로젝트의 생성 (중요) => Name : 원하는 프로젝트 이름 ( 프로젝트 이름은 대소문자 상관 없음 ) - (수업은 demo) => Java version (본인이 설치한 자바 버전으로) - (수업은 자바 23) => 다음을 누르면 프로젝트의 추가적인 의존성(무기를 선택한다고 생각하시면 됩니다.) 을 골라야 됨 => 의존성 검색창에 **Spring Boot DevTools**, **Spring Web**, **Thymeleaf** 를 각각 입력해서 체크 해준 후 Finish 클릭 4. 프로젝트가 생성되는동안 STS 툴 왼쪽 하단에 로딩바가 있는데 이게 끝낼때 까지 기다려야 함. (다른 작업을 하게 되면 더 오래걸립니다) 프로젝트가 생성이 되었다면 우선 실행부터 !!! => 프로젝트 이름 선택 후 오른쪽 클릭 > Run As > Spring Boot App 그 후 콘솔창에 Tomcat started on port 8080 (http) with context path '/' 이런 문구가 떴다면 성공 만약 already port 이런 식으로 떴다면 프로젝트를 더블 클릭하여 열어준 후 src/main/resources 를 찾아 더블 클릭 후 application.propertices 를 클릭 하여 원하는 포트를 입력한다. 예시 server.port=8088 그 후 저장후 다시 Spring Boot App 을 눌러 실행 5. 실행이 되었다면 다시 프로젝트를 더블클릭하여 오픈해서 src/main/java 클릭 후 오픈하게 되면 기본 패키지가 보이게 됨. => **com.example.demo** > **DemoApplication.java** (스프링부트의 시작점) => 여기서 주의할점 !!!!!!!!! 패키지를 만들 때 처음 생성된 패키지명, 예를 들어 com.example.demo 라면 그 이후 만드는 패키지명들은 모두 com.example.demo.~~~~~~ 로 지켜줘야한다. => 컨트롤러가 담겨있는 패키지를 만들고 싶다면 com.example.demo.ctrl 이 형태로 만들어 줘야 함. 6. 그럼 이제 컨트롤러 패키지를 만든다. src/main/java 로 되어 있는 부분클릭 후 오른쪽 클릭 > new > pakage 를 눌러 com.example.demo.ctrl 를 입력해주고 확인을 눌러준다. 7. 그럼 빈 껍데기 패키지가 생성된다. 8. 그 이후 해당 패키지 클릭 후 오른쪽 클릭하고 > new > class 를 클릭한다. 9. 이 부분은 클레스 명을 지정하는 것이기 때문에 앞글자를 대문자로 맞춰줘야한다. HomeController 입력 후 엔터 10. 그 이후 ```java package com.example.demo.ctrl; # 패키지명 맞는지 확인 @Controller # 화면 리턴하는 컨트롤러 명시 public class HomeController { } ``` 이렇게 입력하면 해당 클래스는 화면을 리턴하는 컨트롤러 역할을 하게된다. 그 이후 브라우저에서 접속할 URL 을 정해야함. 그 부분이 @RequestMapping() ```java @Controller # 화면 리턴하는 컨트롤러 명시 public class HomeController { @RequestMapping("/") # http://localhost:8088/ 로 접속한 것의 의미 public String index() { // index 라는 이름을 가진 메소드 return "index"; // index.hmtl 파일을 리턴 } } ``` 이렇게 하고 저장을 하면 에러가 난다. index.html 이라는 파일을 생성하지 않았기 때문 !!! src/main/resources 를 오픈한 후 templates 오른쪽 클릭 > new > file 이름은 당연히 index.html 을 입력 후 엔터를 누르고 다시 http://localhost:8088/ 로 접근해보면 에러가 없어진다. *** *** # ?️ 자바2 문의 구남우 010-8603-0748 # ?️ 교육과정 - 자바를 활용해 간단한 백엔드 API 서버를 만들 수 있다. - 기존 텍스트 게시판의 심화버전으로 로그인을 구현할 수 있다. [`이클립스 다운로드`](https://www.eclipse.org/downloads/) [`이클립스(MAC) 다운로드`](https://www.eclipse.org/downloads/packages/) [`프로그래머스 자바 기초` ](https://school.programmers.co.kr/learn/courses/5/5-%EB%AC%B4%EB%A3%8C-%EC%9E%90%EB%B0%94-%EC%9E%85%EB%AC%B8) [`프로그래머스 코딩 기초 트레이닝` ](https://school.programmers.co.kr/learn/challenges/training?order=acceptance_desc&page=1&languages=java) [`점프투 스프링부트` ](https://wikidocs.net/book/7601) # ?️ 쓰면 좋은 개발 도구 - [`클러드 생성형 AI ` ](https://claude.ai/new) - [`CHAT GPT ` ](https://chatgpt.com/) # ?️ 챕터 1 : 웹 API 서버 환경 및 간단한 SpringBoot API 테스트 ### JDK (자바개발키트) - [`JDK 23 다운로드`](https://www.oracle.com/kr/java/technologies/downloads/#jdk23-windows) - => x64 Installer - [`JDK 23(MAC) 다운로드`](https://www.oracle.com/kr/java/technologies/downloads/#jdk23-mac) - [`Windows 자바 환경 변수`](https://velog.io/@bi-sz/Java-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0) 자바 23 버전의 경로를 맞춰줘야 함 !!!!! 우리는 23 JDK 를 다운 받았기 때문에. C:\Program Files\Java\jdk-23 <= 본인이 jdk 깔린 주소를 환경변수에 맞춰줘야 함. - [`Mac 자바 환경 변수`](https://gymdev.tistory.com/72) ### STS (이클립스기반으로 보안이나 웹 개발에 편리한 기능들이 모여있는 툴) - [`STS 다운로드`](https://spring.io/tools) Spring Tools 4 for Eclipse => 4.26.0 - Windows x86_64 (24-11-03 기준) ★ 만약 맥(mac) 이라면 = > M칩일때 - macos arm => 일반 인텔 - 4.26.0 - macOS x86_64 ### 포스트맨 (http 프로토콜로 데이터가 어떻게 오가는지 테스트 하는 툴) - [`포스트맨 다운로드`](https://www.postman.com/downloads/) Windows - 64 bit 다운로드 보튼 ★ 만약 맥(mac) 이라면 Windows - 64 bit 버튼 밑에 작게 있는 Not your OS? Download for Mac (Intel Chip, Apple Chip) or Linux (x64, arm64) 여기서 arm64(M칩) 혹은 x64(인텔) 클릭으로 다운로드 ## 데이터 흐름 ### Controller => (Service + ServiceImpl) => (DAO + DB) => Service => Controller => return ## 주요 어노테이션 ### @RestController - 데이터 리턴 컨트롤러 ### @Controller - 사용자 화면(html) 리턴 컨트롤러 ### @Service - 서비스로직(비즈니스로직) 개발 클래스 ### @Autowired 각 클래스를 연결해주는 어노테이션 ### @Mapper DB 와 연결시켜주는 어노테이션 (DAO) # 컨트롤러 ```java package com.example.demo.controller; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import com.example.demo.service.ArticleService; // 컨트롤러 종류 // 사용자 화면을 리턴해주는 컨트롤러 @Controller // 데이터를 리턴해주는 컨트롤러 @RestController @RestController public class ArticleController { // 은행 들어오자마자 안내해주는 안내원 @Autowired private ArticleService articleService; // 외부에서 호출을 해줘야 됨 // 이름을 정해야줘야 함 // 그 이름을 엔드포인트 (URL 매핑) // 데이터를 받는 API @RequestMapping("/getArticle") public List> getArticle() { List> data = articleService.getArticle(); return data; } // 데이터를 추가하는 API @RequestMapping("/addArticle") public String addArticle( @RequestParam(value = "name") String name, // 요청할 때 파라메터를 보낼 수 있음 @RequestParam(value = "age") int age) // @RequestParam 어노테이션을 이용하면 됨!! { System.out.println(name); System.out.println(age); articleService.addArticle(name, age); return "ok"; } } ``` # 서비스 로직 ```java // 서비스 인터페이스 package com.example.demo.service; import java.util.List; import java.util.Map; public interface ArticleService { // 2-1 인터페이스 List> getArticle(); void addArticle( String name, int age ); } // 서비스 개발 package com.example.demo.service; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.stereotype.Service; @Service public class ArticleServiceImpl implements ArticleService { // 은행창구 // 은행원 // [ {}, {}, {}, {}, {}, {}, {}, ] // 게시글 저장 테이블 List> articleData = new ArrayList<>(); @Override public List> getArticle() { return articleData; } @Override public void addArticle( String name, int age ) { // TODO Auto-generated method stub Map map = new HashMap<>(); map.put("name", name); map.put("age", age); articleData.add(map); } } ``` # ?️ 챕터 2 : 어노테이션 ```java // 스프링부트 애플리케이션의 시작점 @SpringBootApplication ``` ```java // @Controller & @RestController (두 개를 같이 쓸 수는 없음.) @Controller //사용자 화면 즉, html 파일을 리턴한다. @RestController //데이터 즉, 값을 리턴한다. ``` ```java // @RequestMapping 는 엔드포인트를 정할 수 있다. // http 프로토콜 // localhost IP주소(ex 123.123.123.123) // port IP주소에서 특정 방을 식별 // http://localhost:8080/ 프로토콜 + 주소 + 포트 // http://localhost:8080/article 이 뒤에 쓰는 애를 엔드포인트 라고 함. @RequestMapping("/article") ``` # 프론트엔드 & 백엔드 간단한 html 예제 # login.html ```html ``` # article.html ```html

게시글 페이지

``` # spring boot - HomeController.java ```java package com.example.demo.ctrl; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller // 화면을 리턴 public class HomeController { @RequestMapping("/home") public String home() { return "home"; } @RequestMapping("/article") public String article() { return "article"; } @RequestMapping("/login") public String login() { return "login"; } } ``` # ?️ 챕터 3 : 텍스트 게시판 - 회원가입, 로그인 ```java import java.time.LocalDate; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.Scanner; public class Main { public static void main(String[] args) { // 텍스트 게시판 관련된 모든 기능이 녹아있는 클래스 // 호출만 하면 어디서든 깔끔하게 해당 기능을 이용할 수 있음. new TextArticleModule(); } } class TextArticleModule { Scanner sc = new Scanner(System.in); ArrayList> list = new ArrayList<>(); ArrayList> userList = new ArrayList<>(); boolean 유저로그인여부 = false; // 유저 로그인 여부를 판단하기 위한 플래그 (변수) public TextArticleModule() { while (true) { System.out.print("명령어 : "); String command = sc.next(); switch (command) { case "login": { login(); break; } case "userAdd": { userAdd(); break; } case "help": { getHelp(); break; } case "list": { getArticleList(list, "list"); break; } case "add": { add(); break; } case "remove": { remove(); break; } case "exit": { System.out.println("시스템 종료"); break; } default: System.out.println(command + " 명령어는 존재하지 않습니다."); break; } } } void login() { System.out.print("아이디를 입력해 주세요. : "); String 유저아이디 = sc.next(); System.out.print("비밀번호를 입력해 주세요. : "); String 유저비밀번호 = sc.next(); if (userList.size() < 1) { System.out.println("등록된 회원이 존재하지 않습니다."); return; } for (int i = 0; i < userList.size(); i++) { Map item = userList.get(i); if (item.get("userid").equals(유저아이디) && item.get("userpw").equals(유저비밀번호)) { // 로그인이기 때문에 유저아이디, 비밀번호를 둘 다 검증이 완료 되어야 함. System.out.println("로그인이 완료 되었습니다."); //검증이 완료되었다면 회원이 존재하는 것 이므로, //유저로그인여부 플래그(변수)를 true 로 바꿔준 것 유저로그인여부 = true; } else { System.out.println("등록된 회원정보가 일치하지 않습니다."); } } } void userAdd() { System.out.print("사용하실 유저 아이디를 입력해주세요 : "); String 유저아이디; String 유저비밀번호; String 유저비밀번호확인; while (true) { 유저아이디 = sc.next(); boolean 유저중복확인 = false; // 단순히 유저 중복을 확인하기 위한 플래그 /* * 회원중복검사 */ for (int i = 0; i < userList.size(); i++) { Map itme = userList.get(i); // 하나의 유저 데이터 값으로 변환 if (itme.get("userid").equals(유저아이디)) { // 저장된 유저 값이 있는지 확인 유저중복확인 = true; // 등록된 유저가 있으므로 유저중복확인 변수 true System.out.print("이미 등록된 회원 입니다. 다시 입력해 주세요 : "); break; } } // 유저중복확인이 트루이면 실행이 안 됨. // 즉, 이미 등록된 유저가 존재함. if (!유저중복확인) { break; // 등록된 유저가 없으므로 while문 break; } } while (true) { System.out.print("사용하실 비밀번호롤 입력해주세요 : "); 유저비밀번호 = sc.next(); System.out.print("비밀번호를 다시 한 번 입력해주세요 : "); 유저비밀번호확인 = sc.next(); if (유저비밀번호.equals(유저비밀번호확인)) { Map user = new HashMap(); // 입력한 임시 유저 데이터 user.put("userid", 유저아이디); user.put("userpw", 유저비밀번호); // System.out.println(user); userList.add(user); // 유저 데이터베이스 (즉, 유저를 담는 동적배열) System.out.println("성공적으로 가입이 완료되었습니다."); break; } else { System.out.println("!!! 비밀번호가 올바르지 않습니다 !!!"); continue; } } } void add() { // 게시글 메서드 if (!유저로그인여부) { System.out.println("로그인이 필요합니다."); return; } HashMap map = new HashMap<>(); System.out.println("제목을 입력해 주세요."); sc.nextLine(); // 버퍼 비우기 String 제목 = sc.nextLine(); System.out.println("내용을 입력해 주세요."); String 내용 = sc.nextLine(); LocalDate now = LocalDate.now(); map.put("제목", 제목); map.put("내용", 내용); map.put("등록일", now); list.add(map); System.out.println("게시글이 성공적으로 등록 되었습니다!"); } void getHelp() { System.out.println("list : 게시글 리스트 "); System.out.println("add : 게시글 추가 "); System.out.println("userAdd : 유저 추가 "); System.out.println("remove : 게시글 삭제 "); System.out.println("exit : 프로그램종료 "); } void remove() { getArticleList(list, "remove"); int 게시글번호 = sc.nextInt(); list.remove(게시글번호 - 1); System.out.println("성공적으로 게시글이 삭제 되었습니다!!"); } void getArticleList(ArrayList> list, String articleListType) { if (list.size() <= 0) { System.out.println("등록된 게시글이 존재하지 않습니다."); } else { if (articleListType.equals("remove")) { System.out.println("삭제할 게시글 번호를 입력해 주세요."); } for (int i = 0; i < list.size(); i++) { HashMap items = (HashMap) list.get(i); System.out.println(" == " + (i + 1) + " 번 게시글 ==="); System.out.println("제목 : " + items.get("제목")); if (articleListType.equals("list")) { System.out.println("내용 : " + items.get("내용")); } System.out.println("등록일 : " + items.get("등록일")); } } } } ``` # ?️ 챕터 4 : 텍스트 게시판 - 회원이름 추가, 게시글 등록 시 회원 이름 표출 ```java package demo; import java.time.LocalDate; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.Scanner; public class Main { public static void main(String[] args) { // 텍스트 게시판 관련된 모든 기능이 녹아있는 클래스 // 호출만 하면 어디서든 깔끔하게 해당 기능을 이용할 수 있음. new TextArticleModule(); } } class TextArticleModule { Scanner sc = new Scanner(System.in); ArrayList> list = new ArrayList<>(); // 사용자가 저장되어있는 리스트 맵 ArrayList> userList = new ArrayList<>(); boolean 유저로그인여부 = false; // 유저 로그인 여부를 판단하기 위한 플래그 (변수) String 로그인한유저이름 = ""; public TextArticleModule() { while (true) { System.out.print("명령어 : "); String command = sc.next(); switch (command) { case "login": { login(); break; } case "userAdd": { userAdd(); break; } case "help": { getHelp(); break; } case "list": { getArticleList(list, "list"); break; } case "add": { // 게시글 작성 커맨드(명령어) add(); // 게시글 작성 메소드 break; } case "remove": { remove(); break; } case "exit": { System.out.println("시스템 종료"); break; } default: System.out.println(command + " 명령어는 존재하지 않습니다."); break; } } } void login() { System.out.print("아이디를 입력해 주세요. : "); String 유저아이디 = sc.next(); System.out.print("비밀번호를 입력해 주세요. : "); String 유저비밀번호 = sc.next(); if (userList.size() < 1) { System.out.println("등록된 회원이 존재하지 않습니다."); return; } for (int i = 0; i < userList.size(); i++) { Map item = userList.get(i); if (item.get("userid").equals(유저아이디) && item.get("userpw").equals(유저비밀번호)) { // 로그인이기 때문에 유저아이디, 비밀번호를 둘 다 검증이 완료 되어야 함. System.out.println("로그인이 완료 되었습니다."); // 검증이 완료되었다면 회원이 존재하는 것 이므로, // 유저로그인여부 플래그(변수)를 true 로 바꿔준 것 유저로그인여부 = true; // 가져온 값에 대한 item.get("username") => Map 맵 // 강제변환 //String str = String.valueOf( ) 로그인한유저이름 = String.valueOf(item.get("username")); } else { System.out.println("등록된 회원정보가 일치하지 않습니다."); } } } void userAdd() { String 유저이름; String 유저아이디; String 유저비밀번호; String 유저비밀번호확인; System.out.print("사용하실 유저 이름을 입력해주세요 : "); 유저이름 = sc.next(); System.out.print("사용하실 유저 아이디를 입력해주세요 : "); while (true) { 유저아이디 = sc.next(); boolean 유저중복확인 = false; // 단순히 유저 중복을 확인하기 위한 플래그 /* * 회원중복검사 */ for (int i = 0; i < userList.size(); i++) { Map itme = userList.get(i); // 하나의 유저 데이터 값으로 변환 if (itme.get("userid").equals(유저아이디)) { // 저장된 유저 값이 있는지 확인 유저중복확인 = true; // 등록된 유저가 있으므로 유저중복확인 변수 true System.out.print("이미 등록된 회원 입니다. 다시 입력해 주세요 : "); break; } } // 유저중복확인이 트루이면 실행이 안 됨. // 즉, 이미 등록된 유저가 존재함. if (!유저중복확인) { break; // 등록된 유저가 없으므로 while문 break; } } while (true) { System.out.print("사용하실 비밀번호롤 입력해주세요 : "); 유저비밀번호 = sc.next(); System.out.print("비밀번호를 다시 한 번 입력해주세요 : "); 유저비밀번호확인 = sc.next(); if (유저비밀번호.equals(유저비밀번호확인)) { Map user = new HashMap(); // 입력한 임시 유저 데이터 user.put("userid", 유저아이디); user.put("userpw", 유저비밀번호); user.put("username", 유저이름); // System.out.println(user); userList.add(user); // 유저 데이터베이스 (즉, 유저를 담는 동적배열) System.out.println("성공적으로 가입이 완료되었습니다."); break; } else { System.out.println("!!! 비밀번호가 올바르지 않습니다 !!!"); continue; } } } void add() { // 게시글 메서드 if (!유저로그인여부) { System.out.println("로그인이 필요합니다."); return; } HashMap map = new HashMap<>(); System.out.println("제목을 입력해 주세요."); sc.nextLine(); // 버퍼 비우기 String 제목 = sc.nextLine(); System.out.println("내용을 입력해 주세요."); String 내용 = sc.nextLine(); LocalDate now = LocalDate.now(); map.put("제목", 제목); map.put("내용", 내용); map.put("작성자", 로그인한유저이름); map.put("등록일", now); System.out.println(map); list.add(map); System.out.println("게시글이 성공적으로 등록 되었습니다!"); } void getHelp() { System.out.println("list : 게시글 리스트 "); System.out.println("add : 게시글 추가 "); System.out.println("remove : 게시글 삭제 "); System.out.println("exit : 프로그램종료 "); } void remove() { getArticleList(list, "remove"); int 게시글번호 = sc.nextInt(); list.remove(게시글번호 - 1); System.out.println("성공적으로 게시글이 삭제 되었습니다!!"); } void getArticleList(ArrayList> list, String articleListType) { if (list.size() <= 0) { System.out.println("등록된 게시글이 존재하지 않습니다."); } else { if (articleListType.equals("remove")) { System.out.println("삭제할 게시글 번호를 입력해 주세요."); } for (int i = 0; i < list.size(); i++) { HashMap items = (HashMap) list.get(i); System.out.println(" == " + (i + 1) + " 번 게시글 ==="); System.out.println("작성자 : " + items.get("작성자")); System.out.println("제목 : " + items.get("제목")); if (articleListType.equals("list")) { System.out.println("내용 : " + items.get("내용")); } System.out.println("등록일 : " + items.get("등록일")); } } } } ``` # ?️ 챕터 5 : 텍스트 게시판 - 로그아웃 기능, 새로운 아이디로 게시글 추가 ```java package demo; import java.time.LocalDate; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.Scanner; public class Main { public static void main(String[] args) { // 텍스트 게시판 관련된 모든 기능이 녹아있는 클래스 // 호출만 하면 어디서든 깔끔하게 해당 기능을 이용할 수 있음. new TextArticleModule(); } } class TextArticleModule { Scanner sc = new Scanner(System.in); ArrayList> list = new ArrayList<>(); // 사용자가 저장되어있는 리스트 맵 ArrayList> userList = new ArrayList<>(); boolean 유저로그인여부 = false; // 유저 로그인 여부를 판단하기 위한 플래그 (변수) String 로그인한유저이름 = ""; public TextArticleModule() { while (true) { System.out.print("명령어 : "); String command = sc.next(); switch (command) { case "logout": { logout(); break; } case "login": { login(); break; } case "userAdd": { userAdd(); break; } case "help": { getHelp(); break; } case "list": { getArticleList(list, "list"); break; } case "add": { // 게시글 작성 커맨드(명령어) add(); // 게시글 작성 메소드 break; } case "remove": { remove(); break; } case "exit": { System.out.println("시스템 종료"); break; } default: System.out.println(command + " 명령어는 존재하지 않습니다."); break; } } } void logout() { System.out.println(로그인한유저이름 + "님 안녕히가세요!!!!"); 유저로그인여부 = false; 로그인한유저이름 = ""; } void login() { System.out.print("아이디를 입력해 주세요. : "); String 유저아이디 = sc.next(); System.out.print("비밀번호를 입력해 주세요. : "); String 유저비밀번호 = sc.next(); if (userList.size() < 1) { System.out.println("등록된 회원이 존재하지 않습니다."); return; } for (int i = 0; i < userList.size(); i++) { // 로그인을 할 때 userList 라는 유저 값들을 순회 Map item = userList.get(i); if (item.get("userid").equals(유저아이디)) { // 로그인이기 때문에 유저아이디, 비밀번호를 둘 다 검증이 완료 되어야 함. if (item.get("userpw").equals(유저비밀번호)) { System.out.println("로그인이 완료 되었습니다."); // 검증이 완료되었다면 회원이 존재하는 것 이므로, // 유저로그인여부 플래그(변수)를 true 로 바꿔준 것 유저로그인여부 = true; // 가져온 값에 대한 item.get("username") => Map 맵 // 강제변환 // String str = String.valueOf( ) 로그인한유저이름 = String.valueOf(item.get("username")); } else { System.out.println("등록된 회원정보가 일치하지 않습니다."); } } } } void userAdd() { String 유저이름; String 유저아이디; String 유저비밀번호; String 유저비밀번호확인; System.out.print("사용하실 유저 이름을 입력해주세요 : "); 유저이름 = sc.next(); System.out.print("사용하실 유저 아이디를 입력해주세요 : "); while (true) { 유저아이디 = sc.next(); boolean 유저중복확인 = false; // 단순히 유저 중복을 확인하기 위한 플래그 /* * 회원중복검사 */ for (int i = 0; i < userList.size(); i++) { Map itme = userList.get(i); // 하나의 유저 데이터 값으로 변환 if (itme.get("userid").equals(유저아이디)) { // 저장된 유저 값이 있는지 확인 유저중복확인 = true; // 등록된 유저가 있으므로 유저중복확인 변수 true System.out.print("이미 등록된 회원 입니다. 다시 입력해 주세요 : "); break; } } // 유저중복확인이 트루이면 실행이 안 됨. // 즉, 이미 등록된 유저가 존재함. if (!유저중복확인) { break; // 등록된 유저가 없으므로 while문 break; } } while (true) { System.out.print("사용하실 비밀번호롤 입력해주세요 : "); 유저비밀번호 = sc.next(); System.out.print("비밀번호를 다시 한 번 입력해주세요 : "); 유저비밀번호확인 = sc.next(); if (유저비밀번호.equals(유저비밀번호확인)) { Map user = new HashMap(); // 입력한 임시 유저 데이터 user.put("userid", 유저아이디); user.put("userpw", 유저비밀번호); user.put("username", 유저이름); // System.out.println(user); userList.add(user); // 유저 데이터베이스 (즉, 유저를 담는 동적배열) System.out.println("성공적으로 가입이 완료되었습니다."); break; } else { System.out.println("!!! 비밀번호가 올바르지 않습니다 !!!"); continue; } } } void add() { // 게시글 메서드 if (!유저로그인여부) { System.out.println("로그인이 필요합니다."); return; } HashMap map = new HashMap<>(); System.out.println("제목을 입력해 주세요."); sc.nextLine(); // 버퍼 비우기 String 제목 = sc.nextLine(); System.out.println("내용을 입력해 주세요."); String 내용 = sc.nextLine(); LocalDate now = LocalDate.now(); map.put("제목", 제목); map.put("내용", 내용); map.put("작성자", 로그인한유저이름); map.put("등록일", now); System.out.println(map); list.add(map); System.out.println("게시글이 성공적으로 등록 되었습니다!"); } void getHelp() { System.out.println("login : 회원 로그인 "); System.out.println("logout : 회원 로그아웃 "); System.out.println("list : 게시글 리스트 "); System.out.println("add : 게시글 추가 "); System.out.println("remove : 게시글 삭제 "); System.out.println("exit : 프로그램종료 "); } void remove() { getArticleList(list, "remove"); int 게시글번호 = sc.nextInt(); list.remove(게시글번호 - 1); System.out.println("성공적으로 게시글이 삭제 되었습니다!!"); } void getArticleList(ArrayList> list, String articleListType) { if (list.size() <= 0) { System.out.println("등록된 게시글이 존재하지 않습니다."); } else { if (articleListType.equals("remove")) { System.out.println("삭제할 게시글 번호를 입력해 주세요."); } for (int i = 0; i < list.size(); i++) { HashMap items = (HashMap) list.get(i); System.out.println(" == " + (i + 1) + " 번 게시글 ==="); System.out.println("작성자 : " + items.get("작성자")); System.out.println("제목 : " + items.get("제목")); if (articleListType.equals("list")) { System.out.println("내용 : " + items.get("내용")); } System.out.println("등록일 : " + items.get("등록일")); } } } } ``` # ?️ 챕터 6 : 텍스트 게시판 - 유효성검사 => 한번 로그인하면, login 이라는 명령어를 칠 수 없음. => 본인이 쓴 게시글이면 본인만 볼 수 있음. (권한체크) => 유저 로그인한 정보에 관한 데이터를 Map ```java package demo; import java.time.LocalDate; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.Scanner; public class Main { public static void main(String[] args) { // 텍스트 게시판 관련된 모든 기능이 녹아있는 클래스 // 호출만 하면 어디서든 깔끔하게 해당 기능을 이용할 수 있음. new TextArticleModule(); } } class TextArticleModule { // 여기서 만든 ArrayList, Map 등은 데이터베이스 테이블을 의미하는 것이다. !!! Scanner sc = new Scanner(System.in); // 게시글 테이블 ArrayList> list = new ArrayList<>(); int articleLastNubmer = 0; // 게시글 고유값 번호 // 1 제목, 내용 // 2 홍길동 // 3 홍길순 // 4 임꺽정 // 5 // 6 // 7 // 사용자가 저장되어있는 리스트 맵 // 사용자 테이블 ArrayList> userList = new ArrayList<>(); boolean 유저로그인여부 = false; // 유저 로그인 여부를 판단하기 위한 플래그 (변수) // 사용자의 이름, 사용자의 로그인아이디, 사용자의 고유아이디 // 로그인 한 유저 전용 Map (세션) Map loginedUser = new HashMap<>(); // 로그인 사용자 테이블 (시큐리티) public TextArticleModule() { while (true) { System.out.print("명령어 : "); String command = sc.next(); switch (command) { case "logout": { logout(); break; } case "login": { login(); break; } case "userAdd": { userAdd(); break; } case "help": { getHelp(); break; } case "list": { getArticleList(list, "list"); break; } case "add": { // 게시글 작성 커맨드(명령어) add(); // 게시글 작성 메소드 break; } case "remove": { remove(); break; } case "exit": { System.out.println("시스템 종료"); break; } default: System.out.println(command + " 명령어는 존재하지 않습니다."); break; } } } void logout() { System.out.println(loginedUser.get("username") + "님 안녕히가세요!!!!"); 유저로그인여부 = false; // loginedUser.clear(); loginedUser.put("userid", ""); loginedUser.put("userpw", ""); loginedUser.put("username", ""); } void login() { if (유저로그인여부) { System.out.println("이미 로그인 되어있습니다."); return; // 아래로 흘러지 않게 } System.out.print("아이디를 입력해 주세요. : "); String 유저아이디 = sc.next(); System.out.print("비밀번호를 입력해 주세요. : "); String 유저비밀번호 = sc.next(); if (userList.size() < 1) { System.out.println("등록된 회원이 존재하지 않습니다."); return; } boolean 로그인성공 = false; // 단순 플래그 for (int i = 0; i < userList.size(); i++) { Map userItem = userList.get(i); // System.out.println(userItem); if (userItem.get("userid").equals(유저아이디)) { if (userItem.get("userpw").equals(유저비밀번호)) { loginedUser = userItem; // 로그인 유저 라는 세션 Map 을 만들었음 유저로그인여부 = true; 로그인성공 = true; System.out.println("로그인이 완료 되었습니다. "); break; } else { System.out.println("비밀번호가 올바르지 않습니다."); return; } } } if (!로그인성공) { System.out.println("입력하신 아이디는 존재하지 않습니다."); } } void userAdd() { String 유저이름; String 유저아이디; String 유저비밀번호; String 유저비밀번호확인; System.out.print("사용하실 유저 이름을 입력해주세요 : "); 유저이름 = sc.next(); System.out.print("사용하실 유저 아이디를 입력해주세요 : "); while (true) { 유저아이디 = sc.next(); boolean 유저중복확인 = false; // 단순히 유저 중복을 확인하기 위한 플래그 /* * 회원중복검사 */ for (int i = 0; i < userList.size(); i++) { Map itme = userList.get(i); // 하나의 유저 데이터 값으로 변환 if (itme.get("userid").equals(유저아이디)) { // 저장된 유저 값이 있는지 확인 유저중복확인 = true; // 등록된 유저가 있으므로 유저중복확인 변수 true System.out.print("이미 등록된 회원 입니다. 다시 입력해 주세요 : "); break; } } // 유저중복확인이 트루이면 실행이 안 됨. // 즉, 이미 등록된 유저가 존재함. if (!유저중복확인) { break; // 등록된 유저가 없으므로 while문 break; } } while (true) { System.out.print("사용하실 비밀번호롤 입력해주세요 : "); 유저비밀번호 = sc.next(); System.out.print("비밀번호를 다시 한 번 입력해주세요 : "); 유저비밀번호확인 = sc.next(); if (유저비밀번호.equals(유저비밀번호확인)) { Map user = new HashMap<>(); // 입력한 임시 유저 데이터 user.put("userid", 유저아이디); user.put("userpw", 유저비밀번호); user.put("username", 유저이름); // System.out.println(user); userList.add(user); // 유저 데이터베이스 (즉, 유저를 담는 동적배열) System.out.println("성공적으로 가입이 완료되었습니다."); break; } else { System.out.println("!!! 비밀번호가 올바르지 않습니다 !!!"); continue; } } } void add() { // 게시글 메서드 if (!유저로그인여부) { System.out.println("로그인이 필요합니다."); return; } HashMap map = new HashMap<>(); System.out.println("제목을 입력해 주세요."); sc.nextLine(); // 버퍼 비우기 String 제목 = sc.nextLine(); System.out.println("내용을 입력해 주세요."); String 내용 = sc.nextLine(); LocalDate now = LocalDate.now(); articleLastNubmer += 1; map.put("번호", articleLastNubmer); map.put("제목", 제목); map.put("내용", 내용); map.put("작성자", loginedUser.get("username")); map.put("등록일", now); System.out.println(map); list.add(map); System.out.println("게시글이 성공적으로 등록 되었습니다!"); } void getHelp() { System.out.println("login : 회원 로그인 "); System.out.println("logout : 회원 로그아웃 "); System.out.println("list : 게시글 리스트 "); System.out.println("add : 게시글 추가 "); System.out.println("remove : 게시글 삭제 "); System.out.println("exit : 프로그램종료 "); } void remove() { getArticleList(list, "remove"); int 게시글번호 = sc.nextInt(); list.remove(게시글번호 - 1); System.out.println("성공적으로 게시글이 삭제 되었습니다!!"); } void getArticleList(ArrayList> list, String articleListType) { if (!유저로그인여부) { System.out.println("게시글은 로그인 하고 열람할 수 있습니다."); return; } if (list.size() <= 0) { System.out.println("등록된 게시글이 존재하지 않습니다."); } else { if (articleListType.equals("remove")) { System.out.println("삭제할 게시글 번호를 입력해 주세요."); } for (int i = 0; i < list.size(); i++) { HashMap items = (HashMap) list.get(i); if (items.get("작성자").equals(loginedUser.get("username"))) { System.out.println(" == " + (i + 1) + " 번 게시글 ==="); System.out.println("작성자 : " + items.get("작성자")); System.out.println("제목 : " + items.get("제목")); if (articleListType.equals("list")) { System.out.println("내용 : " + items.get("내용")); } System.out.println("등록일 : " + items.get("등록일")); } } } } } ``` # ?️ 챕터 7 : 11-23 ### 스프링부트 (지난번 적용했던 것) 1. API - Controller 2. Service 3. Map, List, 테이블 ### 뷰(html) - 심플한 Todo-List 리스트 js, html, css $$hide package demo; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Scanner; public class Main { public static void main(String[] args) { new TextArticle(); } } class TextArticle { Scanner sc = new Scanner(System.in); List> articleList = new ArrayList<>(); List> userList = new ArrayList<>(); int articleLastId = 0; boolean isLogined = false; Map loginedUser = new HashMap<>(); TextArticle() { while (true) { System.out.print("명령어를 입력해주세요 : "); String cmd = sc.next(); if (cmd.equals("list")) { list(); } else if (cmd.equals("login")) { login(); } else if (cmd.equals("join")) { join(); } else if (cmd.equals("add")) { add(); } else if (cmd.equals("exit")) { System.out.println("프로그램을 종료합니다."); break; // 프로구램 종료 로직 } else if (cmd.equals("remove")) { remove(); } else { System.out.println("해당 명령어는 존재하지 않습니다."); } } sc.close(); } void login() { System.out.print("로그인 아이디를 입력하세요. : "); String id = sc.next(); System.out.print("로그인 비밀번호를 입력하세요. : "); String pw = sc.next(); for (int i = 0; i < userList.size(); i++) { Map user = userList.get(i); if (user.get("id").equals(id)) { if (user.get("pw").equals(pw)) { System.out.println(id + "님 안녕하세요"); isLogined = true; loginedUser.put("id", id); loginedUser.put("id", pw); } else { System.out.println("일치하지 않은 아이디"); } } } } void join() { System.out.print("사용할 아이디를 입력해 주세요. : "); String id = sc.next(); System.out.print("사용할 비밀번호를 입력해 주세요. : "); String pw = sc.next(); Map tempUser = new HashMap<>(); tempUser.put("id", id); tempUser.put("pw", pw); userList.add(tempUser); System.out.println("유저가 생성되었습니다."); } void list() { if (articleList.size() < 1) { System.out.println("등록된 게시글이 존재하지 않습니다."); return; } for (int i = 0; i < articleList.size(); i++) { Map map = articleList.get(i); if (map.get("user").equals(loginedUser.get("id"))) { System.out.println("게시글 번호 : " + map.get("id") + "번 게시글"); System.out.println("게시글 작성자 : " + map.get("user")); System.out.println("게시글 제목 : " + map.get("title")); System.out.println("게시글 내용 : " + map.get("body")); System.out.println(); } } } void add() { Map map = new HashMap<>(); sc.nextLine(); System.out.print("게시글 제목을 입력해 주세요. : "); String title = sc.nextLine(); System.out.print("게시글 내용을 입력해 주세요. : "); String body = sc.nextLine(); articleLastId++; map.put("id", articleLastId); map.put("user", loginedUser.get("id")); map.put("title", title); map.put("body", body); articleList.add(map); } void remove() { if (articleList.size() < 1) { System.out.println("등록된 게시글이 존재하지 않습니다."); return; } System.out.println("삭제할 게시글 번호를 입력해주세요."); list(); while (true) { if (sc.hasNextInt()) { int articleNumber = sc.nextInt(); System.out.println(articleNumber); // 게시글 번호가 유효한지 확인 if (articleNumber > 0 && articleNumber <= articleList.size()) { System.out.println("삭제할 게시글 번호: " + articleNumber); // 게시글 삭제 articleList.remove(articleNumber - 1); // 0-based index 이므로 1을 빼줌 System.out.println("게시글이 삭제되었습니다."); break; // 정상적으로 삭제가 되었으면 반복문 종료 } else { System.out.println("범위를 벗어난 번호입니다. 다시 입력해주세요."); } } else { System.out.println("정수 값만 입력해주세요."); sc.next(); } } } } $$ # HTML 기본 셋팅 ```html

TEST

``` # 꾸며진 HTML - home.html ```html 할 일 목록

할 일 목록

``` # TodoController (RestController) ```java package com.example.demo.ctrl; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; // 데이터를 리턴해주는 컨트롤러 (기능) @RestController public class TodoController { // DB List> todoList = new ArrayList<>(); // todo 아이템 고유 번호 int todoNum = 0; // 투 두 리스트 검색 API // 브라우저 예시 호출 localhost:8088/getSearchTodo @RequestMapping("/getSearchTodo") public List> getSearchTodo( @RequestParam(value = "content") String content ) { System.out.println("검색값은 : " + content); List> searchList = new ArrayList<>(); for (int i = 0; i < todoList.size(); i++) { Map todoItem = todoList.get(i); // String if(String.valueOf(todoItem.get("content")).contains(content)) { // 검색된 데이터 리스트 searchList.add(todoItem); } } System.out.println("검색된 아이템들 : " + searchList); return searchList; } // 투 두 리스트 필터 API // 브라우저 예시 호출 localhost:8088/getFilterTodoList?todoState=false @RequestMapping("/getFilterTodoList") // 이름을지정 public List> getFilterTodoList( @RequestParam(value = "todoState") String todoState ) { List> filterList = new ArrayList<>(); for (int i = 0; i < todoList.size(); i++) { Map todoItem = todoList.get(i); if (String.valueOf(todoItem.get("isComplete")).equals(todoState)) { filterList.add(todoItem); } } return filterList; } // 투 두 리스트 리턴 API // 브라우저 예시 호출 localhost:8088/getTodoList @RequestMapping("/getTodoList") public List> getTodoList() { return todoList; } // 투 두 리스트 안에 있는 아이템을 삭제 해주는 API // 브라우저 예시 호출 localhost:8088/removeTodo?todoNum=1 @RequestMapping("/removeTodo") public String removeTodo(@RequestParam(value = "todoNum") String todoNum // 등록된 투두 아이템을 찾는 용도 ) { System.out.println(todoNum); // Todo 아이템 고유 번호 for (int i = 0; i < todoList.size(); i++) { Map todoItem = todoList.get(i); if (String.valueOf(todoItem.get("todoNum")).equals(todoNum)) { todoList.remove(i); break; } } return "할 일이 삭제 되었습니다."; } // 투 두 리스트 추가 API // 브라우저 예시 호출 localhost:8088/sendTodo?content=할일추가 @RequestMapping("/sendTodo") public String sendTodo(@RequestParam(value = "content") String content) { Map oneTodo = new HashMap(); oneTodo.put("content", content); oneTodo.put("isComplete", false); todoNum = todoNum + 1; oneTodo.put("todoNum", todoNum); todoList.add(oneTodo); // 동적 배열에 데이터 추가 return todoNum + "번 할 일이 저장 되었습니다."; } // 투 두 리스트 업데이트 API // 브라우저 예시 호출 localhost:8088/updateTodo?todoNum=1&todoState=false @RequestMapping("/updateTodo") public String updateTodo(@RequestParam(value = "todoNum") String todoNum, // 등록된 투두 아이템을 찾는 용도 @RequestParam(value = "todoState") boolean todoState // 등록된 투두 아이템의 상태를 변경하는 용도 ) { System.out.println(todoNum); System.out.println(todoState); for (int i = 0; i < todoList.size(); i++) { Map todoItem = todoList.get(i); if (String.valueOf(todoItem.get("todoNum")).equals(todoNum)) { todoItem.put("isComplete", todoState); break; } } return "할 일의 상태가 변경 되었습니다."; } } ``` # ?️ 프로그래밍 할 때 기본적인 데이터 처리 종류 (CRUD) ## Create 생성 ## Read 읽기 ## Update 갱신 ## Delete 삭제 ### 모든 데이터 처리는 위와 같이 CRUD 로 시작해서 끝으로 끝난다. ### 여기서 살짝 응용될 뿐 결국 DB에 있는 데이터를 가져와 조립하여(Update, Delete, Create) ### 사용자 화면에 뿌려주는 Read. 이것들을 적용해 텍스트 콘솔 게시판, TodoList 등을 만들 수 있다. # ?️ 이번 수업에서 꼭 알고 가야 할 어노테이션!!! ### @Controller - 회면을 만들 수 있게 해줌 return 이 화면 즉, html 의 이름 ### @RestController - 기능을 만들 수 있게 해줌 return 이 기능 즉, 데이터 자체 ### @RequestMapping("/home") - 엔드포인트의 이름을 정함 ex ) http://localhost:8080/home 으로 접속하여 접근 가능 (이건 화면이 될 수도 있고, 기능이 될 수도 있음) ### @RequestParam(value = "content") - 파라미터의 이름을 정함 ex) http://localhost:8080/home?content=안녕 (호출할때 추가로 데이터를 보내고 싶을 때 씀) # ?️ 자바 스트링의 메서드 contains ```java // 자바에서 특정 문자열이 포함되어 있으면 true 를 리턴하는 메소드가 있다. // 해당 메소드는 스트링 문자열에서 제공되며, 사용법은 아래와 같다. String str = "안녕하세요"; if(str.contains("안녕")) { System.out.println("str 은 안녕 이라는 문자열이 포함되어 있습니다."); } // 출력 // str 은 안녕 이라는 문자열이 포함되어 있습니다. // 단, 이어지는 문자만 포함된 문자로 인식한다. // 예를들어 안요 라고 쓰고 출력을 하게되면 false 로 리턴되고, // 녕하 혹은 세요 처럼 문자열이 붙어있는 포함된 형태여야 한다. ``` # ?️ 네트워크 통신 관련 주요 개념 (tcp/ip ) 일반적으로 클라이언트(흔히 보는 화면)에서 서버(특정 컴퓨터)로 요청할 때 특정 프로토콜로 요청을 하여 데이터를 주고 받는다. 그것을 tcp/ip 요청이라고 하는데 http Request 으로 봐도 된다. 네이버 같은 포털 사이트에 접속 할 때 www.naver.com 으로 접속하는데, 이는 원래 https://www.naver.com:443 이러한 형태이다. 즉, 서버랑 통신할 때 1. 페이지에 들어가는 것도, 2. 페이지 안에서 어떤 버튼을 눌러 변화가 이러나는 것도, 3. 파이썬에서 데이터를 조작하여 처리하는 것도 모두 어떠한 요청이 있어야 이뤄진다. 그 요청을 http 요청으로 제어할 수 있다. 현재 텍스트 게시판이라는 실습에서 getArticleList 라는 명령어도 실제로 http://example.com/getArticleList 라는 거로 생각하면 된다. http://example.com/getArticleList 로 요청을 보내면, (요청은 그냥 브라우저에서 접속이라고 생각하면 됨) getArticleList 에 대한 게시글 리스트가 보여지게 되고, http://example.com/help 로 요청을 보내면 help 에 대한 기능들이 보여지게 된다. 그렇다면 게시글 삭제는 어떨까 ? http://example.com/removeArticle 이런 형태이다. 물론 모든 데이터를 삭제할거면 http://example.com/removeArticle 로 요청하는 것이 맞지만, 특정 게시글을 삭제하고 싶을 땐 당연히 해당 게시글에 대한 번호도 같이 요청에 포함하여 보내야 한다. http 에서는 그런 요청을 파라메터 라는 개념으로 보낼 수 있다. 함수(메서드)에서 배웠던 것이랑 비슷하다. ```java # 메서드 선언 public int add(a, b) { return a + b; } add(1, 2); # 메서드 호출 ``` add 라는 함수를 만들었는데 a, b 라는 파라메터(매개변수)를 만들었다. 그렇다면 당연히 함수 호출하는 곳도 두 개의 값 예) 1, 3 을 같이 보내줘야 한다. 그 것처럼 요청하는 기능은 add 함수지만 그 기능에 관련된 다른 값을 추가 적으로 보낼 때 파라메터 즉, 매개변수를 받아야 한다. 그 것처럼 http 에서 매개변수 받는 예시는 **?id=5** 이런 형태로 받을 수 있다. 전체 예시 : http://example.com/removeArticle?articleId=5 removeArticle 로 게시글 삭제를 하지만 이제 뒤에 ?articleId=5 라는 파라메터가 붙어서 무엇을 하는지 대충 유추할 수 있다. 5번이라는 게시글을 삭제한다라고 보인다면 정확히 파악한 것이다. **텍스트 게시판 실습으로 치면 클라이언트라는 개념을 명령어(command, http) 로 생각하면된다.** 우리가 getArticleList 즉 http://example.com/getArticleList 로 요청을 보내면(콘솔창에서 엔터) 서버(파이썬)에서는 getArticleList 라는 함수가 그 요청을 받아 처리하는 것 처럼. # ?️ 자바에서 좀 더 견고하게 알아야 할 클래스들 ### Map(HashMap), List(ArrayList), String 대부분의 큰 데이터들 즉, 데이터 베이스 저장소에서 데이터를 불러와 작업을 해야할 요소들은 배열 안의 객체 즉 List 안에 Map 으로 생각하면 된다. 자바에서는 그 것을 ```java List> data = new ArrayList<>(); ``` 이런식으로 많이 표현한다. 외부 API 를 통해서 불러오든, 사용자 데이터를 저장하든, 게시글 리스트를 불러오든 99 % 이런 형태이기 때문에 관련된 클래스의 데이터 처리 연습을 많이 해봐야 한다. 단순, List 안에 Map 을 넣는다기보다 (이 것도 중요하지만) Map 안의 특정 데이터를 찾아 새로운 Map으로 재조립 한 후 List에 넣어본다든지 List 안의 Map 에 또 List 형태를 넣어본다든지 다양한 방법의 형태를 처리 경험이 있어야 한다. 왜 이것만 해도 되냐 ? 이미 Spring, SpringBoot 같은(예시) 엄청난 프레임워크(밀키트)들이 만들어져 있어, 모든 실행환경은 직접 만들 필요가 전혀 없기 때문에 개발자들은 거기서 필요한 것들만 작성하면 되기 때문이다. 당연하지만 '자바만' 해서는 서비스를 배포할 수 없다. 하지만 진행했던 예제들 텍스트 게시판, 화면이 있는 투두 리스트를 반복해서 하다보면 전체적인 소프트웨어 흐름이 분명히 보일 것이다. # ?️ 서버랑 통신하는 API fetch 함수 (async & await) 우리는 서버에서 @RequestMapping 이라는 어노테이션으로 클라이언트에서 요청할 이름을 지었다. 위에서 말했듯 해당 이름은 @RequestMapping("/getArticleList") 로 지었다면 이 요청은, http://example.com/getArticleList 와도 같다. 해당 부분을 클라이언트(화면) 에서 요청하는 방법은 두 가지 방법이 있다. 동기적인 방법과 비동기적인 방법인데 간단하게 동기적인 방법은 순차적, 비동기는 비순차적으로 생각하면 된다. 또한 순차적은 (화면이 전체 리로드), 비순차적은(특정 화면만 리로드) 도 같이 알아두면 좋다. 특정 상황에서 쓰임새가 달라 뭐가 더 좋고 나쁘고는 없지만, 이번에 한 예시는 비동기적(특정 화면만 리로드) 예시다. ```javascript // 자바스크립트에서 비동기 요청을 하려면 함수 앞에다가 // async 를 붙이고 fetch api 앞에 await 를 붙여 줘야 한다. async function getArticleList() { let result = await fetch('/getArticleList') // 이렇게 하면 http://example.com/getArticleList 로 요청(접근) 하는 것과 같다. let json = await result.json() // 서버로부터 받아온 게시글 리스트 값을 json 형태로 바꿔주는 것. json 형태로 바꿔줘야 js 로 화면상에 동적으로 뿌려줄 수 있다. } ``` 이는 자바스크립트에서 getArticleList 라는 함수를 선언 한 것이고, 이를 html 에서 보이는 버튼 에다가 클릭을 했을 시 해당 함수가 호출 되도록 만들어줘야 한다. ```html ```