Techit 6th 1st

Huisu·2023년 5월 22일
0

Techit

목록 보기
9/42
post-thumbnail

HTML/CSS

HTML

HTML
Hypertext Markup Language는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업한다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 한다.

아래의 이력을 작성하는 웹페이지를 HTML/CSS로 이력서를 만들면서 직접 HTML/CSS 내용을 익혀 보고자 한다. HTML은 다른 언어를 시작하기 전에 컴퓨터 코딩을 시작하는 가장 기본이다. 그 이유는 python, javascript 등의 내용물로 무언가를 만든다고 하더라도 사용자에게 편리한 겉모습으로 보여 줄 수 없기 때문이다. HTML/CSS에 대해 학습할 때는 코딩보다 문서를 만든다는 느낌으로 접근하는 것이 좋다.

HTML문서라면 어떤 문서를 막론하고 꼭 쓰이는 뼈대 같은 구조가 있다. 

<!DOCTYPE html>
<html>

	<head>
	</head>

	<body>
	</body>

</html>

일반적으로 html 문서에 들어가는 제목 부분이 head 태그 안에 들어가고, 내용물이 body 태그 안에 들어간다. 일반적으로 html 문서는 영어에 기반을 두기 때문에 한국어 인코딩 문자 세팅을 써야 한다. <meta charset = "UTF-8"> 를 추가해 주면 된다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset = "UTF-8">
	</head>

	<body>
	</body>

</html>

이후 사이트의 제목을 지정해 주는 title 태그를 사용하고 간단하게 body 태그를 채워 보면 다음과 같다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset = "UTF-8">
		<title> 조희수의 이력서 </title>
	</head>

	<body>
		<h1> 조희수의 이력서 </h1>
		<p> 경희대학교 산업경영공학과 </p>
	</body>

</html>

CSS

저작권 명시를 위해 밑에 작은 글씨로 저작권 표기를 추가한다. footer 태그를 사용할 수 있다.

<footer>
      <p>Copyright CODE LION All rights reserved. </p>
</footer>

이를 웹브라우저에 띄워 보면 다음과 같다. footer 태그로 싸인 부분과 일반 글자 사이에 아무런 차이가 없다. 따라서 이러한 디자인 부분을 담당하는 코드를 작성하기 위해 CSS를 사용한다.

기본적으로 html과 css는 파일을 분리해서 작성하는 것이 좋다. 이를 위해 codelion.css 파일을 만든다. 이후 index.html에서 codelion.css를 사용하기 위해 index.html 의 head 태그 안에 해당 파일을 사용하겠다고 link 태그를 사용해 말해 줘야 한다.

<link rel = “styleseet” href = “codelion.css”>

위 코드를 추가해 줘서 사용할 수 있다. 이후 codelion.css에서 footer를 꾸미는 내용을 작성해 보면 다음과 같다. 

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

이 경우 footer 태그가 여러 개라면 모든 footer 태그에 대해 해당 스타일이 적용된다. 하지만 같은 태그를 사용하더라도 다른 디자인을 적용하고 싶을 수도 있다. 이럴 때를 위해 class나 id를 부여하여 태그들을 구별한다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>조희수의 이력서</title>
        <link rel = "stylesheet" href = "codelion.css">
    </head>
    <body>
        <p class = "big-font">big font</p>
        <p class = "small-font">small font</p>
    </body>
</html>
.big-font {
    font-size: 30px;
}

.small-font {
    font-size: 15px;
}

Spring

Gradle

그래들은 빌드 도구이며 라이브러리 관리 도구이다. 빌드라는 말은 .jar 파일로 만드는 것이며 인간의 코드를 기계어로 번역해 주는 과정이다. 그래들의 dependency에서 라이브러리를 추가하고 관리할 수 있다.

command + N 버튼을 누르면 새로운 라이브러리를 검색해서 추가할 수 있다. MYSQL을 연동해 보면 다음과 같다.

DB Connection

db라는 package를 만들고 ConnectionChecker를 만든다.

mysql을 서버에서 띄우고 spring-db라는 schema를 실행한다.

