Song’s AI & Dev Log

1. JQuery란

JQuery는 자바스크립트의 기능을 쉽게 사용할 수 있도록 만든 오픈소스 경량 라이브러리이다.
2006년에 출시되어 DOM 조작, 이벤트 핸들링, AJAX, 애니메이션 등을 간결한 코드로 구현할 수 있도록 도와주었으며, 특히 브라우저 간 호환성을 해결하는 역할을 하며 웹 개발의 표준으로 자리 잡았다.

과거에는 브라우저마다 자바스크립트 코드가 다르게 동작하는 경우가 많았는데 JQuery를 사용하면 다양한 브라우저에서 동일하게 작동할 수 있도록 만들 수 있었다.

하지만 최근에는 JavaScript 자체의 발전과 React, Vue 같은 프레임워크의 등장으로 인해 JQuery의 필요성이 줄어들었다.

※  JQuery를 자바스크립트 쿼리(JavaScript Query)의 약자로 생각하는 경우가 있는데, Query 개념을 차용한 이름일 뿐 약어는 아니다. JQuery를 John Resig이 만들었다고 하지만 JQuery의 J는 John Resig 의 J를 의미하는 것은 아니고 특별한 의미는 없다고 한다.

2. JQuery를 사용했던 이유

과거에는 JavaScript만으로 웹을 개발하려면 브라우저별 코드 차이, 긴 코드 작성, 복잡한 이벤트 처리 등의 문제가 많았다.  반면 JQuery는 짧고 직관적인 코드로 이러한 문제를 해결하면서 한때 웹 개발에서 매우 인기 있었다.

2-1. 브라우저 호환성 해결

과거에는 Internet Explorer, Firefox, Chrome, Safari 등 브라우저마다 JavaScript 코드의 동작 방식이 달랐다. 즉, 한 브라우저에서 정상적으로 실행되던 코드가 다른 브라우저에서는 작동하지 않는 문제가 자주 발생했다. 그러나 jQuery를 사용하면 동일한 코드가 다양한 브라우저에서 안정적으로 작동되었다.

2-2.  간결한 문법

document.querySelector() 대신 $('#id')처럼 기존 JavaScript 코드보다 훨씬 짧고 직관적인 문법을 제공하여 가독성과 유지보수성을 크게 향상시켰다. 

2-3. DOM 조작이 간편함

HTML 요소를 선택하고 추가/수정/삭제하는 기능을  .addClass(), .removeClass(), .html(), .append(), .prepend()와 같은 단순한 메서드로 제공하여 복잡한 DOM 조작을 쉽게 수행할 수 있었다.

2-4. 이벤트 핸들링 단순화

$('#btn').click(function() {...}) 같은 방식으로 간단하게 이벤트 리스너를 추가하는 코드가 단순해졌고, 브라우저 간 차이도 자동으로 해결되었다.

2-5. AJAX 요청 간소화

과거에는 AJAX 요청을 만들 때 XMLHttpRequest 객체를 직접 사용해야 했기 때문에 코드가 복잡했다. 그러나 JQuery는 $.ajax(), $.get(), $.post() 와 같은 간단한 메서드를 제공하여 XMLHttpRequest보다 간단한 방식으로 비동기 요청을 쉽게  처리할 수 있도록 했다. 그래서 fetch()가 나오기 전까지 많이 사용되었다.

2-6. 애니메이션 기능 제공

기본적으로 fadeIn(), fadeOut(), slideUp(), slideDown() 같은 내장 애니메이션 효과를 제공해서 쉽게 구현할 수 있었다.

2-7. 강력한 플러그인 생태계

다양한 jQuery 플러그인을 이용해 기능을 쉽게 확장할 수 있었다. 예를 들면 슬라이더, 모달창, 드래그 앤 드롭, 데이터 테이블 등의 기능을 플러그인 하나만 추가하면 간편하게 구현할 수 있었다.

3. JQuery의 단점

최근에는 JavaScript 자체의 기능이 강화되고 최신 브라우저의 호환성이 좋아지면서 jQuery의 필요성이 급격히 줄어들었다. 특히 성능, 코드 최적화, 최신 프레임워크와의 충돌 등의 문제가 있어 새로운 프로젝트에서는 거의 사용되지 않는 추세다.

3-1. 파일 크기 문제

JQuery 라이브러리는 최소 90KB~100KB 이상의 용량을 차지하는 데다 라이브러리를 추가로 로드해야 하므로 페이지 속도가 느려질 수 있다. 반면, Vanilla JavaScript를 사용하면 필요한 기능만 구현할 수 있어 불필요한 리소스 로드를 줄일 수 있다. 즉, JQuery를 제거하면 파일 크기가 줄어들고 웹사이트 로딩 속도가 향상될 수 있다.

