천천히 차근차근

[IntelliJ] Spring Boot Thymeleaf 사용하는 방법

JooKit 주킷 — Sun, 10 Nov 2024 12:40:48 +0900

build.gradle 설정

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // 타임리프 템플릿 엔진 의존성 2-1
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' // 타임리프 템플릿 엔진 의존성 2-2

Thymeleaf 사용을 위한 의존성을 주입한다.

application.properties

# 타임리프
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5

프로젝트에서 타임리프 템플릿 엔진을 어떻게 사용할지에 대한 설정이 필요하다.

설명

spring.thymeleaf.prefix=classpath:/templates/

템플릿 파일의 위치를 설정한다.

spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5

- suffix : 템플릿 파일의 확장자를 지정한다.
예를 들어, main.html과 같은 템플릿 파일을 사용할 때, .html 확장자를 명시적으로 지정할 필요 없이 템플릿 이름만 사용하면 된다.

- mode : Thymeleaf가 HTML 문서를 어떻게 렌더링할지를 정의하는 모드를 설정한다.

HTML5 모드는 HTML5 문법을 따르는 템플릿을 렌더링하는 설정입니다.
예를 들어, Thymeleaf가 HTML5의 <!DOCTYPE html> 선언, 태그 속성, 빈 태그 등을 적절히 처리하게 됩니다.

[IntelliJ] Spring Boot 프로젝트에 JPA 환경 설정하는 방법

JooKit 주킷 — Thu, 7 Nov 2024 20:00:00 +0900

JPA 의존성을 build.gradle 에 추가

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
    runtimeOnly 'com.h2database:h2'  // H2 데이터베이스 의존성
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'  // JPA 의존성
}

마지막 라인의 jpa 의존성을 추가해 준다.

이전에 H2 데이터베이스를 설치하였고, 스프링부트 자바 프로그램에서 데이터베이스에 데이터를 저장하거나 조회하기 위해서는 JPA를 사용해야 한다.

그러기 위해 필요한 JPA 설정을 해줘야 한다.

2024.11.07 - [IT 유용한 정보] - [intelliJ] Spring Boot JPA 활용을 위한 H2 데이터베이스 설치 및 사용 방법

[intelliJ] Spring Boot JPA 활용을 위한 H2 데이터베이스 설치 및 사용 방법

Help.JPA: Java Persistence API스프링 부트는 JPA를 ORM 기술의 표준으로 사용하고 있다.JPA는 인터페이스 모음으로 이 인터페이스를 구현한 실제 클래스를 필요로 한다.JPA를 활용하기 위한 대표적인 실제

harrydony.tistory.com

build.gradle 을 추가하거나 변경하면 꼭, gradle refresh를 해주는 것! 잊지 않아야 한다.
gradle refresh로 변경사항을 업데이트하는 방법은 위 게시글에서도 참고할 수 있다.

application.properties 환경 설정 추가

# JPA
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect
spring.jpa.hibernate.ddl-auto=update

위 2개의 환경을 추가로 설정해 주어야 한다.

spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect

스프링부트와 하이버네이트를 함께 사용하려면 꼭 필요한 설정이다.
SQL이 아닌 하이버네이트만의 SQL을 사용할 때 필요한 설정.

spring.jpa.hibernate.ddl-auto=update

엔티티를 기준으로 데이터의 테이블을 생성하는 규칙을 설정한다.

none: 엔티티가 변경되더라도 데이터베이스를 변경하지 않는다.
update: 엔티티의 변경된 부분만 데이터베이스에 적용한다.
validate: 엔티티와 테이블 간에 차이점이 있는지 검사만 한다.
create: 스프링부트 서버를 시작할 때 테이블을 모두 삭제한 후 다시 생성한다.
create-drop: create와 동일하지만 스프링부트 서버를 종료할 때에도 테이블을 모두 삭제한다.

보통 개발 환경에서는 update 모드를 이용하고, 운영 환경에서는 none 또는 validate를 주로 사용한다.

[intelliJ] Spring Boot JPA 활용을 위한 H2 데이터베이스 설치 및 사용 방법

JooKit 주킷 — Thu, 7 Nov 2024 19:34:10 +0900

Help.

JPA: Java Persistence API

스프링 부트는 JPA를 ORM 기술의 표준으로 사용하고 있다.
JPA는 인터페이스 모음으로 이 인터페이스를 구현한 실제 클래스를 필요로 한다.

JPA를 활용하기 위한 대표적인 실제 클래스로 하이버네이트: Hibernate 가 있다.

* 인터페이스는 클래스가 구현해야 하는 메서드들을 정의한 틀이라고 볼 수 있다.

H2 데이터베이스 설치하기

H2 데이터베이스는 주로 개발 환경에서 사용하는 자바 기반의 경량 DBMS이다.

DBMS 종류

- MySQL
- Oracle
- PostgreSQL
- MongoDB
- .. 등

RDBMS: Relational Database Management System

- DBMS의 하위 개념으로, 데이터를 관계형 모델로 저장하고 관리할 수 있는 DBMS를 말한다.
- 테이블과 테이블 간의 관계를 기반으로 데이터를 저장하고 관리하는 방식이다.
- 종류: MySQL, Oracle, PostgreSQL 등

MySQL Workbench, Sequel Pro, DBeaver, HeidiSQL 들은 DB 관리 툴 (Database Management Tool) 이다.

데이터베이스(DBMS/RDBMS)와 연결하여 데이터를 조회하고, 테이블 구조를 확인하고, 쿼리를 실행하는 등의 관리 작업을 편리하게 수행할 수 있도록 도와주는 클라이언트 프로그램이다.

H2 데이터베이스 설치

build.gradle 파일에서 공백에 우클릭 -> Generate 클릭

Add Maven artifact dependency 선택

Maven Repository 사이트에서 필요한 maven 또는 gradle을 다운로드 받아서 사용해왔지만,
인텔리제이에서는 내부 기능으로 maven repository에 대한 인덱싱 작업만 해주면 작업 중에 원하는 gradle을 검색해서 바로 원격 저장소에서 내려받아 사용할 수 있다.

인텔리제이에서 maven repository에 대한 인덱싱 작업이 되어 있지 않다면, gradle을 검색하려고 해도 검색 결과가 나오지 않을 것이다. 그런 경우, 아래의 방법으로 인덱싱 작업을 해줄 수 있다.

File -> Manage IDE Settings -> Settings Sync 선택

1. build 검색 -> Build, Execution, Deployment -> Repositories 선택
2. https://repo1.maven.org/maven2/ 선택 후 업데이트 -> OK 선택

인텔리제이 하단에 maven repository에 대한 인덱싱 작업 시작을 확인할 수 있다.

본인은.. 무엇이 문제인지 maven 원격 저장소에서 gradle 목록을 제대로 불러오지 못하여 gradle 코드를 찾아서 build.gradle 파일에 직접 설정해 주었다.

runtimeOnly 'com.h2database:h2'

runtimeOnly 란?

애플리케이션이 실행될 때만 해당 라이브러리를 필요로 한다는 것을 의미한다. 이는 컴파일 단계에서는 필요하지 않지만 런타임 시에만 필요한 라이브러리를 정의하는 데 사용된다.

이렇게 컴파일 또는 런타임 단계에서 실행할 라이브러리들을 명시해 주면, 컴파일 또는 런타임 단계에서 모든 라이브러리를 처리하지 않기 때문에 개발 환경과 컴파일 프로세스가 더 간결해진다.

그리고 빌드시간이 단축되고 성능을 향상시킬 수 있다.

gradle을 추가하거나 변경하면, gradle을 refresh 해줘야 반영된다.

방법: 상단 View -> Tool Windows -> gradle -> 프로젝트 우클릭 -> Refresh Gradle Dependencies 선택

설치한 H2 데이터베이스를 사용하기 위한 추가 설정

# DATABASE
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.datasource.url=jdbc:h2:~/local
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=

src/main/resources 디렉터리에 application.properties 파일에 h2 데이터베이스를 사용하기 위한 설정을 추가

spring.h2.console.enabled : H2 콘솔에 접속할 것인지 묻는 항목으로 true로 설정했다. H2콘솔은 H2데이터베이스를 웹 UI로 보여준다.
spring.h2.console.path : H2 콘솔에 접속하기 위한 URL 경로이다.
spring.datasource.url : 데이터베이스에 접속하기 위한 경로이다.
spring.datasource.driver-class-name : 데이터베이스에 접속할 때 사용하는 드라이버 클래스명이다.
spring.datasource.username : 데이터베이스의 사용자명으로 기본값인 sa로 설정했다.
spring.datasource.password : 데이터베이스의 비밀번호로 로컬에서 개발 용도로만 사용할 것이므로 비밀번호를 설정하지 않고 비워 두었다.

데이터베이스 파일 만들어주기

spring.datasource.url에 설정한 경로에 해당하는 데이터베이스 파일을 만들어야 한다.

spring.datasource.url=jdbc:h2:~/local

~/ 이 경로이며, 마지막에 local은 폴더가 아닌, 사용할 데이터베이스 명 이다.

데이터베이스를 사용할 경로에, 사용할 데이터베이스 명에 local.mv.db 확장자로 파일을 생성해 준다.

예시로, spring.datasource.url=jdbc:h2:~/hello 의 경우라면 hello.mv.db 파일을 생성해 주면 된다.

이렇게 데이터베이스 파일을 생성해 주었고, h2 console path로 지정한 /h2-console 으로 브라우저에서 접속해보자.

웹 브라우저에서 H2 콘솔을 통해 데이터베이스에 접근하는 방법

H2 데이터베이스로 사용할 db 파일도 생성해 주었고, 데이터베이스 콘솔 경로로 지정한 path로 접속해 보자.

http://localhost:8080/h2-console

이렇게 웹에서 H2 콘솔로 데이터베이스에 접근을 할 수가 있게 되었다.
언어는 한글로도 선택할 수 있다.

내가 설정한 Driver Class와 User Name을 확인할 수 있다.

JDBC URL

위에서 설정해주었던,
spring.datasource.url=jdbc:h2:~/local
-----> jdbc:h2:~/local
으로 변경을 필히 해주어야 한다.

마지막으로 Connect 클릭 ✅

Help.

JDBC 란?

Java Database Connectivity

자바 프로그램에서 데이터베이스와 상호 작용을 하는 자바 API 기술이다.
JDBC는 자바 프로그램과 DB를 연결하여 데이터베이스 작업을 수행할 수 있다.

데이터베이스 접근 성공 !

[intelliJ] Spring Boot Gradle Dependency 업데이트 방법

JooKit 주킷 — Wed, 6 Nov 2024 23:13:43 +0900

선택: View -> Tool Windows -> Gradle

우측에 열린 Gradle 영역에서 Dependencies를 업데이트해 줘야 한다.

1. 프로젝트 우클릭
2. Refresh Gradle Dependencies 선택

[IntelliJ IDEA] 인텔리제이 Spring Boot 프로젝트 생성 방법

JooKit 주킷 — Wed, 6 Nov 2024 20:31:32 +0900

프로젝트 생성

New Project로 새로운 프로젝트 생성

1. Name: 프로젝트 명
2. Location: 프로젝트 관리 경로
3. Language: 개발 언어 선택
4. Type: 빌드 관리 타입
5. Group: 프로젝트 그룹
6. Artifact: 프로젝트 식별자
7. Package name: 패키지 이름은 클래스나 파일이 속한 패키지 경로를 의미(.java 소스 파일 최상단에 선언된다.)
8. JDK: JDK는 IntelliJ IDEA에서 제공하는 Oracle OpenJDK를 바로 설치해서 사용했다.
9. Java: 설정한 JDK와 동일한 버전으로 설정
10: Packaging: Spring Boot는 별도로 톰캣을 설치하지 않도록 톰캣을 내장하여 제공한다. Packaging을 Jar로 설정하면 애플리케이션을 독립적으로 실행할 수 있기에 배포 및 유지 관리 과정을 간소화할 수 있는 장점이 있다.

(본인은 JDK 안정성을 고려하여, JDK 버전을 21.0.5로 오라클에서 다운로드 받아서 다시 설정하였다.)

Help.

JDK 21.0.5은 Spring Boot 3.2.x 이상에서 지원된다.

Spring Boot DevTools

개발 과정에서 생산성을 높여주는 도구 모음.

주요 기능:
- 자동 재시작(Automatic Restart): 코드를 수정할 때마다 서버를 자동으로 다시 시작해 줘서 변경 사항을 바로 확인할 수 있다.
- 라이브 리로드(Live Reload): 변경 사항이 반영되면 웹 브라우저도 자동으로 새로 고침된다.
- 캐싱 비활성화(Disable Caching): 개발 환경에서는 캐싱을 비활성화해서 변경 사항을 즉시 반영할 수 있도록 도와준다.
사용 목적: 개발할 때 효율적으로 서버를 재시작하면서 변경 사항을 확인하고 싶을 때 사용한다.

Lombok

자바 코드에서 반복적으로 작성해야 하는 코드를 줄여주는 라이브러리.

주요 기능:
- 어노테이션 기반 코드 생략: 예를 들어, @Getter, @Setter, @ToString, @EqualsAndHashCode, @NoArgsConstructor, @AllArgsConstructor 등의 어노테이션을 사용하면 자동으로 Getter, Setter, toString, equals, hashCode 메서드 등을 생성해 준다.
- 빌더 패턴: @Builder를 통해 객체를 생성할 때 빌더 패턴을 쉽게 사용할 수 있다.
사용 목적: 반복되는 코드를 줄이고 코드 가독성을 높이며, 실수를 줄이고 싶을 때 유용하다.

Spring Web

웹 애플리케이션을 개발하기 위해 필요한 기본 라이브러리들을 포함하고 있다.

주요 기능:
- MVC 구조 지원: Spring의 MVC 패턴을 통해 웹 애플리케이션의 구조를 쉽게 설계할 수 있다.
- RESTful API 개발 지원: 컨트롤러에서 @RestController 등을 사용해 RESTful API를 쉽게 개발할 수 있다.
- 내장 웹 서버 지원: Tomcat이나 Jetty 같은 내장 웹 서버를 제공해 애플리케이션을 간단하게 실행할 수 있 .
사용 목적: 웹 애플리케이션이나 RESTful API 서버를 개발하고자 할 때 필수적인 의존성이다.

맥북에 설치된 여러 java 버전 확인하는 방법

JooKit 주킷 — Wed, 6 Nov 2024 18:10:11 +0900

터미널 명령어

ls /Library/Java/JavaVirtualMachines/

위 명령어를 터미널에 입력하면,
여러 버전으로 설치된 JDK를 확인할 수 있다

vscode react default formatter setting

JooKit 주킷 — Tue, 8 Oct 2024 10:45:30 +0900

Prettier - Code formmater Extensions 설치

