지도 범위 재설정 하기 지도 범위를 재설정합니다. 어떤 좌표나 마커들이 지도에 모두 보여야 할 때 좌표들의 정보를 갖는 LatLngBounds를 사용하여 좌표들이 모두 보이게 지도의 중심좌표와 레벨을 재설정 할 수 있습니다.

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 버튼을 클릭하면 아래 배열의 좌표들이 모두 보이게 지도 범위를 재설정합니다 
var points = [
    new kakao.maps.LatLng(33.452278, 126.567803),

];

// 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
var bounds = new kakao.maps.LatLngBounds();    

var i, marker;
for (i = 0; i < points.length; i++) {
    // 배열의 좌표들이 잘 보이게 마커를 지도에 추가합니다
    marker =     new kakao.maps.Marker({ position : points[i] });
    marker.setMap(map);

    // LatLngBounds 객체에 좌표를 추가합니다
    bounds.extend(points[i]);
}

function setBounds() {
    // LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
    // 이때 지도의 중심좌표와 레벨이 변경될 수 있습니다
    map.setBounds(bounds);
}

적용

문제점: 중심에서 벗어남 고쳐야함

// bounds 선언
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
        // 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
        var bounds = new kakao.maps.LatLngBounds();
        function setBounds() {
            // LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
            // 이때 지도의 중심좌표와 레벨이 변경될 수 있습니다
            map.setBounds(bounds);
        }

1번째 시도

console.log(clickPosition); marker 찍는 함수에다가 bounds.extend(clickPosition); 넣어보기

function addSelectedMarker({la, ma}, index) {

                marker = new kakao.maps.Marker({
                    position: new kakao.maps.LatLng(la, ma), // 마커의 위치
                    image: markerImage
                });

            marker.setMap(map)

            var clickPosition = new kakao.maps.LatLng(la, ma)
            // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
            // LatLngBounds 객체에 좌표를 추가합니다
            console.log(clickPosition);
            bounds.extend(clickPosition);
}

실패!!

2번째

console.log(laMas[1].la);

bounds.extend(new kakao.maps.LatLng(laMas[0])); 이거 넣어도 중심 안옮겨짐

const laMas = JSON.parse(/*[[${laMas}]]*/ []);

        laMas.forEach((lama, index) => {
            addSelectedMarker(lama, index);
            // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
            // LatLngBounds 객체에 좌표를 추가합니다
            console.log(laMas[1]);

            bounds.extend(new kakao.maps.LatLng(laMas[0]));
            // bounds.extend(new window.kakao.maps.LatLng(laMas[1]));
        })

도 안됌.

3번째

스트링말고 double 로 해보기 오류뜸

4번째 _해결

setBounds 함수 다 버림. 처음 mapOption에서 center 에 바로 걍 넣음 chatGPT한테 자바스크립트에서 자료형어케바꾸냐고 물어봄 => parseFloat 쓰라함. =>> 오류남 lamas가 선언이 안되어있음. ===> lamas 변수선은 위로 올림 해결~~

const laMas = JSON.parse(/*[[${laMas}]]*/ []);
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = {
                //지도의 중심좌표
                center: new kakao.maps.LatLng(parseFloat(laMas[0].la),parseFloat(laMas[0].ma)),

                level: 7 // 지도의 확대 레벨
            };

#  전체 데이터베이스 리스팅
SHOW DATABASES;
# `mysql` 데이터 베이스 선택
USE mysql;
# 테이블 리스팅
SHOW TABLES;
# 특정 테이블의 구조
DESC `user`;

수정

(create문과 유사)

# 테이블 구조 수정(id 칼럼 추가, first)
ALTER TABLE article ADD COLUMN id INT FIRST;

# 기존 데이터에 id값 추가(id = 1, id IS NULL)
UPDATE article
SET id =1 
WHERE id IS NULL;
# 데이터 조회(*, 둘다 수정되어 버림..)
SELECT * FROM article;

• POST : 생성

  • 회원가입
  • 글쓰기
  • 댓글쓰기
  • 로그인
    • 로그인을 하면 세션이 생성
  • 로그아웃
  • 추천

• PUT(혹은 PATH) : 수정

  • 글 수정
  • 댓글 수정

• DELETE :삭제

  • 글 삭제
  • 댓글 삭제
  • 추천취소

• GET : 나머지들

MPA : 타임리프나 JSP

- POST , GET 주로 씀
- fetch 함수를 통해서 PUT과 DELTE 도 사용할 수는 있지만, 
대부분 POST 와 GET 만 사용

SPA : 리액트, 뷰, 앵귤러, 스벨트

