K

Flutter 공부를 해봅시다

ki1111m2 — Sat, 3 Aug 2024 17:09:09 +0900

플러터는 위젯의 짜집기

텍스트 - Text('hi', style: TextStyle())

아이콘 - Icon(Icon.shop, color: dd, size: dd)

이미지 - Image.assets('knitting.png')

박스 - Container( width: 50, height: 50, color: Colors.blue ) or SizedBox

Container가 더 무거움!

근데 박스 위젯 저렇게 하면 크기 지정 안됨

왜냐?? 시작점 지정을 안해서 . . .

Center(

child: 위젯

)

-> 내 child를 센터로 위치하겠다!! 하는 위젯 ..

비슷한거 많음 Align 위젯 등등

child 쓰면 위젯 안에 위젯 가능

되는 위젯 잇고 안되는 위젯 잇으니 자동완성 되는지 확인하고 쓰기

MetrialApp -> 구글이 기본 제공하는 어쩌고 .. 유용한거 많으니까 웬만하면 이걸로 지정하고 ㄱㄱ

Scaffold -> 화면 3분할 해주는 위젯 !!

Scaffold(

appBar: AppBar(),

body: Container(),

bottomNavigationBar: BottomAppBar()

)

여러 위젯 가로로 배치하려면 Row 위젯 !!

Row(

children: [

Icon(Icons.star),
Icon(Icons.star),

]

)

여러 위젯 세로로 배치하려면 Column 위젯 !!

Column (

children: [

Icon(Icons.star),
Icon(Icons.star),

]

)

파라미터 중 mainAxisAlignment 쓰면 정렬 가능

반대축은 crossAxisAlignment

Container 꾸미기

width height margin padding decoration(별 꾸미기 다 여기서 함) 등등 ...

사이즈 꽉채우기 double.infinity

버튼

TextButton()

IconButton()

ElevatedButton()

child onPressed(){} 필수!

온프레스드는 함수 들어가는 곳

로우나 컬럼 안에서 박스들 비율 정하고 싶을 때

Flexible로 감싸고 파라미터에 flex:3 이런 식으로 넣으면 %로 나누기 가능

Expanded는 박스 하나 넓게 채울때 쓰면 굿

[LogStash] could not find jruby 오류

ki1111m2 — Fri, 15 Dec 2023 10:43:46 +0900

could not find jruby in D:\ELK\logstash-8.11.3\vendor\jruby\bin\jruby

java 문제가 해결되니 jruby 파일을 못찾는다는 에러가 발생했다.

해당 폴더 위치로 가보니 vendor 폴더 안에 jruby 폴더는 없었고, bundle 폴더만 있었다.

bundle 폴더 안에 jruby 폴더가 있길래 그 폴더를 밖으로 꺼내도 같은 오류 발생

처음 logstash를 다운받고 압축을 2번 풀었었는데

처음 거는 17개 항목이었고 다음 거는 15개 항목이었다.

혹시.. 하는 마음에 새로 다운받아 압축을 풀어보니 17개 항목이 되었고

vendor 폴더 안에 bundle 폴더와 jruby 폴더가 있었다.

압축 해제할 때 뭔가 제대로 안됐다보다 ..

억울하다 .. 해결됐다 ..

[LogStash] could not find java; set JAVA_HOME or ensure java is in PATH 오류

ki1111m2 — Fri, 15 Dec 2023 10:39:59 +0900

"Using system java: "C:\Program Files\Java\jdk-21\bin\java.exe""

The specified path cannot be found.

could not find java; set JAVA_HOME or ensure java is in PATH

java 설치와 환경 변수 설정은 제대로 되어 있다.

java --version 명령어와 javac --version 명령어가 정상적으로 출력 된다.

즉 JAVA_HOME 변수는 제대로 설정 되어 있고, java.exe 파일 또한 확실히 존재한다.

그러나 계속해서 같은 오류가 발생했다.