prettier 익스텐션을 먼저 설치

Preferences: Open User Settings (JSON)

mac -> comman + shift + p

window -> ctrl + shift + p (확인 필요)

settings 파일을 열어 준다.

javascriptreact update

주석 처리한 부분을 아래와 같이 수정해준 후 저장해 주면 완료.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

git add 전체 취소, add 특정 파일 취소

JooKit 주킷 — Fri, 22 Mar 2024 13:18:42 +0900

git add 명령어 다루기

git 모든 파일 선택 명령어

업데이트된 항목 전부를 선택하는 명령어

git add .

git 특정 파일 선택 명령어

업데이트된 항목 중에서 특정 파일을 선택하는 명령어

git add [파일명(경로포함)]

git add 한 모든 파일 취소 명령어

git reset HEAD

git add 한 특정 파일 취소 명령어

git reset HEAD [파일명(경로포함)]

nginx 윈도우 명령어

JooKit 주킷 — Fri, 22 Mar 2024 11:56:09 +0900

nginx 실행

- nginx가 설치된 폴더로 이동하여 nginx.exe 실행
- cmd창에서 nginx가 설치된 폴더로 이동하여 아래 커맨드 실행

$ nginx

nginx 윈도우 명령어 종류

nginx 실행 확인

- cmd창에서 호출하여 아래 커맨드 실행

$ tasklist /fi "imagename eq nginx.exe"

nginx 종료

- cmd창에서 nginx가 설치된 폴더로 이동하여 아래 커맨드 실행

nginx 빠른 종료

$ nginx -s stop

nginx 재기동

$ nginx -s reload

nginx 로그파일 다시 쓰기 시작

$ nginx -s reopen

[ jquery ] jquery-ui calendar 사용법

JooKit 주킷 — Fri, 22 Mar 2024 11:19:46 +0900

datepicker html 샘플 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습 노트!</title>

    <!-- jquery script -->
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    
    <!-- datepicker script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- datepicker css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css" integrity="sha512-lCk0aEL6CvAGQvaZ47hoq1v/hNsunE8wD4xmmBelkJjg51DauW6uVdaWEJlwgAE6PxcY7/SThs1T4+IMwwpN7w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    
    





