변수는 상자

 

프로그래밍에서 변수는 데이터를 저장하는 "이름이 있는 저장 공간"이다. 프로그램 실행 중에 특정 값을 저장하고, 필요할 때마다 그 값을 쉽게 불러오거나 변경할 수 있다.(상수는 변수와 비슷하지만 값이 변경이 안된다는 특징이 있다.)

 

int number; // number 라는 이름의 int(숫자)타입의 저장공간을 선언
String name; // name 이라는 이름의 String(문자열)타입의 저장공간을 선언

 

 

위의 상자 예시를 기준으로

  • int는 상자의 종류(골판지인지 플라스틱인지)
  • number는 상자 앞에있는 myNum처럼 닉네임
  • 10은 상자에 저장할 값이다.
final int number = 10; // 1. 상수로 선언 (데이터 타입 앞에 final 을 붙이면 됩니다.)

 

+ 상수는 위와 같이 선언하면 된다.

 

 

변수는 크게 3가지의 형태가 존재한다.

기본형 변수 기본형 변수는 실제 데이터 값을 직접 저장하는 간단한 형태의 변수 (여긴 stack 자체에 값이 저장된다.)
[ int, char, boolean ]
참조형 변수 참조형 변수는 데이터가 저장된 메모리 주소를 참조 (여긴 stack에 주소, heap에 값이 저장된다.)
[ String, ArrayList, MyClass ]
래퍼 클래스 변수 기본형 변수를 객체로 다룰 수 있도록 감싸주는 클래스

 

+ 알아두면 좋은 상식 : 기본형 변수는 소문자로 참조형은 대문자로 시작한다

 1. 기본형 변수 (Primitive Type)
기본형 변수는 실제 데이터 값을 직접 저장하는 간단한 형태의 변수입니다. Java에서는 8가지 기본형이 있으며, 대표적인 예시는 아래와 같습니다.

#### 논리형 (boolean)
- **`boolean`**: 참(true) 또는 거짓(false)만 저장할 수 있습니다.

  boolean flag = true;



#### 문자형 (char)
- **`char`**: 하나의 문자만 저장합니다. 작은 따옴표('')로 문자를 감싸서 사용합니다.

  char alphabet = 'A';

 

  • 문자 (char)
    • 문자 뒤에 \0(널문자)가 없습니다. (1 byte만 쓰기 때문에 끝을 알아서 데이터만 저장하면 됩니다.)
  • 문자열 (String)
    • 문장의 끝에 \0(널문자=빈공간)가 함께 저장이 됩니다. (몇 개의 byte를 쓸지 모르기 때문에 끝을 표시해야 합니다.)


#### 정수형 (byte, short, int, long)
- **정수형**은 정수를 저장하며, 사용할 범위에 따라 다양한 타입을 제공합니다.
  - **`byte`**: -128 ~ 127
  - **`short`**: -32,768 ~ 32,767
  - **`int`**: -2,147,483,648 ~ 2,147,483,647
  - **`long`**: 매우 큰 수 범위, 숫자 뒤에 **`L`**을 붙여 표기

 

  int number = 2147483647;
  long largeNumber = 9223372036854775807L;



#### 실수형 (float, double)
- **실수형**은 소수점을 가진 실숫값을 저장합니다. 사용 범위에 따라 `float`와 `double`로 나뉩니다.
  - **`float`**: 소수점 이하 약 7자리까지 저장 가능, 숫자 뒤에 **`f`**를 붙여 표기
  - **`double`**: 소수점 이하 약 16자리까지 저장 가능

  float decimal = 3.14f;
  double largeDecimal = 3.141592653589793;



---

2. 참조형 변수 (Reference Type)
참조형 변수는 데이터가 저장된 메모리 주소를 참조합니다. 참조형 변수의 주요 종류는 다음과 같습니다.

= 기본형 변수와 다르게 상자에 물건을 직접 담는게 아니라 물건이 있는 주소를 상자에 넣는다는 것이다.

  • 기본형 변수 : 원본 값이 Stack 영역에 있다.
  • 참조형 변수 : 원본 값이 Heap 영역에 있다.
  • Stack 영역에는 따로 저장 해둔 원본 값의 Heap 영역 주소를 저장합니다.
  • 주소값(객체 위치, 변수 위치)을 저장하는 변수


#### 문자열 (String)
- **`String`**: 여러 문자를 조합한 문자열을 저장합니다. 큰 따옴표("")로 감싸서 사용합니다.

  String message = "Hello World";