- POST , GET 주로 씀

참고:https://velog.io/@dataliteracy/HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%8F%99%EC%9E%91%ED%95%B4%EB%B3%B4%EA%B8%B0

체크 해제하면 해결 Inspections ➡️ Unbound namespace prefix ✅ 를 해제하면 된다. 참고 인텔리제이 HTML 추가속성 오류 해결법

톱니바퀴 선택 후 2) Compact Middle Packages 란 체크를 해제하거나 선택합니다.

2.톱니바퀴가 없다면 Options => TreeApperance => Compact Middle Packages 해제

Spring Boot DevTools

서버 껏다키기 자동

Spring Web

Scanner(System.in) 말고 HTTP 로 컨트롤러와 액션을 받을 수 있게 키보드로 입력받지 않고 웹 브라우져로 입력을 받음.

프로젝트 설정

[테킷_일지]2D_스프링에서 필수

application.propertices 에서 application.yml로 확장자 바꾸고 아래와같이 코딩

server:
  port: 8020

바꾼 이유 : 프로퍼티스보다 중복 코드가 줄어들기에

서버확인

Application.java Run 시 아래 와같은 빌드 코드가 뜨면 성공

git reset --merge HEAD~1 

명령어도 쓸 수 있습니다:

자바 스트림(Stream)이란

java 8 부터 지원되기 시작함. 컬렉션에 저장되어 엘리먼트들을 하나씩 순회하며 처리하는 코드패턴. 람다식과 함께 사용되 데이터 처리 간결하게 함.

복습 : 배열 선언

스트림에 앞서 배열 선언과 재 생성을 복습하자

//배열은 길이가 정해져있다.
//같은타입만 넣을 수 있다. 이차원배열이아닌이상
//**값 목록으로 배열생성**
//1.  타입[] 변수;
//2. 타입 변수[];
//값 미리 선언
String [] names ={"값1", "값2"};
//값 나중에 선언
int[] names = null;
names = new int [] { 1, 2, 3};

// **new 연산자로 배열 생성 **
String [] names = new String[3];

스트림 사용법

스트림생성-배열 Arrays.stream

먼저 생성. 배열은 Arrays.stream사용

String[] arr = new String[]{"a", "b","c"}
String<String> stream = Arrays.stream(arr);
Stream <String> streamofArrayPart= Arrays.stream(arr, 1,3); 
//인덱스 1포함, 3 제외 => ("b", "c")

스트림생성-컬렉션

List<String list = Arrays.asLsti("a","b","c");
Stream<String> stream = list.stream();

스트림생성-빌더

직접 값 입력함
String<String> stream = Stream<String> builder()
    .add("Apple")
    .add("Banana")
    .add("Melon")
    .build();
// 애플 바나나 멜론 순서로 문자열 데이터를 처리.    

스트림생성 -Generator

//데이터를 생성하는 람다식을 이용해서 스트림을 생성함.
public static<T> Stream<T> generate (Supplier<T> s){...}
//Supplier에 해당하는 람다식이 데이터를 생성. 
Stream<String> stream =Stream.generate(() -> "Hello").limit(5);
// Hello 찍어냄. 무한 생성 limit() 메소드를 이용해 스트림이 5개만 제한 

스트림생성 - iterate

//수열 형태 데이터 생성
Stream<String> stream = Stream.iterate(100, n-> n+10).limit(5);
//출력 결과: 100 부터 10씩 증가 하는 숫자 생성

스트림 데이터가공

Filter

Stream<Integer> stream = IntStream.range(1,10).boxed();

boxed가 뭘까? 자바 Int 변수를 다룰 때 Integer 클래스로 오토박생해서 처리하는 경우:

오버헤드 발생!~! => 성능저하 스트림 객체에서는 이를 위해

제네릭을 이용한 클래스로 사용 시 박식 사용

Stream<Integer> stream = IntStream.range(1,10).boxed();

filter예제

1. 1 ~ 9 까지 데이터를 뽑아내는 스트림 만들고
2. filter 메소드에 짝수 선별하는 람다식
3. 짝스 데이터만 뽑아내는 객체 리턴

Stream<Integer> stream  = IntStream.range(1,10).boxed();
stream.filter(v -> ((v %2) ==0))
    .forEach(System.out::println);

//출력결과 :
//2,4,6,8

Map

map()은 스트림에서 뽑아져 나온는 데이터를 변경

Map 예제

짝수에다가 10씩 곱하기

Stream<Integer> stream = IntStream.range(1,10).boxed();
stream.filter(v -> ((V%2) ==0))
    .map(v -> v *10)
    .forEach(System.out::println);
