728x90
반응형

회사에서 이클립스로 작업하면서 잘되던 페이지가

가끔 뜨지 않는 에러를 마주하곤 했다.

오늘도 마주해서 해결했는데, 생각보다 빠른 해결!

원인을 알고 해결한 듯하여 기록해 본다.

추후 또 마주했을 때 이 방식으로 해결하게 되면 에러 내용도 첨부해야겠다.

 

no class...라고 뜨는 에러와 함께 잘되던 사이트도 에러페이지가 떴다.

보통 작업을 할 때 상단 메뉴바의 Project 내 Build Automatically를 꺼두는데

혹시? 하는 마음으로  Build Automatically 부분에 체크 후

프로젝트 리스타트 해보니 바로 된다!

 

class 파일을 찾아 못하는 것에 대한건 에러메시지로

어느 정도 이해는 했지만 왜 그런가 싶었는데

빌드가 뒤쳐져서 그런 걸까?

내용을 더 찾아보고 에러 해결 원인에 대하여

좀 더 이해하도록 해보아야겠다.

 

 

 

어쩌다 보니 이번달 회고록이 skip 되어버렸다...!

sqld 개발자 자격증은 합격했다 :)

조만간 잊지 않고 회고록을 작성해 봐야겠다.

728x90
반응형
728x90
반응형

CKEditor5 세팅이 생각보다 간단한 것 같으면서도 내용이 좀 복잡했다.

4버전까지는 내용이 좀 많은 것 같은데

CKEditor5는 필요한 정보는 많이 없고 비슷한 내용이 좀 많았다.

 

CKEditor5에서 필요한 툴바만 사용하기 위해

불필요한 툴바를 remove 하려고 했는데

방법을 찾다가 너~무 안돼서 직접 필요한 것만 세팅하는 것으로 선택했다.


툴바를 세팅하기 위해 아래 코드에서 볼 수 있는 toolbar를 추가했다.

