[LIKELION] 221017

고관운·2022년 10월 17일

회고

😄 느낀점

  • 드디어 자바와 DB를 연결했다. 자바 내에서 쿼리문을 사용하여 데이터를 다룰 수 있다는 것을 알았다.
  • EC2의 주소와 비밀번호 유출에 주의해야한다.

😁 목표

  • CodeUp 100제 (1081~1090 풀기)

[멋쟁이사자처럼] 5주차 - Spring 입문

알고리즘(별 찍기)

인젤리제이 for문 단축키

🟢 fori 입력시 자동 완성

활용 메소드

🟢 str.repeat(3) : str을 3번 반복

직각삼각형 별 찍기

🟢 어떤 문자로, 몇단을 만들 것인지 받아서 직각삼각형 모양으로 출력

import java.util.Scanner;

public class RightTriangle {
    private char letter;
    public RightTriangle() {
        this.letter = '*';
    }

    public RightTriangle(char letter) {
        this.letter = letter;
    }

    void printRightTriangle(int n) {
        for (int i = 1; i <= n; i++) {
            for (int j = 0; j < i; j++) {
                System.out.print(this.letter);
            }
            System.out.println();
        }
    }

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        System.out.print("어떤 문자로 만들것인지 입력하세요 : ");
        char chr = sc.next().charAt(0);

        System.out.print("몇단으로 만들것인지 입력하세요 : ");
        int n = sc.nextInt();

        RightTriangle rightTriangle = new RightTriangle(chr);

        rightTriangle.printRightTriangle(n);
    }
}

피라미드 별 찍기

🟢 피라미드의 형태로 공백과 별 사이의 공간을 생각해야함
🟢 공백은 점점 줄어들고, 별 사이의 공간은 홀수, 짝수를 이용함

import java.util.Scanner;

public class Pyramid {
    void printPyramid(int n){
        for (int i = 0; i < n; i++) {
            for (int j = n-i; j > 1; j--) {
                System.out.print(" ");
            }
            for (int j = 0; j < i*2+1; j++) {
                if(j % 2 == 0){
                    System.out.print("*");
                } else {
                    System.out.print(" ");
                }

            }
            System.out.println();
        }
    }

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int n = sc.nextInt();

        Pyramid pyramid = new Pyramid();

        pyramid.printPyramid(n);
    }
}

마름모 별 찍기

🟢 마름도는 피라미드를 활용하여 피라미드 형태, 이후 마지막 단만 제거 후 뒤집어서 출력하면 마름모 모양으로 출력됨

import java.util.Scanner;

public class Rhombus {
    void printRhombus(int n) {
        for (int i = 0; i < n; i++) {
            for (int j = n - i; j > 1; j--) {
                System.out.print(" ");
            }
            for (int j = 0; j < i * 2 + 1; j++) {
                System.out.print("*");
            }
            System.out.println();
        }
        for (int i = n - 2; i >= 0; i--) {
            for (int j = n - i; j > 1; j--) {
                System.out.print(" ");
            }
            for (int j = 0; j < i * 2 + 1; j++) {
                System.out.print("*");
            }
            System.out.println();
        }
    }

    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int n = sc.nextInt();

        Rhombus rhombus = new Rhombus();

        rhombus.printRhombus(n);
    }
}

자바 DB 연동 및 데이터 추가

AWS DB 해킹 주의할 점

🔴 깃허브에 주소와 비밀번호 올리면 바로 해킹당함
    👉 Edit Configuration으로 주소와 비밀번호 노출을 최소화

과정1. Gradle 빌드 및 mysql dependency 추가

  1. Gradle 프로젝트 생성
  2. 구글에 mysql jdbc driver maven 검색
  3. MySQL Connector/J 최신버전 클릭
  4. Gradle 주소 복사
  5. build.gradle 파일에 붙여넣기

과정2. mysql workbench에 테이블 생성