</head>
<body>
    <script>
        $(document).ready(function(){
            
            testDatepicker();

        }); 

        function testDatepicker() {
            $('.jq-date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            
        }
    </script>

    <input type="text" class="jq-date">

</body>
</html>

datepicker 샘플 코드 설명

datepicker 사용에 필요한 라이브러리

datepicker 는 jquery 라이브러리를 활용한다.

<!-- jquery script -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

datepicker는 jquery를 활용해서 이용할 수 있다.

datepicker 는 jquery-ui와 jquery-ui 의 css 라이브러리를 활용한다.

<!-- datepicker script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- datepicker css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css" integrity="sha512-lCk0aEL6CvAGQvaZ47hoq1v/hNsunE8wD4xmmBelkJjg51DauW6uVdaWEJlwgAE6PxcY7/SThs1T4+IMwwpN7w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Help.

jquery-ui.min.js는 datepicker 기능을 활용하기 위한 script이다.

jquery-ui.css는 datepicker에 css 요소를 입혀주기 위해 사용하는 라이브러리이다.

datepicker 기본 설정한 이미지

datepicker의 속성과 css를 수정해서 다양하게 활용할 수 있지만, 나는 간단히 테스트해 보기 위한 용도로 기본적으로 날짜 형식만 설정해 주었다.

datepicker를 사용할 때 필요한 script는 최신 버전으로 수정을 해두었다.

(게시물 업데이트 일자 : 2024년 03월 22일, 금요일)

datepicker에 더 다양한 설정을 주는 방법은 추후 다른 게시물을 수정하거나 새로 게시하여 공유할 예정이다.

전체 샘플 코드를 참고하여 학업 및 업무에 도움이 되었으면 하는 마음으로 게시물을 수정해 본다.

java 리터럴이란? 기본적인 데이터 타입, 자료형의 종류와 함께 이해해보자.

JooKit 주킷 — Wed, 13 Mar 2024 01:29:55 +0900

java에서 리터럴(literal)이란?

어렵게 생각하지 말자. 소스 코드 그대로의 값, 데이터를 의미한다.

java 리터럴(literal) 예시 코드

int testNum = 10;

testNum 변수에 할당된 10이 리터럴(literal)이다.

리터럴 타입과 비교할만한 java의 데이터 타입 (2가지)

자바에는 변수에 할당한 값을 의미하는 원시 타입(primitive type)과 특정 객체의 주소를 가리키는 값을 의미하는 참조 타입(reference type)으로 나뉜다.

2-1. 원시 타입(primitive type) 종류

byte
short
int
long
char
boolean

2-2. 참조 타입(reference type) 종류

String
Object
등등

Java 리터럴(literal) 설명 중에 데이터 타입(자료형) 이야기를 한 이유는?

literal type도 데이터 타입 중 원시 타입의 유형과 비슷하기 때문에 아주 간략하게 소개해 보았다.

Java 리터럴(literal) 타입 6가지

6-1. 정수 리터럴

int number = 5;

6-2. 부동 소수점 리터럴

double testPi = 3.14159; // 3.14159d 와 3.14159D 같은 의미 
float value = 2.0f; // 2.0F 같은 의미

Help.

- double은 값에 d 또는 D를 붙여서 할당할 수 있지만 생략할 수 있으며 예시 코드와 같이 보통 생략한 표현을 많이 사용한다.
- float 리터럴은 F 또는 f 둘 다 사용 가능하나 f를 더 많이 사용하는 것 같다.

Help.

부동 소수점

정수 부분과 소수점 이하 부분을 나타내며, 지수 부분을 포함할 수도 있음을 의미

6-3. 문자 리터럴

char character1 = 'A';
char character2 = 'B';

문자열과는 다르게 작은따옴표(single quote)를 사용한다.

6-4. 문자열 리터럴

String hello = "Hello";
String world = "World";

문자 리터럴과는 다르게 큰따옴표(double quotes)를 사용한다.

6-5. 불리언(boolean) 리터럴

boolean isTrue = true;
boolean isFalse = false;

6-6. 이 외 리터럴

Help.

null

- 참조형에 사용할 수 있는 리터럴이다.
- 가령 정수 또는 불리언(boolean) 리터럴에서 null을 사용하려고 하면 컴파일 오류가 발생한다.

결론은?

역시나 맨 처음에 언급했던 대로 java의 리터럴은 소스 코드 그대로의 값, 데이터를 의미하며 이러한 리터럴들은 java에서 변수 할당, 조건문, 메소드 호출 등의 다양한 상황에서 사용되고 있고 앞으로 우리가 직접 목격하게 될 리터럴들이다.

대체 JVM이 무엇이기에 Java를 공부하는 나를 이토록 괴롭히는거니?

JooKit 주킷 — Tue, 12 Mar 2024 00:51:03 +0900

JVM: Java Virtual Machine

자바 가상 머신

자바 프로그램을 실행하는 데 사용되는 가상 컴퓨터를 의미한다.

사용자의 컴퓨터에는 JRE가 설치되어 있어야만 Java 애플리케이션을 실행할 수 있고
JRE는 사용자가 웹 브라우저를 통해 Java 애플리케이션을 사용하는 동안에 필요한 런타임 환경이다.

JVM 특징

1. JVM은 Java로 만들어진 애플리케이션을 컴파일(java compiler)해서 얻은 바이트 코드를
컴퓨터가 이해할 수 있는 기계어로 변환해 준다.

2. Java라는 특정 언어를 바로 기계어로 컴파일하지 않기 때문에 운영체제에 종속적이지 않고 독립적이다.

java compiler : 자바 소스 코드를 JVM이 이해할 수 있는 바이트 코드로 변환하는 작업

바이트 코드 : 자바 소스 코드(*.java)를 컴파일한 결과물로 JVM이 이 바이트 코드(*.class)를 해석하여 프로그램을 실행한다.

JVM 역할

자바 애플리케이션을 클래스 로더를 통해 읽고, 용도에 따라서 운영체제로부터 메모리를 할당받는다.

JVM 이미지

1. 자바 프로그램을 실행하면 JVM은 운영체제로부터 클래스 파일(*.class)을 실행시킬 메모리를 할당받는다.

2. 자바 컴파일러(javac)가 자바 소스 코드(*.java)를 자바 바이트 코드(*.class)로 컴파일한다.

3. Class Loader는 동적 로딩을 통해 필요한 클래스들을 로딩 및 링크하여
Runtime Data Area(실질적인 메모리를 할당받아 관리하는 영역)에 올린다.

4. Runtime Data Area에 로딩된 바이트 코드는 Execution Engine을 통해 해석된다.

5. 이 과정에서 Execution Engine에 의해 Garbage Collection의 작동과 Thread 동기화가 이루어진다.

클래스 로더

JVM은 Java 애플리케이션을 실행하기 위해 필요한 클래스 파일들을 로드한다.

이는 필요한 클래스들을 메모리로 읽어오는 과정을 의미한다.

'.class' 바이트 코드를 읽어 들여 class 객체를 생성하는 역할을 담당한다.

즉, 클래스 로더는 클래스가 요청될 때 파일로부터 클래스를 읽어 메모리로 로딩하는 역할을 하며 자바 가상머신의 중요한 요소 중 하나이다.

1. 클래스 로드가 classpath라는 환경 변수에 등록된 디렉토리에 있는 모든 클래스들을 먼저 JVM에 로딩한다.
2. JVM에 로딩된 클래스만이 JVM에서 객체로 사용할 수 있다.
3. 클래스 로딩은 클래스를 로딩하는 시점 또는 실행 중간에도 할 수 있다.
4. 자바의 클래스 로딩은 세부적으로 로딩, 링크, 초기화라는 세 단계 과정을 거친다.

로딩

클래스 파일을 바이트 코드로 읽어 메모리로 가져오는 과정

링크

가장 복잡한 과정으로, 읽어본 바이트 코드가 자바 규칙을 따르는지 검증하고, 클래스에 정의된 필드, 메소드, 인터페이스들을 나타내는 데이터 구조를 준비하며, 그 클래스가 참조하는 다른 클래스를 로딩한다.

초기화

슈퍼 클래스 및 정적 필드를 초기화한다.

맥북, Mac 사용자 유용한 단축키 모음

JooKit 주킷 — Sun, 10 Mar 2024 19:51:04 +0900

맥북을 사용할 때 유용한 단축키 모음

명령	단축키
응용 프로그램 강제 종료	option + command + Esc
현재 사용 중인 창 종료	command + W
현재 활성 상태인 앱 종료(비활성화)	command + option + W
폴더/파일 등 미리보기/훑어보기	command + Y or space
응용프로그램 사용 중, 응용프로그램의 [환경설정] 열기	command + ,
검색	command + F
검색한 검색어 다음 위치로 이동(이어서 계속 탐색) : enter를 입력하지 않고도 손쉽게 이동 가능	command + G
검색한 검색어 이전 위치로 이동(이어서 이전/위로 계속 탐색) : 마우스로 위로가기를 클릭하지 않고도 손쉽게 검색 가능	command + Shift + G
Finder/Desktop 보기에서 응용프로그램 폴더 보기	command + Shift + A
Finder/Desktop 보기에서 유틸리티 폴더 보기	command + Shift + U
Spotlight 열기	command + space
Dock 고정/해제	command + option + D
열려있는 응용프로그램을 순서대로 조회/선택해서 열기	command + Tab
열려있는 응용프로그램을 역순으로 조회/선택해서 열기	command + Shift + Tab
좀 더 쉽게 열려있는 응용프로그램을 조회/선택해서 열기	command + Tab + 왼쪽 화살표 or 오른쪽 화살표
이모티콘/특수문자 삽입	command + control + space
Finder에 새 폴더 생성	command + Shift + N
Finder에서 휴지통 비우기	command + Shift + delete
화면 잠그기	command + control + Q

[IT 실무]에서 업무를 보는 실무자 또는 [IT를 공부]하는 모든 분들, 그리고 [내가] 알아두면 아주 도움이 될 만한 [영어 단어] ! 1탄

JooKit 주킷 — Thu, 7 Mar 2024 02:54:03 +0900

IT 개발자가 알아야 하는 기본적인 용어 모음

단어	뜻
Accessibility	접근성
Agile	애자일
Algorithm	알고리즘
Analytics	분석
Architecture	구조
Asset	자산
Authentication	인증
Authorization	권한 부여
Automation	자동화
Backend	백엔드
Bandwidth	대역폭
Branch	브랜치
Build	빌드 (소스 코드를 실행할 수 있는 파일로 만드는 것)
Cache	캐시 (자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다)
Certificate	인증서
Client	클라이언트 (네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터)
Cloud	클라우드 (인터넷을 통해서 접근할 수 있는 서버와 이러한 서버에서 작동하는 소프트웨어와 데이터베이스를 의미한다)
Collaboration	협업
Commit	커밋 (의미있는 변경을 저장)
Compile	컴파일 (인간이 이해할 수 있는 언어로 작성된 소스 코드를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 과정)
Compliance	준수
Constraint	제약 조건
Configuration	구성
Container	컨테이너 (어떤 환경에서든 실행할 수 있도록 필요한 모든 요소를 포함하는 소프트웨어 패키지)
Debug	디버그 (프로그래밍중에 발생하는 오류의 원인을 찾아내서 수정하는 작업)
Debugging	디버깅 (프로그래밍중에 발생하는 오류의 원인을 찾아내서 수정하는 작업)
Dependency	의존성
Deployment	배포
Disaster	재해
Documentation	문서화
Encryption	암호화

[맥북] visual studio code 편집창, 터미널 이동 단축키 설정 방법

JooKit 주킷 — Tue, 5 Mar 2024 07:04:30 +0900

실무를 담당하며 나의 백엔드 java 실력과 프론트 엔드 기본기가 아주 형편 없다는 것을

더 미룰 수 없기에 초심을 되찾으려 노력하며 열심히 공부를 하려 한다.

맥북으로 vscode를 사용할 때,

편집창과 터미널을 자유롭게 이동하기 위한 단축키 설정 방법

1. 팔레트 열기

단축키 : command + shift + p

2. keyboard 검색 -> Preferences: Open Keyboard Shortcuts (JSON) 선택/열기

주의: Default 아님

3. 열린 파일(파일명: keybindings.json)에 아래 코드 추가

[
  {
    "key": "cmd+;",
    "command": "terminal.focus",
    "when": "editorFocus"
  },
  {
    "key": "cmd+;",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "terminalFocus"
  }
]

터미널로, 편집창으로의 이동 모두

command + ;

동일한 단축키로 설정했다.

원하는 단축키로 설정하면 굿

Spring Boot Logback 콘솔 console 색상을 예쁘게 출력하는 방법

JooKit 주킷 — Fri, 2 Feb 2024 22:37:05 +0900

대충 넘어 갔던 부분들을 조금 더 찾아보고 이해하면서 프로젝트를 만들어보는 시간을 갖고 있습니다.

그러던 중에 콘솔에 찍히는 로그들의 시간과 메시지 패턴이 마음에 들지 않더군요.

그래서 또 열심히 구글링을 시작했습니다.

제일 마음에 드는 방법을 찾았고, 시도해보고 안되서 다른 방법을 시도해 보기를 여러 차례 반복했죠.

아니, 이게 나만 안된다고????????;;

그러던 중, 프로젝트에서 콘솔 기본 설정값에 문제가 있지는 않을까 싶어서 해결 방법에 대한 접근 방향을 틀었죠.

다행히 이유를 알아냈고, 방법도 찾았습니다.

혹시라도 저같이 '왜 이토록 안되는 것일까..' 라고 생각하시는 분들이 계실까 싶어 기록해 놓으려 합니다.

이랬던 콘솔을

이렇게 알록달록하게 바꾸는 방법을 바로 공유드릴게요

개발하면서 개발환경이나 기기를 마음에 들게 구성하면 왠지 더 기분이 좋은 그 느낌.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>


    <!-- 로그 패턴에 색상 적용 %clr(pattern){color} -->
    <conversionRule conversionWord="clr" converterClass="org.springframework.boot.logging.logback.ColorConverter" />
    <conversionRule conversionWord="wex" converterClass="org.springframework.boot.logging.logback.WhitespaceThrowableProxyConverter" />
    <conversionRule conversionWord="wEx" converterClass="org.springframework.boot.logging.logback.ExtendedWhitespaceThrowableProxyConverter" />



    <!-- log 변수 값 설정 -->
    <property name="CONSOLE_LOG_PATTERN" value="${CONSOLE_LOG_PATTERN:-%clr(%d{${LOG_DATEFORMAT_PATTERN:-yyyy-MM-dd HH:mm:ss.SSS}}){green} %clr(${LOG_LEVEL_PATTERN:-%7p}){cyan}  %clr(${PID:- }){magenta} %clr(---){faint} %clr([%15.15t]){faint} %clr(%-40.40logger{39}){cyan} %clr(:){faint} %m%n${LOG_EXCEPTION_CONVERSION_WORD:-%wEx}}" />
    <property name="CONSOLE_LOG_CHARSET" value="${CONSOLE_LOG_CHARSET:-default}" />



    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>${CONSOLE_LOG_PATTERN}</pattern>
            <charset>${CONSOLE_LOG_CHARSET}</charset>
        </encoder>
    </appender>



    <root level="INFO">
        <appender-ref ref="STDOUT" />
    </root>
</configuration>

커스텀 로그 패턴의 컨버터를 먼저 설정해 줍니다.
conversionWord="clr"가 logback color를 지정할 수 있도록 해줍니다.
conversionWord="clr"은 Logback의 커스텀 로그 패턴을 정의할 때 사용하는 것으로,
원하는 이름으로 정의하여 사용할 수 있습니다.

부연 설명

WhitespaceThrowableProxyConverter

이 컨버터는 예외 로그를 출력할 때 예외 클래스 이름과 예외 메시지를 보여주는 기본 형식을 사용합니다.
예외 스택 트레이스는 공백 문자로 구분되어 출력됩니다.

ExtenedWhitespaceThrowableProxyConverter

WhitespaceThrowableProxyConverter와 유사하지만 스택 트레이스 출력에서 추가 정보를 제공합니다.
예를 들어, 예외가 발생한 파일의 이름과 라인 번호를 출력합니다.

이제, 이렇게 저렇게 여러 방법으로 Logback console color를

변경하려 했지만 실패했던 이유를 말씀드려볼게요.

그 이유는 바로..
이클립스 '환경 설정'에서 Ansi Console에 Plugin enabled 탭이 비활성화되어 있었기에
아무리 외부 라이브러리로 콘솔 환경에 변화를 주려고해도 적용되지 않았던 것이지요.

Plugin enabled 탭에 체크를 해주고 프로젝트를 재 구동시키면 콘솔에 폰트 색상과 정리된 패턴의 로그를 확인할 수 있습니다.

지원되는 색상은 7가지로 blue, cyan, faint, green, magenta, red, yellow 입니다.
각 패턴이 끝나는 중간 중간 {blue}, {cyan}, {green} 등 폰트 색상이 지정된 부분에 다른 색상을 지정해줄 수 있습니다.

logback.xml 파일을 아직 만들어 본 적이 없으신 분들은
src/main/resources 폴더 하위에 logback.xml 파일을 생성한 후
위에 공유드린 소스를 적용하시고 테스트 해보시면 좋을 것 같습니다.

[Git] git, github repository 간단하게 연동해서 commit하는 방법

JooKit 주킷 — Fri, 2 Feb 2024 19:39:13 +0900

오랜만에 이클립스 툴을 사용해서 Spring Boot로 사이드 프로젝트를 만들고 있습니다.

업무에 치여 쫓기듯이 일만 하고 살아왔는데, 이러다가는 저의 삶이 남아나지 않을 것 같다는 생각이 들어서.

업무를 보는 것과 사이드 프로젝트를 처음부터 시작하는 것과 또 다른 재미와 느껴지는 게 다르더군요.

프로젝트 커밋을 자주 하면 좋겠지만, 그러지 못했네요.

종종 github로 커밋을 하고 pull, push를 하고 있는데요.

회사에서는 svn을 사용하고 있습니다.

오랜만에 github를 사용하려니 참 ,,! 그래도 저희에겐 구글과 chat gpt가 있으니까요.

이제 git 저장소에 프로젝트 소스를 보다 쉽게(?) 관리할 수 있도록 도와주는

Github를 사용하는 방법을 간략하게 소개드릴게요.

우선 프로젝트를 관리하고 있는 폴더에 git을 사용하기 위해 초기화를 해주어야 합니다.

git 명령어가 작동되지 않는 분들은 아래 링크를 참고하셔서 git을 설치하시고 진행해 주시면 되세요.

[GITHUB 입문] Git 설치하기(2.35.1 이상, 상세한 설치법)

[GITHUB 입문] 깃허브 사용법 - 2 Git 설치하기 Git과 GitHub에 관해 다룬 이전 글([GITHUB 입문] Git과 GitHub의 차이)을 작성하다 보니 한 가지 아쉬움이 있었습니다. 독자가 Git을 설치하여 직접 따라 하면

taewow.tistory.com

Git 초기화 , Git 저장소 생성

git init

git 저장소를 생성하고 아래 명령어로 숨김 파일, 폴더 목록을 조회하면 .git 디렉터리가 생성된 것을 확인하실 수 있습니다.

ls -al

그다음으로,

Git 저장소를 사용할 github 계정 등록

git config --global user.name "계정명"

git config --global user.email user-email

github에 회원가입한 계정명과 이메일을 git 저장소를 생성한 폴더에 등록을 해줍니다.

❗️계정은 "홍길동" 이렇게 따옴표로 감싸주어야 합니다. email은 따옴표 사용하지 않고 입력을 합니다.

현재 폴더에서 git 저장소에 연동된 repository가 있는지 확인

git remote -v

현재 폴더의 프로젝트가 어떤 git 저장소 레파지토리 연동되어 있는지를 확인할 수 있습니다.

방금 만든 git 저장소이지만, 연동되어 있지 않을 때에는 아무 응답도 받지 않는다는 걸 확인해 보는 것도 좋을 거 같아요.

github에서 프로젝트 commit을 관리할 레파지토리를 생성

github에 로그인하신 후, 프로젝트 소스를 관리하실 레파지토리를 만들어줍니다.

저 같은 경우는, 1번과 2번의 파일을 먼저 만들지 않고 있어요.

어떤 순서가 맞는지 잘 모르겠지만, 프로젝트를 만들고 코딩을 시작하고 레파지토리를 만들면서 README/.gitignore 파일을 만들게 되면

프로젝트에 git init을 하고 commit을 하려고 할 때, 병합 오류가 발생하더라고요.

물론, 해결 방법이 있고 병합 이슈가 발생하지 않는 번거로움을 줄일 자기만의 스타일로 프로젝트를 시작하면 좋을 것 같아요.

git을 연동할 github 레파지토리 경로를 등록

이제 git 저장소에 올린 파일을 github 레파지토리에 연동될 수 있도록 github 레파지토리 고유 경로를 등록해주어야 해요.

git remote add origin https://계정명:github_token@github.com/레파지토리 경로

[예시] 나름 중요해요!

계정명

git user name으로 설정한 github 계정명(honggildong)을 입력해 주시면 되세요.

github_token

정확히 기억이 나지는 않지만, 약 2년? 전까지는 패스워드로 소스 관리 가능했는데 보안 강화를 위해서인지 계정별로 고유 토큰을 유효기간까지, 그것도 길지 않게 30일/60일/90일/커스텀 등 짧은 유효기간의 토큰으로 소스 관리를 하도록 하고 있더라고요.
유효기간이 지나면 새로 발급을 받아야 하며, 발급받은 토큰은 새로운 토큰으로 재 발급은 가능하나 동일한 토큰으로 재 발급은 불가하니 꼭 개인 저장하신 후 사용해 주셔야 합니다.

레파지토리 경로

레파지토리 명을 memohada라고 지었다고 가정할게요.
그러면, 레파지토리 명만 붙여주는 게 아닌 계정명을 포함해서 경로를 기입해 주셔야 합니다.
아래 예시 작성 remote 주소 참고 부탁드릴게요.

git remote add origin https://honggildong:github_token@github.com/honggildong/memohada

Github token 생성하는 방법 참고 링크 공유드립니다.

이 글을 보고 계신다면, github_token이 조금 생소하실 수 있으실 테니

github token을 생성하는 방법을 참고하실 링크 아래 남겨드릴게요.

[GitHub] 깃허브(GitHub) 토큰 생성하기

오늘은 깃허브 토큰을 생성해보고자 한다. GitHub 토큰을 생성해보자. 1. 프로필-Settings 클릭 2. 왼쪽 메뉴바 하단의 Developer settings 클릭 3. Personal access tokens - Generate new token 클릭 4. Note, Expiration

dandev.tistory.com

업데이트된 프로젝트 소스 확인 (커밋할 소스 확인)

git status

똑똑하게도 프로젝트 폴더를 관리하는 git의 상태를 보여줍니다.

어떤 파일을 수정했는지를 보여주며 골라서 커밋을 할 수도 있고, 업데이트한 모든 소스/파일을 커밋할 수도 있습니다.

변동된 모든 소스를 저장소 스테이징 영역에 파일을 추가

git add .

add . 명령어로 프로젝트에서 수정한 모든 파일을 한꺼번에 git 저장소 스테이징 영역에 올릴 수 있습니다.

git 저장소 스테이징 영역에 올라간 파일들은 커밋할 준비가 되는 거죠.

commit 할 내용 정의

git commit -m "커밋 타이틀"

작업한 파일들의 내용을 간추려서 커밋 타이틀을 기록해 줍니다.

타이틀을 기록하고, 상세한 기록이 필요하다면 타이틀뿐만 아니라 커밋 상세 내용도 기록을 할 수 있습니다.

오늘 다 설명드리지 못한 내용은 천천히 포스팅하도록 하겠습니다!

마지막으로, 커밋한 소스를 PUSH

git push origin master

이 작업으로 우리가 작업한 소스가 git 저장소에 올라가게 되고,

어느 장비에서든 소스를 다시 내려받아서 작업할 수 있으며 협업 또한 가능합니다.

작업 사항을 커밋한 기록을 토대로 상세히 살펴볼 수도 있고

무엇보다 서버 반영을 할 때, git에서 바로 내려받아 서버 배포를 할 수 있는 장점도 있습니다.

그럼 모두 파이팅 하세요!

(Mac)맥북, 이클립스 유용한 단축키 모음

JooKit 주킷 — Thu, 21 Sep 2023 23:29:06 +0900

이클립스(Eclipse)로 개발할 때 아주 유용한 단축키 모음

명령	단축키
제어문으로 감싸기	해당 블록 드래그, option + command + Z
계층관계도(참조되고 있는 파일) 보기	해당 클래스 위에서 command + T
긴 커서 만들기 [일괄 수정]	option + command + A, 드래그, 수정
Start run server	tomcat server 선택, option + command + R
현재 라인 아래에 라인 삽입	Shift + enter
현재 라인 위에 라인 삽입	Shift + command + enter
현재 라인을 위/아래로 복사	option + command + UP or DOWN
현재 라인을 위/아래로 옮기기	option + UP or DOWN
To upper case	Shift + command + X
To lower case	Shift + command + Y
한줄 주석	Shift + command + C 또는 command + /
한줄 주석 해제	Shift + command + C 또는 command + /
블록 주석, 다중 주석	control + command + /
블록 주석, 다중 주석 해제	control + command + \
Add Javadoc comment : 클래스, 메서드, 변수 등 요소 설명	option + command + J
라인 이동	command + L
자동완성	control + command + space ( 원래 control + space 이지만, 맥북 기본 명령어로 설정되어 있어서 이클립스 자동완성 단축키를 변경함)
Rename refactor : 동일한 문자열이나 변수명을 한 번에 수정, 파일명 수정	option + command + R
좀 전에 검색했던 문자를 이어서 검색	command + K
좀 전에 검색했던 문자를 역순으로 검색	option + command + K
메서드, 변수, 클래스 등 레퍼런스가 workspace 어디에서 사용되는지 검색 : workspace에서 현재 텍스트를 모두 검색	option + command + G
메서드, 조건문 등 코드 블록 시작/끝으로 바로 이동	option + command + P
Generate 기능 사용	option + command + S
프로젝트, 클래스 등 만들기	command + N or option + N
변수 초기화 후, 여러 곳에서 사용한 변수들을 변수가 아닌 초기화했던 값으로 치환/변경	option + command + I
오류 부분으로 이동	command + .
package explorer 열기	option + command + Q, P

[ flutter ] 맥북에 아주 쉽게 크로스 플랫폼 flutter를 설치하는 방법

JooKit 주킷 — Mon, 14 Aug 2023 11:49:49 +0900

✅ flutter 공식 홈페이지에서 설치 파일 다운로드

https://docs.flutter.dev/get-started/install/macos

macOS install

How to install on macOS.

docs.flutter.dev

나는 intel 이라 flutter_macos_3.10.6-stable.zip 다운로드.

일단 다운로드 폴더로 내려 받으면 된다.

✅ 적당한 위치에 development 또는 원하는 명으로 폴더 생성 후, 해당 폴더에 flutter 압축 파일 풀기

✅ 환경변수 설정

vim ./.zshrc

#Flutter
export PATH="$PATH:/Users/[USER_DIR]/development/Flutter/bin"

// .zshrc 파일 저장 후

$ source .zshrc

✅ 설치 완료된 flutter 버전 확인으로 설치가 제대로 되었는지 확인

flutter --version

설치 성공!

✅ Dart 설치 경로

flutter를 설치하면 Dart가 함께 설치 된다.

/Users/[path]/development/flutter/bin/cache/dart-sdk

dart sdk를 직접 설정해주어야 할 일이 있다면 해당 경로를 참조할 수 있게 해주면 된다.

flutter를 설치하(려)면,

xcode, android studio, vscode 등이 필요하다고 하지만 나는 이미 모두 설치가 되어 있어서 패스!

당장 앱을 만들 목적이 아닌 Dart 공부를 선행하기 위해 flutter를 설치해 보았다.

아자아자 화이팅 !!

[ flutter ] 처음 접하는 flutter와 dart .. 시작한 계기.

JooKit 주킷 — Mon, 14 Aug 2023 11:39:54 +0900

인하우스 개발자로 일한지 횟수로는 3년차, 8월 초에 2년을 채웠다.

나에게 남은 것은,, ?

입사할 당시보다는 조금이라도 수준이.. 향상되었겠지만 사실 체계적인 성장은 없다고 본다.

내 자신이 한심하고 반성이 되며 뒤돌아보게 되는 요즘이다.

게다가, 연봉협상 동결이라니.

이 사실은 나에게 지금 너무나도 큰 충격으로 아무것도, 그 무엇도 할 수 없게 만든다.

더 이상 힘을 낼 수가 없고 내 자신이 한없이 작아졌다.

31살의 나는 다른 직군에서 즐겁고 보람있고 성취감 있을 것 같은 IT 직군으로 전향을 도전했는데,

지금의 나는 한없이 작아져있다.

하루하루 지쳐가며 남들과 비교하게 되고 주위 친구들과 비교하게 되고

개발자와 개발자를 두고 비교하게 되고, 인하우스 개발자로 나는 지금 회사에서 개발자로써

어떤 역량을 갖추었는가.

혼자 서비스를 개발할 능력을 갖추었는가, 서비스 기획을 할 수 있는가.

자사 서비스를 운영하기 위한 회사에서 그것도 사수 없이 혼자 일을 하며 체계란 없었고

하루하루 부딪히며 일을 해왔고 코드 리뷰는 커녕, 난 대체.

'SI를 갔어야 했나, 많은 프로젝트를 경험하지 못했다'라는 생각에 하루하루 마음이 좀처럼 잡히지 않는다.

이렇게는 안된다. 거의 2주를 그냥 허비했어.

일은 일대로, 그리고 내가 하고 싶은 공부하고 다시 마음을 다잡자.

이렇게 주저리주저리 거릴 시간도 없다 나한테는.

그래서 난 앱 만들기를 도전하려 하고 react-native와 flutter 중에 고민을 하다가 flutter를 선택했다.

시작하자. 다시 !!

[javascript] 부모 modal 안에 자식 modal을 닫았을 때 부모 modal로 인식하는 경우, A modal 안에 B modal 이벤트가 A modal로 인지할 때, modal 2개 이벤트

JooKit 주킷 — Fri, 9 Jun 2023 02:00:38 +0900

#testModal 안에 #smallModal이 있다.

#testModal이 큰 모달이고 그 안에 #smallModal이 있다.

#testModal 을 닫았을 때 check 값을 true로 주고 조건을 걸어서 작업을 하려고 하는데

modal 안에 있는 작은 modal을 닫았더니 check 값이 true로 설정되어 내가 원하는 작업을 수행할 수 없었다.

방법을 찾아본 결과, 아래와 같이 해결할 수 있었다.

var check = false;
$('#testModal').on('hidden.bs.modal', function (event) {
    var target = event.target;
    var relatedTarget = event.relatedTarget;

    // 이벤트가 발생한 요소와 그의 자식 요소인지 확인
    if (target.id === 'testModal' && $(relatedTarget).closest('#testModal').length === 0) {
		check = true;
    }
});

1. 현재 hidden 이벤트를 수행하는 modal의 id가 내가 조건을 걸려고 하는 model의 id와 같은지 비교하고

2. 현재 hidden 이벤트를 수행하는 modal이 내가 조건을 걸려고 하는 modal의 자식 요소인지를 확인한다.

closest('#testModal').length === 0 이라면 자식(작은 modal)이 아니라 조건을 걸려고 하는 #testModal 이 맞는 것이다!

[ quartz ] quartz 동일한 trigger 중복 실행 해결 방법, 인스턴스 중복, 인스턴스 2개가 같은 appBase를 바라볼 때.

JooKit 주킷 — Fri, 9 Jun 2023 01:21:31 +0900

[제가 해결한 방법은 글 제일 하단 쯤에 있습니다.]

내가 유지보수하는 플렛폼, 1개의 서비스를 운영함에 있어 tomcat 서버 1개에 여러개의 host를 설정하여 운영하고 있다.

이미지, 은행 관련 업무 등 적절하게 프로젝트를 나눠서 관리하고 있는 셈이다.

여러개의 프로젝트를 tomcat server.xml 파일에서 host로 분기하여 관리하고 있고 프로젝트 2개에서 quartz를 돌리고 있다.

A프로젝트에서는 여러 개의 trigger를 만들어 quartz를 돌려도 설정한 시간에 문제 없이 작동이 되었다.

다만,, 나머지 B프로젝트에서 돌리는 quartz는 돌릴 때마다 동일한 trigger가 1-2초 텀을 두고

또는 1초의 텀도 두지 않고 동시에 실행이 되는 문제를 보였다.

B프로젝트에서 quartz가 중복 실행되는 문제는 내가 입사하기 전부터 문제였으며 중복 실행 문제로 인하여 quartz를 돌려야 한다면

A프로젝트에서 quartz를 돌려야 했고, quartz를 돌리기 위해서 B프로젝트에 있는 소스를

A프로젝트에 중복으로 작성하는 모습이 보여졌다.

내가 quartz를 돌릴 작업은 없었고 단 한번 있었지만 quartz를 필요로 하는 작업이 중단되어 크게 의미가 있지 않아 굳이 쿼츠가 잘 돌아가는 A프로젝트에 코드를 중복으로 만들어서 쿼츠를 돌리고 싶지는 않아서 그저 내부적인 알림 용도였고 중요도가 낮았기에 크게 신경을 쓰지 않았다.

하지만 이제 쿼츠가 잘 돌아가지 않는 B프로젝트에서 쿼츠를 돌릴 때가 왔다.

local에서는 분명히 한번만 돌아가는데 서버 반영을 하면 역시나 쿼츠 동일 trigger가 중복으로 동시에 실행이 되었다.

아래는 내가 서치한 quartz 중복 실행 원인 몇가지이다.

web.xml에 servlet-context.xml 파일을 중복으로 로드하게 구현해서
quartz를 실행하는 bean을 중복으로 등록했거나 어딘가에서 또 중복으로 불러오고 있어서.
servlet-context.xml 파일에 bean을 등록하고 quartz 구현부(QuartzJobBean 상속 받은 클래스)에서 @Component 어노테이션을 작성하면서 빈이 한번 더 등록되어서.

.......

많은 원인들이 있었지만 대체적으로 위 3가지 원인을 제일 많이 접하였고 해결 방안도 바로 찾을 수 있었다.

하지만 아무것도 나에게는 해당되지 않았기에 해결되지도 않았다.

servlet-context.xml 파일을 2번 로드 하는 것 같지도 않았고, servlet-context.xml 파일 내에서 bean을 중복으로 등록하지도 않았으며

quartz구현부 클래스에 @Component 어노테이션을 제거해도 쿼츠는 중복으로 실행 되었다.

다른 해결 방법으로는 tomcat server.xml 파일의

autoDeploy="true" -> autoDeploy="false"

autoDeploy="false" 로 변경을 해보라고 해도 해결되지 않았다. 그 외 다른 값들도 false로 수정해도 마찬가지였다.

  <Host name="admin.test.com"  appBase="webapps\www.test.com" unpackWARs="true" autoDeploy="true" >
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="admin.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  </Host>
  

<!-- 아래로 변경  --> 
  
  
<Host name="admin.test.com"  appBase="\" unpackWARs="true" autoDeploy="true" >
	<Context path="" docBase="www.test.com" reloadable="true"/>
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="admin.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
</Host>

appBase를 "\"으로 또는 ""으로 변경해주고

Context를 추가해서 docBase를 설정해주라고 해도 나는 해결되지 않았다,,,...

아마도 다른 분들의 경우와 동일한 경우가 아니였나보다.

다른 분들은 위 키워드로 찾아봐주셔도 해결이 될 수도 있을 것 같습니다.

일단 열심히 서칭한 결과 내가 운영하는? 유지보수하는? 관리하는?

서비스의 쿼츠가 2번 중복으로 실행되는 문제의 원인을 알아냈다.

<Engine name="Catalina" defaultHost="www.test.com">

  <Host name="www.test.com"  appBase="webapps\www.test.com" unpackWARs="true" autoDeploy="true" >
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="www.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  </Host>

  <Host name="admin.test.com"  appBase="webapps\www.test.com" unpackWARs="true" autoDeploy="true" >
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="admin.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  </Host>
  
</Engine>

위는 내가 운영하는 서비스의 tomcat server.xml 파일 일부 수정본이다.

우리 서비스는 각 서버네임에 따라서 실행시킬 프로젝트를 구분하고 있는데 그 중 2개의 서버네임이 동일한 appBase를 바라보고 있다.

이 말은 1개의 프로젝트를 war 파일로 배포했지만 2개의 host로, 인스턴스가 1개가 아닌 2개가 생성된 것이다.

쿼츠를 돌리면서 2개의 인스턴스가 생겨나면 무엇이 문제일까?

클라이언트의 호출을 받아 각 서버네임으로 별도의 추가 작업을 해주기 위해서 저렇게 host를 2개로 나눠서 관리를 해왔다.

아, 맨 위에서 쿼츠 중복 실행 문제가 없다는 A프로젝트는 별도 host이며 appBase는 다른 프로젝트(경로)를 바라보고 있다.

클아이언트의 호출을 받아 서버네임으로 분기되어 서비스가 작동될 때는 크게 문제가 되지 않아 보였지만

(문제를 해결하고 보니 서비스가 상당히 가벼워진 느낌!)

쿼츠가 실행될 때는 문제가 안될 수가 없었던 구조인 것이다.

쿼츠는 클라이언트 호출과는 상관없이 백그라운드에서 독립적으로 실행되는 작업으로,

내 경우의 문제는 ???

2개의 host로 설정된 2개의 인스턴스에서 독자적으로 각각 쿼츠가 실행된 것이다....

원인을 알았으니 해결을 해야한다.

quartz clustering 이라는 것을 찾아보았다. 열심히 찾았다. 해답은 얻지 못했다. 나에게는 어렵게 느껴졌고, 어렵고 ,,,, 좀 그랬다. 라는 말보다는 뭔가 이거보다 쉬운 방법이 있을 것 같았다!!

quartz clustering은 단순히 quartz의 중복 실행을 막기 위한 방법 같지가 않았다. 더 좋은, 우월한 녀석이라고 해야 할까.

host name을 얻어서 쿼츠를 1번만 돌리고 싶었다.

host name을 얻지 못했다. quartz는 백그라운드에서 작동되는 녀석으로 HttpServletRequest 사용을 권장하지 않았고

내가 방법을 찾지 못한 것인지 도저히 나로써는,,, host name을 얻을 수가 없었다.

tomcat 객체를 생성해보기도 하고 MBeanServer로 defaultHost를 얻으려 시도도 해봤는데 내가 얻은 defaultHost는 server.xml 파일에 직접 설정 해놓은 defaultHost로써 구분을 할 수 없는 명이었다.

엔진을 2개로 나눠서 설정을 해도 된다고도 하던데 그렇게 해보지는 않았다. 아, 엔진명을 얻을 수 있어 보여서 2개로 나눌까 하다가 그것도 현재 쿼츠를 돌리는 엔진명을 얻을 수 있는게 아니라 특정 엔진명으로 검색을 해서 host명을 조회할 수 있는 것 같았다.

나는 ,,, 당장 지금, 현재. 쿼츠를 돌리는 시점의 host name을 알고 싶었다.

결과는?

실패

다시 찾는다. 서칭한다.

한글로 검색했을 때 내가 볼거는 다 봤다,, 비슷비슷하다.

탐착치 않은 영어 실력으로 검색 시작.

검색 결과를 연다. 닫는다. 연다. 마음에 들지 않는다. 닫는다.

연다. 닫기를 반복하다가 제법 나의 상황과 비슷한 사람의 글을 발견했다. 그래서 그런가 조금 읽힌다.

답글도 읽어보자.

오? 마음에 드는 답글을 찾았다.

바로 반영해본다.

실패했다. 좌절.

생각한다. 될 것 같았는데, 안됐다.

답글 다시 본다. 흠.. 내가 잘못 반영했다.

다시 반영해서 쿼츠 실행 테스트.

결과는??

성공 !!

한번만 돌았다.

제법 간단해 보이는 해결책이었다.

<Engine name="Catalina" defaultHost="www.test.com">

  <Host name="www.test.com"  appBase="webapps\www.test.com" unpackWARs="true" autoDeploy="true" >
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="www.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  </Host>

  <Host name="admin.test.com"  appBase="webapps\www.test.com" unpackWARs="true" autoDeploy="true" >
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="admin.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  </Host>
  
</Engine>


<!-- 아래로 수정 -->


<Engine name="Catalina" defaultHost="www.test.com">

  <Host name="www.test.com"  appBase="webapps\www.test.com" unpackWARs="true" autoDeploy="true" >
    <Alias>admin.test.com</Alias>
    <Valve className="org.apache.catalina.~~~~" directory="logs"
             prefix="www.test.log." suffix=".txt"
             pattern="%h %l %u %t &quot;%r&quot; %s %b" />
  </Host>
  
</Engine>

같은 appBase를 바라보고 있는 Host를 2개에서 1개로 줄였다.

하나를 Host name(server name)으로 설정하고 같은 appBase를 바라보아야 하는 다른 서버 네임을 Alias로 설정하였다.

의문을 갖었다.

www~ 서버네임과 admin~서버네임을 구분해서 서비스를 관리해야 하는데 Host로 설정하지 않은 Alias가 서버네임으로 분기가 될까 싶었다. 그래서 또 열심히 찾아보았다.

다행히도 Alias로 설정한 server name은 Host의 추가 Host 개념이며 클라이언트가 접속하는 서버네임으로 구분이 되었다.

HttpServletRequest request

String serverName = request.getServerName();


// www.test.com 호출 

String serverName = request.getServerName();
// serverName = www.test.com


// admin.test.com 호출 

String serverName = request.getServerName();
// serverName = admin.test.com

request로 getServerName()을 얻어오면 클라이언트가 호출한 서버네임(Alias로 지정한 서버네임 포함)을

각각 잘 구분해서 조회할 수 있는 것이다.

나의 경우에는 위와 같이 server.xml 파일을 수정해서 quartz 중복 실행 문제를 해결할 수 있었다.

같은 appBase를 바라보던, 인스턴스가 2개이던 이전의 서비스를 Host 1개에 Alias를 추가해서 동일 appBase를 1개로 추리고나니

quartz는 다행히도 1번만 실행이 되었다고 한다.

혹시나 나와 비슷한 상황에서 위와 같이 처리를 했는데 quartz가 여러번 돈다면

servlet-context.xml 파일 trigger 선언부에 아래 코드를 추가 해주면 된다.

<bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean">
    <property name="triggers">
        <list>
            <ref bean="testTrigger"/>
        </list>
    </property>
    <property name="quartzProperties">
        <props>
            <!-- 다른 Quartz 속성들 -->
            <prop key="org.quartz.threadPool.threadCount">1</prop>
        </props>
    </property>
</bean>

console을 확인해보면 bean#0 이던가 bean0#이던가 quartz 가 생성되고 quartz worker가

worker-1, worker-2, worker-3 ....... worker-10 까지 돌고 있을 수도 있다.

quartz 스레드는 기본적으로 10번 돌게 설정이 되어 있다고 한다.

그 기본 10번의 설정 값을 1번으로 설정해주면 trigger를 1번씩만 실행할 수 있게 된다.

이 작업은 quartz가 중복 실행되는 현상을 해결하는 근본적인 해답이 아님을 참고해야 한다.

열심히 정리를 하긴 했는데,. 잘 정리를 했는지.. 후.. 내일도 화이팅.

[아래는 내가 문제를 해결한 참고 링크]

https://users.tomcat.apache.narkive.com/rlmH4Ngb/how-can-i-prevent-quartz-multiple-execution-after-tomcat-restart

How can I prevent Quartz multiple execution after tomcat restart

Subject: Re: How can I prevent Quartz multiple execution after tomcatrestart <Host name="locahost" ...> <Alias name="somealias.company.com"> </Host> and multiple requests comes in with a header Host: somealias.company.com then indeed the fact of having thi

users.tomcat.apache.narkive.com

[react native] color (컬러) 찾기 좋은 사이트 참조

JooKit 주킷 — Tue, 6 Jun 2023 00:58:16 +0900

앱 만들기 공부를 시작하면서 알게된 사이트인데 색상이 괜찮게 커스텀 된 것 같아 포스팅 해두려 한다 :)