3-2. 성능 저하

JQuery는 DOM 조작을 쉽게 해주지만 성능 면에서는 Vanilla JavaScript보다 느릴 수 있다. 특히 $(selector).each(), .append(), .html() 같은 메서드를 사용할 때 브라우저 렌더링 속도가 느려질 수 있다.

JQuery의 each() 메서드는 내부적으로 반복문을 돌면서 불필요한 오버헤드가 발생하는 반면 Vanilla JS의 forEach()는 더 빠르고 가볍게 동작한다.

3-3. 최신 JavaScript의 발전

과거에는 document.querySelector() 같은 기본 기능도 지원되지 않아서 JQuery가 필수적이었지만, 현재는 JavaScript 자체가 크게 발전하면서 JQuery 없이도 동일한 기능을 가볍고 빠르게 구현할 수 있다.

3-4. 최신 프레임워크(React, Vue 등)와의 충돌 가능성

React, Vue, Angular 같은 최신 프레임워크는 가상 DOM 방식을 사용하여 자체적으로 상태 관리 및 렌더링을 처리한다. 반면에 JQuery는 직접 DOM을 조작하는 방식이기 때문에 최신 프레임워크와 충돌할 가능성이 높다.

3-5. 유지보수가 어려움 (레거시 코드 문제)

JQuery로 작성된 레거시 코드는 최신 기술과 호환이 어려울 수 있다. jQuery를 사용하면 의존성이 많아지고, 코드가 복잡해져서 특히 대규모 프로젝트에서 사용할 시 코드가 얽혀서 유지보수가 어려워질 가능성이 크다.

4. JQuery 대체 방법 

JQuery 없이 순수 JavaScript(바닐라 JS)로 대체하여 대부분의 기능을 구현할 수 있다.

4-1. 요소 선택 ($() → querySelector(), querySelectorAll())

과거에는 $('#id'), $('.class') 같은 JQuery 문법이 직관적이라 많이 사용되었지만 현재는 document.querySelector()와 document.querySelectorAll()을 사용하면 같은 기능을 구현할 수 있다.

4-2. 이벤트 핸들링 (.click() → addEventListener())

addEventListener()를 사용하면 JQuery 없이도 이벤트 처리가 가능하다.

4-3. 클래스 추가/제거 (.addClass(), .removeClass() → classList)

5. 결론: JQuery를 써야 할까?

과거에는 JQuery가 웹 개발의 필수 도구였지만, 지금은 상황이 완전히 달라졌다. 최신 웹 개발에서는 React, Vue, Angular 같은 프레임워크가 대세가 되면서 JQuery의 필요성이 거의 사라졌다.

다만, JQuery를 완전히 버려야 하는 것은 아니고 아래와 같은 특정 상황에서는 여전히 유용할 수 있다.

- 기존 프로젝트가 JQuery로 작성된 경우 레거시 코드 유지보수가 필요하다면 JQuery를 계속 사용할 수밖에 없다.

- 간단한 웹사이트나 내부 툴을 빠르게 만들 때는 JQuery가 여전히 유용할 수 있다.

- JQuery 기반 플러그인을 활용해야 하는 경우

지금은 fetch(), classList, async/await, React, Vue 등의 등장으로 JQuery 없이도 충분히 개발이 가능하지만 일부 기업 및 레거시 시스템에서는 여전히 사용되고 있다. 기존 코드 유지보수나 특정 상황에서는 필요할 수도 있어 JQuery를 알아두는 것이 도움이 될 수도 있다. 따라서 새로운 프로젝트에서는 최신 기술을 사용하되, 필요에 따라 학습하는 것이 바람직해 보인다.

Flask는 생성 시 폴더구조가 생성되지 않아 매우 유연하다.

그래서 한편으로는 폴더구조에 대해 고민이 많았는데, 어떤 구조가 좋을지는 프로젝트별로 다르다.

1. 일반적인 폴더구조

- 역할별로 구조화

- 코드가 역할별로 분리되어 있어 간단하고 직관적이다.

- 작은 프로젝트에 적합하다.

- 프로젝트가 커지면 디렉토리가 혼란스러워질 수 있고 관리가 어려워질 수 있다.

- 협업 시 비효율적이다.

project/
├── routes/
│   ├── main.py
│   ├── auth.py
├── services/
│   ├── db_service.py
│   ├── auth_service.py
├── static/
│   ├── css/
│   ├── js/
│   └── img/
├── templates/
│   ├── index.html
│   └── auth/
│       └── login.html
├── app.py
├── config.py
└── requirements.txt