users 테이블 생성

  • id(varchar)
  • name(varchar)
  • password(varchar)

과정3. 자바에서 데이터 Insert 및 Select

이 과정을 진행하며 발생한 에러
1. Connection 문제 : Gradle에 JDK가 설정되지 않았음(Intellij 형식은 Connection이 뜸)
👉 Settings의 Gradle 메뉴에 JVM이 JDK로 잘 설정되었는지 확인

  1. Edit Configuration 문제
    👉 Host 입력 시, jdbc:mysql://aws주소:3306/likelion-db 입력
    (3306은 포트번호, likelion-db는 데이터베이스명)

환경변수 등록 방법
1. Edit Configurations

2. Environment variables

3. 각 변수 등록(주소 형식은 이 과정을 진행하며 발생한 에러 2번 참조)

코드
User
🟢 데이터를 저장하기 위한 클래스

public class User {
    private String id;
    private String name;
    private String password;

    public User() {
    }

    public User(String id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }

    public String getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public String getPassword() {
        return password;
    }
}

UserDao
🟢 데이터베이스에 Insert 및 Select하는 메소드가 있는 클래스

import com.dbexercise.domain.User;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class UserDao {
    public void add() throws ClassNotFoundException, SQLException {
    	// 환경 변수 가지고 오는 코드
        Map<String, String> env = System.getenv();
        String dbHost = env.get("DB_Host");
        String dbUser = env.get("DB_USER");
        String dbPassword = env.get("DB_PASSWORD");

        // mysql로 db연결을 특정하도록 설정
        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection conn = DriverManager.getConnection(dbHost, dbUser, dbPassword); // db 연결
        // 쿼리 직접 작성
        PreparedStatement ps = conn.prepareStatement("INSERT INTO users(id, name, password) VALUES (?, ?, ?)");
        // 각각의 값을 넣기
        ps.setString(1, "1");
        ps.setString(2, "Kwanwun");
        ps.setString(3, "1234");

        // DB에 반영
        ps.executeUpdate();
        ps.close();
        conn.close();
    }

    public User get(String id) throws SQLException, ClassNotFoundException {
        Map<String, String> env = System.getenv();
        String dbHost = env.get("DB_Host");
        String dbUser = env.get("DB_USER");
        String dbPassword = env.get("DB_PASSWORD");

        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection conn = DriverManager.getConnection(dbHost, dbUser, dbPassword); // db 연결
        // Select문 실행
        PreparedStatement ps = conn.prepareStatement("SELECT * from users where id = 1");

		// executeQuery는 ResultSet으로 반환하며, ResultSet은 쿼리 실행 결과가 담겨있음
        ResultSet rs = ps.executeQuery();

        rs.next();
        User user = new User(rs.getString("id"), rs.getString("name"), rs.getString("password"));

        rs.close();
        ps.close();
        conn.close();

        return user;
    }

    public List<User> findAll() throws SQLException, ClassNotFoundException {
        // 환경 변수 설정해서 해당하는 값 가져오기
        Map<String, String> env = System.getenv();
        String dbHost = env.get("DB_Host");
        String dbUser = env.get("DB_USER");
        String dbPassword = env.get("DB_PASSWORD");

        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection conn = DriverManager.getConnection(dbHost, dbUser, dbPassword); // db 연결
        // Select문 실행
        PreparedStatement ps = conn.prepareStatement("SELECT * from users");

        ResultSet rs = ps.executeQuery();

		// 모든 데이터를 List에 담기
        List<User> userList = new ArrayList<>();

        while(rs.next()) {
            User user = new User(rs.getString("id"), rs.getString("name"), rs.getString("password"));
            userList.add(user);
        }

        rs.close();
        ps.close();
        conn.close();

        return userList;
    }

    public static void main(String[] args) throws SQLException, ClassNotFoundException {
        UserDao userDao = new UserDao();
        // Insert문으로 데이터 add
//        userDao.add();
		// Id가 1인 데이터만 가져오기
        User user = userDao.get("1");
        System.out.println(user.getName());

		// 모든 데이터 출력
        List<User> userList = userDao.findAll();
        for (User eachUser : userList) {
            System.out.println("ID : " + eachUser.getId());
            System.out.println("NAME : " + eachUser.getName());
            System.out.println("PASSWORD : " + eachUser.getPassword());
        }
    }
}