//출력결과:
//20, 40, 60, 80

Sorted

스트림데이터 정렬시 사용 오름 차순,, 내림차순 등등

스트림 결과 생성

지금까지는 중간작업 데이터 가공, 필터링 후 그 값을 컬렉션으로 모우는 작업 필요

통계값

정수 값을 받는 스트림의 마무리는 '총합'을 구하거나 '최대값','최소값', '숫자의개수', '평균값 등에 대한 계산.

int sum = IntStream.range(1,10).sum();
int count = IntStream.range(1,10).count();

int max = IntStream.range(1,10).max();
int min = IntStream.range(1,10).min();
int avg =IntStream.range(1,10).average();

//짝수 숫자의 총합
int evenSum = IntStream.range(1,10)
    .filter(v-> ((v%2) ==))
    .sum();

foreach

스트림에서 뽑아져 나온값에 작업할때 리턴하지 않음

Set<Integer> evenNumber = IntStream.range(1,1000).boxed()
    .filter(n -< (n%2 ==0))
    .forEach(System.out:println);
// 출력결과:
1 부터 999까지 숫자 중 짝수만 뽑아냄 

위 사진의 라이센스 아이디 같은거 확인후 액티베이트 파란버튼 누르면 exit 하고 다시 재 실행하면 나옴

완성.

참고

아 스프링부트 간편하게 너무 잘만들어짐 커뮤니티도 어렵지는 않은데 얼티메이트 다시 까는 시간이 더 적네 이럴줄은 몰랐는데 맥유저가 이런 기분일까. 환경설정 안해도 되는 이 기분,,,,

Spring Boot에서 JPA 사용하기

환경 Framework : Spring Boot 3.1.5 Build : Gradle 8.4 JDK : JDK21

할것 요약

1. build.gradle에 JPA dependency 추가하기
2. application.yml에 JPA 설정 추가하기
3. JPA Entity 생성
4. JPA Repository 생성
5. JPA CRUD API 만들어보기

1. build.gradle에 JPA dependency 추가하기

dependencies {
    // JPA
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
}

2. application.yml에 JPA 설정 추가하기

spring:
  ## JPA Setting Info
  jpa:
    hibernate:
      ddl-auto: create  # option type: create, create-drop, update, validate, none
    properties:
      hibernate:
        diarect: org.hibernate.dialect.H2Dialect  # 쿼리의 기준이 되는 데이터베이스 엔진을 설정합니다.
        show_sql: true  # sql 쿼리를 보여줍니다.
        format_sql: true  # sql query formatting
        use_sql_comments: true  # sql 쿼리의 추가정보를 보여줍니다.

logging:
  level:
    org:
      hibernate:
        type:
          descriptor:
            sql: trace  # query의 ?에 어떤 값이 들어가는지 추적할 수 있는 설정입니다. TRACE Log에 값을 보여줍니다.

3. JPA Entity 생성

엔티티는 데이터베이스 테이블과 매핑되는 자바클래스를 말한다. 질문과 답변에 해당하는 엔티티가 있어야함.

질문엔티티

답변엔티티

Question.java 파일(question 엔티티 생성)

package com.ll.sbmission20231121;

import jakarta.persistence.*;
import lombok.Generated;
import lombok.Getter;
import lombok.Setter;

import java.util.List;

@Getter
@Setter
@Entity
//JPA 가 엔티티로 인식한다.


public class Question {
    @Id
    //데이터 구분을 위함.
    // JPA 에서 엔티티의 기본 키 값을 자동생성하는 방법을 지정하는 어노테이션.
    // 엔터티를 데베에 저장시에 해당 엔터티의 기본 키 값을 자동 생성후 이를 데베의 identity 컬럼에 의존해 할당
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    //질문의 고유번호
    @Column(length = 200)
    //컬럼의 길이
    private String subject;
    //질문의 제목

    @Column(columnDefinition = "TEXT")

    //테이블의 열과 매핑 시 정의를 지정하는 어노테이션 . 열의 정의를 "text"로 지정
    //      글자수 제한 두지 않음 .
    private String content;
    //질문의 내용
    private  LockModeType createDate;
    //질문을 작성한 일시

    @OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE)
    private List<Answer> answerList;
}

Answer.java 파일 (answer 엔티티 생성)

package com.ll.sbmission20231121;

import jakarta.persistence.*;
import lombok.Getter;
import lombok.Setter;
import org.hibernate.annotations.ColumnDefault;
import java.time.LocalDateTime;

@Getter
@Setter
@Entity

