전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다.

• 구조대 : 119
• 박준영 : 97 674 223
• 지영석 : 11 9552 4421

전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요

제한 사항

• phone_book의 길이는 1 이상 1,000,000 이하입니다.
  • 각 전화번호의 길이는 1 이상 20 이하입니다.
  • 같은 전화번호가 중복해서 들어있지 않습니다.

입출력 예제

** 문제 단순화 하기 ** 어떤 번호가 다른 번호의 시작과동일하면 된다!

처음 생각했던 방법은

1. 순서를 정렬 Arrays.sort();

2.제일 작은 수인 [0] 번의 배열과 전부 비교해보기 .substring(int startIndex,int endIndex); -> startIndex(포함)부터 endIndex(불포함)까지의 문자열을 리턴 ex) str.substring(2, 4) : startIndex 2부터 endIndex 4 이전까지의 문자열을 잘라서 리턴

import java.util.*;

class Solution {
    public boolean solution(String[] phone_book) {
        boolean answer = true;

        Arrays.sort(phone_book);

        for(int i =1;i < phone_book.length;i++){
            if(phone_book[0].equals(phone_book[i].substring(0, phone_book[0].length())))
            answer = false;
            break;
        }
        return answer;
    }
}

이렇게 하니까 런타임 에러가 발생했다...

런타임 에러가 발생할 수 있는 원인!

• 배열에 할당된 크기를 넘어서 접근했을 때
• 전역 배열의 크기가 메모리 제한을 초과할 때
• 지역 배열의 크기가 스택 크기 제한을 넘어갈 때
• 0으로 나눌 떄
• 라이브러리에서 예외를 발생시켰을 때
• 재귀 호출이 너무 깊어질 때
• 이미 해제된 메모리를 또 참조할 때
• 프로그램(main 함수)이 0이 아닌 수를 반환했을 때

잘 모르겠다.. 먼가 코드가 잘못된거 같다

그럼? 다시 처음으로 돌아와서 Hash문제니까 hash를 사용해봐야지?

1. 배열의 모든 수를 HashMap에 넣기 HashMap<String, Integer> map = new HashMap<>(); map.put(Key,Value);

2. 접두어가 있는지 확인하기 HashMap.containsKey(String);

-> String 이라는 key가 현재 HashMap에 있는지 확인

import java.util.*;

class Solution {
    public boolean solution(String[] phone_book) {
        boolean answer = true;

        HashMap<String, Integer> map = new HashMap<>();

        for(int i=0;i < phone_book.length;i++){
            map.put(phone_book[i], i);
        }

        for(int i=0;i<phone_book.length;i++){
            for(int j = 0;j < phone_book[i].length();j++){
                if(map.containsKey(phone_book[i].substring(0,j))){
                    answer=false;
                }
            }

        }

        return answer;
    }
}

그렇다면 여기서! value 가 필요없는데 HashSet을 사용할순 없을까? 라는 의문이 든다. 두가지의 차이점이 무엇일까?

HashMap vs HashSet

수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.

1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...

1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한 조건

• 시험은 최대 10,000 문제로 구성되어있습니다.
• 문제의 정답은 1, 2, 3, 4, 5중 하나입니다.
• 가장 높은 점수를 받은 사람이 여럿일 경우, return하는 값을 오름차순 정렬해주세요.

입출력 예

Solution

1, 2, 3, 4, 5 ==> 1 ~ 5 순서 반복 2, 1, 2, 3, 2, 4, 2, 5 ==> 1 ~ 8 순서 반복 3, 3, 1, 1, 2, 2, 4, 4, 5, 5 ==> 1 ~ 10 순서 반복 반복

import java.util.*;

class Solution {
    public int[] solution(int[] answers) {
        int[] answer =new int[3];
        // 나머지 연산자 이용        
        int[][] math = {
            {1, 2, 3, 4, 5},
            {2, 1, 2, 3, 2, 4, 2, 5},
            {3, 3, 1, 1, 2, 2, 4, 4, 5, 5} 
        };
        // 높은점수 받은 사람을 담을 배열
        int [] count = new int[math.length];
        int max =0;

        for(int i = 0; i < answers.length; i++){
            for(int j=0;j < math.length; j++){
                if(answers[i] == math[j][i % math[j].length]){
                    count[j] ++;
                    max = Math.max(max, count[j]);
                }

            }
        }

        System.out.println(Arrays.toString(count)+","+max);

        for(int i = 0; i < 3; i++){
            if(count[i] == max){
                answer[i] = i + 1;
            }
        }

        return Arrays.stream(answer).filter(i -> i != 0).toArray();

    }
}

0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.

예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다.

0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요.

제한 사항

• numbers의 길이는 1 이상 100,000 이하입니다.
• numbers의 원소는 0 이상 1,000 이하입니다.
• 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다.

입출력 예

solution

Comparator를 직접 구현하여 String끼리 값을 비교할 수 있는지를 묻는 문제

1. 하나의 숫자끼리 비교해서 정렬을 하는것은 소용없음 두 숫자를 합쳐서 비교해서 정렬을 해야함
2. 숫자 비교시 문자열로 먼저 변환후 비교해야함
3. 비교한 결과값으로 순서 재배치

