2023년 8월 3주차 회고록

 

 

 

 

 

 

사이냅 에디터 적용

전에 공부할때 사용해봤던 썸머노트 에디터와 사용법이 비슷해서 가이드를보며 쉽게 사용할 수 있었다.

📃 사이냅 에디터 공식문서 보기

하지만 유료라서, 개인적으로 사용할 일은 없을듯 ..

 

SynapEditor 폴더안에 있는 SynapEditor.config.js 라는 파일이 있는데

이 곳에 라이센스 키(제품 유료 구매시 발급)를 입력해주면 기본 설정은 끝 !

그외 에디터 툴바에 보여주고싶은 내용들을 관리할 수도 있다.

 

라이센스 키 입력방법은,  해당 내용을 직접 작성하거나

'editor.license': {
	'company': '라이센스를 구매한 회사이름',
	'key': [
		'라이센스키'
	]
},

 

or 해당 내용을 적어둔 파일의 경로를 입력하는 방법으로 작성할 수도 있다.

'editor.license': '/src/synapeditor/license.json',

 

 

 

 

 

사이냅 에디터를 사용할땐,  필요한 파일들을 import 하고

페이지 로딩이 되었을때, 자바스크립트 new SynapEditor("대상태그ID속성값", synapEditorConfig); } 를 실행하면된다.

 

나는 회사에서 Vuejs를 사용하고있기에,  index.html 파일에 다음의 내용을 추가해주고

<link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="SynapEditor/synapeditor.config.js"></script>
<script src="SynapEditor/synapeditor.min.js"></script>
<script>
function initEditor() {
    var se = new SynapEditor("synapEditor", synapEditorConfig);
}
</script>

 

에디터를 사용할 컴포넌트에서 다음과 같이 마운트 훅을 이용해서 사용했다 : )

index.html 파일에 작성해둔 initEditor 함수 호출

<template>
	<!-- id가 synapEditor인 태그가 있어야한다 -->
	<textarea id="synapEditor"></textarea>

</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  initEditor();
})
</script>

 

 

🔗 사이냅 에디터 공식문서 보기

설치 - 사이냅 에디터 문서 - Synap Editor Documentation

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

CSS 중앙 정렬할때 사용한 방법 3가지

CSS 중앙 정렬할때 자주 사용하는 방법들, 사용 빈도가 높은것부터 낮은 순으로 정리해보았다 🐣

 

.부모클래스명 {
	display: flex;
	justify-content: center;
	align-items: center;
}

 

or

 

.부모클래스명 {
	position: relative;
}
.자식클래스명 {
	position: absolute;
	top: 50%;
	left: 50%
	transform: translate(-50%, -50%);
}

 

or

 

.부모클래스명 {
	margin: auto;
}

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

모달창을 만들며 ..

 

 

 

 

JS 포커스 안될때 해결방법

모달 기능을 만들며,  모달창이 나왔을때 input 태그가 자동 선택될 수 있게 document.getElementById("태그id명").focus();를 사용했다.

하지만 기대와는 달리, 모달창이 열려도 포커스가 되지않는걸 볼 수 있었다 .. 😅

 

이것저것 찾아봐도 " focus() 함수를 사용해보세요~~ 그럼 됩니다 "와 같은 내용들만 나와서 지쳐갈때쯤 ..

문뜩 그런 생각이 났다.

 

" 혹시, focus가 너무 빨리 작동되서,  다른 포커스에 묻힌게 아닐까? "

 

정답 !!  setTimeout 을 이용해서,  시간차를 줘보니 해결되었다 👏👏

<script setup>
import { ref } from 'vue'
const showModal = ref(false);

const 모달창띄우는버튼눌렀을때함수 = () => {
	setTimeout(() => { 
    	showModal.value = true; 
    }, 100);
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

한글은 v-model 대신 @input

모달창에 <input> 태그가 있는데, " 여기에 내용이 비어있는지? " 라는 조건에 따라 다른 글자가 나오도록 해야했다.

처음엔 v-model로 입력 값을 변수로 입력받고,   watch를 이용해서 해당 변수가 변경되는걸 감지할때마다 length를 구하도록 하려했다.

but, 한글 문자가 1개일땐 인식을 못하고 2개 이상일때부터 인식하는  문제점이 발생했다 💦

*. 한글 입력이 한칸씩 밀리는 모습

 

 

 

 

 

알고보니,  📃 뷰 공식문서에 답이 있었다 .. 👀

 

 

 

 

 

그래서 input 으로 바꿔보니  잘 작동했다 👏👏

<template>
	<div>
    	<input id="searchKeyword" @input="keywordChanged">
	</div>
</template>


<script setup>
const keywordChanged = () => {
	if ( document.getElementById("searchKeyword").value.length == 0 ) {
		// .. 보여줄 내용 1
        
	} else {
		// .. 보여줄 내용 2
        
	}
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

컴포지션 api에서 watch 사용법

 

 

✍ 테스트 해보기

<template>
	<input v-model="변수명">
</template>

<script setup>
import { ref, watch } from 'vue'
const 변수명 = ref('');

watch(변수명, (새로바뀔값, 원래값) => {
  console.log("원래값은 [" + 원래값 + "]이었는데,   [" + 새로바뀔값 + "]으로 변경중 !");
})
</script>