[참고 링크]

https://m3.material.io/theme-builder#/custom

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

[ react native ] useState Hook으로 상태 관리하는 방법

JooKit 주킷 — Mon, 5 Jun 2023 23:54:30 +0900

리액트에서 상태를 관리하는 가장 기본적인 방법으로 useState라는 함수를 사용하는 것이다.

리액트에는 use로 시작하는 다양한 함수가 내장되어 있는데 이 함수들을 Hook이라고 부른다.

Hook을 사용하여 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다.

그 중에서 useState는 상태 값을 관리하는 함수이다.

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <SafeAreaView style={style.full}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

useState 함수는 위 예시처럼 다음과 같이 사용한다.

  const [count, setCount] = useState(0);

여기서 count 는 상태 값을 가리키며, setCount는 상태 값을 변경할 수 있는 함수를 의미한다.
setCount의 상태 값을 변경할 수 있는 함수명은 상황에 맞게 정해서 사용하면 된다.
상태 값을 의미하는 count 변수명도 수정 가능하다.

useState(0) 함수에 넣어준 파라미터 0의 값은 상태 값의 초깃값을 의미한다.

결국 useState가 호출되면 두 가지 원소가 들어있는 배열을 반환하는데,

그 배열에는 첫 번째 원소에 상태 값, 두 번째 원소에 상태를 업데이트 하는 함수가 들어있다.