** => Comparator 의 compareTo() 이용 ** 오름차순으로 정렬시 (o2 + o1).compareTo(o1 + o2) 내림차순으로 정렬시 (o1 + o2).compareTo(o1 + o2)

Comparator의 compareTo

: 두개의 값을 비교하여 int 값으로 반환해주는 함수

• 숫자의 비교 같은 경우 단순히 크다(1), 같다(0), 작다(-1) 의 관한 결과값을 리턴해주는 반면
• 문자열의 비교 같은 경우 같다(0), 그 외 양수/음수값 같이 참 재미난 결과를 반환해준다.

import java.util.Arrays;
class Solution {
    public String solution(int[] numbers) {
        String answer = "";
        // 문자열로 바꿔서 담아줄 배열 선언및 초기화
        String [] arr = new String[numbers.length]

        // 배열 복사해서 넣어주기
        for(int i=0;i < numbers.length;i++){
            // 문자열로 변환해서 복사
            arr[i] = String.vauleOf(numbers[i]);  
        }
        // => 두 배열의 숫자가 더한 숫자가 아닌 문자열로 보여줘야하기 때문에 문자열 배열로 복사함

        // 정렬하기 - 비교후 내림차순으로 정렬
        Arrays.sort(arr, (o1,o2) -> (o2 + o1).compareTo(o1 + o2));

        //[0,0,0]의 배열의 경우 - 예외 처리 해주기
        if(arr[0].equals("0")){
            return 0 
        }

        //문자열 연결 : String.join
        answer = String.join("",arr);


        return answer;
    }
}

import java.util.HashMap;

class Solution {
    public int solution(String[][] clothes) {
        int answer = 1;
        HashMap<String, Integer> map = new HashMap<>();

        for(String[] clothe : clothes){
            String key = clothe[1];
            map.put(key, map.getOrDefault(key,0)+1);
        }

        for(String key : map.keySet()){
            answer *= (map.get(key) + 1);
        }

        answer = answer -1;


        return answer;
    }
}


// 의상이름 + 의상종류
//HashMap? kwy +value 

• getOrDefault(Object key, V DefaultValue)
• keySet() : Map의 전체 key를 꺼냄

npm install typescript @type/node @type/react @type/react-router-dom @type/jest @type/react-dom

• js 파일 → .ts
• jsx 파일→ .tsx

javascript vs TypeScript

• javascript(동적언어) : 런타임에 타입 결정 / 오류 발견
• Java, Typescript(정적언어) : 컴파일 타임에 타입 결정 / 오류 발견

function add (num1 : number, num2 : number){
    console.log(num1+num2);
}
add(1,2);



function showItems(arr : number[] or : Array<number>){
    arr.forEach(item =>{
        console.log(item)
    })
}
showItems([1,2,3]);

튜플

let b:[string, numbder];
b['s', 1];


//void, never
function sayHello():void{
    console.log('hello');
}

//항상 에러를 반환하거나 영원히 끝나지 않는 함수에서 사용
function error():never{
    throe new Error();
}

function loof():never{
    while(true){

    }
}

type Score = 'A' | 'B';

interface User{
    name : string,
    age : number
    readonly gender? : string 
    [grade:number] : Score
}

let user : User = {
    name='ss',
    age= 2,
    1: 'A',
    2: 'B'
}

console.log(user.name)


//함수 정의
interface Add(){
    (num1 : number, num2 : number) : number
}

const add : Add = function(x,y){
    return x+y
}

add(10,20)


function arr(...num : number[]){
=> 전달받은 매게변수를 배열로 나타냄
    return num.reduce((result, num) => result + num, 0)

}

• prop : 컨퍼넌트를 사용하는 외부자를 위한 데이터
• state : 컨퍼넌트를 만드는 내부자를 위한 데이터

  // 상태 생성시
  

// ** 원시데이터타입 Const [value, setValue] = useState(PRIMITIVE); string number boolean

// ** 범객체 Const [value, setValue] = useState(Object); object, array

// 처리방벙이 달라짐 = 데이터 복제 newValue = {...vaue} newValue변경 // 복제본 바꿈 setValue(newValue) // 컴퍼넌트 다시실행

newValue = [...vaue] //복제 newValue변경 // 복제본 바꿈 setValue(newValue)

// setValue시 value값이 변경이 있는지 확인함 // 변경시에만 컴퍼넌트 다시 렌더링

## useEffect
- 상태값이 바뀌었을때 동작하는 함수 작성가능
- 첫번째 매개변수 함수
- 두번째 매개변수 배열 - 의존성배열(이 배열이 변경될때만 작동함)
```javascript
useEffect(() => {
    fetch('http://api경로')
    //API비동기 통신을 위해 
    .then(res=>{
        return res.json();
        // 실제 json은 아니고 response응답임
        // json 메소드를 이용해서 json응답 반환
    }) 
}, []);
// 빈배열넣어줌
// 상태값과 무관하게 딱한번만 호출되게 하기위

• 랜더링결과가 돔에 반영된 직후 작동함 —> API호출 의 목적으로 사용 —> 랜더링이 완료된후 최초의 한번만 작동하게 하면 됨

• 두번째 매개변후 배열을 빈 배열로 넣어줌

JSON SERVER 이용

//json-server 글로벌(-g) 설치
npm install -g json-server

//json-server 3001번 포트에서 실행
json-server --watch ./src/db/data.json --port 3001

Components

• 사용자 정의 태그 사용(대문자로 사용) → 함수를 정의 : 함수의 형태로 사용 (생산성 증가)

  function Header(){
     return <header>header</header>
  }
  // Header의 함수를 정의
  // header는 태그 
  
  

function App(){

## props
- 속성
```javascript
function Header(props){ // 파라미터로 props받아줌
     return <header>{props.title}</header>
}  