프로그램은 JDBC(Java Database Connectivity)를 사용하여 MySQL 데이터베이스에 연결한다. com.mysql.cj.jdbc.Driver 클래스는 MySQL 드라이버를 로드하기 위해 Class.forName() 메서드를 사용한다. 그 다음 DriverManager.getConnection() 메서드를 사용하여 데이터베이스에 연결한다.

연결이 성공하면 Connection 객체인 con을 사용하여 Statement 객체를 만든다. st.executeQuery() 메서드를 사용하여 "SHOW DATABASES" SQL 쿼리를 실행하고, 그 결과로 ResultSet 객체를 얻는다. while 루프를 사용하여 결과 집합에서 각 행을 반복하고, rs.getString(1)을 사용하여 첫 번째 열의 값을 가져온다. 이 값을 System.out.println()을 사용하여 콘솔에 출력한다.

main() 메서드에서는 ConnectChecker 클래스의 인스턴스를 만들고 check() 메서드를 호출하여 프로그램을 실행합니다.

Statement st = con.createStatement();

이 줄은 con이라는 Connection 객체를 사용하여 SQL 문을 실행하는 Statement 객체를 생성한다. Statement 객체는 SQL 쿼리를 데이터베이스로 전송하는 데 사용된다.

ResultSet rs = st.executeQuery("SHOW DATABASES");

이 줄은 st라는 Statement 객체를 사용하여 "SHOW DATABASES"라는 SQL 쿼리를 실행하고 그 결과를 ResultSet 객체에 저장한다.

import java.sql.*;

public class ConnectChecker {
   public void check() throws SQLException, ClassNotFoundException {
       Class.forName("com.mysql.cj.jdbc.Driver");
       Connection con = DriverManager.getConnection("jdbc:mysql://localhost/spring-db",
               "root", "12345678");

       Statement st = con.createStatement();
       ResultSet rs = st.executeQuery("SHOW DATABASES");
       rs = st.getResultSet();
       while (rs.next()) {
           String str = rs.getString(1);
           System.out.println(str);
       }
   }

   public static void main(String[] args) throws SQLException, ClassNotFoundException {
       ConnectChecker cc = new ConnectChecker();
       cc.check();
   }
}

Insert

연결된 MySQL에 데이터를 추가하는 함수를 짜기 위해, 일단 User라는 테이블을 하나 생성한다.

CREATE TABLE `spring-db`.`users` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(45) NOT NULL,
  `password` VARCHAR(45) NOT NULL,
  PRIMARY KEY (`id`));

이후 데이터를 한 행 추가하는 add 메소드를 만들어서 실행시킨다. add 메소드는 다음과 같다. PreparedStatement 는 INSERT 쿼리에서 주로 사용된다. 쿼리를 반복적으로 실행하거나 변수 데이터를 쓸 때 유용하다. 해당 구문의 뒤에 values 뒤에 있는 물음표 자리를 나중에 값으로 치환할 수 있기 때문이다. 물음표가 placeholder 역할을 한다. 값을 바꾸기 위해서는 setString 메소드를 사용한다.

public void add() throws ClassNotFoundException, SQLException {

        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection con = DriverManager.getConnection("db 링크",
                "root", "password");

        PreparedStatement pstmt = con.prepareStatement("insert into users(id, name, password) values(?, ?, ?)");
        pstmt.setString(1, "1");
        pstmt.setString(2, "huisu");
        pstmt.setString(3, "2459810");
        pstmt.executeUpdate();
    }

해당 코드를 main에서 실행하면 다음과 같이 레코드가 추가됨을 확인할 수 있다.

DB 연결을 확인할 때는 Statement를 사용하고 INSERT를 할 때는 PreparedStatement를 사용한다. 둘 다 JDBC에서 SQL 쿼리를 사용할 때 사용되지만 몇 개의 차이점이 존재한다.

  1. SQL Injection 방지

Statement는 SQL 쿼리에 파라미터를 문자열 결합을 통해 직접 삽입한다다. 이런 방식은 잘못된 사용으로 SQL Injection 공격에 취약할 수 있다. PreparedStatement는 파라미터를 안전하게 처리하여 SQL Injection 공격을 방지합니다. 이는 데이터베이스에 안전하게 값을 삽입할 수 있게 해 준다.

  1. 성능