elastic search와 kibana는 문제 없이 구동되는데 logstash만 오류가 발생했다.

아무리 검색하고 찾아도 해결이 안됐는데..

혹시 띄어쓰기를 인식 못하는건가 하는 마음에 Java 폴더의 위치를 옮겼다.

C:/Program Files/Java -> C:/Java

해결됐다..

[Javascript] Firefox window.close() 스크립트에 의해 열리지 않은 창을 닫을 수 없습니다.

ki1111m2 — Thu, 14 Dec 2023 16:06:55 +0900

window.close() 로 창이 안닫히는건 크롬도 마찬가진 것 같다.

근데 크롬은 아래 코드로 해결된다고 하는데 파이어폭스에서는 여전히 창이 닫히지 않는다..;;

window.open('','_self').close();

크롬은 창 내용을 빈칸으로 두면 공백 페이지가 생성되는 것 같다.

파이어폭스는 안되나보다..

아래 코드로 해결

window.open('about:blank','_self').close();

근데 창이 아예 닫히지는 않고 창 내용이 about:blank로 바뀐다.

그래도 원래 창은 사라지니 된건가?..

[Kafka] 로컬에서 컨슈머 실행 시 오류 발생 (kafka-console-consumer.bat - Unexpected error handling request RequestHeader)

ki1111m2 — Wed, 13 Dec 2023 11:42:31 +0900

로컬에서 카프카 구축 후 토픽 발행, 구독 테스트를 진행했다.

토픽 생성, 메세지 전송은 성공적으로 이루어지나 구독하여 메세지를 받아올 때 오류가 발생했다.

kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic test --from-beginning

해당 명령어 실행 후 구독한 토픽의 메세지가 뜨지 않고 가만히.. 있었다.

강제 종료 후에는 Processed a total of 0 messages 문구가 나타났다.

카프카 실행창을 보니 Unexpected error handling request RequestHeader 라는 에러 로그를 확인할 수 있었다.

해결 방법은 구독 명령어에 --partition 0 을 붙여 파티션의 개수를 지정해주는 것이다.

kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic test --from-beginning --partition 0

왜 꼭 지정을 해줘야 하는지는 알 수 없지만, 해당 방법으로 해결했다.

파티션의 개수도 영향을 미치는 것 같은데, 0이 아니라 1로 했더니 같은 오류가 발생했다.

이유는 모르겠으나 ..

https://stackoverflow.com/questions/34844209/consumer-not-receiving-messages-kafka-console-new-consumer-api-kafka-0-9

[html/css/js] 바닐라 자바스크립트로 Tap Menu 만들기

ki1111m2 — Fri, 8 Dec 2023 12:22:49 +0900

https://baegofda.tistory.com/179

[Javascript] SVG 내 요소 좌표 구하기

ki1111m2 — Thu, 7 Dec 2023 14:07:14 +0900

현재 개발 중인 웹 페이지에서 요소의 좌표를 구해야 하는 일이 생겼다.

현재 구성은 아래 사진과 같이 전체가 svg가 아니라 일부분만 svg다.

(왼쪽의 지도 부분)

svg는 지도와 그 위에 좌표에 따라 마커를 표시하고 있다.

좌표가 그대로면 좋겠지만.. 지도와 마커는 transform을 이용해서 위치가 변해있는 상태다.

현재 상태에서 뷰박스의 0,0은 왼쪽 위, 지도의 0,0은 왼쪽 아래인 상황..

마커의 좌표를 알고있지만, 그 좌표를 뷰박스에 적용할 때는 다른 위치가 나오는 것이다.

특정 좌표에 transform을 적용한 후의 좌표를 알고싶었다.

이게 머리로는 이해하고 있는데 말로 설명하기가 잘..;; 암튼 마커의 현재 좌표를 알고 싶은 것..

내가 알고 있는 좌표에 transform을 적용하면 나오는 좌표를 알고싶다..라는 것..