function App(){
    <Header title="속성 내용"></Header>
    // 속성 내용 작성
}

function Nav (props){ //속성 받아옴
    const lis = []
    //lis 라는 배열로 뿌려줄수 있게 해주기
    for(let i = 0;i <props.topics.length; i++){
        const t = props.topics[i];
        lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a><li>)
    }

    return <nav>
    <ol>
        <li><a href="#"></a></li>
        //위의 구조를 반복해서 가져올수 있게 코드를 짜야함

        {lis} //lis 라는 함수를 불러올수 있게 하기
    </ol>
    </nav>
}


function App(){
    const topics = [ //배열로 받아오기
        //속성값들을 배열 코드로 작성
        {id: 1, title:"html" , body:"html..."},
        {id: 2, title:"css" , body:"css..."},
        {id: 3, title:"js" , body:"js..."}
    ]

    <Nav topics = topics></Nav>
    // 이렇게 작성할시에는 topics이라는 문자열을 받아옴
    <Nav topics={topics}></Nav>

}

이벤트

function Header(props){ //파라미터
  return <header>
  <a href="/" onClick={(event)=>{
    event.preventDefault();
    props.onChangeMode();
  }}>{props.title}</a>
  </header>
}

function App() {
return (    
    <div>
      <Header title="web1" onChangeMode={()=>{
        alert("header");
      }}></Header> 
)
}
// props(속성) onChangeMode로 입력
// 컨퍼넌트에 공통으로 작성되어야할 이벤트 작성
// 속성에 있는 onChangeMode 불러와서 사용가능

• 참고

  function(){}
  회살표 함수 : () => {}

• react 설치전 폴더만들어줌( 폴더이름에 대문자가 있으면 설치가 안됨)
• node.js 설치후, vscode에서 터미널 열어줌
• 터미널에 commond prompt 에서 설치 코드 작성

npx create-react-app .

// powoershell에서 설치가 잘 안될수도 있음
// . : 현재폴더에 생성

React 수정

• index.js 입구 파일 → 제일 먼저 index.js파일을 읽어드림 (App을 불러옴)
• App.js에서 수정해서 사용하면됨
• App.css 스타일 지정해주면됨
• public 안에 전체 html구조가 있음 → index.html

React 배포

• 서비스에 최적화 되어있는 배포본을 만들수 있을까?

• 터미널 켜줌 (실행하고 있는 명령들이 있을경우 : ctrl+c )

  // 배포판 만들어주기
  npm run build

• build 파일 생성 - 공백없음(용량의 최소한을 위해)

• serve 라는 웹서버를 쓰는걸 권유 (node.js로 만들어진 애플리케이션 npx)

  // 웹서버 실행 (3000번포트 사용)
  npx serve -s build

• 라이브 실행

  npm start

  http://localhost:3000/

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

REACT 공식문서 참고

• Node.js

  • REACT 사용시 Node.js 와 함께 사용

• JSX

  • JavaScript를 확장한 문법
  • 자바스크립트 코드와 html 코드를 함께 사용할 수 있어 편리함
  • UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장
  • REACT JSX 공식문서 참고

문제풀이 순서

1. answer의 배열의 길이 == commands의 배열의 길이
2. array배열의 i번째 부터 k번째 까지 자른 배열을 저장할 temp 배열을 만든다.
3. temp 배열을 정렬
4. commands[i][2] - 1 번째 temp숫자를 answer에 순서대로 넣어줌

정렬

1. 특정 범위 배열을 복사 Arrays.copyOfRange()
2. 배열 정렬 Arrays.sort()

코드

import java.util.Arrays;

class Solution {
    public int[] solution(int[] array, int[][] commands) {
        int[] answer = new int[commands.length];

        for(int i = 0;i < commands.length;i++){
            int[] tmep = Arrays.copyOfRange(array,commands[i][0]-1, commands[i][1]);
            Arrays.sort(tmep);
            answer[i] = tmep[commands[i][2] - 1];
        }

        return answer;
    }

}

문제풀이 순서

1. 반복문을 돌면서 배열에 있는 숫자 Stack에 삽입 1-1. 맨 처음 숫자는 무조건 담기 1-2. 다음부터는 스택에 담겨있는 숫자와 비교해서 같지 않을경우에만 넣기

2. answer의 사이즈 Stack에 사이즈로 만들기

3. Stack에 있는 숫자 꺼내기 여기서 주의! Stack은 후입선출(LIFO : Last In First Out) 방식으로 자료를 처리함 (arr의 배열의 순서를 유지 해야함으로 역순으로 담아야함)