.create( document.querySelector( '#editor' ), {
                <!-- 필요한 toolbar만 setting -->
                toolbar: [ 'undo', 'redo', '|', 'heading',
                    '|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
                    '|', 'bold', 'italic', 'underline', 'strikethrough' ],

 

이제 깔끔하게 사용하는 툴바만 세팅하여 사용할 수 있게 되었다.

 

완성된 CKEditor5 모습!


아래는 전체 HTML 코드다.

기본 세팅 코드다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/decoupled-document/ckeditor.js"></script>
    <style>
        .ck.ck-editor__editable_inline {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Document editor</h1>
    <!-- The toolbar will be rendered in this container. -->
    <div id="toolbar-container"></div>

    <!-- This container will become the editable. -->
    <div id="editor">
        <p>This is the initial editor content.</p>
    </div>

    <script>
        DecoupledEditor
            .create( document.querySelector( '#editor' ), {
                <!-- 필요한 toolbar만 setting -->
                toolbar: [ 'undo', 'redo', '|', 'heading',
                    '|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
                    '|', 'bold', 'italic', 'underline', 'strikethrough' ],

                <!-- fontSize 세부 setting -->
                fontSize: {
                    options: [
                        9,
                        11,
                        13,
                        'default',
                        17,
                        19,
                        21
                    ]
                },
            } )
            .then( editor => {
                const toolbarContainer = document.querySelector( '#toolbar-container' );
                toolbarContainer.appendChild( editor.ui.view.toolbar.element );

                newEditor = editor;
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

참고 사이트
 

ckeditor5 - toolbar 편집하기

ckeditor5 toolbar 편집하는 방법입니다. 아래와 같이 툴바 기능을 편집하시려면 옵션명을 수정 하면 됩니다. ClassicEditor .create( document.querySelector( '#editor' ), { //-----------------------------------------------------

aabb.tistory.com

 

 

 

TMI

지금 재직 중인 회사에서는 tab을 2칸으로 설정해서 개발 중에 있는데

기본적으로 세팅된 tab 4칸으로 코딩할 때 보다

불필요한 공간을 줄일 수 있어서 굉장히 좋은 것 같다.

 

그리고 지금 진행 중인 부분인데, 이전에는 해보지 않았던

Editor 부분을 다룰 수 있어서 좋은 경험이 될 것 같다.

 

JPA에 익숙해져서 mybatis mapper에 대한 지식이 가물가물해질 무렵..

회사에서 사용 중인 mybatis, jsp를 통해 다시 이전에 쿼리를 짰던 기억을 짜내고

엄청난 검색을 통해서 회사 규칙에 최대한 맞춰서 DB 연동도 성공했다.

최대한 모르는 부분에 대한 질문은 지양하고

할 수 있는 한 혼자 해결해 보려고 집에 와서도 야근 아닌 셀프 야근?

해야 할 일에 대해 일정 정리와 공부할 겸 

다음날 할 것에 대해 미리 숙지하면서 의외로 성공적인 중간 결과물들을 가지고

다음날 회사에 출근할 수 있어서 만족스러운 날들이다.

 

마지막으로, IT 회사에 재직 중인 삼촌이 얼마 전 입사 선물로

내 워너비 키보드인 한무무 캠핑 컬러를 선물해 주셨다.

개발의 효율, 삶의 질이 올라가서 너무나 좋다.

키보드 하나 더 장만하고 싶은 욕구가 솟지만 당분간은 참는 걸로.

728x90
반응형
728x90
반응형

내가 보려고 작성하는 Window 단축키

(새로 알게 된 단축키는 계속해서 업데이트 ing)

 

창닫기

Ctrl + W

 

윈도우 탐색기

Ctrl + E

 

바탕화면 보기 / 복원

Win + D

 

작업표시줄 프로그램 열기 Win + 숫자

-> 새창으로 Win + Shift + 숫자

 

윈도우 설정

Win + I

시작 메뉴

Ctrl + ESC (윈도우 키 없는 키보드 사용 시 유용)

 

단어 이동

Ctrl + 오른쪽 / 왼쪽 화살표

Ctrl + 아래쪽 / 위쪽 화살표

 

단어 선택

Ctrl + Shift + 오른쪽

Ctrl + Shift + 왼쪽

 

작업 되돌리기 / 다시 실행

Ctrl + Z

Ctrl + Y (해당 애플리케이션에서 이 기능을 지원해야 작동 - 티스토리는 안됨)

 

브라우저 주소 입력줄로 커서 옮기기

Alt + D

 

새 브라우저 탭 닫기 / 열기

Ctrl + W/T

 

직전에 닫았던 브라우저 탭 다시 열기

Ctrl + Shift + T

 

탭 간 이동

Ctrl + Tab (오른쪽 탭)

Ctrl + Shift + Tab (왼쪽 탭)

728x90
반응형
728x90
반응형

얼마 전 면접에서 기술질문을 받았는데 큰 틀만 알고 있어서

제대로 설명을 하지 못한 것에 큰 아쉬움이 있어 살짝 기록해 본다. 

진정한 자바 메모리에 대해 깊게 공부한 내용은 아니지만

일단 기본 내용부터 점점 심화하는 것도 이해를 높이는 좋은 방법이지 않을까 생각한다.

(기술 질문에 약한 편이라 계속 공부중..ㅠ)


자바에 대해 살짝 맛보기 내용부터!

 

JVM (Java Virtual Muchine)

- 자바 가상 머신

- 자바의 바이트 코드를 해석하고 실행하는 역할

 

자바 프로그램의 실행 구조

프로그램

JVM

운영체제

하드웨어

 

자바는 JVM에 의해 실행되므로 어떤 운영체제에서도 동일한 결과를 갖는 것이 큰 장점이다.

단, 한 단계 더 거쳐서 실행되기 때문에 실행 속도면에서 뒤처질 수 있다.

 

런타임 데이터 영역 (Runtime Data Area)

1. Static Area (Method Area)

2. Heap Area

3. Stack Area

4. PC Register

5. Native Method Stack

 

이 글에서는 2, 3번 힙과 스택에 대해서만 정리한다.


Stack Heap
원시타입의 데이터가 값과 저장 Object 타입의 데이터가 저장
Heap 영역에 생성된 Object 타입의 데이터의 참조값이 저장 애플리케이션의 모든 메모리 중 Stack을 제외한 부분
함수가 호출될 때 사용하는 메모리
기능 수행이 끝나면 자동으로 반환되는 메모리
자동으로 관리되지 않는 메모리 영역 (가비지 컬렉터)

 

 

Stack 영역

public class Stack {
	public static void main(String[] args) {
    	int num1 = 20;
        int num2 = 30;
        int sum = 0;
        
        sum = addNum(num1, num2);
        System.out.println(sum);
    }
    
    public static int addNum(int n1, int n2) {
    	int result = n1 + n2;
        return result;
    }
}

 

 

Heap 영역

public class Heap {
	public static void main(String[] args) {
    	int age = 19;
        String name = "mimi";
    }
}

 

Heap 영역에서 GC (Garbage Collection)

- 메모리 누수를 막기 위한 가비지 컬렉션

public class Heap {
	public static void main(String[] args) {
    	String url = "http://";
        url += "mimi.github.io/";
    }
}

url += 부분 코드를 실행하면 기존 문자열에 덧붙이는 것이 아닌

새로운 String 객체를 생성하고 참조하게 되어

기존의 문자열"https://"는 unreachable object가 되어

가비지 컬렉터unreachable object를 제거한다. 

 

위 코드를 실행하면 힙 영역에는 결과적으로 2만 남게 된다.

 

*unreachable object : 스택에 도달할 수 없는 힙 영역의 객체

728x90
반응형

'Coding > Study' 카테고리의 다른 글

[IT 용어] API (Application Programming Interface)  (0) 2023.10.14
[JAVA] 람다식 Lambda  (0) 2023.10.05
[JSP] JSP 강의평가 웹 사이트 개발하기 완료  (0) 2023.10.02
[GitHub] 깃, 깃허브  (0) 2023.09.28
[Kotlin] 코틀린 맛보기  (0) 2023.09.22
728x90
반응형

얼마전 새로운 언어에 대한 맛보기로 node.js 기초를 학습하고 배포까지 해보게 되었다.

이 경험을 토대로 현재 고도화 단계인 스프링부트 개인 프로젝트를 RDS 연결부터 진행해보았다.

연결 시 에러가 발생했는데 URL부분 작성 착오로 발생한 것이었고 해결하게 되었다.

 

처음에 에러 원인을 검색해보면서 다양한 원인들이 있다는 내용을 보았고

주 원인들인 퍼블릭 엑세스 설정, 보안 인바운드 규칙은 이미 알맞게 설정이 된 상태였다.

 

처음부터 여러 에러 메세지 중에서 link failure에 초점을 맞추지 못했지만

계속 시도하다보니 url문제인 것을 파악하게 되었다.

 

 

에러 내용 :

java.lang.RuntimeException: Driver cohttp://m.mysql.cj.jdbc.Driver claims to not accept jdbcUrl,...

 

 

해결 :

url 부분에서 jdbc:mysql:// 부분과 :포트 그리고 데이터베이스명 부분을 제대로 작성해주니

RDS 연결에 정상적으로 성공하여 Entity 테이블들이 생성되는 것을 확인했다.

spring:
  # Database 설정
  datasource:
    url: jdbc:mysql://엔드포인트:포트/데이터베이스명
    username: 사용자이름
    password: 비밀번호
    driver-class-name: com.mysql.cj.jdbc.Driver

 

 

프로젝트를 서버에 배포한 후에는 다시 이 url을 배포 주소로 바꿔줘야하니 잊지 않고 기억해두어야겠다.

728x90
반응형

+ Recent posts