Statement는 SQL 쿼리를 실행할 때마다 쿼리를 컴파일하고 최적화해야 한다다. PreparedStatement는 동일한 SQL 쿼리를 반복적으로 실행하는 경우에 더 효율적이다.

  1. 사용 편의성

Statement를 사용하여 SQL 쿼리에 값을 삽입할 때는 개발자가 수동으로 문자열 결합을 관리해야 한다. PreparedStatement는 SQL 쿼리에 파라미터를 쉽게 삽입할 수 있도록 ?를 통한 placeholder를 제공한다.

Select

데이터베이스에 입력된 값들을 선택해서 보기 위한 select 함수를 짜면 다음과 같다.

public void select() throws SQLException, ClassNotFoundException {
        Class.forName("com.mysql.cj.jdbc.Driver");
        Connection con = DriverManager.getConnection("DB 링크",
                "root", "password");

        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("select * from users");
        rs = st.getResultSet();
        while (rs.next()) {
            String str = rs.getString(1);
            String str2 = rs.getString(2);
            String str3 = rs.getString(3);
            System.out.println(str + " " + str2 + " " + str3);
        }
    }

이때 Statement로 들어가는 sql 구문에서 show database 를 입력하게 되면 database 기준으로 schema가 저장되고, select * users로 user table을 선택하게 되면 user 테이블의 칼럼 세 개를 선택하여 그 값을 반환할 수 있게 된다.

DataGrip

Intellij의 DB Client는 MySQL Workbeanch보다 편리한 자동 완성 기능을 제공한다. 이 DB 기능만 따로 분리한 것이 DataGrip이다. 아래 화면에서 + 버튼을 누르고 DB 정보를 입력한 뒤 Connection을 할 수 있다.

그렇다면 다음과 같이 DB가 연결된 것을 확인할 수 있다.

DB를 연결할 때 주의할 점이 있다. DB 접속 정보를 git에 올리면 DB가 바로 해킹당하게 된다. 보안은 습관이기 때문에 항상 커밋 전에 DB 연결 정보나 개인 정보가 유출될 우려가 없는지 검사하는 습관을 가져야 한다. 따라서 개인적인 정보를 변수로 바꿔 주는 방법을 사용해야 한다

Edit Configuration

run 버튼 아래 edit configuration을 선택한다.

Environmental variables 목록에서 편집 버튼을 누른다.

이후 host, user, password에 대한 값들을 환경 변수 저장한다.

Environmental Variable
환경 변수(Environment Variables)는 운영 체제에서 사용하는, 이름이 부여된 값들의 집합이다. 이러한 값들은 대부분 시스템 설정 정보를 포함하고 있으며, 운영 체제와 다양한 애플리케이션들이 이 정보를 참조하여 실행 환경을 구성하거나 특정한 동작을 수행합니다.

이후 Map 함수를 이용해 값을 받아온 뒤 이런 식으로 변수로 대체해 주면 된다.

getenv()는 자바의 System 클래스에 있는 정적 메서드로, 현재 실행되고 있는 프로세스의 환경 변수를 반환한다. 따라서 아까 설정해 둔 DB의 환경 변수를 반환해 준다.

Map<String, String> env = getenv(); 코드는 이 getenv() 메서드를 호출하여 모든 환경 변수를 가져오는 역할을 한다. 여기서 반환되는 Map 객체는 각 환경 변수의 이름을 키로, 해당 환경 변수의 값을 값으로 가진다.

public void check() throws SQLException, ClassNotFoundException {
        Map<String, String> env = 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 con = DriverManager.getConnection(dbHost, dbUser, dbPassword);

        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("SHOW DATABASES");
        rs = st.getResultSet();
        while (rs.next()) {
            String str = rs.getString(1);
            System.out.println(str);
        }
    }
profile
Huisu
이전 포스트

Techit 5th 4th

다음 포스트

Techit 6th 2nd

0개의 댓글