Stack

Stack<T> 스택 이름 = new Stack<>();

• add() : 값을 추가
• push() : 데이터 스택에 추가, 해당값 반환
• pop() : 값 하나씩 빼낼수 있음 스택에서 값이 제거 되면서 동시에 값 반환
• clear() : 값 모두 제거 / 반환되는 값이 없음
• peak() : 스택의 마지막 요소 반환, 스택에는 변화를 주지 않음 스택이 비어있을경우, NoSuchElementException 예외 발생

코드

import java.util.*;

public class Solution {
    public int[] solution(int []arr) {
        int[] answer;

        Stack<Integer> st = new Stack<>();

        for(int i=0; i < arr.length; i++){

            if(i == 0){ //처음 무조건 넣음
                st.push(arr[i]);
            }else if(st.peek() != arr[i]){ //스택의 최상단값(peek)이 같지 않을경우에만 삽입
                st.push(arr[i]);
            } 
         }

        answer = new int[st.size()];

        // 역순으로 담아야함 - pop해서 꺼내기
        for(int i = st.size()-1; i >=0; i--){
            answer[i] = st.pop();
        }


        System.out.println("Hello Java"); 
        return answer;
    }
}

가져갈수 있는 최대 폰겟몬의 갯수 = max / 2

문제 풀이 순서

1. 가져갈수 있는 최대 폰켓몬 수를 구한다
2. hashSet을 이용해 중복제거
3. 중복 제거한 set이 max보다 크면 max / 작으면 set의 사이즈 리턴

코드

import java.util.HashSet;
    class Solution {
        public int solution(int[] nums) {
            int answer = nums.length / 2;

            HashSet<Integer> numSet = new HashSet<>();

            for(int num : nums){
                numSet.add(num);
            }

            if(numSet.size() < answer){
                return answer;
            }else {
                return numSet.size();
            }

        }


    }

HashSet이란?

HashSet은 Set 인터페이스에서 지원하는 구현 클래스이다. 때문에 Set의 성질을 그대로 상속받는 다는 것이 특징이다.

HashSet의 성질

1. HashSet은 중복된 값을 허용하지 않습니다.
2. List 등과는 다르게 저장한 순서가 보장되지 않습니다.
3. null을 값으로 허용합니다.

참고

https://velog.io/@acacia__u/hashSet https://velog.io/@ajufresh/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%ED%8F%B0%EC%BC%93%EB%AA%AC-%EB%AC%B8%EC%A0%9C%ED%92%80%EC%9D%B4-Java

나의 문제풀이

class Solution {
    public int solution(int angle) {
        int answer = 0;
        if(angle > 0 && angle <= 180){
            if(angle > 0 && angle <90){
                answer = 1;
            }else if(angle == 90){
                answer = 2;
            }else if(angle > 90 && angle < 180){
                answer = 3;
            }else{
                answer = 4;
            }
        }

        return answer;
    }
}

삼항 연산자 리팩토링

class Solution {
    public int solution(int angle) {
        return angle == 180 ? 4 : angle < 90 ? 1 : angle == 90 ? 2 : angle > 90 ? 3 : 0;
    }
}

: 파라미터가 없는 디폴트 생성자를 자동으로 생성 : 기본 생성자 주입

@NoArgsConstructor
public class User {
    private Long id;
}

@NoArgsConstructor 어노테이션을 사용하면 해당 코드와 동일하게됨

public class User {
    private Long id;

    public User(){}
}

@NoArgsConstructor(access = AccessLevel.PROTECTED)

“아무런 매개변수가 없는 생성자를 생성하되 다른 패키지에 소속된 클래스는 접근을 불허한다” 라는뜻

@RequiredArgsConstructor

: final 이나 @NonNull 인 필드값만 파라미터로 받는 생성자

나의 문제풀이

import java.util.Arrays;

class Solution {
    public int solution(int[] array) {
        Arrays.sort(array);
        int answer = array.length / 2;
        return array[answer];
    }
}

오름차순 정렬에 힌트를 얻어 문제를 해결하였다

정렬

// 기본 공통
import java.util.Arrays;

// 공통 배열
int array[] = {4,11,67,2,0}

1. 배열 오름차순 정렬

Arrays.sort(array);

=> {0,2,4,11,67}

2. 배열 내림차순 정렬

Arrays.sort(array,Collections.reverseOrder());

=> {67,11,4,2,0}

1. Controller 작성

@RequiredArgsConstructor
@RestController
public class UserController {
    private final UserService userservice;

    @PostMapping("/register")
    public ResponseEntity<?> join(@RequestBody @Valid UserRequest.JoinDTO request, Error error) {
        userservice.join(request);
        return ResponseEntity.ok( ApiUtils.success(null) );
    }


    @PostMapping("/check")
    public ResponseEntity<?> check(@RequestBody @Valid UserRequest.JoinDTO requestDTO, Error error) {
        userservice.checkEmail(requestDTO.getEmail());
        return ResponseEntity.ok( ApiUtils.success(null) );
    }

회원가입 진행시 이미 가입된 아이디가 있는지 확인을 위해 check 메소드도 함께 생성함

2. service 작성

@RequiredArgsConstructor
@Transactional(readOnly = true)
@Service
public class UserService {
    private final UserRepository userRepository;
    private final PasswordEncoder passwordEncoder;
    private final AuthenticationManager authenticationManager;