useState를 사용해서 Boolean, 숫자, 객체, 배열 등의 형태를 가진 상태를 관리할 수도 있다.

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title="+1" onPress={onIncrease} />
      <Button title="-1" onPress={onDecrease} />
    </View>
  );
}

Counter 컴포넌트는 버튼 2개를 가지고 있으며 App컴포넌트에서 렌더링하고 있다.
App컴포넌트에서 Counter 컴포넌트의 각 버튼을 누를 때 useState 함수를 호출해서 숫자를 + 또는 - 해서 Counter 컴포넌트의 count로 그려주고
업데이트 된 Counter 컴포넌틀를 App컴포넌트에서 다시 렌더링 해주는 것이다.

코드를 모아서 다시 정리해보면 아래와 같다.

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <SafeAreaView style={style.full}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title="+1" onPress={onIncrease} />
      <Button title="-1" onPress={onDecrease} />
    </View>
  );
}

아래는 초깃값을 true로 설정한 useState의 값을 setVisible 상태 변경 함수를 호출하여

값의 반전을 줄 수 있는 방법으로 추후 본격적으로 프로젝트를 만들 때 유용할 것 같아 참고차 포스팅 해놓는다.

const App = () => {
  const [visible, setVisible] = useState(true);
  const onPress = () => {
    setVisible(!visible);
  };

  return (
    <SafeAreaView>
      <Button title="토글" onPress={onPress} />
      {visible && <Box rounded={true} size="large" color="green" />}
    </SafeAreaView>
  );
};

아래와 같이 해주면 조건 상관 없이 처음 설정한 초깃값의 반대로 값을 세팅할 수 있다.

    setVisible(!visible);

[react native] 객체 구조 분해 할당이란?

JooKit 주킷 — Mon, 5 Jun 2023 23:39:37 +0900

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이다.

구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당' 이라고 부르기도 한다.

이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다.

객체를 참조해서 콘솔로 찍어보면 아래와 같이 사용된다.

function print(params) {
    console.log(params.name);
    console.log(params.descr);
}

구조 분해 할당을 사용한다면 아래와 같이 사용할 수 있다.

function print({name, descr}) {
    console.log(name);
    console.log(descr);
}

이렇게 사용하면 매번 객체를 참조하지 않고 코드를 간결하게 사용할 수 있다.

아래는 리액트 네이티브로 작성한 '구조 분해 할당' 예시 코드이다.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

function Name({name, age}) {
  return (
    <View style={[styles.setLocation]}>
      <Text style={styles.setText}>안녕하세요.</Text>
      <Text style={styles.setText}>저는 {name}입니다.</Text>
      <Text style={styles.setText}>{age}살 입니다.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  setLocation: {
    justifyContent: 'center',
    flex: 1,
    fontSize: 60,
  },
  setText: {
    textAlign: 'center',
    fontSize: 40,
  },
});

Name.defaultProps = {
  name: '홍길동',
  age: '20',
};

export default Name;

[react native] 리액트 네이티브 공부를 막 시작할 때 참고하면 좋은 정보 공유드립니다.

JooKit 주킷 — Mon, 5 Jun 2023 23:32:26 +0900

React Native 기초

1. 리액트 컴포넌트를 만들 때는 아래 코드를 꼭 입력해야 한다.

import React from 'react';

2. 컴포넌트를 선언하는 방법 2가지

함수 선언 : function
클래스 선언
- 클래스는 2018년 전에 주로 사용하던 방법으로 지금은 잘 사용하지 않는다.

3. function, 화살표 함수 선언

기능적으로 차이는 없다.
화살표 함수의 경우, 간단하게 반환할 때 사용되며 중괄호/return 을 생략할 수 있다.
그치만 페이스북에서도 화살표 함수가 아닌 function 함수를 선언해서 리액트 네이티브를 개발한다고 한다.

4. JSX에서 자바스크립트 표현식을 보여줘야 할 때는 중괄호로 감싸서 작성해야 한다.

자바스크립트 표현식 : 연산 결과, 함수 호출, 특정 변수 또는 상수

5. defaultProps 사용 익히기

리액트 컴포넌트에서 사용되는 정적 멤버 변수(static member variable)로서, 컴포넌트의 기본 속성 값을 정의하는 데 사용됩니다.

6. 반환할 때는 꼭 하나의 태그로 감싸기

View태그를 남용하면 나중에 레이아웃 관련 작업이 귀찮아질 수 있으므로 JSX Fragment(빈 태그)를 사용하면 좋다.
<> <View><Text>컴포넌트</Text></View> <Text>텍스트입니다!!</Text> </>

7. StyleSheet 컴포넌트에 스타일 입히기

css 속성값들 확인
https://www.w3schools.com/css/default.asp
react-native 모듈에서 불러와서 사용할 수 있다.
css와 주요 차이점
- 셀렉터라는 개념이 존재하지 않는다.
- 모든 스타일 속성은 camelCase로 작성해야 한다.
- display 속성은 기본적으로 flex이며, 다른 값은 none 밖에 없다.
- flexDirection 속성의 기본값은 웹에서는 row이지만 react native에서는 column이다.
- 리액트 네이티브에서 스타일링할 때 숫자 단위는 dp뿐이다.
- background 대신 backgroundColor를 사용해야 한다.
- border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정해야 한다.
스타일들을 const 객체에 담아 props로 전달 받는 값에 따라 다른 스타일을 보여줄 수 있다.

8. Props 객체 구조 분해 할당

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이다.
구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당' 이라고 부르기도 한다.
이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다.

2023.06.05 - [IT 유용한 정보] - [react native] 객체 구조 분해 할당이란?

[react native] 객체 구조 분해 할당이란?

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이다. 구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당' 이라고 부르기도 한다. 이 문법은 객체 안에

harrydony.tistory.com

9. useState Hook으로 상태 관리하기

리액트에서 상태를 관리하는 가장 기본적인 방법으로 useState라는 함수를 사용하는 것이다.
리액트에는 use로 시작하는 다양한 함수가 내장되어 있는데 이 함수들을 Hook이라고 부른다.

Hook을 사용하여 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다.

그 중에서 useState는 상태 값을 관리하는 함수이다.

위 내용을 토대로 하나씩 찾아보며 공부를 하면 좋을 것 같다.

[github] 깃허브 사이트에서 보안 취약 알림 해결하는 방법

JooKit 주킷 — Mon, 5 Jun 2023 16:21:00 +0900

앱을 만들고 싶어서 react native 공부를 시작하려고 리액트 네이티브 프로젝트를 git에 push 했다.

알람 올 일이 없는데 알람이 보여서 확인해보니 보안이 취약하다고 친절히 안내해주는 알림이었다.

해결 방법

리엑트 네이티브 프로젝트가 존재하는 폴더에서 터미널을 열고 아래 명령어를 입력하여 해결할 수 있다.

프로젝트의 취약한 부분을 조회할 수 있다.

$ yarn audit

0개의 취약한 부분을 발견했다고 한다.

업데이트 해줄 게 없는건가,, 흠...

빈 프로젝트여서 보안에 취약하다고 친절히 알려준걸까..

만약 취약한 부분을 업데이트 해야 하는데 업데이트가 되지 않는다면
강제로 해줄 수 있다고도 한다.

npm audit fix --force

[react native] 생성된 프로젝트의 파일 설명

JooKit 주킷 — Mon, 5 Jun 2023 13:59:28 +0900

index.js

프로젝트의 엔트리 파일로, 생성한 리액트 네이티브 앱은 이 파일에서 시작한다.
여기서 import 구문을 통해 코드들을 불러와 앱을 번들링한다.

@format : 코드 스타일을 자동으로 정리해주는 Prettier라는 도구와 관련이 있다.

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

간단한 설명일지라도 가장 중요한 부분이 아닐까 싶다.
App이라는 컴포넌트를 불러와서 AppRegistry.registerComponent라는 함수를 사용해 네이티브 시스템에 해당 컴포넌트를 등록한다.
이 작업을 해줘야 네이티브 시스템에서 내가 만든 리액트 네이티브 컴포넌트를 화면에 보여줄 수 있다.

[react native] 프로젝트 만드는 방법

JooKit 주킷 — Mon, 5 Jun 2023 13:43:30 +0900

리엑트 네이티브 프로젝트 생성

$ npx react-native init projectName

npx란?

Node.js와 함께 설치되는 도구로, Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해준다.

package.json

package.json 파일을 열어보면 위와 같이 scripts가 설정된 것을 확인할 수 있다.
이렇게 스크립트가 설정되면 yarn을 통해 아래와 같이 원하는 명령어를 실행할 수 있다.

$ yarn <스트립트 이름>

스트립트 종류

android : 안드로이드 환경에서 앱을 구동하는 스크립트
ios : iOS환경에서 앱을 구동하는 스크립트
start : Metro를 구동하는 스크립트

Metro란?

리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일들을 모두 읽어서

올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행할 준비를 해준다.

android나 ios 스크립트를 사용하면 새로운 터미널에서 start스크립트가

자동으로 시작되기 때문에 start스크립트를 직접 입력해 실행하는 일은 드물다.

프로젝트 실행

$ yarn ios

선행 작업

Node.js 설치

Node.js 란?

웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 Chrome V8 Javascript 엔진으로 빌드된 런타임이다.

npm 설치(Node.js 설치하면 함께 설치된다)
Java 설치
Yarn 설치

Yarn은 npm과 같은 패키지 관리 도구이다. npm과 역할이 동일하지만 성능이 개선되어서 npm보다 패키지를 더 빨리 설치한다.yarn도 리액트/리액트 네이티브와 같이 페시트북에서 만든 도구이다.

Watchman 설치 (필수X)

javascript로 form을 제출하는 방법은?

JooKit 주킷 — Thu, 1 Jun 2023 06:27:59 +0900

아래와 같이 사용하면 html에 그리지 못한 form을 자바스크립트로 직접 만들어서 서버단으로 데이터를 전송할 수 있다.

let form = document.createElement('form');
form.action = '/test/test2/test3';
form.method = 'POST';

let el = '<input name="paymentType" value="' + paymentType + '" type="hidden" >';
el += '<input name="orderId" value="' + orderId + '" type="hidden">'; 
el += '<input name="paymentKey" value="' + paymentKey + '" type="hidden">'; 
el += '<input name="amount" value="' + amount + '" type="hidden">'; 

form.innerHTML = el; 

// 폼을 제출하려면 반드시 폼이 문서 안에 있어야 한다.
document.body.append(form);

form.submit();

html 태그에 form을 그리고 또 요소들을 찾아서 javascript로 값을 할당하고 다시 submit하는 과정이 번거로웠고

왜 때문인지 백엔드로 POST 방식 데이터를 전송해야 하는데 다른 페이지로 렌더링 되는 것이 아닌가.,