= String은 message라는 상자에 "Hello World"를 넣는 것이 아닌 Hello World가 저장된 주소를 저장한다.

 

  • "Hello World"라는 문자열이 메모리의 힙 영역에 저장됩니다.
  • 변수 message는 스택 영역에 저장되고, 이 변수는 "Hello World"가 있는 메모리 위치를 참조(가리키는)합니다.
  • 이렇게 message 변수를 사용하면 "Hello World"가 있는 위치로 접근할 수 있게 됩니다.



#### 객체, 배열, 리스트 (Object, Array, List 등)
- 다양한 형태의 데이터나 객체들을 저장하는 변수 타입입니다.

 

  int[] numbers = {1, 2, 3}; // 배열 예시



---

3. 래퍼 클래스 변수 (Wrapper Class)
기본형 변수를 객체로 다룰 수 있도록 감싸주는 클래스입니다. 예를 들어, `int` 기본형 변수는 `Integer` 래퍼 클래스로 사용할 수 있습니다. Java의 객체지향 기능을 활용할 때 유용합니다.

// 박싱 VS 언박싱

// 박싱
// Integer 래퍼 클래스 num 에 21 의 값을 저장
int number = 21;
Integer num = new Integet(number);

// 언박싱
int n = num.intValue(); // 래퍼 클래스들은 inValue() 같은 언박싱 메서드들을 제공해줍니다.
  • 박싱 VS 언박싱
    • 기본 타입에서 래퍼 클래스 변수로 변수를 감싸는 것을 “박싱”이라고 부르며
    • 래퍼 클래스 변수를 기본 타입 변수로 가져오는 것을 “언박싱”이라고 부릅니다.

래퍼 클래스 변수

 

 

변수형 변환

  • 형변환에 대한 이해
    • Java 프로그래밍을 하다 보면 문자열로 입력받은 변수를 숫자로 변환해서 계산을 하고 싶은 경우, 문자열에 숫자 값을 추가하고 싶은 경우 등… 어떤 변수형을 다른 형으로 변환이 필요한 경우가 많습니다.
    • 형변환은 주로 기본형 변수인 정수 ↔ 실수 ↔ 문자 들 사이에서 일어나며 방법은 아래와 같습니다.
  • 정수형, 실수형 간 발생하는 형변환
    • Double, Float to Int
    • (Int) 캐스팅 방식으로 실수를 정수로 치환하는 방법입니다.
    • 이때 실수형의 소수점 아래 자리는 버려집니다.
    •  
double doubleNumber = 10.101010;
float floatNumber = 10.1010

int intNumber;
intNumber = (int)doubleNumber; // double -> int 형변환
intNumber = (int)floatNumber; // float -> int 형변환
  • Int to Double, Float
  • (Double, Float) 캐스팅으로 정수형을 실수형으로 변환하는 방법입니다.
int intNumber = 10;

double doubleNumber = (double)intNumber; // int -> double 형변환
float floatNumber = (float)intNumber;  // int -> float 형변환

 

  • 자동 형변환
    • Java 프로그래밍에서 형변환을 직접적으로 캐스팅하지 않아도 자동으로 형변환 되는 케이스가 있습니다.
    • 프로그램 실행 도중에 값을 저장하거나 계산할 때 자동으로 타입 변환이 일어납니다.

1) 자동 타입 변환은 작은 크기의 타입에서 큰 크기의 타입으로 저장될 때 큰 크기로 형변환이 발생합니다.

    • 더보기

      📌 변수 타입별 크기 순서

      byte(1) → short(2) → int(4) → long(8) → float(4) → double(8)

byte byteNumber = 10;
int intNumber = byteNumber;    // byte -> int 형변환
System.out.println(intNumber); // 10

char charAlphabet = 'A';
intNumber = charAlphabet;   // char -> int 형변환
System.out.println(intNumber); // A의 유니코드 : 65

intNumber = 100;
long longNumber = intNumber; // int -> number 형변환
System.out.println(longNumber); // 100

intNumber = 200;
double doubleNumber = intNumber; // int -> double 형변환
System.out.println(doubleNumber); // 200.0  (소수점이 추가된 실수출력)

 

2) 작은 크기의 타입이 큰 크기의 타입과 계산될 때 자동으로 큰 크기의 타입으로 형변환이 발생합니다.

int intNumber = 10;
double doubleNumber = 5.5;
double result = intNumber + doubleNumber; // result 에 15.5 저장됨 (int -> double)