    public void checkEmail(String email) {
        // 동일한 이메일이 있는지 확인.
        Optional<User> users = userRepository.findByEmail(email);
        if(users.isPresent()) {
            throw new Exception400("이미 존재하는 이메일 입니다. : " + email);
        }
    }

    @Transactional
    public void join(UserRequest.JoinDTO requestDTO) {
        checkEmail(requestDTO.getEmail());
        String encodedPassword = passwordEncoder.encode( requestDTO.getPassword());
        requestDTO.setPassword(encodedPassword);
        try {
            userRepository.save(requestDTO.toEntity());
        }catch (Exception e){
            throw new Exception500(e.getMessage());
        }
    } 
} 

비밀번호 인코딩후 저장하기

페이지 생성전 포스트맨으로 먼저 확인해보자! 회원가입 성공

가입한 아이디가 존재 할 경우

3. join.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Join Form</title>
</head>
<body>

<div class="memberWrap">
    <div class="inner">
        <h1>Join</h1>

        <form id="joinForm">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required><br><br>

            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required><br><br>

            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required><br><br>
            <label for="phoneNumber">PhoneNumber:</label>
            <input type="text" id="phoneNumber" name="phoneNumber" required><br><br>

            <input type="submit" value="Submit">


        </form>
    </div>
</div>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('joinForm');
        form.addEventListener('submit', async function(e) {
            e.preventDefault();

            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const username = document.getElementById('username').value;
            const phoneNumber = document.getElementById('phoneNumber').value;

            const data = {
                email,
                password,
                username,
                phoneNumber
            };

            try {
                const response = await fetch('http://localhost:8080/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();

                if (result.success()) {
                    alert("회원가입에 성공했습니다!");
                    window.location.href = '/';
                } else {
                    alert("Error: " + result.error.message);
                }

            } catch (error) {
                console.error('Error:', error);
            }
        });
    });


    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        return null;
    }

    // 메시지 표시
    var message = getQueryVariable("msg");
    if (message !== null) {
        alert(message);
    }
</script>

</body>
</html>

로그인

jwt를 발급후 header에 실어 client에 보내는 작업을 진행할 예정

1. Controller

@PostMapping(value = "/login")                                                                                               
public ResponseEntity<?> signin(@RequestBody UserRequest.JoinDTO request, HttpServletResponse response, Error error) {       
  String jwt = userservice.login(request); 
  // "Bearer " 접두사 제거     
  jwt = jwt.replace(JwtTokenProvider.TOKEN_PREFIX, "");  

  // 쿠키 설정         
  Cookie cookie = new Cookie("jwtToken", jwt);    
  cookie.setHttpOnly(true);   
  cookie.setPath("/"); // 모든 경로에서 쿠키 접근 가능      
  response.addCookie(cookie);                                          

  return ResponseEntity.ok().header(JwtTokenProvider.HEADER, jwt)                                                          
            .body(ApiUtils.success(null));
}                    

jwt토큰을 쿠키에 저장해서 클라이언트에게 넘겨준다! 쿠키에 저장하는건 클라이언트쪽에서 맞는거 같다 이부분은 추후 수정이 필요해보인다

2. Service

    @Transactional
    public String login(UserRequest.JoinDTO requestDTO) {
        // ** 인증 작업.
        try{
            UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken
                    = new UsernamePasswordAuthenticationToken(requestDTO.getEmail(), requestDTO.getPassword());
            //사용자의 이메일과 패스워드를 포함한 인증 토큰을 생성합
            Authentication authentication =  authenticationManager.authenticate(
                    usernamePasswordAuthenticationToken
            );
            // CustomUserDetailsService에 loadUserByUsername가 실행됨
            // authentication여기에 내 로그인한 정보가 담김

            //사용자가 제공한 이메일과 비밀번호로 사용자를 인증하려고 하는것
            // ** 인증 완료 값을 받아온다.
            CustomUserDetails customUserDetails = (CustomUserDetails)authentication.getPrincipal();

            // ** 토큰 발급 - 이 JWT 토큰은 사용자 인증을 통해 확인된 사용자의 정보를 포함
            return JwtTokenProvider.create(customUserDetails.getUser());
        }catch (Exception e){
            // 401 반환.
            throw new Exception401("인증되지 않음.");
        }
    }

사용자를 인증하고 인증된 사용자 정보를 담은 jwt토큰을 전달해준다.

3. login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!--<link rel="stylesheet" th:href="@{/css/member.css}">-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<div class="memberWrap">
    <div class="inner">
        <h1>Login</h1>
        <form id="loginForm">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required><br><br>
            <br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <br>
            <input type="submit" value="login">
        </form>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('loginForm');
        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            const data = {
                email,
                password
            };

            try {
                const response = await fetch('http://localhost:8080/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();

                if (response.ok) {

                    alert("로그인에 성공했습니다!");
                    window.location.href = '/';
                } else {
                    alert("Error: " + result.error.message);
                }

            } catch (error) {
                console.error('Error:', error);
            }
        });
    });
