728x90

목동코딩: 코딩수업

아래의 화면에서 복수의 input의 value를 가져와서 DB에 저장하는 방법과 새로운 table row를 만들어서 새로운 record를 추가하는 방법입니다.

 

<script>
    function addItems() {
        $("input[name=ItemCode]").each(function(idx) {
            // 해당 input Value 가져오기
            var id = $(this).attr('id');
            var ItemCode = $("input[name=ItemCode]:eq(" + idx + ")").val();
            console.log(id + ":" + ItemCode);
        });

        var ret = confirm("항목을 추가하시겠습니까?");
         if(!ret){
            return false;
        }
        var row = "";
        row = row + "<tr>";

        row = row + "<td><input  type='button' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";

        row = row + "</tr>";
        $('#itemsTable').append(row);
}
</script>

<table id="itemsTable" class="table table-striped">
  <th width="5%">
    삭제
  </th>
  <th  width="5%">
    기호
  </th>
  <th  width="20%">
    품명
  </th>
  <th  width="10%">
    가격
  </th>
  <th  width="60%">
    설명
  </th>
</tr>
</table>

 

 

 

목동코딩 전문적인 코딩교육

 

728x90
728x90

목동코딩: 코딩교육

필요에 따라서 모달폼을 열고 닫는 방법

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-latest.js"></script>
	<title>Document</title>
	<style>
        /* The Modal (background) */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }
    
        /* Modal Content/Box */
        .modal-content {
            background-color: #ffffff;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 30%; /* Could be more or less, depending on screen size */                          
        }
 
</style>

</head>
<body>
	<input type="button" onclick="open_pop();" value="open" />
	    <!-- The Modal -->
		<div id="myModal" class="modal">
 
			<!-- 모달폼 시작 -->
			<div class="modal-content" style="background-color: #000000;">
				<img class="bd-placeholder-img" width="100%"
                        src="http://nooh-system.com/images/logo_nooh_white.png" aria-hidden="true"
                        preserveAspectRatio="xMidYMid slice" focusable="false">
					  <p style="text-align: center;"><span style="font-size: 14pt;"><b><span style="font-size: 24pt;">공지</span></b></span></p>
					  <p style="text-align: center; line-height: 1.5;"><br />여기에 내용</p>
					  <p><br /></p>
				  <div style="cursor:pointer;background-color:#DDDDDD;text-align: center;padding-bottom: 10px;padding-top: 10px;" onClick="close_pop();">
					  <span class="pop_bt" style="font-size: 13pt;" >
						   닫기
					  </span>
				  </div>
			</div>
	   
		  </div>
			  <!--모달폼 종료-->
	  
	  
			  <script type="text/javascript">      
				jQuery(document).ready(function() {						
				});
				//팝업 보기
				function open_pop() {
					 $('#myModal').show();
				};

                //팝업 단기
				function close_pop(flag) {
					 $('#myModal').hide();
				};
				
			</script>

</body>
</html>

 

 

목동코딩학원 코딩교육

 

 

http://nooh-system.com/

728x90
728x90

목동코딩:

프로젝트를 하다보면 사용하는 언어마다 숫자에 컴마를 표시하는 방법이 조금씩 다르다.

Php에서 컴마를 찍는 방법은 또 조금 다르다. 이번엔 자바스크립트에서 컴마를 표시하거나, 컴마를 제거하는 함수를 정리해둔다.

<script>
    $(document).ready(function() {

        $('input[name=saleAmount]').attr('value', comma("111222333"));
    });

    //콤마찍기
    function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    //콤마풀기
    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    }
    </script>

목동코딩 코딩수업

 

728x90
728x90

짧지 않은 인생을 정말 짧게 살았다고 느낌이 듭니다.

무슨 목표나 목적이 나한테 있다기 보다는 가족의 만족을 위해서 살았다는 생각이 많이 듭니다.

좋은 인연을 만나고, 그것이 또 좋은 비지니스로 연결되기도 했고, 또 잘못 만난 사람으로 인해서 고생도 했습니다.

그러면서 "권속" 이라는 말을 되 내인적이 있습니다. 팔자가 비슷한 사람끼리 만난다는 뜻이다. 힘들때 정말 자주 만나던 사람도 환경이 바뀌면 자연스럽게 연락처를 놓치게 되는 경우가 종종 있습니다. 비슷한 말로 유유상종도 있겠네요.