intNumber = 10;
int iResult = intNumber / 4; // iResult 에 2 저장됨 (int형 연산 -> 소수점 버려짐)

intNumber = 10;
double dResult = intNumber / 4.0; // dResult 에 2.5 저장됨 (double형 연산 -> 소수점 저장)
  • 🔥 자동 형변환 vs 강제 형변환
    • 작은 타입 > 큰 타입 형변환 시 (자동 형변환)
      • 더 큰 표현 범위를 가진 타입으로 변환되는 것이라 값의 손실이 없습니다.
      • 값의 손실 없이 변환이 가능하기 때문에 컴파일러가 자동으로 형변환을 해줍니다.
    • 큰 타입 > 작은 타입 형변환 시 (강제 형변환 = 캐스팅)
      • 더 작은 표현 범위를 가진 타입으로 변환된는 것이라 값의 손실이 생깁니다.
      • 값의 손실이 생기기 때문에 자동으로 형변환을 해주지 않고 개발자가 선택하여 형변환을 합니다. 

 

 

+ 비트&바이트

비트(Bit)와 바이트(Byte)는 컴퓨터에서 데이터의 가장 작은 단위로, 모든 디지털 데이터는 이 단위로 이루어져 있습니다.

Byte(바이트)는 8개의 Bit(비트)로 구성되어 있습니다.

  • Bit
    • Bit(비트)는 0,1 형태의 2진수 데이터로써 컴퓨터가 저장(표현) 할 수 있는 최소 단위입니다.
    • 정수형 값은 10진수 숫자(0~10범위의 숫자)이며 2진수(0~1범위) Bit로 저장(표현) 합니다.
    • 4개의 Bit로 16진수 숫자(0~F(16) 범위의 숫자)를 2진수(0~1범위) Bit로 저장(표현) 합니다.
    • 2진수(0~1)를 10진수, 16진수로 변환된 값 예시
  • Byte = 8 Bit
    • Byte(바이트)는 8개의 Bit(비트)로 구성되어 있습니다.
    • 1 Byte 내에서 숫자 변수는 Bit 2진수를 10진수로 저장(표현)을 합니다.
      • 10진수로는 0~255(2의8승)까지 저장(표현) 합니다.
    • 1 Byte 내에서 문자 변수의 경우만 Bit 2진수를 16진수로 저장(표현) 합니다.

 

'Back-End (Web) > JAVA' 카테고리의 다른 글

[JAVA] 조건문  (0) 2024.11.11
[JAVA] 연산자  (0) 2024.11.11
[JAVA] 자바 개발을 위한 준비물 IntelliJ  (0) 2024.11.11
[JAVA] JVM은 뭘까?  (1) 2024.11.11
[JAVA] 자바란 무엇일까?  (0) 2024.10.31

IntelliJ

 

IntelliJ는 JetBrains에서 개발한 강력한 통합 개발 환경(IDE)으로, 특히 **Java 개발**에 최적화되어 있지만, 다양한 프로그래밍 언어와 프레임워크를 지원한다. IntelliJ IDEA(이하 IntelliJ)는 코드 작성부터 디버깅, 테스트, 배포까지 개발 과정 전반에 걸쳐 다양한 기능을 제공하여, 개발 생산성을 높이는 데 큰 도움을 준다.

말이 어려워 보이지만, 프로그램이라는 그림을 그리기 위해 필요한 그림판이라고 보면된다. 다만 여러가지 유용한 기능이 있어 그림판 보다는 태블릿에 가깝다고 생각하면 좋다.

 

과거에는 이클립스라는 프로그램이 많이 사용되었지만 다양한 편의성과 기능으로 현재는 대부분의 웹 개발자가 IntelliJ를 사용하고 있다.

 

 

  • Java 프로그램(앱)의 시작점!
    • Java 앱은 실행되면 제일 먼저 클래스의 main 메서드를 실행시키는 게 JVM의 약속이다.
    • 단순히 main이라는 박스를 만들어서 이제부터 이 박스안에 원하는 프로그램을 만들거다 라는 것
public class Main {
	public static void main(String[] args) {
		System.out.println("Hello world!");
	}
}


### 클래스 정의
- **`public class Main { }`**
  - `public`: 다른 곳에서도 사용할 수 있도록 클래스 접근을 허용하는 접근 제어자.

  -  접근 제어자 : 클래스, 메서드, 변수 등 특정 코드 요소에 대한 접근 권한 
  - `class`: 객체(데이터와 기능의 묶음)를 만들기 위한 선언.
  - `Main`: 클래스 이름. Java에서는 파일명과 같아야 함. 컴파일 후 `.class` 파일을 생성할 때 이름을 맞춰주기 위해 필요.