</script>

</body>
</html>

로그인 완료!

/**
 * Spring Security 환경 설정을 구성하기 위한 클래스
 * 웹 서비스가 로드 될때 Spring Container 의해 관리가 되는 클래스
 * 사용자에 대한 '인증', '인가'에 대한 구성을 Bean 메서드로 주입함
 *
 */


@Slf4j
@RequiredArgsConstructor
@Configuration // ** 현재 클래스를 (설정 클래스)로 설정
public class SecurityConfig {

    @Bean
    public PasswordEncoder passwordEncoder(){
        return PasswordEncoderFactories.createDelegatingPasswordEncoder();
    }


    @Bean
    public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {

        return authenticationConfiguration.getAuthenticationManager();
        /* BCrypt : 기본으로 사용. 가장 많이 사용되는 알고리즘.
         * SCrypt : 개발자가 직접 필요에 따라 변경 가능.
         * Argon2
         * PBKDF2
         * MD5
         * SHA-1, SHA-256 등
         */
    }

    public class CustomSecurityFilterManager extends AbstractHttpConfigurer<CustomSecurityFilterManager, HttpSecurity>{

        @Override
        public void configure(HttpSecurity httpSecurity) throws Exception {

            AuthenticationManager authenticationManager = httpSecurity.getSharedObject(
                    AuthenticationManager.class
            );

            httpSecurity.addFilter(new JwtAuthenticationFilter(authenticationManager));

            super.configure(httpSecurity);
        }
    }

    /*
     * HTTP에 대해서 '인증'과 '인가'를 담당하는 메서드
     * 필터를 통해 인증 방식과 인증 절차에 대해서 등록하며 설정을 담당하는 메서드
     * */

    @Bean // 스프링 빈으로 등록
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // 1. CSRF 해제 - 서버에 인증정보를 저장하지 않기때문에
        http.csrf().disable(); // postman 접근해야 함!! - CSR 할때!!

        // 2. iframe 거부 설정
        http.headers().frameOptions().sameOrigin();

        // 3. cors 재설정
        http.cors().configurationSource(configurationSource());

        // 4. jSessionId 사용 거부
        http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS); // 세션 정책

        // 5. form 로긴 해제 (UsernamePasswordAuthenticationFilter 비활성화) (폼 로그인 비활성화)
        http.formLogin().disable();

        // 6. 로그인 인증창이 뜨지 않게 비활성화(기본 인증 비활성화)
        http.httpBasic().disable(); //bearer 방식으로

        // 7. 커스텀 필터 적용 (시큐리티 필터 교환) 커스텀 필터 적용
        http.apply(new CustomSecurityFilterManager());

        // 8. 인증 실패 처리
        http.exceptionHandling().authenticationEntryPoint((request, response, authException) -> {
            log.warn("인증되지 않은 사용자가 자원에 접근하려 합니다 : " + authException.getMessage());
            FilterResponseUtils.unAuthorized(response, new Exception401("인증되지 않았습니다"));
        });

        // 9. 권한 실패 처리
        http.exceptionHandling().accessDeniedHandler((request, response, accessDeniedException) -> {
            log.warn("권한이 없는 사용자가 자원에 접근하려 합니다 : " + accessDeniedException.getMessage());
            FilterResponseUtils.forbidden(response, new Exception403("권한이 없습니다"));
        });

        // 10. 인증, 권한 필터 설정 - 경로에 대한 인증 설정
        http.authorizeRequests(
                authorize -> authorize
                        .antMatchers("/carts/**", "/options/**", "/orders/**")
                        .authenticated()

                        .antMatchers("/admin/**")
                        .access("hasRole('ADMIN')")
                        // ("/admin/**")에 대한 요청은 ADMIN권한을 가진 회원만 승인한다.
                        // 회원 권한을 설정할때 , 반드시 "ROLE_"을 붙여야만 Security가 인식함
                        .anyRequest().permitAll() //다른 주소는 모두 허용
                // 모든 요청에 대해 인증을 요구 하지 않는다
                // 위에서 설정한 특정 경로에 대한 권한 인증 확인만 하고 다른 경로는 확인하지 않는다
        );

        // 12. 로그아웃 관련 설정 (이 부분 추가)
        http.logout()
                .logoutUrl("/logout")
                .logoutSuccessHandler((request, response, authentication) -> {
                    response.sendRedirect("/");
                })
                .deleteCookies("jwtToken");

        return http.build();
    }

    // ** 규칙: 헤더(Authorization), 메서드, IP 주소, 클라이언트으 쿠키 요청을 허용
    public CorsConfigurationSource configurationSource() {
        CorsConfiguration corsConfigurationSource = new CorsConfiguration();
        corsConfigurationSource.addAllowedHeader("*"); // 모든 헤더를 허용
        corsConfigurationSource.addAllowedMethod("*"); // GET, POST, PUT, DELETE 등의 모든 메서드를 허용
        corsConfigurationSource.addAllowedOriginPattern("*"); // 모든 IP주소를 허용
        corsConfigurationSource.setAllowCredentials(true); // 클라이언트 쿠키 요청 허용
        corsConfigurationSource.addExposedHeader("Authorization"); // 헤더

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource
                = new UrlBasedCorsConfigurationSource();

        // ** (/) 들어오는 모든 유형의 URL 패턴을 허용.
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfigurationSource);
        return urlBasedCorsConfigurationSource;
    }
}