2. 확장된 폴더 구조

- 기능별로 구조화

- 각 모듈이 독립적으로 설계되어 특정 기능 수정, 추가 시 해당 디렉토리만 수정하면 된다

- 팀 프로젝트에 유리 : 기능별로 별도의 디렉토리에서 작업할 수 있어 충돌이 적을 수 있다.

- 디렉토리 세분화시 관리가 복잡하고 불편할 수 있다.

project/
├── app/
│   ├── __init__.py
│   ├── main/
│   │   ├── __init__.py
│   │   ├── routes.py
│   │   └── templates/
│   │       └── main/
│   │           └── index.html
│   ├── auth/
│   │   ├── __init__.py
│   │   ├── routes.py
│   │   └── templates/
│   │       └── auth/
│   │           └── login.html
│   └── static/
│   └── services/
├── config.py
├── run.py
└── requirements.txt

3. 일반적인 폴더구조 한번에 생성하기

- 폴더를 하나 하나 만들려니까 너무 귀찮아서 코드 실행 시 한 번에 만들어지도록 작성했다.

import os

def create_project_structure(base_dir):
    """백엔드 폴더 구조 생성"""
    structure = {
        "app": {
            "__init__.py": None,
            "routes": {
                "home.py": None,
                "user.py": None,
                "admin.py": None,
            },
            "services": {
                "auth_service.py": None,
                "db_service.py": None,
            },
            "models": {
                "user.py": None,
                "post.py": None,
            },
            "static": {},
            "templates": {
                "index.html": None,
            },
            "config.py": None,
            "utils.py": None,
        },
        "run.py": None,
        "requirements.txt": None,
        ".env": None,
        ".gitignore": None,
    }

    def create_structure(base, struct):
        for name, content in struct.items():
            path = os.path.join(base, name)
            if isinstance(content, dict):
                os.makedirs(path, exist_ok=True)
                create_structure(path, content)
            else:
                if content is not None:
                    with open(path, 'w', encoding='utf-8') as f:
                        f.write(content)
                else:
                    open(path, 'a').close()

    create_structure(base_dir, structure)

# 실행
base_directory = "be"  # 루트 디렉토리
create_project_structure(base_directory)
print(f"Project structure created at {base_directory}")

- 위 코드 실행시 be/ 디렉토리에 각종 폴더와 파일들이 내용 없는 채로 생성된다.

- generate_structure.py 파일이 한 번에 필요한 폴더와 파일을 생성하는 파일이다.

파이썬을 공부하면서부터 깃허브에 꼭 하나씩 있는 게 바로 requirements.txt다.

처음엔 이걸 왜 설치하라는 건지도 모르고 에러나면 설치하고 에러나면 설치하고의 반복이었는데 이거 하나면 번거로움이 줄어든다.

requirements.txt는 파이썬 프로젝트에서 필요한 패키지와 그 버전들을 명시해놓은 텍스트파일이다.

특히 팀 프로젝트에서 팀원들이 같은 환경을 구축할 수 있게 한다.

또한 사용하던 가상환경에서 다른 가상환경으로 옮길 때도 유용하다.

requirements.txt라는 걸 알고 나서도 일일히 내가 사용한 패키지들을 입력했었는데, 명령어 하나면 손쉽게 생성이 관리하다.

1. requirements.txt 자동 생성 방법

- 현재 가상환경, 내가 사용하는 파이썬 환경에 설치된 모든 패키지와 버전이 함께 기록된다. 

- 일반적으로 사용되는 명령어이다.

pip freeze > requirements.txt

또는

pip list --format=freeze > requirements.txt

2. requirements.txt 직접 작성 방법

- 필요한 패키지와 버전만 직접 입력할 수도 있다.

folium==0.18.0
plotly==5.24.1
python-dotenv==1.0.1
seaborn==0.13.2
Scrapy==2.12.0
scikit-learn==1.6.0

3. requirements.txt 설치 방법

- requirements.txt에 명시되어 있는 모든 패키지가 설치된다.

pip install -r requirements.txt

4. requirements.txt 내용 업데이트하기

- pip install로 필요한 패키지 설치 후 requirements.txt 내용도 업데이트 하려면 생성할 때와 같은 명령어를 입력하거나 직접 파일을 열어 필요한 패키지나 버전 등을 추가, 수정할 수 있다.

pip install [패키지명]
pip freeze > requirements.txt

5. 불필요한 패키지 제거 방법

- pip uninstall로 불필요한 패키지 제거 후 변경된 상태로 requirements.txt를 갱신해준다.