회사 플랫폼이 form을 즐겨 사용하지 않고 ajax를 주로 사용하고 있어서 그런것 같지만서도,

그래도 어찌됐든 또 방법을 찾았고 백엔드로 데이터를 넘겨서 활용한 후에 내가 원하는 페이지로 잘 갔으니 안심!

javascript에서 현재 URL의 원하는 파라미터 값 추출하는 방법

JooKit 주킷 — Thu, 1 Jun 2023 06:18:01 +0900

현재 페이지 URL에서 원하는 파라미터 값을 추출 하는 방법 공유드립니다!

테스트는 아래 네이버 기사 링크타고 들어가서 개발자 도구 콘솔에서 타이핑 해보았습니다.

https://n.news.naver.com/article/005/0001612676?cds=news_media_pc&type=editn

“세안제 위장 염산 나눠준다고?”…알고보니 ‘흑설탕물’

31일 소셜미디어와 지역 커뮤니티 등을 중심으로 경기 의정부, 양주 지역에 “누군가 세안제를 가장한 ‘염산’을 아이들에게 나눠주고 있다”는 경고글이 퍼지며 일대 주민들을 긴장시켰다.

n.news.naver.com

?cds=news_media_pc&type=editn

네이버 기사 URL 파라미터들입니다.

cds와 type 파라미터 값을 제대로 출력하는지 확인해 보았어요.

const urlParams = new URL(location.href).searchParams;
let cds = urlParams.get("cds"); 
let type = urlParams.get("type"); 

console.log(cds);  // news_media_pc
console.log(type); // editn

사실 다른 방법으로 사용하려 했지만 왜인지 조금 미흡하게 느껴지는 부분이 있어서

다시 찾게 된 방법인데 아주 괜찮은 방법인 것 같아서 이렇게 정리 해두고

추후 저도 참고 하고 다른 분들께도 도움 드리고자 합니다 :)

javascript에서 var, let, const 차이점을 알고 사용해보자.

JooKit 주킷 — Thu, 1 Jun 2023 05:35:55 +0900

See the Pen Untitled by hyeryeonkim (@khr777) on CodePen.

var 변수 선언은 전역 변수 또는 함수 내에서 사용하기 위해 선언하죠.

let과 const 변수가 나오기 전에는 모두 var 변수를 사용했는데 var 변수가 갖는 문제가 많다보니

let과 const를 접한 이후로는 자연스럽게 let과 const를 사용하게 되더라구요.

var변수는 재선언이 가능하며 값도 다시 설정할 수 있습니다.

물론 여기에서 발생하는 문제가 흔히 알고 있는 var의 문제점이죠.


var mung = 3; 
mung = 4; 

console.log(mung); 

function method_1() {
  mung = '사람'; 
  console.log(mung); //사람 
  var mung = '강아지'; 
  console.log(mung); //강아지 
}

method_1();

mung이라는 변수명으로 var 변수에 3을 초기화 하고 바로 4를 할당합니다.

그리고 콘솔을 찍으면 4가 나오겠죠.

method_1() 이라는 함수를 만들어서 전역 변수인 mung에 '사람'을 할당하고 출력 해본 후에 mung을 var 변수로 재선언해도 오류 없이 동작되며 재선언한 '강아지'값이 출력되는 것을 확인 할 수 있습니다.

다음으로 let 변수를 살펴볼게요.

let hoho; 
console.log(hoho); 

function method_2() {
  hoho = '호호'; 
  console.log(hoho); 
  // let hoho = '잉 재선언 불가'; 
  //console.log(hoho); 
  let a = 30; 
  let b = 80; 
  let total = a + b;
  console.log(total); 
}

method_2();

굉장히 간단해 보이는 코드이지만 let 변수의 경우 전역 범위에서

이미 선언한 변수를 함수 내에서 재선언 할 수 없기 때문에 오류가 발생합니다.

let도 전역 범위에서 사용할 수 있기 때문에 상황에 따라서 적절하게 사용한다면

나도 모르게 중복되는 변수를 만들고 의도치 않은 값들을 가지고 있는 변수를 확인한다면 굉장히 당혹스럽겠죠.

const con = '변경할 수 없는'; 
console.log(con);  // 변경할 수 없는

// con = '변경 할 수 없군, 오류 발생'; error  

const obj = {
  a:1,
  b:2
}


console.log(obj)  // obj
console.log(obj.a) // 1 
console.log(obj.a + obj.b)  // 2 

const obj_v2 = {}; 
obj_v2.name = 'mangaji'; 
obj_v2.age = '10'; 

console.log(obj_v2);  // obj_v2

obj_v2.name = 'mangaji___2'; 
console.log(obj_v2.name)  //

마지막으로 const 변수 입니다.

const는 값을 변경하지 않는 상수를 초기화 한다고 생각하시면 되세요.

보통 const에는 일반적인 값들 보다는 변경되면 안되는 값이나 객체를 할당해서 사용하죠.

객체를 초기화(선언)하는 방법은 위와 같이 2가지가 있습니다.

const의 값을 직접적으로 변경할 수는 없지만 const에 주입한 객체의 속성 값은 수정되는 것을 확인해보았으니

테스트 해보시며 var, let, const의 차이를 익히시고 적절한 상황에 이용하시면 좋을 것 같네요!

Android, 패키지 명으로 외부 앱이 실행되지 않을 때, pname:com ~, 최신 기종에서 카드결제가 되지 않을 때

JooKit 주킷 — Fri, 26 May 2023 12:58:57 +0900

최근에 회사에서 운영하는 플랫폼 앱이 안드로이드 최신 기종에서 다운로드 되지 않는 문제가 발생했었다.

그래서 targetSdkVersion을 31로 업데이트해서 다시 배포한 적이 있었다.

2023.05.11 - [IT 유용한 정보 모음/IT 유용한 정보] - [Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다른 사람이 작업하던 프로젝트 import하는 방법

[Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다

회사에서 운영하는 플렛폼은 웹서비스로 제공하고 있고 안드로이드 어플로도 서비스를 제공하고 있다. The platform operated by the company is provided as a web service and also available as an Android application. 운영

harrydony.tistory.com

그 때부터일까,, 앱에서 카드 결제가 되지 않는다는 문의가 속출했다.

카드 결제를 시도하면 카드사 앱으로 넘어 갔다가 설치가 되어 있는데도 불구하고 카드사 앱이 열리지 않아 결제를 완료하지 못하는 문제가

계속 발생하고 있었다.

개발자이지만 안일하게도 앱을 업데이트 하지 않았거나 단순 기종 문제일 것이라고 판단했던 나는 며칠을 두고 보고 있었다,,

그러나 문의가 계속 빈번하게 들어오는걸 보고 뭔가 잘못 되었다는 것을 인지했다.

그래서 잘 알지도 못하는 안드로이드 프로젝트를 또 뒤져보고 구글링하기 시작했다.

나이스페이먼츠 개발자 페이지도 들어가보고,.

이것저것 찾아보다가 또, 역시나, 결국 희망을 찾았다.

찾아보니 API 30 이상(안드로이드 11)을 타겟할 때 외부 앱을 실행할 때는 Manifest에 queries에

외부 앱 패키지를 직업 추가 해주어야 한다고 한다.

여기서 말하는 외부 앱 패키지란?

구글 플레이스토어에서 원하는 앱을 검색한 후 url에서 id파라미터 값을 의미한다.

국민카드 앱을 검색했을 때 나오는 id 값인

com.kbcard.cxh.appcard

이 값이 KB Pay 앱의 패키지 명 이다.

아래와 같이 이런식으로 써주면 되는 것이였다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="내패키지명"
    
    ...
    
    <!-- SDKVersion 30 이상은 외부앱 실행 시 권한 추가 필요-->
    <queries>
	<package android:name="com.kbcard.cxh.appcard" /> 
    </queries>
    
    ...
    
    <application 
    		...
            
            				>
                            ...
    </application>

아래는 나이스페이먼츠 개발자 문서에서 제공한 내용이다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="sample.nicepay.co.kr.nicepayappsample">
	
	<queries>
        <!--신용카드-->
        <package android:name="kr.co.samsungcard.mpocket" />  <!--삼성 앱카드, 삼성 앱카드 공동인증서-->
        <package android:name="com.shcard.smartpay" />  <!--신한 페이판-->
        <package android:name="com.shinhancard.smartshinhan" />  <!--신한(ARS/일반결제/Smart결제), 신한 공동인증서-->
        <package android:name="com.kbcard.cxh.appcard" />  <!--KBPay-->
        <package android:name="com.kbstar.liivbank" />  <!--LiiV(국민은행)-->
        <package android:name="com.kbstar.reboot" />  <!--new liib-->
        <package android:name="kvp.jjy.MispAndroid320" />  <!--페이북/ISP-->
        <package android:name="com.hanaskcard.paycla" />  <!--하나카드 원큐페이-->
        <package android:name="kr.co.hanamembers.hmscustomer" />  <!--하나멤버스-->
        <package android:name="com.lcacApp" />  <!--롯데 앱카드-->
        <package android:name="nh.smart.nhallonepay" />  <!--NH 올원페이, NH 올원페이 공동인증서-->
        <package android:name="com.wooricard.smartapp" />  <!--우리 WON 카드-->
        <package android:name="com.hyundaicard.appcard" />  <!--현대 앱카드-->
        <package android:name="kr.co.citibank.citimobile" />  <!--씨티카드-->

        <!--공인인증-->
        <package android:name="com.hanaskcard.rocomo.potal" />  <!--하나카드-->
        <package android:name="com.lumensoft.touchenappfree" />  <!--공동인증서-->

        <!--백신-->
        <package android:name="com.TouchEn.mVaccine.webs" />  <!--TouchEn mVaccine(신한)-->
        <package android:name="com.ahnlab.v3mobileplus" />  <!--V3(NH, 현대)-->
        <package android:name="kr.co.shiftworks.vguardweb" />  <!--V-Guard(삼성)-->

        <!--간편결제-->
        <package android:name="com.samsung.android.spay" />  <!--삼성페이(삼성, 농협, KB)-->
        <package android:name="com.samsung.android.spaylite" />  <!--삼성페이 미니(삼성, KB)-->
        <package android:name="com.kakao.talk" />  <!--카카오페이-->
        <package android:name="com.nhn.android.search" />  <!--네이버페이-->
        <package android:name="com.ssg.serviceapp.android.egiftcertificate" />  <!--SSGPay(현대)-->
        <package android:name="com.nhnent.payapp" />  <!--페이코(삼성, 농협, KB)-->
        <package android:name="com.lge.lgpay" />  <!--엘지페이(삼성, KB)-->
        <package android:name="com.lottemembers.android" />  <!--LPay-->
		<package android:name="com.tencent.mm" /> <!-- 위챗페이-->
        <package android:name="viva.republica.toss" /> <!-- 토스-->

        <!--계좌이체-->
        <package android:name="com.kftc.bankpay.android" />  <!--금결원-->

        <!--본인인증-->
        <package android:name="com.sktelecom.tauth" />  <!--SKT-->
        <package android:name="com.kt.ktauth" />  <!--KT-->
        <package android:name="com.lguplus.smartotp" />  <!--LGT-->
    </queries>

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true">
        <activity android:name=".MainActivity"
            android:configChanges="orientation"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name=".WebViewActivity"
            android:label="NicePay Smart"
            android:configChanges="orientation"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
            </intent-filter>
        </activity>

    </application>

</manifest>

queries에 패키지가 다 들어가 있는 코드를 이미 제공하고 있었다. 아무래도 우리 앱이.., 오래..된 것까지는 아니여도,,. 허ㅠㅠ

어렵다 정말.

그래도 희망을 찾았고, 다시 한번 업데이트 배포를 했고. 검토 완료를 기다리고 있는 상황으로 검토 승인 이후에 최신 기종에서 결제가 제대로 되는지 확인 후 후기를 아래에 남기도록 하겠다.

[ 출처 : https://developers.nicepay.co.kr/manual-app.php ]

Manual

안드로이드 Kotlin Web-view 연동

developers.nicepay.co.kr

[ 출처 : https://to2.kr/eyD ] url이 길어서 줄였습니다.

[Android/Kotlin] 패키지 명으로 외부 앱 실행 안됨 해결 / 안드로이드 11 이상 타켓 시 Manifest 추가

[Android/Kotlin] 패키지 명으로 외부 앱 실행 안됨 해결 / 안드로이드 11 이상 타켓 시 Manifest 추가 기기 설치된 패키지명 확인 먼저 기기에 설치되어있는지 확인 후 설치되어있으면 앱 실행. 안되

velog.io

t.has is not a function TypeError, t.has 타입 오류

JooKit 주킷 — Wed, 24 May 2023 18:00:05 +0900

이번에 회사에서 운영하는 서비스의 결제 방식을 나이스페이먼츠에서 토스페이먼츠로 변경하게 되었다.

그래서 토스 연동을 시작하며 관련 자료를 포스팅 하려던 찰나, 연동 테스트 API를 호출하려고 간단한 테스트 코드를 삽입했는데 오류가 발생했다.

대체, 왜?

구글링을 하다가 다행히 문제를 해결할 수 있는 팁을 얻어 나도 기록해보려 한다.

사실 문제를 해결하기까지도 대체 뭐 때문인지,. 망연자실 하고 있었던 나였다. , .

일단 해당 오류 원인은 이러했다.

카카오에서 제공하는 카카오 맵 SDK 에서 javascript native Map을 활용하고 있는데, 또다른 스크립크에서 Map객체를 덮어 씌워서 문제가 발생한 것이라고 한다.

해결 방법은, 카카오 맵 SDK보다 우선적으로 import하니 오류 없이 정상적으로 토스 페이먼츠 연동 테스트 위젯이 활성화 되었다.

출처에 기록한 글의 카카오에서는 동일한 이슈가 빈번히 발생하여 위와 같은 이슈가 발생하지 않도록 우회하도록 수정을 하였다고 했는데 왜 때문인지 우리 회사 프로젝트에서는 먹통이였다.,

정말 내가 문법을 잘못 작성해서 오류가 날 때도 있지만 이렇게 나도 모르게 오류가 발생하는 경우에는 스크립트 위치.,도 한번 의심해보면 좋을 것 같다. 역시 개발자는 의심을..

그래도 해결할 수 있어서 정말 다행이다,,.... 토스 연동하기 정말 쉽다고 안내를 받았는데 :) ............. ,,

이제 다시 이어서 작업을 해볼까 한다 !

[ 출처 : https://devtalk.kakao.com/t/uncaught-typeerror-t-has-is-not-a-function/116412 ]

스크립트 에러 Uncaught TypeError: t.has is not a function

안녕하세요. 국립중앙박물관 e-Museum 유지보수 담당 개발자입니다. 다름이 아니라 갑작스럽게 카카오 연동 로그인이 되지 않고 있어서 문의 드립니다. 저희 시스템 문제인지 확인을 해보았지만

devtalk.kakao.com

box-shadow를 사용해서 요소에 그림자 효과를 주는 방법

JooKit 주킷 — Tue, 23 May 2023 21:18:41 +0900

box-shadow: 2px 2px 2px 2px;

box-shadow: 3px 3px 3px 3px;

box-shadow: 4px 4px 4px 4px;

box-shadow: 5px 5px 5px 5px;

각각 다르게 px을 적용해서 그림자 효과를 줄 수 있다.

박스가 조금 더 아름다워 보이는 효과

jquery로 특정 클래스를 가진 요소를 한번에 여러개를 찾아서 클래스를 변경하는 방법

JooKit 주킷 — Wed, 17 May 2023 19:33:10 +0900

프론트 작업을 하다가 특정 클래스를 많은 요소에 심어두고 한번에 제거해서
다른 클래스를 추가하고 싶은 상황이 생겼다.

어떻게 할 수 있을까 생각을 하다가 foreach, each 다른것도 약하지만 프론트에 한없이 약하기에(본인은 굉장한 노력파)

또 열심히 찾아본 결과 나름 나쁘지 않은 해답을 찾았다.

본인은 요소들을 찾아서 값을 변경하거나 하는 등의 중요한 작업을 하는게 아닌 A클래스를 가진 요소를 찾아서 A클래스를 제거하고 B클래스로 변경해주고 싶었다.

이런 경우 아래와 같이 처리하면 아주 간단히 처리할 수 있다.

// 특정 클래스를 가진 요소 선택
var elements = $(".특정클래스");

// 선택한 요소의 클래스 변경
elements.removeClass("기존클래스").addClass("변경할클래스");

위와 같이 사용하면 1개의 클래스만이 아닌 특정클래스를 지닌 요소 여러개의 기존클래스를 한꺼번에 제거하고

그 요소들에 변경할 클래스를 모두 추가해줄 수 있다 :)

햅삐햅삐

jquery로 쿠키 생성/수정/삭제하는 방법

JooKit 주킷 — Wed, 17 May 2023 19:15:19 +0900

우선 쿠키란 무엇인지 간략하게 알아보자

쿠키는 웹 사이트에서 사용자의 컴퓨터에 저장되는 작은 데이터 조각이다. 쿠키는 사용자와 웹 사이트 간의 상호작용을 기록하고 유지하는 데 사용된다.

쿠키는 웹 사이트가 클라이언트를 식별하고 상태를 추적하는 데 사용되며 클라이언트가 웹 사이트에 방문하면 서버에서 쿠키를 생성하고, 그 후 클라이언트의 브라우저에 저장된다.

클라이언트가 같은 웹 사이트를 방문할 때마다 해당 쿠키가 서버로 전송되어 서버는 클라이언트를 식별하고 상태를 추적할 수 있다.

쿠키에는 이름, 값, 만료일, 도메인 등의 정보가 포함되어 브라우저에 저장된다.

필요한 script 모음

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

cookie 생성

$.cookie('name', 'value', { expires: 1, path: '/' });

'name' : 쿠키명
'value' : 쿠키값
expires: 유효기간(만료일)을 의미하며 1은 1일을 의미
path: 쿠키를 설정하는 도메인(경로) path를 꼭 설정해주어야 한다.

cookie 삭제

$.removeCookie('name', {path: '/'});

삭제하려는 쿠키명과 path를 기입하여 명시적으로 쿠키를 삭제해주어야 한다.

만약, 쿠키의 값을 수정하고 싶다면?

아래와 같이 다른 value 값으로 쿠키를 설정해주게 된다면 쿠키의 값은 수정되지 않고 예상과는 다르게
다른 값을 가진 동일한 쿠키가 생성되게 된다.

$.cookie('name', 'value22', { expires: 1, path: '/' });

그러니 동일한 쿠키명으로 쿠키의 값을 바꾸고 싶다면?

이미 생성한 쿠키를 삭제해준 후에 다른 값으로 새로 생성해주어야 한다.

협업툴 Slack으로 즐겁게 일하는 방법 :) Slack 상태 편집 하는 방법

JooKit 주킷 — Wed, 17 May 2023 18:23:10 +0900

회사에서 사용하는 협업툴 Slack을 이용하다보면 알게모르게 신기한 기능들을 하나씩 접하게 된다.

예를 들자면.. 뭐, 워크플로부터 시작해서 지금 소개할 상태 편집하는 방법이랄까?

워크플로 생성하는 방법은 조만간 소개하도록 하겠다.

회사에서 사용하고 있는 Slack이다보니 상세하게 노출할 수 없기에 많은 부분을 가릴 수 있는 점
이해 부탁드리겠습니다 :)

내가 공유하고자 하는 Slack 상태 편집 결과물을 먼저 보여주려 한다.

화살표를 따라서 요기 조기 보면 'ON 업무중' 이라고 표시된 나의 Slack 상태를 확인할 수 있다.

분명 많은 사람들이 사용하고 있을테지만 아직 상당히 모르는 사람이 많아서 먼저 사용해본다면 아주 재미있을 것이다.

사이드바 다이렉트 메시지에서 보면 이렇게 작성자 본인과 다른 동료만 Slack 상태가 설정되어 있고 다른 분들은 Slack 상태가 설정되어 있지 않은 것을 확인할 수 있다.

물론 방법을 알지만 설정하지 않은 것일 수도 있고 생각조차 못하셨을 수도 있다.

Slack 상태 편집을 하는 방법은 생각보다 아주 간단하다! 이제 시작해볼까?

맥북이라면 command + Shift + y 윈도우라면 ctrl + Shift + y 단축키

를 입력하여 상태 설정 창을 열 수 있다.

단축키가 아니더라도 Slack에서 프로필을 열고 본문 상단에서 이미지로 첨부해서 이미 공유했던 이미지에서 아래 화살표가 가리키고 있는 ON 업무중 아래 쪽을 보면 상태 편집 메뉴가 보일 것이다. 그 메뉴를 클릭하면 된다.

위 이미지에서 보이는 상태 설정 창에서 엑스를 클릭하면?

아래와 같이 내가 최근에 사용했던 상태를 확인할 수 있고 선택해서 설정도 할 수 있으며 다른 상태를 추가로 설정 및 변경도 할 수 있다.

회사에서 Slack 상태를 만들어 놓은게 있다면?? 그걸 활용해도 좋다!

우리 회사에서는 만들어주신게 있는 것 같은데, 아무도 사용하고 있지 않다.. 내가 조만간 써....볼 일이 있을까,,, 병가.. 휴...가.... .쓸 일이..

내가 최근에 사용한 상태를 선택해서 상태를 설정할 수 있고, 상태를 새로 설정하고 싶다면 화살표의 스마일 친구를 클릭해서 원하는 이모지를 선택해서 원하는 문구로 상태를 설정하면 된다.

이제 마지막이다!

그렇게 되면 다시 이 상태로 돌아오게되고, 설정한 상태의 유지 시간을 설정할 수도 있다.

특정 날짜와 퇴근 시간 등도 설정할 수 있고 아예 지우지 않을 수도 있기 때문에 내 스케쥴에 맞춰 유용하게 사용하면 아주 좋을 것 같다 :)