public class Answer {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    //답변의 고유 번호
    @Column(columnDefinition  = "TEXT")
    private String content;
    //답변 내용
    private LocalDateTime createDate;
    //답변 작성 일시
    @ManyToOne
    private Question question;
    //어떤 질문에 대한 답변 인지 알기 위한 질문 속성
}

이해 안된던 것

//sql 대신에 create 테이블 을 만듦
//insert in (1, "제목")
//insert in (2, "제목")
//insert in (3, "제목")

@Id
 //ID 컬럼은 primary key 

 @GeneratedValue(strategy = GenerationType.IDENTITY)
//자동으로 인덱스 값증가해서 붙여주기 위해서 IDENTITY 컬럼 사용.

private Integer id;

완성.

환경 Framework : Spring Boot 3.1.5 Build : Gradle 8.4 JDK : JDK21

할 것 요약

1. build.gradle에 H2 dependency 추가
2. application.yml에 H2 설정 추가
3. H2 Console 접속해보기

1. build.gradle에 H2 dependency 추가

dependencies {
    // H2
    runtimeOnly 'com.h2database:h2'
}

2. application.yml에 H2 설정 추가

spring:
  # H2 Setting Info (H2 Console에 접속하기 위한 설정정보 입력)
  h2:
    console:
      enabled: true  # H2 Console을 사용할지 여부 (H2 Console은 H2 Database를 UI로 제공해주는 기능)
      path: /h2-console  # H2 Console의 Path
  # Database Setting Info (Database를 H2로 사용하기 위해 H2연결 정보 입력)
  datasource:
    driver-class-name: org.h2.Driver  # Database를 H2로 사용하겠다.
    url: jdbc:h2:~/test  # H2 접속 정보
    username: sa  # H2 접속 시 입력할 username 정보 (원하는 것으로 입력)
    password:  # H2 접속 시 입력할 password 정보 (원하는 것으로 입력)

3. H2 Console 접속해보기

Application.java 실행 (Spring Boot를 Run(실행) ) http://localhost:8020/ 위에서 설정한 H2 path를 뒤에 붙여 접속

http://localhost:8020/h2-console

연결누르면 아래 화면 완성.

자바 21로 변경

https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/How-to-install-Java-21

지역변수, 전역변수, 인스턴스변수, 클래스변수

1. 지역변수와 전역변수의 구분은 선언한 위치에 따라다르다.

2. 전역변수는 어디서나 호출 가능하고 지역변수는 Method(함수) 안에 서식한다.

3. 전역변수 종류는 두가지로 인스턴스 변수(객체 변수), 클래스 변수(static 변수)가 있다

4. 인스턴스 변수(객체 변수)는 같은 클래스에서만 자유롭게 사용가능하고, 클래스 변수(static)는 다른 클래스에서도 사용이 가능하다.

5. 클래스 변수는 해쉬값이 같고, 객체 변수는 객체 선언마다 다른 해쉬값이 생성된다.

인텔리제이 커뮤니티버전으로 스프링부트 열기

가비지 컬렉터

@AllArgsConstructor

@ResponseBody //이 함수의 리턴값을 그대로 브라우저에 출력하라는 의미

문제점

스프링부트 21버전이 연결이 안되서 17버전으로 수업을 듣고있음.

1. 자바 17버전과 21 버전 같이 왔다갔다하며 프젝 생성 중.
2. 인텔리제이 커뮤니티버전임. (크게 상관이없다하셔서 이대로 진행하고싶어요) a. 자바 21버전으로 스프링부트를 열었는데 21 버전 이 맞지 않음 => 해결을 자바 홈 경로 변경 해도 미해결 b. 자바 17버전으로는 스프링부터 잘 열리고 locallohst:8020 사이트 연결 잘됨.

        가) 

   Error: Registry key 'Software\JavaSoft\Java Runtime Environment'\CurrentVersion' has value '1.8', but '1.7' is required. 오류 뜸 => 스택오버플로우에서는 자바 버전 재설치 하라함.하기 시름

dependencies {
    // 롬복 추가
    implementation 'org.projectlombok:lombok:1.18.30'
    annotationProcessor 'org.projectlombok:lombok:1.18.30'

    // 테스트 환경에서도 롬복 사용
    testImplementation 'org.projectlombok:lombok:1.18.30'
    testAnnotationProcessor 'org.projectlombok:lombok:1.18.30'

    testImplementation 'org.assertj:assertj-core:3.24.2'

    testImplementation platform('org.junit:junit-bom:5.9.1')
    testImplementation 'org.junit.jupiter:junit-jupiter'
}

V1(조인 안한 버전)

IF문 버전