반대로 무언가 일이 잘 안풀리고 꼬일때가 있습니다. 그때는 다니는 길을 바꾸고, 안 가던 모임을 나가고, 평상시와 다른 생각을 가지는게 어떨까 합니다.

요즘 저는 제일 바쁜 하루하루를 지내고 있습니다.

아마 한참때인 30대에도 지금처럼 프로그램을 열심히 개발하지는 않았던거 같습니다.

50에 중풍으로 왼쪽이 완전 마비됐을 때를 생각 하면 , 하루하루가 정말 고맙습니다.

"하나님이 보호하사 나가서 할일이 있다고 밖에는 할 말이 없다"는 주치 의사분의 애기를 소중히 새각하며 생활합니다.

병원을 퇴원하면서 , 생각하는 가치관을 완전 바꿔서 후회없이 살려합니다.

그래서 조금 이라도 더 적극적으로 행동하려고 다니던 길도 바꾸고, 안가던 모임도 나가고 하니 조금씩 생각 못하던 비지니스가 생기곤 합니다 ㅎㅎ.

 

 

728x90
728x90

목동코딩:코딩교육

연극을 관람한 적이 있었나 싶을 정도로 오랜만에 대학로를 가게됐습니다.

대학때는 돈이 없어서 초대권을 구해서 가려다 보니, 관람한 기억이 없나 봅니다. 아무래도 제가 대학을 다니던 80년대에는 연극 공연을 관람한다는 것도 제게는 사치였던거 같습니다. 그러다가 직장을 다니면서 식구들을 부양하다 보니 역시 관람할 기회를 가지지를 못했던거 같습니다.

이번에도 모처럼 이대영교수님이 연출한 연극을 보러가려 했는데 자리가 매진 됐다고 해서

포기 하려다가 자리가 있다는 애기를 듣고 대학로에 가서 공연을 관람했습니다.

일찍 도착을 해서 지나 다니는 젊은 사람들을 부러워하며 두리번 거리면서 앉아서 기다렸습니다.

예전에 정말 예전에 여기 대학로옆에 서울대 문리대가 있었을때, 구경을 왔던 기억이 납니다. 아마도 그때가 대학로라는 호칭이 생기기 전이었을 겁니다.

기다리던 친구가 도착해서 같이 공연장으로 들어갔습니다. 연극 말미에 가슴을 울리는 감동에 눈을 자주 깜밖이는 순간도 있었습니다.

연극을 마치고 밖으로 나왔는데 , 연극을 관람한 거의 모든 관람객이 아쉬운 마음에 집으로 가지 못하고 웅성웅성 모여서 아쉬움을 달래는 장면을 사진에 담았습니다

다음에 연극 좋아하는 친구가 생기면 종종 관람을 와야겠습니다.

코로나로 갈곳이 없어서 더욱 아쉬운 하루 였습니다....

2021.9.2 목

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

목동코딩 연극관람

 

 

목동코딩: 어느 탈북 대리운전자 이야기를 다룬 연극공연

728x90
728x90

목동코딩:

 

상담을 하다보면 부모님들이 종종 혼돈하는 경우가 있다.

"우리 애가 컴퓨터를 잘해요!" 라고,  그래서 조금 더 물어 보면 게임을 하면서 마우스와 키보드를 현란하게 잘 다룬다는 것을 알았을때 조금 씁쓸해진다...

요즘 코딩,코딩.. 하는 이유를 잘 모르는 눈치다.  아니 코딩이 무엇인지 잘 몰라서 일것이다.

 

1980년도에 프로야구가 시작하였다.

많은 국민들이 지역에 따라서 나는 MBC청룡, 나는청보핀토스 , 나느 롯데, 나는 해태 , 나는 삼미슈퍼스타즈 등 ㅎㅎㅎ. 예전 초창기의 야구팀이다.

아직도 프로야구를 한 게임도 제대로 안본 내 기억이 정확한지는 자신이 조금 없다. 고교 야구를 참 좋아 했는데 , 왜 프로야구를 안봤는지 이유를 여기서 표현하기는 ...

 

지금의, 이 상황과 비슷하다는 생각에서 표현해 보았다.

프로야구라는 플랫폼이 생겼을때 , 누그는 응원도구를 사서 응원하고, 야구를 중개방송 하고, 운동장에서는 입장표를 팔고 또 먹을 거도 팔아서 돈을 번다, 여기서 아주 큰 연봉을 받으면서 좋아 하는 야구를 하는 선수들도 있다.

 