Slack 유용한 단축키 모음

JooKit 주킷 — Wed, 17 May 2023 17:45:37 +0900

회사에서 협업툴로 Slack을 사용하고 있다.

현란한 손놀림으로 Slack을 사용하고 싶지만 그래도 나름 자주 사용하는 기능들은 손쉽게 이용하고 있는 것 같아 정리해보려고 한다.

window 사용자의 경우 command를 ctrl로 입력해주면 된다.

검색	command + G
현재 대화에서 검색	command + F
사이드바 표시 / 숨기기	Shift + command + D
상태 설정 열기	Shift + command + Y
오른쪽 창 닫기 또는 다시 열기	command + .
텍스트를 코드로 형식 지정	Shift + command + C
번호 매기기 목록으로 형식 선택	Shift + command + 7
글머리 기호 목록으로 형식 선택	Shift + command + 8
인용으로 형식 선택	Shift + command + 9
코드 블록으로 형식 선택	Option + Shift + command + C
현재 채널의 모든 메시지를 읽음으로 표시	Esc
모든 메시지를 읽음으로 표시	Shift + Esc
파일 추가	command + U
코드 조각 생성	Shift + command + Enter
이전 워크스페이스 이동	command + Shift + [
다음 워크스페이스 이동	command + Shift + ]
특정 워크스페이스 이동	command 및 1-9

나같은 경우에는 데이터를 수정하거나 삭제하는 경우가 있어 원본 데이터를 보관할 용도 또는 작성한 쿼리를 보관할 용도로써 단축키를 활용해 코드 블록을 만들어서 데이터 및 쿼리 보관을 손쉽게 하는 편이다 :)

굿굿

누나가 돈 많이 벌어 볼게.. 용자는 코 낸내해 :)

JooKit 주킷 — Tue, 16 May 2023 19:30:03 +0900

용자는 껌을 물고 놓지를 않아

껌먹고 자니.. 자니? 자니??????

또 ..... 자...................? ,,,, 그래 자라 자...

누나는 일하는데 너는 계속 자........................... 그만 자 이제.........................

그래 !!!! 이제 누나한테 좀 와봐 용자야 !!!!!!!!!!!!!!!!!!!!!!

우리 용자 이렇게 털 예쁘게 길었는데,,, 너 더울까봐 잘라준거야,,,, 너무 상심치마........... 나름 괜찮아... 나쁘지 않아.. 제법 괜찮아 잘 어울려 누나의 가위컷............................................................................... ㅎㅎㅎㅎㅎㅎㅎㅎ

quartz 중복 방지, quartz 중복 실행 해결, trigger 실행 카운트, 참고만해주세요

JooKit 주킷 — Tue, 16 May 2023 18:10:29 +0900

쿼츠 중복 해결을 바로 참고하시려면 아래로 이동해주세요!

내가 속한 회사에서 운영하는 플렛폼은 2개의 프로젝트로 운영되고 있다.

A프로젝트에서는 쿼츠를 돌렸을 때 중복 실행이 되지 않아 쿼츠를 실행할 기능들을 모두 A프로젝트에서 구현하고 있었다.

B프로젝트에서 쿼츠를 돌리면 중복 실행이 되어 쿼츠 구현을 하고 있지 않았으나 이번에 나는 B프로젝트의 중복되는 쿼츠 부분을 어떻게든 고치고 싶었다.

오기가 생겼다. 사실 이미 B프로젝트에 작업을 해버렸고, B프로젝트 쿼츠가 안된다고 안 쓸수 없지 않은가....

너무나도 오기가... 생겨서 pc랑 싸울뻔...

일단 한 두달 전쯤에 톰캣 로그에서 쿼츠 스레드가 종료되지 않은채로 남아있다는 로그를 아주 많이 본적이 있었다. 이를 해결하고 싶었지만 당장 어떻게 해결을 해야할지 몰라서 급하게 다른 오류들만 해결하고 쿼츠 스레드 오류는 다음으로 미루었다.

쿼츠 스레드가 종료되지 않았다는 오류는 아래들과 같다.

웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-1](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)

3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-2](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-3](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-4](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-5](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-6](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-7](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-8](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-9](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)
3월 21, 2023 5:43:27 오전 org.apache.catalina.loader.WebappClassLoaderBase clearReferencesThreads
경고: 웹 애플리케이션 [ROOT]이(가) [org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-10](이)라는 이름의 쓰레드를 시작시킨 것으로 보이지만, 해당 쓰레드를 중지시키지 못했습니다. 이는 메모리 누수를 유발할 가능성이 큽니다. 해당 쓰레드의 스택 트레이스:
 java.lang.Object.wait(Native Method)
 org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:543)

이렇게

org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-10

Worker-10까지 쓰레드를 시작시켰고 중지시키지도 못했다고 , 메모리 누수를 유발할 가능성이 있다는 오류였다.

대체 뭐 때문에 중복으로 쿼츠가 돌아가는지 콘솔도 뚫어져라 쳐다보다보니 쿼츠가 처음부터 중복으로 실행되는 것도 아니였다.

그러다 한참..... 쿼츠 중복 실행되는걸로 알아보다가...... 왠걸.. 역시 콘솔 오류 볼 때는 두눈 크게 뜨고 봐야한다....

org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-1

org.springframework.scheduling.quartz.SchedulerFactoryBean#0_Worker-2

이 두 놈이랑 눈이 마주쳐버린 것.... 잡았다 요놈.........

분명히 쿼츠가 종료되지 않은채로 중복으로 실행이 되고 있었고, 대체 왜 쿼츠가 종료되지도 않았는데..

그래서 또 한참 찾아보다보니 trigger를 실행하는 수를 제한할 수 있는 방법이 있었다.

그 방법이 바로 아래 방법이다 !

보통 Quartz가 작업 스케줄링을 관리하는데 중복 실행을 피하기 위한 내부 메커니즘을 가지고 있다고 한다.

그런데 나는 왜... 중복으로 실행이 되냔 말이다ㅠㅠ,,...

<bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean">
    <property name="triggers" >
        <list>
            <ref bean="dayTrigger"/>
        </list>
    </property>

    <!-- 여기부터 내가 추가해준 부분 시작 -->
    <property name="quartzProperties">
    <props>
        <!-- 다른 Quartz 속성들 -->
        <prop key="org.quartz.threadPool.threadCount">1</prop>
    </props>
    </property>
    <!-- 여기까지 내가 추가해준 부분 끝 -->
</bean>

위와 같이 추가해준 부분을 추가해주면 된다.

간략하게 설명을 덧붙이면, SchedulerFactoryBean은 Quartz 스케줄러를 생성하고 관리하는 데 사용되며, 스케줄러의 실행 스레드 및 스케줄러의 설정을 관리한다.

이를 통해 Quartz의 동작을 커스터마이즈할 수 있다.

property name="" 값은 지정해주면 되며, key="org.quartz.threadPool.threadCount" 값은 정확히 말하자면 중복 실행을 방지하기 위함이 아닌 한번에 trigger를 몇개 실행할지 제한을 두는 카운트이다.

본인같은 경우에는, 1개의 trigger에서 스레드가 종료되기도 전에 동일한 trigger가 동작되었고 앞으로 trigger를 추가하게 되더라도 그렇게 겹치는 시간들에 많은 쿼츠 작업을 할 것 같지는 않아 충분히 특정 시간에 1개의 trigger를 작동시켜도 된다고 판단하였다.

더 많은 도움을 드리지 못했다면,,... 아쉬움을 표합니다 ㅜㅠ.,

[js] 꽃가루 날리는 효과

JooKit 주킷 — Tue, 16 May 2023 08:00:11 +0900

<style>
    canvas{z-index:10; pointer-events: none; position: fixed; top: 0; transform: scale(1.1);}