꼭 해야할 것
🔴 Connection, PreparedStatement, ResultSet은 사용한 후 Close해야함
(단 close 순서는 ResultSet, PreparedStatement, Connection로 함)


TECHIT 강의 - HTML/CSS

HTML/CSS

🔴 HTML과 CSS는 각각 다른 파일에 저장

HTML

기본 형식

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
  • <!DOCTYPE html> : 기본으로 작성
  • <head> : 부가 정보
  • <body> : 내용 정보

head

  • 한글을 쓰기 위해 추가 작업 필요
    <meta charset="UTF-8">
  • : 탭 제목
  • CSS와 연결 : <link rel="stylesheet" href="codelion.css">

body

  • : 사업자번호 및 저작권 내용 삽입 (p태그를 쓴 것이랑 겉보기에는 차이가 없음)
  • class="big-font" : 로 임의로 클래스 지정 (CSS에서 스타일 지정하는 키로 활용)
  • div(구역 나누기) : div로 묶으면 CSS에서 한번에 적용 가능
  • Section : div와 비슷(article도 있음)
    (이것들을 섞어 사용하면 가독성이 좋아짐)
  • 이미지 가져오기
    <img src="경로/파일이름.png">
  • 이미지에 링크걸기(이미지를 글로 바꿔도됨)
    <a href="주소"><img src="경로/파일이름.png"><a>

CSS

특정 태그 꾸미기
class명이나 태그명 앞에 .사용

.footer {
	text-align: center;
	background-color: black;
	color: white;
}

스타일 지정

  • text-align: center; : 가운데정렬
  • background-color: black; : 배경 검정(색은 RGB로 적용 가능)
  • color: white; : 글자색 흰색
  • font-size: 30px; : 30px로 크기 지정
  • font-weight: lighter; : 폰트 두께(lighter normal bold)
  • font-style: italic; : 기울임
  • line-height: 16px; : 줄간격

같은 줄에 좌우정렬하는 법
1. 좌우 정렬에 하고 싶은 내용을 각각 태그를 다르게 검
2. 각각 다른 CSS로 float: left;, float: right;설정
3. 좌우정렬에 성공하지만 이후 내용 추가시 내용 겹침 현상 발생
4. float을 사용하고 있는 태그를 div로 묶어줌
5. 해당 CSS에 overflow: hidden; 추가
6. 다른 내용와 겹침 현상 사라짐

들여쓰기
padding-left: 16px; : 원하는 크기 사용

아래에만 테두리
border-bottom: 1px solid black;

구글 폰트 가져오기
1. @import url(주소);로 폰트 불러오기
2. 문서 전체 폰트 적용

* {
	font-family: 'Montserrat';
}

div 관련 CSS

  • border: 5px solid black; : 테두리의 두께, 방식 색깔(div class에 그림)
  • width: 610px; : 박스 가로 크기 조절(세로는 height)
  • text-align: center; : 텍스트가 박스 기준으로 가운데 정렬

div를 가운데 정렬하는 방법

margin-left: auto;
margin-right: auto;

margin, border, padding

  • margin : 박스와 창 사이
  • border : 테두리
  • padding : 테두리와 글자 사이

🟢 border, padding은 박스 크기에 영향을 미치지만, margin은 크기에 영향을 주지 않음(위치만 이동)

그림자
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);

  • 0 : 가로축
  • 1px : 세로축
  • 20px : 그림자 블러
  • 0 : 그림자 퍼짐 정도
  • rgba : 그림자 색(마지막 값은 투명도)

0개의 댓글