누구는 돈을 쓰고 누구는 돈을 번다. 물론 돈을 쓰던 어린이가 아주 훌륭한 프로야구 선수가 되는 경우도 많을 것이다.

 

지금의 시기가 이와 비숫하다는 생각이다.

 

4찬산업혁명이 무엇인지 잘 모르면서 가르치고, 체험을 하는 학생이 있고, 또 이들에게 관련된 제품이나 도구를 팔면서 돈을 버는 사람이 있고 또는 메타버스 관련된 사업을 하면서 많은 돈을 버는 회사도 생겼고 갱겨날 것이다.

 

마치 아주 오랫동안 야구를 해왔고, 그 덕분에 프로야구 플랫폼에서 한 역할을 하면서 수익을 얻는 것처럼... 

 

야구를 좋아 하던 많은 어리이 모두가 유명한 선수가 될 수 없드시, 많은 어리이가 코딩을 잘하고 , 메타버스 플랫퐁메서 일을 하지는 못할걸로 생각이 든다.

어쩔수 없이 여기서도 타고난 재능이 잘 부합하는 사람이 좋은 교유과 연관 되어져야 만 한다.

놀이는 놀이라고 생각한다. 놀이가 교육이 되려면 가능하지만 , 너무 오래 걸린다.

왜냐하면 어디선가 프로와 아마추어의 차이는 디테일에 있다는 글을 봤다. 놀이를 즐기면서 디테일 배우기는 힘들기 때문이다.

코딩을 공부하는데 초등생이 대학생보다 못할 거라는 생각에는 큰 착오가 있다. 디지탈 네이티브인 어린이가 대학생보다 더 디테일이 있는 질문을 하곤 한다.

문제는 그를 설명할 선생님이 너무 많이 부족하다는 것이 걱정이다.....

 

 

목동코딩학원 자체제작으로 드론만들기 

 

728x90
728x90

유니티사이트의 튜토리얼을 따라하다가 Projectile Standard에 걸려서 고생하다가

해결이 되어서 블로그에 올립니다.

Asset 에서 FPS 마이크로 게임 을 다운받아서 설치하면 잘진행이 됩니다. 이것을 모르고

Add Component에서 찾는라고, 구글 검색도 하고 조금 고생했습니다

FPS Mod: Customize weapon projectiles

1. 처음부터 새로운 발사체 만들기

1. 먼저, 새로운 프리 팹을 만들어야합니다. 이를 위해 , 현재 씬에 새로운 GameObject 를 추가하는 것으로 시작하겠습니다 .

목동코딩학원 유니티로 메타버스 수업

2. 원하는대로이 개체의 이름을 바꿉니다.

목동코딩학원 유니티로 메타버스 수업

이 예제에서는 이름을 NewProjectile로 지정합니다.

4. 그런 다음 Assets> Utech> FPS> Prefabs> Projectiles 폴더 의 계층 구조 창에서 프로젝트 창으로 새 객체를 드래그해야 합니다.

5. 이 GameObject 에서 프리 팹 을 만들었습니다 .

목동코딩학원 유니티로 메타버스 수업

6. 이제 더블 클릭하여 엽니 다.

목동코딩학원 유니티로 메타버스 수업

7. 계층 구조 창 에서 객체를 선택하고 인스펙터 창 에서 변환 구성 요소를 마우스 오른쪽 버튼으로 클릭하십시오 . 그런 다음 재설정을 클릭하십시오. 이 GameObject의 위치, 회전 및 스케일에 대한 기본값을 설정합니다 . 그렇게하지 않으면 발사체가 올바른 위치에 생성되지 않거나 다른 회전으로 생성되지 않을 수 있기 때문에 중요합니다.

목동코딩학원 유니티로 메타버스 수업

8. Add Component 버튼을 클릭 한 다음 Projectile Standard 를 선택하십시오 . 구성 요소 이름의 시작 부분을 입력하여 결과를 좁힐 수 있습니다.

목동코딩학원 유니티로 메타버스 수업

9.이 작업이 완료되면 개체에 두 개의 새로운 구성 요소가 나타납니다. 발사체 표준 구성 요소는, 당신은 단지 추가 한, 및 발사체 자료 당신이 추가 할 때 자동으로 추가됩니다, 발사체 표준 .