1. @Configuration: 이 클래스가 구성 클래스임을 나타내는 어노테이션

2. passwordEncoder() : 패스워드 인코더를 빈으로 등록

   @Bean
   public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
      return authenticationConfiguration.getAuthenticationManager();
   }

3. 인증 매니저 빈으로 등록 : 실질적으로는 AuthenticationManager에 등록된 AuthenticationProvider에 의해 인증이 처리됨

4. CustomSecurityFilterManager : AbstractHttpConfigurer를 확장하여 커스텀 보안 필터 매니저를 정의 함

5. SecurityFilterChain 빈 : SecurityFilterChain을 사용하여 전반적인 보안 설정을 구성함 : HttpSecurity 객체를 사용하여 다양한 구성이 적용

   • http.csrf().disable(); : CSRF 비활성화

   • http.headers().frameOptions().sameOrigin(); : iframe 거부 설정

   • http.cors().configurationSource(configurationSource()); : cors 설정

• http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS); : 세션을 사용하지 않음

• http.formLogin().disable(); : 폼 로그인 비활성화

• http.httpBasic().disable(); : 기본 HTTP 인증 비활성화

• http.apply(new CustomSecurityFilterManager()); : 커스텀 필터 적용

• 인증 및 권한 설정

    http.authorizeRequests(
            authorize -> authorize
                    .antMatchers("/petsitter/**","/carts/**", "/options/**", "/orders/**").authenticated()
                    .antMatchers("/admin/**").access("hasRole('ADMIN')")
                    .anyRequest().permitAll()
    );
  

  .antMatchers("").authenticated(): 해당 경로는 인증이 필요함 .antMatchers("/admin/**").access("hasRole('ADMIN')") : 해당 경로는 ADMIN권한을 가진 사용자만 접근 가능 그외 모든 사용자에게 허용

• 인증 및 권한 실패 처리

  http.exceptionHandling().authenticationEntryPoint((request, response, authException) -> {
      // 인증 실패 처리
  });
  
  http.exceptionHandling().accessDeniedHandler((request, response, accessDeniedException) -> {
      // 권한 실패 처리
  });

  : 인증 실패 및 권한 실패 시의 처리를 정의 : 인증 실패 시 401응답을 보내고, 권한 실패시 403응답을 보냄

• 로그아웃 관련

  http.logout()
        .logoutUrl("/logout")
        .logoutSuccessHandler((request, response, authentication) -> {
            // 로그아웃 성공 시 처리
        })
        .deleteCookies("jwtToken");

  : 로그아웃 URL을 "/logout"으로 지정하고, 로그아웃 성공 시 처리 및 쿠키 삭제를 설정

6. CORS 구성 메서드

   public CorsConfigurationSource configurationSource() {
        CorsConfiguration corsConfigurationSource = new CorsConfiguration();
        corsConfigurationSource.addAllowedHeader("*"); // 모든 헤더를 허용
        corsConfigurationSource.addAllowedMethod("*"); // GET, POST, PUT, DELETE 등의 모든 메서드를 허용
        corsConfigurationSource.addAllowedOriginPattern("*"); // 모든 IP주소를 허용
        corsConfigurationSource.setAllowCredentials(true); // 클라이언트 쿠키 요청 허용
        corsConfigurationSource.addExposedHeader("Authorization"); // 헤더
   
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource
                = new UrlBasedCorsConfigurationSource();
   
        // ** (/) 들어오는 모든 유형의 URL 패턴을 허용.
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfigurationSource);
        return urlBasedCorsConfigurationSource;
    }

   : CORS(Cross-Origin Resource Sharing) 설정을 정의함 : 모든 헤더, 메서드, IP 주소, 클라이언트 쿠키 요청을 허용하도록 설정

CORS(Cross-Origin Resource Sharing) 웹 페이지에서 실행중인 스크립트가 다른 도메인에 있는 리소스에 접근하는 권한을 부여하는 보안기술 동일 출처 정책(same-Origin Policy)에 따라 다른 도메인에서 온 요청에 대한 보안을 강화 함

해당 부분 작업을 진행하면서 많은 고민에 빠졌다 jwt는 무엇이고 seccion과 cookei는 무엇이며, security는 어떻게 동작하는것인지 많이 찾아봤지만 역시나 공부가 더 필요해 보인다.

일단 이번 프로젝트에서는 : 로그인 작업 진행시 Jwt토큰을 생성해서 header에 넣어 Client에게 전달할 예정

1. 사용자가 로그인을 합니다
2. DB에서 사용자를 확인합니다
3. jwt토큰 발급받아서 cookie에 저장합니다
4. 데이터 요청에 cookie에 담긴 토큰과 함께 요청합니다
5. jwt토큰을 검증합니다
6. 검증이 완료 되면 데이터를 응답합니다
7. jwt토큰은 일정 시간이 지나면 만료 됩니다
8. Cookie가 있는지 jwt토큰이 만료되었는지 확인하고 에러를 보냅니다.
9. 응답으로 에러를 받고 로그인 페이지로 이동시킵니다.
10. 재로그인을 해야 합니다.