</style>

 <div class="buttonContainer">
     <button class="canvasBtn" id="stopButton">Stop Confetti</button>
     <button class="canvasBtn" id="startButton">Drop Confetti</button>
 </div>

 <canvas id="canvas"></canvas>

<script>
$(function(){

    reAction(); 

}); 

function reAction() {
    $('#startButton').trigger('click'); 
    setTimeout(function(){
        $('#stopButton').trigger('click'); 
    }, 6000); 
} 

</script>

요긴하게 써먹을 수 있을 것 같다 ㅇㅅㅇ,,

js파일은 첨부한 파일을 사용하면 된다.

confetti_v2.js

0.01MB

[ Spring Boot ] webapp > WEB-INF > views 구조로 JSP 연동, 이미지는 workspace인 webapp 바로 하위에 위치해야 불러 올 수 있다!!

JooKit 주킷 — Tue, 16 May 2023 07:10:20 +0900

JSP 연동에 필요한 dependency

<!-- jstl : 기본적으로 Spring Boot는 내장 톰캣을 가지고 있지만, JSP 템플릿 엔진이 존재하지 않기에, JSP 라이브러리인 JSTL 또한 사용할 수 있게 추가해야 한다. -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

<!-- tomcat-embed-jasper : JSP 템플릿 엔진을 사용할 수 있도록 해주는 라이브러리  -->
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

application.yml 기본 설정

server:
  port: 8085
spring:
  mvc:
    view:
      prefix: /WEB-INF/views/  # 변경가능
      suffix: .jsp

Spring Boot 프로젝트의 JSP 파일을 관리할 폴더 구조

webapp > WEB-INF > views(폴더명 변경 가능) > jsp 파일 보관
이미지는 필히 webapp > 하위 폴더에 image 폴더를 만들어서 이미지를 호출하도록!!!

위에 이미지 경로... 아주 중요하다ㅠㅠ

구글 플레이 콘솔에서 이전 앱 버전으로 롤백을 할 수 있는가?

JooKit 주킷 — Fri, 12 May 2023 17:18:04 +0900

회사에서 안드로이드 앱의 targetSdkVersion만을 수정하여 구글 플레이 콘솔에 업데이트할 일이 생겼다.

어제 올린 글과 같은 사유로 앱 업데이트를 진행해야 했고 검토 승인되어 구글 플레이스토어에서 앱을 다시 다운로드 받아 실행시켜보니 난감하지 않을 수 없었다.

앱이 실행되지 않았다...

너무나도 큰일이지 않은가.

당장 안드로이드 프로젝트를 가지고 작업을 해야 하는데 나는 안드로이드 앱 관련해서 업무를 맡아본 적도 없을 뿐더러 관련 공부를 한적도 없었다...

웹뷰를 사용해서 앱을 만들었다고는 하지만,,, 대체 어떻게 해야 한단 말인가

이것저것 알아보다가 업데이트한 앱을 이전 버전으로 롤백할 수 있는 기능이 있을까 싶어서 찾아보았다.

핸드폰 기기에서 업데이트한 앱의 버전을 낮추는 방법 말고는 아무것도 검색되지 않았다.

구글 플레이 콘솔에서 업데이트한 앱의 버전을 낮추는 방법은 없었다...,

하루종일 멘붕이 오고 이것저것 찾아보다가 드디어 관련 정보를 찾았다.

2023년 5월 이후부터 구글 플레이 콘솔에서 직접 앱을 롤백하는 기능은 제공되지 않는다고 한다.

지금이 5월 12일이니까,, 저번달까지는 이전의 앱 버전으로 바로 롤백이 가능했다는 말이다ㅠㅠ....

결론

이번달부터(2023년5월)는 구글 플레이 콘솔에서 이전의 앱 버전으로 바로 롤백할 수 없다!

그럼 나는 이제,, 앱을 제대로 구동시킬 방법을 찾아보아야겠다...!

[Android] How to import a project that another person was working on into Android Studio / 안드로이드 스튜디오로 다른 사람이 작업하던 프로젝트 import하는 방법

JooKit 주킷 — Thu, 11 May 2023 15:31:28 +0900

회사에서 운영하는 플렛폼은 웹서비스로 제공하고 있고 안드로이드 어플로도 서비스를 제공하고 있다.

The platform operated by the company is provided as a web service and also available as an Android application.

운영되고 있는 안드로이드 앱은 웹뷰를 이용하여 앱을 만들기 위해서 제작된 앱으로 내가 아닌 기존에 담당하던 다른 개발자가 개발한 앱이다.

최근 다른 부서로부터 아래와 같은 오류로 인하여 구글 플레이스토어에서 내가 소속된 회사에서 제공하는 서비스 앱을 다운로드 받을 수 없다는 문의를 받았다.

앱을 다운로드 받을 수 없다는 오류는 아래와 같다.

The platform operated by our company is provided as a web service, and we also provide services through an Android app.
The Android app that is currently in operation was created using a web view, and was developed by another developer who was in charge before me.
Recently, we received an inquiry from another department stating that they cannot download the service app provided by our company from the Google Play Store due to the following error:
"The app cannot be downloaded."

이 앱은 이전 버전의 Android를 위해 만들어진 것이기 때문에 현 기기에서 사용할 수 없습니다.

This app is designed for an earlier version of Android and is not compatible with the current device.

그래서 구글링 해본 결과, 안드로이드 프로젝트에서 targetSDKVersion을 올려서 변경해주어야 한다는 글을 찾게되었다.

바로 처음보는 안드로이드 프로젝트 열어서 이것저것 열어보기 시작 !!

So, I did some Googling and found out that I need to update the targetSDKVersion in the Android project to fix this issue. I opened the Android project that I've never seen before and started looking into it!

엄청난 오류들을 겪게 되었고, 그 중에서 내가 구글 플레이 콘솔에 앱을 aab파일로 업로드 하기 위해서 build 부터 aab파일을 추출하기까지 만났던 오류들을 해결하기 위한 과정들을 기록해보려 한다.

I am going to record the steps I took to solve various errors that I encountered, including the process of building and extracting an AAB file for uploading the app to the Google Play Console.

우선적으로 처음 import하는 프로젝트를 build 해보려고 하면 gradle이 존재하지 않는다는 오류를 발견하게 될 것이다.

이런 경우, 내가 사용하는 pc 로컬에는 import한 프로젝트에서 사용하는 gradle이 없는게 맞기 때문에 프로젝트에서 정의한 gradle을 설치해주어야 한다.

방법은 아래와 같다.

First of all, when you try to build the imported project, you will encounter an error that says "gradle is not found".
In this case, it is because the gradle used in the imported project is not present on your local PC, so you need to install the gradle defined in the project.
The method is as follows:

1. Android Studio -> Preferences -> gradle

여기에서 Use Gradle from: 에 Specified location -> 'gradle-wrapper.properties' file 로 변경해준다.

2. 혹시라도 JDK오류가 발생할 경우, Gradle user home과 Gradle JDK를 로컬 환경에 맞추어 수정해주면 된다.

3. Use Gradle from을 수정한 후에는 아래 Apply를 클릭해주어야 프로젝트에 맞는 gradle을 다운로드 받게 된다. 그래도 gradle오류가 발생한다면 존재하진 않는다는 gradle을 명시해주는 URL로 직접 다운로드 하여 build하면 된다.

4. 모든 작업이 끝난 후에는 OK를 눌러준다.

프로젝트의 Sync 맞춰주기(1번) / 프로젝트 정리 (2번)

File > Sync Project with Gradle Files
Build > Clean Project 또는 Build > Rebuild Project

프로젝트 Gradle Plugin Version, Gradle Version 수정

프로젝트에서 Gradle Plugin Version과 Gradle Version이 맞지 않아서 오류가 발생할 수도 있다.
Gradle Plugin Version과 Gradle Version은 아래 이미지를 참조하여 호환되는 버전을 맞춰 주어야 한다.

변경하는 방법

File > Project Structure > Project

프로젝트의 Gradle Scripts > build.gradle(Module:app) 파일에 targetSdkVersion, compileSdkVersion을 동일하게 맞춰서 수정해주었다.

그리고 versionCode, versionName도 이전 버전보다 높게 설정해주었다.

더 설정해준게 있는 것 같은데,. 나중에 이어서 작성을 해보려 한다,,...,

[ MySql ] 주단위 데이터 조회

JooKit 주킷 — Wed, 1 Feb 2023 11:24:45 +0900

참고 링크

https://recoderr.tistory.com/52

MYSQL 쿼리문 통계(일간/주간/월간/기간별), DATE_FORMAT() 알아보기

MySQL 쿼리문(일간/주간/월간/기간별) // 일간통계 SELECT DATE(`날짜컬럼`) AS `date`, sum(`value`) FROM test_st GROUP BY `date`; // 주간통계 SELECT DATE_FORMAT(DATE_SUB(`날짜컬럼`, INTERVAL (DAYOFWEEK(`날짜컬럼`)-1) DAY), '%Y/%

recoderr.tistory.com

내가 만든 쿼리


# 주간통계
SELECT min(start_time) AS 'start_time', max(end_time) AS 'end_time' , date_time , sum(count) AS total_count  FROM (
# SELECT *, sum(count), min(start_time), max(end_time) FROM (
	SELECT DATE_FORMAT(DATE_SUB(`agree_time`, INTERVAL (DAYOFWEEK(`agree_time`)-1) DAY), '%Y-%m-%d') AS start_time,
    	   DATE_FORMAT(DATE_SUB(`agree_time`, INTERVAL (DAYOFWEEK(`agree_time`)-7) DAY), '%Y-%m-%d') AS end_time,
	       DATE_FORMAT(`agree_time`, '%Y%U') AS `date_time`,
    	   count(*) AS count, 
	       product_option_seq_conetns
	FROM (
		SELECT * FROM inf_product_contents GROUP BY product_option_seq_conetns
	) `prod`
	WHERE agree_time BETWEEN '2022-01-01 00:00:00' AND '2023-01-31 23:59:59'
	GROUP BY  agree_time 
) `prod_2` 
GROUP BY  date_time ;

[ js ] 화면 높이, 너비값 얻기

JooKit 주킷 — Mon, 9 Jan 2023 13:49:10 +0900

window.screenTop : 상단으로부터 브라우저 위치 
window.screenLeft : 왼쪽으로부터 브라우저 위치 
window.innerWidth : 브라우저 화면의 너비(viewport) 
window.innerHeight : 브라우저 화면의 높이(viewport) 
window.outerWidth : 브라우저 전체의 너비(메뉴, 툴바, 스크롤바 포함) 
window.outerHeight : 브라우저 전체의 높이(메뉴, 툴바, 스크롤바 포함)

[mysql] Authentication plugin 'caching_sha2_password' cannot be loaded 오류 해결하기

JooKit 주킷 — Tue, 3 Jan 2023 15:21:07 +0900

로컬에 mysql db를 설치한 다음 Sequel Pro로 접속하려고 하니 Authentication plugin 'caching_sha2_password' cannot be loaded 오류가 발생했다.

원인

mysql 8.X 버전 부터 비밀번호의 암호화 방식이 달라졌다고 한다.

그런데 Sequel Pro는 아주 쓰기 좋은 훌륭한 제품이지만, 아직 새로운 종류의 사용자 로그인(SHA2 방식의 암호화)를 위한 개발이 되지 않았나보다.

해결 방법

Sequel Pro를 쓰기 위해서는 계정의 비밀번호를 mysql_native_password 방식의 비밀번호로 변경해준 후에 사용할 수 있다.

ALTER USER '계정명'@'*' IDENTIFIED WITH mysql_native_password BY '새로운비밀번호';

위의 명령어로 계정과 새로운 비밀번호를 입력해주어 외부에서 mysql에 접속할 수 있게 된다. 룰루.

참고 사이트

https://velog.io/@metamata/%EB%A1%9C%EC%BB%AC-mysql-%EC%84%A4%EC%B9%98-%ED%9B%84-Sequal-Pro-%EC%A0%91%EC%86%8D-%EC%8B%9C-Authentication-plugin-cachingsha2password-cannot-be-loaded-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

[ Mysql ] root 외 사용자 추가 외 모든 권한 부여

JooKit 주킷 — Tue, 3 Jan 2023 14:59:14 +0900

1.

create user '계정이름'@'localhost' identified by '비밀번호';

오류가 난다면 비밀번호의 맨 앞자리를 대문자로 해보면 된다.
비밀번호의 맨 앞자리를 대문자로 했는데도 오류가 발생한다면 다른 문제일 수 있으니 오류를 살펴보아야 한다.

2.

grant all privileges on *.* to '계정'@'%' with grant option;

권한 부여

3.

flush privileges;

부여한 권한이 제대로 작동되도록 업데이트를 한번 해준다.

위 순서대로 했는데 오류가 발생한다면? 또는 생성한 계정으로 외부에서 mysql 접속이 되지 않는다면 root 계정을 만든 다음에 새로운 계정을 다시 만들어 보도록 한다.

1.

CREATE USER 'root'@'%' IDENTIFIED BY 'root';

2.

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;

3.

flush privileges;

새로고침을 해준다.

root계정을 만든 후에 다시 추가할 계정을 만들고 모든 권한을 부여해보자.

[ AWS EC2에 Mysql 설치 ] mysql 설치하는 방법

JooKit 주킷 — Mon, 2 Jan 2023 16:59:47 +0900

wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm

yum install mysql57-community-release-el7-11.noarch.rpm

yum install mysql-community-server

systemctl start mysqld

service mysqld status

6. mysql 로그인

mysql -u root -p

7. mysql 초기 비밀번호 확인하는 방법

grep password /var/log/mysqld.log

위 명령어를 입력하면 mysql 초기 비밀번호를 알려준다!

8. 비밀번호 최초 설정

alter user "root"@"localhost" identified with mysql_native_password by "비밀번호";

- 비밀번호는 필히 맨 앞을 영대문자로 입력해야 오류가 발생하지 않는다.

비밀번호를 최초 설정하는 다른 명령어도 있지만 mysql 버전 8부터는 위 명령어로 비밀번호를 최초 설정해야 오류가 발생하지 않는다.

(여러번의 오류로 구글링해서 찾아낸 명령어...... )

아래 참고 사이트에는 mysql을 설치하는 방법과 mysql 로그인하는 방법이 안내되고 있다.

참고 사이트

https://kioworks.tistory.com/281

[mysql] centos 7 에서 mysql 설치

설치여부 확인 [root@ncloud-server-centos1 lib64]# rpm -qa |grep ^mysql [root@ncloud-server-centos1 lib64]# yum으로 설치될까? [root@ncloud-server-centos1 lib64]# yum install *mysql-server* Loaded plugins: fastestmirror, langpacks Loading mirror

kioworks.tistory.com