목동코딩학원 유니티로 메타버스 수업

10. 이제 발사체에 메쉬 (3D 모델)를 추가하겠습니다. 에서 프로젝트 창에서에서 당신이 원하는 것을 메쉬, 드래그를 찾을 계층 구조 창을여십시오. 자산> UTech> ModAssets> 모델> NatureProps로 이동하여 몇 가지 옵션을 찾으십시오. 예를 들어 FirTree 메쉬를 계층 창으로 드래그 앤 드롭합니다.

11. 메시가 이제 장면 뷰에 나타납니다 . 팁 : 장면 뷰 위로 마우스를 가져 가면 키보드에서 F를 눌러 현재 선택된 계층 구조 (이 경우 FirTree)에 카메라를 중앙에 놓습니다.

목동코딩학원 유니티로 메타버스 수업

12. 이제이 메시 의 Transform 컴포넌트 에서 일부 값을 변경 하여 발사체의 시각으로 사용합니다. 이 특정 메쉬의 경우 다음 값이 효과적입니다. 다른 메시를 사용하는 경우 발사체의 앞면이 파란색 화살표 (정방향)와 정렬되고 발사체의 길이가 대략 0.5 미터 미만인지 확인하려고합니다.

목동코딩학원 유니티로 메타버스 수업

13. 이제 발사체 매개 변수를 설정합니다. Hierarchy 창 에서 루트 GameObject 를 선택하십시오 .

14. Inspector 창에서 반지름을 0.2로 변경합니다

목동코딩학원 유니티로 메타버스 수업

15. 그런 다음 메시를 계층 구조 창 에서 발사체 표준 구성 요소 의 루트 매개 변수로 끕니다 . 이 프로세스는 메시의 Transform to Projectile Standard 컴포넌트에 대한 참조를 제공합니다 .

16. 마찬가지로, 발사체의 끝을 발사체 표준 구성 요소에 대한 참조를 제공해야합니다 . 그러나 먼저 만들어야합니다.계층 구조 창 에서 메시를 마우스 오른쪽 버튼으로 클릭 한 후 빈 생성 을 클릭합니다 .

17. 방금 생성 한 새로운 빈 GameObject의 이름을 지정하십시오 .

18. 그런 다음 이동 도구를 선택하십시오 . 새 게임 오브젝트 를 메시 끝 으로 옮길 것 입니다.

19. 장면 뷰 에서 화살표를 드래그하여 개체를 이동하십시오.

목동코딩학원 유니티로 메타버스 수업

20. 15 단계 에서했던 것처럼 Tip GameObject 를 Hierarchy 창 에서 Projectile Standard 컴포넌트 의 Tip 매개 변수로 드래그합니다 .

목동코딩학원 유니티로 메타버스 수업

21. 이제 발사체가 무언가와 충돌 할 때 생성 될 오브젝트를 선택합니다.Impact VFX 필드 에서 아이콘을 누르십시오 .

22. 방금 나타난 창에서 자산 탭을 클릭 하십시오.

목동코딩학원 유니티로 메타버스 수업

23. 원하는 개체를 한 번 클릭하십시오. 이 예제에서는 쿠키 메시를 사용합니다.

목동코딩학원 유니티로 메타버스 수업

24. 발사체가 무언가와 충돌 할 때 재생할 소리를 선택할 수 있습니다. 인스펙터 창에서 Impact SFX Clip 필드 의 아이콘을 누릅니다 .

25. 원하는 소리를 선택하십시오

목동코딩학원 유니티로 메타버스 수업

26. 발사체가 준비되었으므로 자동 저장 이 활성화되지 않은 경우 (“저장”옆의 확인란) 아래 이미지에 표시된대로 프리 팹을 저장하십시오.

2. 새로운 발사체를 무기에 할당

1. Project 창에서 Assets> UTech> FPS> Prefabs> Weapons 로 이동하여 선택한 무기의 Prefab 을 두 번 클릭하여 엽니 다 .

2. 이제 계층 에서 무기가 선택되었으며 Inspector 에서 해당 정보를 볼 수 있습니다 . 인스펙터 에서 Projectile Standard 컴포넌트 아래 Projectile Prefab 필드를 찾습니다 . 생성 한 발사체를 프로젝트 창 에서 해당 필드로 드래그해야합니다 . 따라서 생성 한 발사체를 찾은 다음 한 번 클릭 하고 발사체를 Projectile Prefab 필드 의 Project 창에서 Inspector 창으로 끕니다 .