### 메인 메서드 정의
- **`public static void main(String[] args)`**
  - `public`: 다른 곳에서 이 메서드를 실행할 수 있게 함.
  - `static`: 프로그램 시작 시 한 번만 실행되는 메서드. 다른 `static` 메서드나 변수만 호출 가능.
  - `void`: 메서드가 값을 반환하지 않음을 의미.
  - `main`: 프로그램 시작점이 되는 메서드. Java 프로그램은 항상 `main` 메서드부터 시작.

### 메서드 매개변수
- **`(String[] args)`**
  - `String[]`: 문자열들의 배열, 즉 여러 개의 문자열을 저장할 수 있는 데이터 타입.
  - `args`: 배열의 이름으로 사용자가 지정할 수 있음.

 

  • 가장 많이 쓰는 메서드 System.out.print()
System.out.print("데이터1"); // "데이터1" 라는 문자를 출력
System.out.print("데이터2"); // 이어서 "데이터2" 라는 문자를 출력

// 실행 결과
데이터1데이터2

System.out.print() 메서드를 사용하면 출력창에 괄호() 안으로 전달된 데이터를 출력해 준다.

 

  • 줄바꿈 추가 메서드 System.out.println()
System.out.print(7);
System.out.println(3);
System.out.println(3.14);
System.out.println("JAVA");

// 실행 결과
7
3
3.14
JAVA

System.out.print() 메서드를 사용하면 출력창에 괄호() 안으로 전달된 데이터를 줄바꿈 하면서 출력해 준다.

'Back-End (Web) > JAVA' 카테고리의 다른 글

[JAVA] 조건문  (0) 2024.11.11
[JAVA] 연산자  (0) 2024.11.11
[JAVA] 변수와 변수 종류  (0) 2024.11.11
[JAVA] JVM은 뭘까?  (1) 2024.11.11
[JAVA] 자바란 무엇일까?  (0) 2024.10.31

<해당 내용은 내일배움 캠프의 강의를 토대로 제작되었습니다.>

 

JVM (Java Virtual Machine)의 약자로 "자바 가상 머신"이라는 뜻이다.

단순히 여러가지 기기위에 Java 프로그램을 실행 시킬 수 있는 가상의 기기를 만들어 준다.

= 컴퓨터나 핸드폰이라고 해서 자바가 실행되는 것이 아닌, JVM을 통해 컴퓨터나 핸드폰 안에 java를 실행할 수 있는 가상의 기기를 추가해야한다.

자바의 실행 과정

1. 프로그래머는 Java라는 인간이 이해할 수 있는 언어를 기반으로 프로그램을 제작한다.

2. 자바는 운영체제가 이해할 수 있는 형태로 java 언어를 변환하기 위해 Java Compiler를 통해 바이트 코드(운영체제가 이해할 수 있는 언어 형태)로 변환한다.

3. 바이트 언어를 또 기계가 이해할 수 있는 기계어로 번역해 줘야 기기들이 코드를 이해할 수 있는데, 이 번역해주는 부분이 인터프리터, 인터프리터의 효율을 높혀주는 부분이 JIT 컴파일러다.

 

인터프리터

  • 운영체제가 읽은 바이트 코드[운영체제 언어]를 기기(기계)가 실행할 수 있는 기계어로 번역

JIT 컴파일러

  • 인터프리터[운영체제 언어 번역기]의 효율을 높여주는 서포터 해석기

메모리 영역

  • 운영체제로부터 JVM[자바 실행용 가상 기기]이 할당받은 메모리 영역

클래스 로더

Java .class 바이트 코드[운영제제 언어]를 메모리 영역에 담는 운반기

  • JVM으로 class(바이트 코드 [운영제제 언어] )를 불러와서 메모리에 저장함

 

 

JRE

  • 자바의 대표적인 JVM으로, 자바 실행 환경(Java Runtime Environment) 이다.
  • 이게 설치되어 있는 모든 기기는 java 프로그램을 실행 시킬 수 있다.
  • JDK 가 javac 명령을 통해 .java 파일을 실행 가능한 .class 파일로 변환해 줍니다.
  • = 프로그래머가 짠 코드를 운영체제가 이해할 수 있는 코드로 변역해준다.