열심히 삽질하다가 아래 글을 발견함 ..

https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/

How to Translate from DOM to SVG Coordinates and Back Again — SitePoint

Mix DOM and vector interactions in SVG, translating from SVG to DOM coordinates and back, and translating to transformed SVG coordinates.

www.sitepoint.com

화면의 DOM 좌표를 svg의 viewbox에 대조해서 해당 위치의 좌표로 변환해주는 내용 ..!!

var svg = document.getElementById("svg");
var current_cord = document.getElementById(target_name).getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = current_cord.x
pt.y = current_cord.y
const svgP = pt.matrixTransform( svg.getScreenCTM().inverse() );

var svg = document.getElementById("svg");

var current_cord = document.getElementById(target_name).getBoundingClientRect();

좌표를 구하고 싶은 타겟의 DOM 좌표를 구함

var pt = svg.createSVGPoint();
pt.x = current_cord.x
pt.y = current_cord.y

const svgP = pt.matrixTransform( svg.getScreenCTM().inverse() );

화면에서 svg가 차지하는 비율에 따라 트랜스폼을 연산해줌

[Javascript/Html] SVG 요소에 입력은 됐으나 화면에 출력되지 않을 때 ( createElement / createElementNS )

ki1111m2 — Mon, 20 Nov 2023 10:55:18 +0900

Javascript를 이용하여 html에 svg 요소를 추가하였다.

F12를 이용하여 요소를 확인했을 때, 요소에는 원하는 대로 추가되었지만 화면에 나타나지 않는 현상이 발생했다.

createElement를 이용해서 요소를 추가했는데, createElementNS로 바꾼 후 해결되었다.

createElementNS는 지정된 네임스페이스 URL과 적합한 이름으로 element를 만든다.

SVG는 XHTML 언어이므로 동적으로 생성할때는 createElement를 사용하면 안되고 createElementNS를 사용해야 한다.

네임스페이스 URL를 지정하지 않고 element를 만들 때는 createElement 메소드를 사용한다.

createElement를 이용해서 동적 삽입할 경우, 개발자 도구의 태그에는 추가된 것으로 보이지만 실제로 화면에 그려지지는 않는다.

기존 코드

let url = "http://127.0.0.1:20220/layer1";

var httpRequest;
httpRequest = new XMLHttpRequest();

httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                var svg_receive = httpRequest.responseText;
                const div = document.getElementById("map");
                div.innerHTML = svg_receive;
                const svg = div.querySelector("#map svg");
                svg.setAttribute("id", "svg");

                const defs = document.createElement(`defs`)
                svg.appendChild(defs)

                const imageTwoWheeler = document.createElement(`image`)
                defs.appendChild(imageTwoWheeler)
                settingAttribute(imageTwoWheeler, "TwoWheeler")

                const imagePedestrian = document.createElement(`image`)
                defs.appendChild(imagePedestrian)
                settingAttribute(imagePedestrian, "Pedestrian")

                const imageVehicle = document.createElement(`image`)
                defs.appendChild(imageVehicle)
                settingAttribute(imageVehicle, "Vehicle")

                const marker = document.createElement(`g`)
                svg.appendChild(marker)
                marker.setAttribute('id', "markers")


                let [x, y, width, height] = svg.getAttribute('viewBox').split(' ').map(Number);
                const test_circle = document.createElement('circle')
                svg.appendChild(test_circle)
                test_circle.setAttribute('cx', x)
                test_circle.setAttribute('cy', y)
                test_circle.setAttribute('r', 0.001)
                test_circle.setAttribute("visibility", "visible");



                window.addEventListener("DOMContentLoaded", zoom(svg))
                window.addEventListener("DOMContentLoaded", drag(svg))
            } else {
                alert("Layer 1 Request Error!");
            }
    }
};

수정된 코드

let url = "http://127.0.0.1:20220/layer1";

var httpRequest;
httpRequest = new XMLHttpRequest();