pip uninstall [패키지명]
pip freeze > requirements.txt

* 패키지 의존성 관리 도구

파이썬 패키지 관리 도구로 pip-tools 라는 것이 있다. 주요 패키지 (requirements.in) 와 해당 패키지의 의존성 (requirements.txt) 을 분리하여 관리할 수 있게 한다.

1. 설치

pip install pip-tools

2. 설치확인

pip-compile --version

3. 사용방법

- 주요 패키지 파일 (requirements.in)에는 프로젝트에서 직접 사용하는 주요 패키지만 기록한다.

- requirements.txt 생성 : 주요 패키지와 더불어 모든 의존성 패키지도 포함한다. 의존성 패키지는 주석으로 어떤 패키지에서 유래했는지 표시된다.

pip-compile

4. 의존성 업데이트

- 주요 패키지와 의존성 패키지의 최신 버전을 업데이트한다.

pip-compile --upgrade

5. 환경 파일 분리

- 개발용 패키지와 프로덕션 패키지를 별도로 관리 가능하다.

- requirements.in (프로덕션용) / dev-requirements.in (개발용) 으로 나뉜 경우 각각 컴파일해준다.

pip-compile requirements.in
pip-compile dev-requirements.in

6. 설치방법

pip install -r requirements.txt
pip install -r dev-requirements.txt

 
 
 
단순히 문자를 출력하는 건 자바를 배우기 시작했다면 바로 할 수 있다.
하지만 문자열 중 특정 문자를 출력하는 건 바로 떠오르지 않는다.
이번에 작성한 코드는 문자열을 입력 받고, 그 문자열에서 앞에 세 개 문자를 각각 출력하는 것이다.
나는 charAt()을 이용해 출력해봤다.
 
 

public class VariablePractice4 {
	public void practice4() {
		Scanner sc=new Scanner(System.in);
		System.out.println("문자열을 입력하세요 : ");
		String letter=sc.nextLine();
		char text1=letter.charAt(0);
		char text2=letter.charAt(2);
		char text3=letter.charAt(4);
		System.out.println("첫 번째 문자 : "+text1);
		System.out.println("두 번째 문자 : "+text2);
		System.out.println("세 번째 문자 : "+text3);
	}
}

 
 
 
beautiful을 입력 받아 1, 2, 3번째 문자를 각각 출력해봤다.
주의해야할 점은 charAt()의 첫번째 문자를 출력하고 싶다고 charAt(1)이라고 출력하면 두 번째 문자인 e가 출력되므로 CharAt(0)으로 작성해야한다는 점이다.
 

<미성년자만 회원가입할 수 있게 하는 기능>

java를 공부하면서 초반에 나오는 Scanner와 if문을 가지고 만든 간단한 기능이다.

와 이정도는 이제 나도 금방 할 수 있겠다! 하면서 죽 작성했는데 오류가 발생했다.

코드 내에 밑줄이 간 부분은 없으니 오류가 없겠거니 했는데 *정보 입력*란 다음에 아이디가 입력이 안 되고 패스워드 입력란으로 자꾸 넘어가는 오류가 생겼다.

알고 보니 이 한 줄을 작성하지 않아 발생했다.

sc.nextLine();

Scanner를 이용할 때 nextLine()을 이용하기 전에 nextLine()이 아닌 nextInt(), nextDouble() 등을 이용했다면  nextLine()을 한번 실행시켜서 비워줘야 한다!

if문 전에 nextInt()를 썼기 때문에 비워줘야 한다.

그래서 작성한 것이 바로 이렇다.

public void checkAgeEnroll() {
		Scanner sc=new Scanner(System.in);
		System.out.println("미성년자만 회원가입이 가능합니다.");
		System.out.println("나이를 입력해 주세요 : ");
		int age=sc.nextInt();
		sc.nextLine();
		if(age<20) {
			System.out.println("*정보 입력*");
			System.out.println("아이디를 입력해주세요 : "); 
			String id=sc.nextLine();
			System.out.println("패스워드를 입력해주세요 : ");
			String pw=sc.nextLine();
			System.out.println("이름을 입력해주세요 : ");
			String name=sc.nextLine();
			System.out.println("별명을 입력해주세요 : ");
			String nick=sc.nextLine();
			System.out.println("나이를 입력해주세요 : ");
			int age2=sc.nextInt();
			String text=id+" "+pw+" "+name+" "+nick+" "+age2;
			System.out.println("입력한 정보 : " + text);
		} else {
			System.out.println("성인은 가입할 수 없습니다.");
		}
		
	}

정상적으로 실행된다!