JDK

  • 자바 개발 키트(Java Development Kit)라는 뜻으로 Java의 개발이 가능하게 만들어주는 프로그램이다.
  • JRE를 포함하는 키트로 덕뿐에 자바의 실행이 가능하다.
  • JDK는 .java 파일들을 .class 파일들로 변환해 주는 Java Compiler(javac) 기능이 있다.
  • JDK는 코드를 디버깅(오류 확인, 추적)하는 jdb 등의 기능이 있다.

 

+ 디버깅(Debugging)은 소프트웨어 개발 과정에서 프로그램의 오류(버그)를 찾아내고 수정하는 작업을 말한다.

  • 프로그램을 한줄 한줄 실행하면서 오류가 있는 부분을 찾아낸다.

'Back-End (Web) > JAVA' 카테고리의 다른 글

[JAVA] 조건문  (0) 2024.11.11
[JAVA] 연산자  (0) 2024.11.11
[JAVA] 변수와 변수 종류  (0) 2024.11.11
[JAVA] 자바 개발을 위한 준비물 IntelliJ  (0) 2024.11.11
[JAVA] 자바란 무엇일까?  (0) 2024.10.31

https://github.com/kyung412820/NoBase-Introduce

 

GitHub - kyung412820/NoBase-Introduce

Contribute to kyung412820/NoBase-Introduce development by creating an account on GitHub.

github.com

 

구현에는 어제 학습했던 프론트엔드 관련 지식이 함유되었다.

가장 기본이 되는 Java Script + HTML + CSS를 바탕으로 웹페이지의 화면과 이동을 구현하였다

 

대부분의 패널이 위와 같은 방식으로 구현되었지만, 이 프로젝트에서 가장 중요했던 부분은 역시 [ FIRE BASE ] 이 스텍 부분이였다.

 

파이어 베이스는 NoSQL을 기반으로한 데이터 베이스로, 구글에서 제공하는 데이터 스토리지 서버다. 단순히 말하면 일반적으로 말하는 서버의 역활을 구글이 무료로 제공해 준다고 생각하면 편하다.

 

 

FIRE BASE에서 프로젝트를 생성하면 이렇게 데이터 베이스를 사용할 수 있게 된다.

 

 

다만 데이터 베이스를 생성하더라도 위와 같이 앱을 설정을 해줘야 내 웹 코드에서 사용이 가능한데

 

1. 앱은 앱플리케이션을 말하는 것이 맞지만, 흔히 아는 스마트폰의 프로그램만을 의미하는 것이 아닌 원래 의미는 응용 소프트웨어를 말한다.

 

2. 그럼 응용 소프트웨어는 뭔가, 컴퓨터의 기본 시스템인 OS를 제외한 모든 프로그램을 말한다. 크롬, 게임, 알약과 같은 모든 프로그램이 이에 포함된다.

 

3. 이러면 웹 앱은 이해가 쉽다. 웹 서버에서 실행되며, 웹 브라우저를 통해 접근할 수 있는 소프트웨어 애플리케이션으로 간단히 말하면 '웹에서 사용되는 프로그램' 이라는 의미다.

 

4. 내 서버(FIRE BASE 서버)에서 웹 앱을 만든 다는 것은, 내 FIRE BASE에서 사용할 프로그램을 만든다는 것이다. (여기서는 서버에 접근할 수 있는 키를 제공하거나 내가 만든 프로그램에 서버를 연결하는 기능을 메인으로 사용했다.)

 

 

실제로 FIRE BASE는 위의 이미지에서 녹색 칠이 되어있는 부분에서 서버 접속에 필요한 키를 제공해 준다.

 

 

 

당연히 프로그램이 서버에 접속하는 입장이니 "나도 니네 서버 키 있어"라고 알려줘야 하기에, 프로그램 상에도 해당 키 부분이 포함되어야 한다.

 

 

 

위의 예시는 엄밀히 말하면 잘못된 예시지만, 위와 같은 느낌으로 클라이언트는 서버에 내가 입장권이 있다고 알려주는 것이다. 입장권이 맞다면 서버는 클라이언트에게 반대로 데이터를 제공해 준다는 것

 

 