httpRequest.open("GET", url);
httpRequest.send();
httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                var svg_receive = httpRequest.responseText;
                const div = document.getElementById("map");
                div.innerHTML = svg_receive;
                const svg = div.querySelector("#map svg");
                svg.setAttribute("id", "svg");

                const transform = svg.querySelector("g").getAttribute('transform')

                const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
                svg.appendChild(defs);

                const imageTwoWheeler = document.createElement(`image`);
                defs.appendChild(imageTwoWheeler);
                settingAttribute(imageTwoWheeler, "TwoWheeler", transform);

                const imagePedestrian = document.createElement(`image`);
                defs.appendChild(imagePedestrian);
                settingAttribute(imagePedestrian, "Pedestrian", transform);


                const imageVehicle = document.createElement(`image`);
                defs.appendChild(imageVehicle);
                settingAttribute(imageVehicle, "Vehicle", transform);


                const marker = document.createElementNS('http://www.w3.org/2000/svg', 'g');
                svg.appendChild(marker);
                marker.setAttribute('id', "markers");


                let [x, y, width, height] = svg.getAttribute('viewBox').split(' ').map(Number);
                const test_circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                svg.appendChild(test_circle);
                test_circle.setAttribute('cx', x);
                test_circle.setAttribute('cy', y);
                test_circle.setAttribute('r', 0.001);



                window.addEventListener("DOMContentLoaded", zoom(svg));
                window.addEventListener("DOMContentLoaded", drag(svg));
            } else {
                alert("Layer 1 Request Error!");
            }
    }
};

ChatGPT

https://velog.io/@wheezy_han/JS-Document.createElementNS-%EB%9E%80

[Javascript] AJAX 이용한 API 통신 (바닐라 JS)

ki1111m2 — Tue, 14 Nov 2023 09:05:53 +0900

window.onload = function () {
	var httpRequest;
	/* button이 클릭되었을때 이벤트 */
	document.getElementById("ajaxCall").addEventListener("click", () => {
		/* textBox에 작성된 name 데이터를 가져옴 */
		var inputName = document.getElementById("inputName").value;
		/* 통신에 사용 될 XMLHttpRequest 객체 정의 */
		httpRequest = new XMLHttpRequest();
		/* Get 방식으로 name 파라미터와 함께 요청 */
		let url = "http://127.0.0.1:9000/data/" + inputName;
		console.log(url);
		httpRequest.open("GET", url);
		/* Response Type을 Json으로 사전 정의 */
		httpRequest.responseType = "json";
		/* 정의된 서버에 요청을 전송 */
		httpRequest.send();

		/* httpRequest의 readyState가 변화했을때 함수 실행 */
		httpRequest.onreadystatechange = () => {
		/* readyState가 Done이고 응답 값이 200일 때, 받아온 response를 출력 */
		if (httpRequest.readyState === XMLHttpRequest.DONE) {
			if (httpRequest.status === 200) {
			var result = httpRequest.response;
			console.log(result);
			document.getElementById("test_data").innerText = result;

			const get_data = document.createElement("p");
			get_data.append(result.name);
			document.getElementById("test_add").appendChild(get_data);
			} else {
			alert("Request Error!");
			}
		}
		};
	});
};

url 설정시 localhost 이용하면 접속 안됨

127.0.0.1 이용할 것

if문 사용시 readState DONE -> status 200 2개 거쳐야함

안하면 결과 3번씩 반복 호출됨

이유는 모르겠음..

https://kim-oriental.tistory.com/12

[Javascript] from origin 'null' has been blocked by CORS Policy

ki1111m2 — Mon, 13 Nov 2023 13:49:18 +0900

대상의 경로 뒤에 --disable-web-security --disable-gpu --user-data-dir=~/tmp 추가

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/tmp

관리자 권한으로 실행

관리자 권한으로 실행하기 싫다면?

--user-data-dir=~/tmp 제거

https://i5i5.tistory.com/935