SELECT IF(deptId = 1, '홍보', '기획') AS 부서명, GROUP_CONCAT(name ORDER BY id DESC SEPARATOR ', ') AS 사원리스트, CONCAT(FORMAT(TRUNCATE(AVG(E.salary), 0), 0), '만원') AS 평균연봉, CONCAT(MAX(salary), '만원') AS 최고연봉, CONCAT(MIN(salary), '만원') AS 최소연봉, CONCAT(COUNT(*), '명') AS 사원수 FROM emp GROUP BY deptId;

알게된 것

# 테이블 리스팅
SHOW TABLES;
# 특정 테이블의 구조
DESC `user`;

#데이터 또 하나 추가(title = 제목, body = 내용)
INSERT INTO article SET title = '제목', `body` = '내용';

#테이블 구조 수정(id 칼럼 추가, first)
ALTER TABLE article ADD COLUMN id INT FIRST;

# 날짜 칼럼 추가(id 칼럼 뒤에) => regDate DATETIME
ALTER TABLE article ADD COLUMN regDate DATETIME AFTER id;

# article 테이블 조회(*)
## id가 NULL인 데이터 생성이 가능하네?
SELECT * FROM article
# id 데이터는 꼭 필수 이기 때문에 NULL을 허용하지 않게 바꾼다.(alter table, not null)
## 기존의 NULL값 때문에 실패가 뜬다.
ALTER TABLE article MODIFY id INT NOT NULL;
# 기존의 NULL값이 0으로 바뀐다.
UPDATE article SET id =0;
# NULL을 허용하지 않게 바꾼다.(alter table, not null)

ALTER TABLE article MODIFY id INT NOT NULL;
# article 테이블 조회(*)

아키텍처, Ci/cd , api

MDN

라우터에 연결된 각 컴퓨터들이 로 단순한 구조를 가지게됨 => 네트워크 확장.

웹소켓

데이터를 주고받을 때 HTTP로 주고받음. 실시간 통신 필요. 채팅 , 주식

JSON

자바스크립트 표현법 자주 사용됨

인증과 인가

인증은 authentication이고신원확인 로그인 인가는 authorization이죠 할 수 있는 접근권한

데이터베이스

NoSQL :sql 뿐만 아니라 더 쓴다. 분산 서버 용이 ex) 몽고DB redis: 분산캐시 키를 기반으로 관리. RDB : 데이터 저장 삭제 ORM은 Object Relation Mapping의 약자입니다 클래스 오브젝트와 테이블의 관계를 클래스로 가져올수 있는 프로그램. 실행시에 쿼리 생성 혹은 쿼리 실행. ORM 사용시, 쿼리 작성없이 DB 조작 가능.데이터 관리 BUT!! 통계 쿼리같은 복잡한 쿼리는 로우쿼리가 용이 => N + 1 문제는 불필요하게 많은 쿼리발생 클래스의 모델에 다른클래스의 관계를 설정하고 해당 클래스 조회를 할 때 데이터 개수만큼 쿼리가 발생

REST

HTTP URI 방식으로 자원을 표현 post, get, put, delete

GraphQL

json형태로 쓰이는 쿼리 언어 스펙 클라이언트가 서버로부터 데이터를 효과적으로 가져옴

배치처리

자바는 객체를 만들기 위해 반드시 클래스를 먼저 만들어야 한다. 클래스는 객체를 만들기 위한 일종의 틀이다.

붕어빵이 객체라면, 붕어빵 틀은 클래스 자동차 클래스 생성

GITHUB FLOW GITHUB) 이슈 할당, 이슈 1(enhancement) 본인에게 할당된 일 찾기 혹은 미할당된 일을 본인 스스로 할당 혹인 본인 스스로 이슈 생성 main) git pull origin main 로컬의 main 브랜치 최신화 main) git checkout -b e/1 e/1 브랜치 생성 및 이동 e/1) 작업 e/1) git add && git commit -m "작업" e/1) 작업 e/1) git add && git commit -m "작업" main) git push origin e/1 로컬의 e/1 브랜치를 원격지로 푸시 GITHUB) PR(e/1 => main) 생성, 2번 PR 생성 GITHUB PR 2) 투표 GITHUB PR 2) 투표 통과 GITHUB PR 2) 반영 merge or rebase or squash GITHUB PR 2) e/1 브랜치 삭제 GITHUB ISSUE 1) 닫기 e/1) git checkout main 작업이 끝났으니 다시 main 브랜치로 이동 main) git branch -D e/1 e/1 브랜치 삭제 main) git fetch --prune 내 컴퓨터에 남아 있는 원격지 e/1에 대한 흔적 제거