이를 이용하여 코드를 구축하면

        $("#postingbtn").click(async function () {
            let name = $('#name').val();
            let pw = $('#pw').val();
            let content = $('#content').val();
            let date = new Date().toISOString();

            // Firestore에서 비밀번호 가져오기
            let passwordDoc = await getDocs(collection(db, "password"));

            // 비밀번호가 포함된 첫 번째 문서 가져오기
            let storedPw = '';
            passwordDoc.forEach(doc => {
                storedPw = doc.data().password; // 비밀번호 가져오기
            });
            console.log('Stored Password:', storedPw);
            // 비밀번호가 '1'인지 확인
            if (pw === storedPw) {
                let doc = {
                    'name': name,
                    'pw': pw,
                    'content': content,
                    'date': date
                };

                await addDoc(collection(db, "postmessage"), doc);
                alert('저장완료!');
                window.location.reload();
            } else {
                alert('비밀번호를 확인해 주세요');
            }
        })

        let docs = await getDocs(collection(db, "postmessage"));
        docs.forEach((doc) => {
            let row = doc.data();

            let name = row['name'];
            let pw = row['pw'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
        <div class="post-entry">
            <div class="post-header">
                <span class="post-name">${name}</span>
                <p>${date}</p>
            </div>
            <hr class="post-divider"> 
            <div class="post-footer">
                <small class="post-date"">${content}</small>
            </div>
        </div>`;
            $('#message').append(temp_html);
        });

위와 같은 방식으로 구현할 수 있는데

 

이해가 힘들 수 있으니 특정 코드에 대해 설명해 보자 

await addDoc(collection(db, "postmessage"), doc);

1. 위 코드에서 doc = document 즉, 문서를 말한다.

2. addDoc은 '문서에 더하라' 라는 의미이다.

3. collection(db, "postmessage")는 'postmessage라는 이름의 데이터 베이스'를 의미한다.

4. doc은 내가 선언한 변수로, 현재 수정하고 있는 문서의 내용을 의미한다.

 

즉, 위 코드의 의미는

postmessage라는 이름의 데이터 베이스에 내가 수정한 문서를 서버 문서에 추가해라 라는 의미이다.

 

let docs = await getDocs(collection(db, "postmessage"));

그럼 이 부분은? 

반대로 postmessage라는 이름의 데이터 베이스에서 문서를 가져와서 docs라는 변수에 추가해라 라는 의미가 된다.

 

위 내용을 토대로 서버 문서에는 name, pw, content, date라는 4개의 데이터 들이 하나의 문서로 합쳐진 다음 서버에 문서로서 업로드 되거나 반대로 불러와 진다.

 

 

아래는 실제로 어떤 변화가 생기는 지 설명하려 한다.

<위는 내가 생성한 프로그램>

 

<여기는 FIRE BASE의 데이터 베이스>

 

이렇게 맨 위의 커뮤니티 탭에서 [ 닉네임(name), pw, 내용(content) ]를 저장하면 아래와 같이 서버에 직접적으로 저장되고, 커뮤니티는 다시 서버에서 데이터를 불러와 오른쪽 패널에 서버에 있는 데이터를 띄운다.

 

간단한 서버와 클라이언트 간의 소통을 구현한 것으로, 백엔드라고 부를 수 있는 건지는 모르겠지만, 서버 통신이 가능했다는 것은 분명한 사실이다.

 

요새는 대부분의 기업이 firebase보다는 AWS와 같은 서버를 이용하지만 아직 기초단계인 나에게는 이정도가 딱 적당할 듯 싶다.

 

빨리 AWS나 Oracle, JPA, SPRING 과 같은 백엔드의 메인이라 불리는 기술들을 사용해 볼 수 있었으면 좋겠다.

'Back-End (Web)' 카테고리의 다른 글

프론트 웹 개발 기본  (0) 2024.11.04

프론트의 개발에는 기본적인 3가지의 요소가 있다. javascript, html, css 이렇게 3가지가 각각 행동, 뼈대, 치장의 역활을 수행하고 관계가 유기적으로 연동되어 우리가 보는 화면으로서 구현된다.

 

 

 

 

위와 같은 간단한 웹사이트를 제작하는 것은 위의 3개 만으로도 가능한데, 여기서 조금 더 욕심을 부린다면, JQuery와 Firebase와 같은 데이터 베이스를 추가하거나 Bootsrtrap을 통해 편리한 아트를 진행할 수 있다.

firebase jquery bootsrtrap
데이터 서버 데이터 쿼리 스타일 프리셋

 

 

위의 요소들을 종합하면 아래와 같은 코드가 등장한다

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>나만의 추억앨범</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            color: white;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            font-size: 200px; /* 크기를 줄여보세요 */
            font-family: "Playfair Display", serif;
            font-optical-sizing: auto;
            font-style: normal; /* 폰트 패밀리 수정 */
            padding-left: 50px;
            font-weight: bold;
            background-image: url('https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=11289000&filePath=L2Rpc2sxL25ld2RhdGEvMjAxNS8wMi9DTFM2OS9OVVJJXzAwMV8wNDg2X251cmltZWRpYV8yMDE1MTIwMw==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10006');
            background-position: center;
            background-size: cover;
        }

        .mybottom {
            background-color: rgb(22, 11, 46); /* 배경색을 검은색으로 설정 */
            color: white;

            height: 200px;

            /* 내용물을 정렬 */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding-left: 50px; /* 왼쪽 여백 */
            font-weight: bold;

            bottom: 0; /* 하단에 배치 */
            left: 0; /* 왼쪽에 배치 */
            right: 0; /* 오른쪽으로 꽉 차게 */

            
            background-image: url('https://png.pngtree.com/thumb_back/fw800/background/20231006/pngtree-a-3d-illustration-of-space-flight-journeying-amidst-billions-of-stars-image_13537046.png');
            background-position: center;
            background-size: cover;            
        }

        .mytitle>button {
            width: 150px;
            height: 50px;
            background-color: transparent;
            border: none;
            color: white;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;

            border: 1px solid white;
            margin-top: 20px;
        }

        /* 입력 박스 스타일 */
        .mypostingbox {
            width: auto; /* 고정된 너비 설정 */
            padding: 20px; /* 내부 여백 */
            border: 1px solid #ccc; /* 테두리 */
            border-radius: 5px; /* 모서리 둥글게 */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
        }

        /* 카드 스타일 */
        .mycards {
            flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
            max-height: 400px; /* 고정된 높이 설정 */
            overflow-y: auto; /* 세로 스크롤 가능 */
            padding: 10px; /* 내부 여백 */
            border: 1px solid #ccc; /* 테두리 */
            border-radius: 5px; /* 모서리 둥글게 */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
        }

        /* 카드의 이미지 크기 조정 */
        .card-img-top {
            height: 200px; /* 카드 이미지 높이 고정 */
            object-fit: cover; /* 비율 유지하며 자르기 */
        }

        .mainmypostingbox {
            width: auto;
            margin: 20px auto;
            padding: 20px 20px 20px 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 0px blue;
        }

        .semimypostingbox {
            background-color: green;
            color: white;

            height: 300px;

            /* 내용물을 정렬 */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px; /* 공백 간격 조정 */
            font-weight: bold;
            font-size: 25px;

            width: 45%; /* 너비 조정 */
            margin: 20px 30px 100px 30px; /* 위, 오른쪽, 아래, 왼쪽 여백 */
            padding: 20px; /* 패딩 설정 */
            border-radius: 5px;
            box-shadow: 0px 0px 3px 0px blue;

            background-image: url('https://img.freepik.com/free-photo/anime-style-mountains-landscape_23-2151135118.jpg');
            background-position: center;
            background-size: cover;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 10px;
        }
        .paceimage {
            display: flex;
            justify-content: space-around; /* Or any alignment you prefer */
            margin: 20px 0; /* Adjust the spacing around the images */
        }

        .paceimage img {
            width: 150px; /* Set desired width */
            height: 150px; /* Maintain aspect ratio */
            border-radius: 10px; /* Optional: adds rounded corners to images */
            transition: transform 0.2s; /* Adds a hover effect */
        }

        .paceimage img:hover {
            transform: scale(1.5); /* Scale up on hover */
        }

        .fade-in {
        opacity: 0; /* 초기 투명도 설정 */
        transition: opacity 1s ease-in; /* 부드러운 전환 */
        }
        
        .mybtn>button {
            margin-right: 10px;
        }
    </style>
    <script type="module">
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyCz-aTF0iQvQilKJyrTHQxg1T2X_13trtw",
            authDomain: "sparta-49ce5.firebaseapp.com",
            projectId: "sparta-49ce5",
            storageBucket: "sparta-49ce5.appspot.com",
            messagingSenderId: "819019173056",
            appId: "1:819019173056:web:e47a0781c0b38268923125",
            measurementId: "G-0NFWX91DD1"
        };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        $("#postingbtn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            };
            await addDoc(collection(db, "albums"), doc);
            alert('저장완료!');
            window.location.reload();
        })

        $("#savebtn").click(async function () {
            $('#postingbox').toggle();
        })


        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url).then(res => res.json()).then(data => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
            $('#msg').text(mise)
        })

        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();

            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });

    </script>
</head>

<body>
    <div class="mytitle">
        <p>No Base</p>
    </div>

    <div class="mytab">
        <button onclick="location.href='teamintroduce.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            팀 소개
        </button>
        <button onclick="location.href='team_member_2.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            방명록
        </button>
        <button onclick="location.href='team_member_3.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            팀 수정
        </button>
        <button onclick="location.href='team_member_4.html'" style="width: 100px; height: auto; border: none; background: none; padding: 10px; font-size: 16px;">
            학습 기록
        </button>
    </div>

    <div class="mainmypostingbox" id="postingbox">
        <h1>Team Goal</h1>
        <p style="margin: 5px 0;">1. javascript, http, css를 이용한 기본적인 웹페이지 개설 능력 강화</p>
        <p style="margin: 5px 0;">2. Firebase를 통한 Api의 사용 이해</p>
        <p style="margin: 5px 0;">3. 팀활동을 통한 팀워크 개발</p>
    </div>

    <div class="paceimage">
        <a href="teamintroduce.html">
            <img src="경훈.jpg" alt="Team Member 1" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_2.html">
            <img src="영균님.jpg" alt="Team Member 2" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_3.html">
            <img src="윤현님.jpg" alt="Team Member 3" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_4.html">
            <img src="경빈님.jpg" alt="Team Member 4" style="width: 100px; height: auto;">
        </a>
        <a href="team_member_5.html">
            <img src="준일님.jpg" alt="Team Member 5" style="width: 100px; height: auto;">
        </a>
    </div>
    

        <div class="semimypostingbox" id="postingbox" style="display: inline-block;">
            <h1>My Strength</h1>
            <p style="margin: 10px 0;">1. 타인에 비해 흥미가 많은 편입니다.</p>
            <p style="margin: 10px 0;">2. 무언갈 도전하는 것을 즐깁니다.</p>
            <p style="margin: 10px 0;">3. 팀활동을 다양하게 해봤습니다.</p>
        </div>
        <div class="semimypostingbox" id="postingbox" style="display: inline-block;">
            <h1>Collaborative Style</h1>
            <p style="margin: 10px 0;">1. 팀원들이 하고자 하는 방향을 잡고 일을 완수할 수 있도록 조력</p>
            <p style="margin: 10px 0;">2. 학생의 입장으로 서로에게 배우는 자세</p>
            <p style="margin: 10px 0;">3. 서로의 의견을 존중하고 배려</p>
        </div>        
    </div>


    


</body>

</html>

 

아직 리엑트와 같은 고급 기술은 사용안해봤지만, 기본이라도 역시 쉽지 않은 것 같다.. 좀 더 열심히 해야할 것 같다.

'Back-End (Web)' 카테고리의 다른 글

FIRE BASE 서버 통신  (0) 2024.11.06

자바란 무엇일까?

  • 자바는 썬 마이크로시스템즈의 제임스 고실링과 다른 연구가들이 개발한 객체 지향적 프로그래밍 언어이다.

 

자바는 왜 배울까?

 

1) 자바는 간단하다.

- 타 언어에 비해 이해하기 쉽고 단순한 개발이 가능하다는 장점이 있어 현재 널리 사용되고 있다.

 

2) 객체지향 언어다.

- 추후 다시 기술할 예정인 객체지향이란, 코드를 기능별로 박스에 담는다고 생각하면 된다. 이 박스 하나하나가 객체라 불리며, 문제가 생기거나 수정할때 해당 박스 하나만 수정하면 되도록 설계되어 있어 유지보수, 안전성에서 유리하다.

 

3) 한국에서 많이 쓴다...

- 웹 개발에 있어서 한국은 자바 왕국이라는 말이 있을 정도로 자바를 주력으로 많이 사용한다. 취업에 한에서만 이야기하면 자바를 배우는 것이 취업의 문은 상대적으로 넓다는 것 (다만 2024년 기준으로는 개발자 시장이 많이 죽어서 취업이 힘든건 매한가지이다..)

 

 

 

 

'Back-End (Web) > JAVA' 카테고리의 다른 글

[JAVA] 조건문  (0) 2024.11.11
[JAVA] 연산자  (0) 2024.11.11
[JAVA] 변수와 변수 종류  (0) 2024.11.11
[JAVA] 자바 개발을 위한 준비물 IntelliJ  (0) 2024.11.11
[JAVA] JVM은 뭘까?  (1) 2024.11.11

+ Recent posts