3. 자동 저장 이 활성화되어 있지 않은 경우 (“저장”옆의 확인란) 무기 프리 팹을 저장하는 것을 잊지 마십시오 .

4. Play를 누르고 쿠키 블래스터를 확인하십시오!

3. 추가 크레디트 : 생성 된 메시에 물리 추가

1. 쿠키 메시에 물리를 추가하여 발사 할 때 공기 나 벽에 달라 붙지 않고 충돌하고 넘어 지도록합시다. Impact VFX 로 간단한 메시를 사용하는 대신 이전과 같이 만들 프리 팹을 사용합니다.

먼저, 프로젝트 창 에서 이전에 사용한 메쉬를 계층 창 으로 드래그하십시오 . 현재 장면 의 루트 위치 에 놓을 수 있습니다 . 아래 예제에서 쿠키 메쉬는 계층 구조 창 에서 GameObjec t입니다 .

2. 프로젝트 창에서 자산> UTech> FPS> 프리 팹으로 이동하십시오. 쿠키 게임 오브젝트 를 클릭 하여 계층 에서 프로젝트 창으로, 프리 팹 폴더 로 드래그하십시오 . 팝업 창에서 Original Prefab 을 선택하십시오 .

3. 프리 팹의 이름을 적절한 이름으로 바꿉니다. 이제 열 수 있습니다 (두 번 클릭).

4. 루트 GameObject 의 변형을 재설정하십시오 . 그렇게하려면 Transform 컴포넌트를 마우스 오른쪽 버튼으로 클릭 한 다음 Reset 을 클릭하십시오 .

5. 스케일을 (50, 50, 50)으로 설정하십시오.

6. 구성 요소 추가를 클릭 하십시오 . 서로 다른 두 가지를 추가해야합니다. Mesh Collider 구성 요소와 Rigidbody 구성 요소를 추가합니다 ( Rigidbody 2D가 아닌 일반 Rigidbody 구성 요소 선택 ).

7. Mesh Collider 컴포넌트에서 Convex 상자를 체크하십시오 .

목동코딩학원 유니티로 메타버스 수업

8. Project 창에서 앞에서 만든 발사체 프리 팹 을 찾아 엽니 다.

목동코딩학원 유니티로 메타버스 수업

9. Inspector의 Projectile Standard 구성 요소에서 Impact VFX 필드 의 아이콘을 클릭 하여 새 Prefab 을 할당합니다 .

목동코딩학원 유니티로 메타버스 수업

10. 새로운 프리 팹을 선택하십시오.

목동코딩학원 유니티로 메타버스 수업

11. 자동 저장 이 활성화되어 있지 않은 경우 무기 프리 팹을 저장하는 것을 잊지 마십시오 .

12. Play를 누르고 스폰 된 메시에서 새로운 물리를 확인하십시오.

728x90
728x90

목동코딩:

오늘은 청라에 가서 무인 스터디카페 시스템을 종합 테스트를 진행했습니다. 그중에 입실.퇴실과 동시에 각각 회원의 자리의 전등제어를 하기 위해서 Sonoff의 펌웨어를 커스터마이징을 하였습니다.

이번 시스템은 중앙 집중적인 서버 방식에서 벗어나, 로컬방식으로 진행했습니다.

간혹 중앙 집중적인 서버에 문제가 생기면, 전체 스터디카페 프랜차이즈가 문제가 발생하는 것을 방지 하기 위하여, 로컬 방식으로 진행을 했습니다. 그리고 인터넷으로 인한 문제를 최소화 하기 위해서 3중 인터넷 방식으로 준비 하였습니다.

전등제어 전체 모듈에 펌웨어를 업로드 한후 , 자리예약, 입실, 퇴실을 테스트 해보니 다행스럽게 잘 동작 하였습니다.

이제 본격적으로 무인 스터디 카페가 오픈을 하면 , 조금 더 모니터링을 하면서 혹시 수정 사항이 있는지 , 다시 한번 체크할 예정입니다. 경험상 시스템의 가(假) 오픈에서 발견되지 않던 오류가 , 실제 오픈에서 발견되는 경우가 종종 있으니 신경을 더 많이 써야 하겠습니다 ㅎ.

 

 

목동코딩학원 무인스터티카페 전등제어 펌웨어 커스터마이징

 

728x90

+ Recent posts