보안사항 고려

1. XSS(Cross-Site Scripting) XSS는 대상 웹사이트에 악성 스크립트를 주입하여 비정상적인 동작을 실행시키는 공격 유형이다. 공격자는 다른 사용자의 브라우저에서 스크립트가 실행되게 하여 사용자의 쿠키, 세션 등 중요한 정보에 접근할 수 있다.

   해결 방법 : HttpOnly 속성 사용

   HttpOnly 속성은 웹브라우저가 스크립트를 통한 Dom document.cookie 객체 접근을 허용하지 않도록 합니다. 즉 공격자의 XSS를 통한 토큰 탈취를 방지할 수 있습니다.

   cookie.setHttpOnly(true);

2. CSRF ( Cross Site Request Forgery) 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하도록 만드는 공격 유형이다. 공격자는 사용자의 엑세스 토큰을 탈취하지 않고도 사용자로 하여금 엑세스 토큰을 사용하여

   해결 방법 : SameSite 속성 사용

   SameSite 속성은 웹브라우저가 쿠키를 받은 서버가 아닌 다른 서버로 요청을 하는 경우 그 쿠키는 전송하지 못하도록 합니다.

쿠키로 저장하는 방법을 선택 했으니 토큰의 도난을 사전방지를 생각해야한다! 추후 Refresh Token을 생성해서 radis에 저장하는 방식으로 기능 고도화를 해보려한다.

spring security 로그인 회원가입 구현

로그인 / 회원가입 구현 확인하기

반려동물 돌봄 서비스 (펫시터 예약 및 결제 시스템)

🚀요구사항

1. 회원가입/ 로그인

Spring Sequrity를 이용해 회원 가입 로그인을 진행. 로그인시 session에 사용자 정보 저장 요청자가 누구인지 확인할 방법 생각해보기 (기능고도화)

1. 쿠키에 저장후 사용
2. 리프레시 토큰 발급 후 Redis에 저장 해서 사용

• 회원가입

  • 회원번호(pk), 아이디(이메일 - unique), 비밀번호, 회원이름, 전화번호
  • 권한, 주소, 프로필

• 로그인

  • 아이디(notnull), 비밀번호(notnull) 로그인

2. 반려동물 정보 입력

• 등록

  • 반려동물 정보등록 페이지 작성(Creat)
  • 반려동물 회원 @ManyToOne
  • 타입(강아지/고양이), 이름, 성별, 품종, 생일, 몸무게, 중성화 수술여부

• 수정

  • 반려동물 pk로 조회해서 반려동물 수정작업(update)

• 삭제

  • 해당 아이디의 반려동물 정보 삭제 (delete)
  • 조회에서 삭제 가능

• 조회

  • 해당 아이디가 가지고 있는 반려동물 정보 조회 paging
  • 상세페이지 없이 리스트에서만 확인 가능

3. 펫시터 (상품)

• 등록

  • 펫시터 정보등록 페이지 작성(Creat)
  • 로그인후 작성 가능
  • 펫시터 회원 @ManyToOne
  • 제목, 내용, 지역, 가격, 사진, 사용자(로그인)

• 수정

  • 해당 아이디가 가지고 있는 펫시터 정보 수정

• 삭제

  • 펫시터 pk로 펫시터 정보 삭제

• 전체조회

  • 해당 아이디가 가지고 있는 펫시터 정보 수정
  • 추후 기능 고도화 : 지역 셀렉시 해당 지역에 해당하는 게시글 보여주기

• 상세페이지조회

  • 제목, 내용, 지역, 작성일, 가격, 지역, 사진
  • 찜 등록 버튼, 결제 하기 버튼 클릭시 주문 페이지로 넘어가기
    

4. 주문

• 등록

  • 회원정보 @OneToMany
  • 펫시터 정보 @OntoOne
  • 일정 정보 매핑 @OneToOne - 날짜,시간정보
  • 반려동물 정보 @OneToMany

• 삭제

  • 주문 상품 삭제

• 전체조회

  • 주문 상품 리스트 조회

5. 찜

• 등록

  • 펫시터 상세페이지에 하트 클릭시 찜 리스트로 등록

• 삭제

  • 찜 리스트에서 삭제 버튼으로 삭제 가능

• 전체조회

  • 찜 리스트 작성, paging 작업

6. 게시판

• 등록

  • 회원 정보 @ManyToOne
  • 제목, 작성일, 내용, 파일
  • 파일 @OneToMany
  • 파일이름, 파일경로, 파일사이즈, 파일타입, uuid

• 수정

  • 게시판 수정

• 삭제

  • 게시판 삭제

• 전체조회

  • 게시판 리스트 조회 paging 설정

• 상세페이지

  • 제목, 내용, 작성자, 작성시간
  • 업로드 파일 - 다운로드
  • 게시판 - 댓글 @oneToMany
  • 댓글 아이디, 댓글 작성일, 댓글 작성자, 댓글 내용