쏘피의 코딩일기_

최종 프로젝트, 팀 PS공병은행 (5) + 취뽀하다! -- [스마트인재개발원]

harotea — Tue, 31 Aug 2021 17:07:37 +0900

안녕하세요!! 어느덧 8월 마지막 날이 되었어요! 더위도 한 풀 꺾이고 이제 슬슬 가을이 오고 있는데요..!

벌써 올해가 4개월 밖에 남지 않았다는 점... 너무 시간이 빠르지 않나요?

이번엔 프로젝트 마지막 편입니다! 끝으로 수료 후 일상과.. 취업 준비 과정 그리고 취업한 이야기까지!!! 뒤에 적어놓을게요 ㅎㅎ

지난 포스팅이 궁금하시다면!

최종 프로젝트 (1)편 바로가기 ->

https://jaws-coding.tistory.com/22

최종 프로젝트 (2)편 바로가기 ->

https://jaws-coding.tistory.com/23

최종 프로젝트 (3)편 바로가기 ->

https://jaws-coding.tistory.com/25

최종 프로젝트 (4)편 바로가기 ->

https://jaws-coding.tistory.com/26

저희 팀은 병을 담아두어야 하기 때문에 프로젝트 진행한 것 중 크기가 제일 컸어요..

PVC관에... 합판까지 ㅜㅜㅜ

다행히 인터넷에 원하는 사이즈로 합판을 재단해서 보내주는 곳이 있어서 그렇게 주문을 했습니당

경첩과 글루건과.. 목공용 풀과 기타 등등의 접착제로 외형 틀을 제작했습니다.

열심히 붙이고 있는 팀원들..

IoT는 직접 만드는 부분이 있기 때문에.. 팁 아닌 팁을 조금 드리자면,

아래와 같이 타임랩스로 틈틈히 제작 과정을 담아두시면 좋아요! 나중에 발표 시연 영상을 만들때 우리는 이렇게 해서 만들었다~~ !

라고 직접 눈으로 보게되면 아무래도 그간의 노력들이 더 잘 보이지 않을까요??

타임랩스로 제작과정을 틈틈히 찍었어요!

다만 그냥 지나가는 사람들도 보이는게,, 나름 자연스럽죠(?) ㅋㅋㅋㅋ

그리하여.. 외형제작도 마지막 주에 마무리하고 사진도 이쁘게 찍었답니다.

짜잔! ✨✨

프로토타입 무인공병회수기!!

투입구 부분

저렇게 안쪽에 병을 넣고 돌려서 안으로 넣어주는 롤러가 보이죠?

여기에 병을 넣게되면 안에 있는 스캐너 모듈이 병의 바코드를 찍게되고,

병 마다 고유의 바코드가 있기 때문에 이를 인식해서 소주병인지 맥주병인지 구분하게 되는거에요!

그리고 앞에 부착되어있는 LCD 디스플레이를 통해서 병을 몇개 회수했는지 회수금은 또 얼마인지 알 수가 있답니다.

또한 어플을 접속해서 QR코드를 찍어야만 기계가 작동해요!

회수기가 작동하는 과정!

저희 팀의 하드웨어는 높이가 무려 110cm 였어요.. 저의 만능 부릉이로 다행히 겨우 실리더라구요..

차까지 실는 과정도 혹여나 상처날까 이동과정까지도 정말 대 공사였답니다!!

중간에 미희쌤이 드디어 떠나는 거냐고 이게 어떻게 들어가냐고 하시며 놀라워하셨던 기억이 나네요...

저는 스마트인재개발원 캠퍼스에서 교육을 받다보니 CGI센터는 면접 이후에 두번째 방문이었어요 ㅎㅎ

확실히 CGI센터는 본점답게 건물도 크고 다양한 공간이 많이 있어서 여기저기 기웃거렸던것 같아요 ㅎㅎ

최종 발표회 전날에 하드웨어를 미리 옮겨 놓아야 했기 때문에 전날에 저희 팀을 비롯하여 다른 팀들도 열심히!! 하드웨어를 옮기고 연결할 PC 셋팅을 마쳐놓았어요.

다들 프로젝트를 진행하면서 밤도 많이 새고.. 또 하드웨어까지 만들다보니 수척해진 모습이.. 짠 했습니다 ㅠㅠ

그렇지만 이제 마지막이니까요!! 으쌰으쌰 해서 잘 마무리 해야죠! ㅎㅎ

대망의 최종 발표회 당일! IoT반 말고도 스마트인재개발원 CGI센터 쪽의 빅데이터반도 저희와 같이 수료날이 같아서

두개의 반이 발표회를 진행했습니다.

발표를 하기에 앞서 세미나 실에 미리 셋팅 되어있는 팀별 부스를 원장 선생님과 기업 임원 분들이 방문하셔서 돌아보시며 직접 눈으로 확인하는 시간을 가졌는데요,

저는 이때가 정말 긴장이 많이 되었던것 같아요.. 지난 노력을 단 5분안에!!! 알차게 설명을 해드려야 하는데 이번 발표회 때는 특히나 더 많은 기업체에서 참여를 해주셔서 많은 분들이 오고간지라... 정말 식은땀을 많이 흘린 기억이 아직도 생생합니다.

부스 진행행사를 하기전에 팀원들과 한 컷!!!

진행이 되고나면 정신없이 또 발표를 하러 가야하기 때문에... 이때가 가장 여유로웠던것 같아요.

그래서 미리 사진을 멋지게 찍었답니다 ✨

초상권을 위해 루피준으로 대체합니다 ㅎㅎ

마지막 날에는 다들 정장도 맞춰 입고.. 발표회가 끝나면 기업 임원들과의 미팅 또는 면접이 있거든요!!! 그래서 다들 격식있게 차려입으니까 뭔가 새로워 보이고 그랬어요 ㅎㅎ

수료날에는 정말 아침부터 정신없이 움직이고... 정신을 차려보니 끝나있더라구요!!

최종 우수팀을 선정한 후에 임시로 마련된 저희 반을 위한 공간에서.. 5개월간 지각쟁이..말썽쟁이 우리들을 케어하느라 고생하신 예진쌤과의 찐찐 마지막 라스트 종례시간을 가졌어요.

예진쌤이..갑자기 깜짝 영상을 만들어서 보여주시는 바람에.. 보기좋게 펑펑 울었답니다 ㅠㅠ 쓰고있는 지금도 그때를 생각하니 다시 울컥하네요 ..

이렇게 해서... 정말 5개월 간 스마트인재개발원 에서의 교육은 8월 13일 자로 끝이 났습니다!!

하지만 .. 더이상 수업을 듣지 않을 뿐... 끝난게 끝난게 아니죠???

바로 제일 중요한.. 취업의 문이 남아있었어요..

그간 3개의 프로젝트와 각종 자소서와 포트폴리오 특강.. 여러 스킬을 배울 수 있는 수업들을..!!! 그냥 배운 것이 아니죠!

바로 취업을 하기 위해서... 스마트인재개발원의 문을 두드린게 아니겠어요!

남은 마지막 한달 째에는 거의 프로젝트와 개인의 취업을 위한 이력서 준비가 같이 진행되기 때문에 정말 정신없이 바쁘지만.... 저희 예진쌤이 그러셨어요.. 한달은 나 죽었다 하고 다 해보라고...ㅎㅎㅎ

무엇보다도 취업의지는 강했기 때문에!!! 어떻게든 같이 진행을 했었답니다 ㅎㅎ...... (기특해 나자신)

저희 반에서는 수료하자마자 바로 다음주부터 출근한 친구들도 있구요... (정말 농담이 아닙니다 여러분들!!!!)

중간중간 취뽀 소식이 들려오더라구요..ㅎㅎ 하지만 전 초조하진 않았습니다(사실 초조함)

선생님이 상담을 통해 제가 원했던 직무와 관련된 공고가 뜨면 카톡으로 알려주시기도 했구요!

저 또한 나름대로 사람인, 잡플래닛, 잡코리아 등등 취업관련 사이트를 항상 들어가서

원하는 직무가 있는지 엑셀파일로도 정리해가며 지원을 많이 넣었어요!!

내가 아무리 잘하는 사람이라고 한들 직접 지원하지 않으면 회사에서는 당연히 모르기 때문에 많이 부딪혀보자!! 하는 마음으로

지원을 했어요.

비전공자로써 스마트인재개발원 을 다니기 전에는 사실 아무리 구인/구직 사이트에 올라온 글을 읽어보아도

제가 지원할 수 있는 분야가 별로 없었어요.. 마음은 정말 일하고 싶고 (모든 취준생들이 같은 마음이라고 생각해요)

체력과 의지도 충분한데!!!! 제가 일로서 할수 있는 직무가 없어서 좌절감을 느꼈었습니다.

스마트인재개발원 에서 수료하고 난 뒤에 앞에서 제가 말했던 것처럼 취업 문을 두드리는 데 두려움이 사라졌어요.

제가 지원할 수 있는 분야가 넓어졌거든요! 오히려 적성에 찾은 일이 그 회사에서 실현할 수 있는 일인지 이러한 고민만 하면 되었기 때문에 일은 하고 싶은데 능력이 없다..라는 좌절감은 더이상 겪지 않게 되어서 저는 이것만으로도 충분히

자신감 있게 취업 준비를 할 수 있었답니다.

그렇게 해서...

지원을 넣은 곳 들의 면접을 기다리던 중에 정말정말 운이 좋게도.. 너무나 감사하게도!

처음 면접을 봤던 곳에서 합격 전화가 왔답니다!!! 그것도 정말 드라마틱하게 어제 소식을 받게 되었어요

면접할때 제가 하고싶은 말을 다 하고 나와서 후련하게 보았었는데, 감사하게도 뽑아주셨습니다

그래서 저는 9월 초에 제가 목표했던 취업하기를 달성하고 첫 출근을 앞두고 있습니다 ㅎㅎ

이번 주에 본가로 가서 부모님께 어서 이 소식을 전해드리려고 합니다.

그럼 스마트인재개발원 후배님들도 모두모두 프로젝트 잘 마무리하시고, 취뽀하세요 !!!

안녕 ~~

회식..아니아니 영상자료용 치맥이랍니다 ^^

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

최종 프로젝트, 팀 PS공병은행 (4) -- [스마트인재개발원]

harotea — Sun, 29 Aug 2021 23:12:57 +0900

저번 포스팅에 이어서, 이번엔 제작까지 제가 맡았던..! 웹페이지에 대해 소개해드리려고 합니다!

지난 포스팅이 궁금하시다면!

최종 프로젝트 (1)편 바로가기 ->

https://jaws-coding.tistory.com/22

최종 프로젝트 (2)편 바로가기 ->

https://jaws-coding.tistory.com/23

최종 프로젝트 (3)편 바로가기 ->

https://jaws-coding.tistory.com/25

웹 페이지도 어플리케이션과 마찬가지로 스토리보드를 짜며 진행하였습니다.

웹 페이지는 관리페이지로써의 기능을 가진 페이지에요.

그렇기 때문에.. 회수기 / 회원 / 포인트 / 광고의 전반적인 관리를 할 수 있는 내용이 꼭 들어가야 했습니다.

(+ 여담으로 스마트인재개발원 후배님들에게 약간의 조언을 해드리자면.... 웹페이지에 관리 기능만 있을 경우에는.. 빨리 제작하시거나 혹은 애매하게 시간이 모자를 것 같다! 라는 생각이 들면 과감히 포기하거나 어플리케이션에 관리 기능을 포함시키는 것도 나쁘지 않은 것 같아요. 혹은 반응형 웹으로 만들어서 핸드폰으로 접속 시에도 어플리케이션처럼 기능 할 수 있게 두는 것도 좋은 팁입니다!!)

웹 페이지의 스토리보드 입니다.

저는 기존의 JSP / Spring을 이용한 HTML / CSS를 활용하지 않고, 랩실 스터디를 하며 독학 했던 Vue.js를 이용하여 웹페이지를 만들게 되었어요.

독학으로만 터득한 Vue.js를 과연 잘 써먹을 수 있을까.. 하는 고민도 있었지만 팀원들에게 피해는 절대 줄 수 없으니 !!

뷰를 쓰기로 결정한 만큼 제가 배로 더 열심히 만들었던것 같아요.

다만 어딘가 오류가 나거나.. 도움을 필요로 할때 바로 선생님께 여쭤볼 수 없다는 점이 힘든 부분이긴 했어요!!

열심히 구선생님과 (google) 유선생님(youtube)를 불러내시어 이것또한.. 혼자 열심히 !!!! 찾아서 했습니다

여러모도 쉽지 않은 도전이었어요.

하지만 만들고 나서는 그만큼 뿌듯함이 두배!! 였답니다.

웹 페이지의 화면 구현 이미지를 보실게요!

먼저 메인 페이지 입니다.

어디서 많이 본... 이미지죠??? 어플리케이션 로그인 창 부분에도 이 이미지가 들어가 있어요!

gif이미지를 배경이미지로 넣음으로써 좀 더 동적인 메인화면을 만들어 보았습니다.

스마트인재개발원 최종 발표회 날 직접 시연할 때 다음 기수 IoT반 분께서 견학 중에 이런 페이지를 구현할 수 있냐고 신기하게 호기심 가득한 눈으로 물어보셨었는데요,

스마트인재개발원 에서는 이런 것도 만들 수 있다!!! 라고 감히 말씀드리고 싶네요 ㅎㅎ

여러분도 다~~!! 만들 수 있습니다!! (왜냐하면 저도 만들었거든요 ㅠ.ㅠ)

메인 페이지!

click me 버튼을 누르면 밑에서 짠! 스낵바 창이 나와요..!

snack bar!

로그인 페이지는 이렇게 만들었구요...

여기는 관리자 페이지이기 때문에 따로 회원가입창은 만들지않고 admin 계정으로 접속 할 수 있게 로직을 미리 짜두었습니다!

로그인 페이지

다음은 회수기 관리 페이지인데요,

사실 여기에 회수기 이미지가 들어가야하지만... 이때 하드웨어 외형이 다 나오지 않았던 터라 임시로 이미지를 넣어둔 거에요! 또한 각 회수기별로 클릭시에 위치를 볼 수 있게 API를 활용하여 넣었습니다!

회수기 관리페이지

다음은 회원 관리 페이지 입니다.

회원은 병을 회수해가는 수거자와 병을 반납하는 반환자 두가지 타입으로 분류가 되어있습니다.

반환자/수거자 별 리스트 폼은 같으니 한가지만 올려놓을게요.

이렇게 회원 정보를 리스트로 보여주고, 추가하기 버튼을 눌러서 회원 추가도 가능하고

수정/삭제 기능을 같이 넣었습니다.

회원 관리페이지

다음은 이벤트 관련 관리 페이지 입니다.

이벤트 리스트와 그 내용을 관리하는 게시판 형식의 페이지가 되겠습니다.

이벤트 상품 페이지는 포인트를 상품으로 교환하는 시스템이 있기 때문에 그 상품들을 관리할 수 있는 재고관리 시스템 형식의 페이지 입니다.

포인트 이벤트 리스트페이지

포인트 상품 페이지

마지막으로 광고 관리페이지 입니다.

어플리케이션 내의 광고 배너 -- 광고 노출부분에 대한 스케쥴을 관리할 수 있는 페이지를 만들었습니다!

광고 관리페이지

이렇게 어플리케이션과 웹 페이지 제작과정까지 설명해보았습니다..!!

하나씩 자세하게 다뤄보니 저 또한 프로젝트를 복기하면서 그간의 노력과...팀원들과 한땀한땀 열심히 짜던 그 때가 다시 새록새록 생각나는 것 같아요.. 드디어.. 마지막!! 하드웨어 완성기와 스마트인재개발원 후배님들이 제일 궁금해 하실

마지막 최종 프로젝트 발표회 날!!!의 후기를 마지막 포스팅으로 정리해 보려고 합니다.

그때까지 꼭 읽어봐 주세요!!!! 감사합니다 이 글을 읽는 여러분들도 모두 화이팅 입니다!

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

최종 프로젝트, 팀 PS공병은행 (3) -- [스마트인재개발원]

harotea — Sun, 29 Aug 2021 23:12:45 +0900

어느덧 수료한지.. 2주 하고도 며칠이지났습니다! 얼마전 마저 챙기지 못한 짐을 가지러 스마트인재개발원 캠퍼스에 들렀는데요, 저희 다음 후배들을 맞이하느라 선생님들께서 아주 열심히!! 컴퓨터와 책상을 옮기고 계셨어요..

약 5개월간 같은 장소를 오고가며 교육을 받다보니 캠퍼스에도 정이 들었나봐요.. 텅 빈 우리 교실을 보고 있자니 지난 일들이 주마등처럼(?) 스쳐지나가면서 괜히 울컥하더라구요.

담임 선생님이신 예진쌤이 마침 자리에 계셔서 이런저런 얘기를 많이 하고 왔답니다!!!

그립네요 ㅠㅠ 스마트인재개발원 !!!!! ㅠㅠㅠㅠ 반 친구들도 벌써 너무 그리워요.

그렇지만... 취뽀하고 다들 다시 보면 더 좋겠지요..??

포스팅도 열심히 해야겠죠?? 그럼, 이어서!!! 최종 프로젝트의 웹과 어플리케이션 부분을 나눠서 소개해 드릴까 합니다.

지난 포스팅이 궁금하시다면!

최종 프로젝트 (1)편 바로가기 ->

https://jaws-coding.tistory.com/22

최종 프로젝트 (2)편 바로가기 ->

https://jaws-coding.tistory.com/23

먼저 어플리케이션을 소개해드리려고 해요.

저희 팀 프로젝트의 목적은 다음과 같은 내용을 잡았고, 무엇보다도 직접 이용하는 소비자(사용자)들이 어플리케이션을 통해 접근을 해줘야 했어요.

그렇기 때문에 하드웨어와 어플리케이션이 직접 사용하는 부분이 되었습니다. (당근 중요하겠죠??)

무인 빈병 회수기의 주요 목적!

그런 다음, 다같이 스토리보드를 짜면서 사용자가 가입 - 로그인 후에 메인화면과 다른 기타 화면들을 어떻게 접근할지 흐름도 및 구성도를 작성하였습니다.

디자인 부분은 여기서는 빼고 설계도를 그린다고 생각하시면 되요.

스마트인재개발원 에서 이제 막 프로젝트를 시작하시는 분들이나.. 혹시 어떻게 흐름을 진행해야할지 모르겠다 하시는 교육생 분들이 저의 글을 보고 조금이나마 도움이 되기를 바랍니다

이렇게 개발을 시작하기 전에 스토리보드를 짜놓으면 좋아요!

로그인 - 회원가입 - 내정보 수정 등은 대부분 공통적으로 들어가는 부분이니 설명을 생략하구요,

저희 팀 어플리케이션의 특징은 빈병 회수기가 어디에 있는지 알 수 있게 조회하는 것과

해당 회수기가 병이 몇개나 들어있는지 회수가 가능한 상태인지를 알 수 있는 회수기 정보창과

병을 반납하면 반납금을 포인트로 전환해주기 때문에 그 포인트로 사용할 수 있는 여러 이벤트 창과 참여내역 등이 필요했습니다.

주요 화면 구성을 보여드릴게요!

로딩 이미지와 로그인 창이에요!

다들 앱을 킬 때 로딩하는 화면이 잠시 뜨는것을 볼 수 있을 텐데요..!

그래서 로딩 이미지를 8bit 이미지로 만들고, 메인 로그인이 뜰 수 있게 코드를 짰어요 ㅎㅎ

팀의 디자인 담당으로서 제가 직접 이미지를 만들어서 넣었지요

나머지 화면은 사실.. 너무 많아서 주요 기능을 담은 화면들을 보여드리려고 해요!

1. 빈 병 반환 가능 여부와 Google Map API를 이용한 위치 안내

+ 광고 배너도 삽입하고 구글 맵을 켜면 마커표시를 병 모양으로 바꿔놓았어요! 이것도 제가 숨겨놓은 포인트 입니당

2. 포인트를 활용한 이벤트 참여 및 상품 구매

+ 이벤트 이미지에 들어가는 부분도 제가 제작해서 넣었어요! 코딩도 재밌지만 저는 제가 만든 이미지를 직접 개발하는 부분에 삽입하는 것이 더 뿌듯한 작업 중에 하나에요!

이런 것들을 제작해서 넣었어요.

3. 마이페이지와 포인트 적립 내역 및 사용 내역

이렇게 저희 팀의 바틀코인(Bottle-Coin) 어플리케이션의 주요 화면을 살펴보았습니다!

사실 아쉬운 점을 꼽자면,, 저는 주로 웹페이지 제작을 맡았고 어플리케이션은 디자인 부분을 담당하게 되었는데,

하드웨어 제작과 외형 제작 부분에도 시간을 쏟다보니 어플리케이션의 디자인에 손 댈 시간이 조금 부족했어요..

세번의 프로젝트를 하면서 느낀 점은 다 잘할수는 없겠지만 아쉬웠던 점이나 부족한 점을 꼭 정리하고 넘어가야한다는 점이에요.

그렇기 때문에 글을 정리하면서 반성하면서... 다시 한번 짚고 넘어가는 시간을 가집니다..

스마트인재개발원 후배님들도 꼭 꼭 프로젝트 후에 정리 하는 습관을 가지시는게 추후에 포트폴리오 정리를 하거나,

다음 프로젝트가 있을 때 이 점은 꼭 해내고 가야겠다! 하는 새로운 목표를 잡을 수 있을 거라고 생각합니다!!

+ 그리고 추가로! 어플리케이션에 관리 기능을 같이 넣는다면 웹페이지 뿐만 아니라 어플리케이션만 가지고도 두가지 기능을 한꺼번에 할 수 있기 때문에 더 편리 할 것 같다.. 라는 점을 이 글을 정리하며 생각해봅니다.

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Vue 컴포넌트와 라우터 [스마트인재개발원]

harotea — Sat, 21 Aug 2021 18:53:50 +0900

이번 포스팅은 스마트인재개발원 에서 교육을 받으며 랩실 스터디를 겸해서 제가 개인적으로 공부했던 내용들을 정리하려고 합니다. 이전의 랩실스터디 포스팅을 참고하시면 저의 공부 내용들을 다시 확인하실 수 있습니다!

스마트인재개발원 의 쏘피의 랩실 스터디 내용이 궁금하시다면 아래의 링크를 참조해주세요!!

다음과 같은 순서로 Vue 컴포넌트와 라우터를 설명해보도록 하겠습니다!!

Vue 컴포넌트와 라우터

Vue 컴포넌트에 대해
상위(부모) - 하위(자식) 컴포넌트의 관계
상위 - 하위 간 컴포넌트 데이터 전달
Vue Router란?

컴포넌트란 다음과 같이 전역 컴포넌트와 지역 컴포넌트 두가지로 나누어 볼 수 있습니다.

프로그래밍 언어의 특징을 어느정도 알고 계신 분들이라면 전역과 지역의 차이점에 대해 이해하고 있겠지만,

다시한번 설명하자면 전역 컴포넌트는 Vue 작업 프로젝트 파일 전체에 등록하는 것으로 한 번 등록하게 되면

새 인스턴스 생성 시에 별도의 등록이 필요가 없습니다!

지역 컴포넌트는 새 인스턴스 안에 생성하는 컴포넌트 들로 여러개를 생성 할 수 있고 형태에서 알 수 있듯이

생성 된 인스턴스 안에서만 효력을 발휘 합니다.

Main.js 파일은 뷰 어플리케이션을 관장하는 역할을 하기 때문에
여기에 컴포넌트를 생성하게 되면 이 프로젝트 내의 어떤 vue파일에도 접근이 가능하게 됩니다.
>> 실제 개발에는 전역 컴포넌트를 쓰는 경우는 외부 라이브러리나 플러그인을 쓸 때가 대부분이라고 합니다.

컴포넌트는 각각 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없습니다.
따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 하는데요,
가장 기본적인 데이터 전달 방법은 바로 상위-하위 컴포넌트 간의 데이터 전달 방법 입니다.

부모는 자식에게 데이터를 전달해야 할 수도 있으며,
자식은 자신에게 일어난 일을 부모에게 알릴 필요가 있습니다.
이렇게 명확한 체계를 만들어두면 데이터 흐름을 쉽게 파악할 수 있습니다.
하위 컴포넌트의 템플릿은 상위 데이터를 직접 참조할 수 없습니다.
대신 상위 컴포넌트가 props라는 속성을 통해 데이터를 하위 컴포넌트에게 전달해 줄 수 있습니다.
이때, 하위 컴포넌트는 props 옵션을 통해 받아오게 될 props를 명시적으로 선언해야 합니다.

다음의 예시처럼 이 상태에서 msg라는 데이터를 자식 컴포넌트에게 보내주고 싶습니다.
그럴때는 자식 컴포넌트 아래에 이렇게 props를 정의해주는 것이죠.
msg를 받아올래요! 라고 적어두는 거죠.
그러면 이런식으로 일반 문자열을 전달해 줄 수 있습니다.
이렇게 하면 상위에서 데이터가 업데이트 되면 하위에서도 자동으로 업데이트 됩니다.

위 코드에서 v-bind:child-text라고 적은 이유는 HTML 속성은 대소 문자를 구분하지 않기 때문입니다.
따라서 문자열이 아닌 템플릿을 사용할 때는 kebab-case(하이픈으로 구분하는 것)을 써야 합니다.

지금까지는 상위에서 하위로 컴포넌트 데이터를 전달하는 방식에 대해 설명을 했는데요,

반대로는 어떻게 하는지도 다뤄보겠습니다.

아래의 그림 흐름도 처럼 데이터가 전달되는 방식을 볼 수 있습니다.

(제가 참고 영상보면서 직접 만든거에요 ㅠㅠ)

부모 컴포넌트의 어떠한 값을 자식 컴포넌트도 똑같이 가지게 됩니다. 이걸 데이터를 거울에 비추어 본다 라고 생각하시면 이해하시는데 도움이 될 것 같습니다.

그래서 동그란 값(모양으로 설명하겠습니다)을 자식 컴포넌트가 받아서 세모 값으로 변하는 함수를 만들었다고 가정해봅시다.

그런데 부모 컴포넌트에서 동그란 값을 마름모 값으로 바꾸게 됩니다. 그러면 그 거울을 비추고 있던 자식 컴포넌트의 동그란 값은 마름모 값으로 바뀌게 되겠죠???

그럼 동그란 값 --> 세모 값으로 바꿔주는 함수가 동작할 수가 없게 됩니다.

그래서 자식 내 컴포넌트는 부모 컴포넌트로 비춰서 받은 데이터 자체를 직접 변경하기 보다는

부모 컴포넌트에게 나 이렇게 값 바꿔줘~~ 라고 요청하는 편이 나을 것 입니다.

그것이 바로 props 요소가 되는 것이죠!

때문에 자식 컴포넌트는 어떠한 변경사항을 요청하고 싶을때 props로 부모 컴포넌트에게 신호를 보내게 되는 것입니다.

이번 포스팅에서는 컴포넌트 간의 데이터 전달 방식 까지를 알아보았습니다.

다음 포스팅에서 Vue Router에 대해 다뤄야 할 것 같아요!!

스마트인재개발원 에서의 랩실 스터디의 장점은 정규 수업시간 외에도 더 공부할 수 있도록 스터디실을 따로 마련해준다는 것입니다. 또한 스터디실 내 컴퓨터를 따로 마련해주기 때문에 수업이 끝나면 편하게 자습이 가능하고 새로운 컴퓨터로(?) 배웠던 것을 복습해보거나 또는 저처럼 평소 궁금했던 것들을 직접 해보며 공부할 수가 있어요!

그리고 필요한 강의 자료들이나 도서지원을 아낌없이 해주시기 때문에 기존의 스마트인재개발원 에서 학습하고 계신 학우님들도 랩실 스터디원 모집할때 주저하지 마시고 지원해 보시길 바라요!

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

최종 프로젝트, 팀 PS공병은행 (2) -- [스마트인재개발원]

harotea — Sat, 21 Aug 2021 17:01:04 +0900

벌써 수료한지가 일주일이 지났어요!!! 시간은 정말정말 빠르게 흐르는 것 같아요.. 10시에 쌤들이 주시던 과자들... 1시에 먹어야할것 같은 내 점심... 등원하면 만나서 즐겁게 얘기 나누던 같은 반 친구들... 얼굴을 안보니까 너무 그립네요 ㅠ

스마트인재개발원 에서는 수료가 끝이 아니라는 것..! 아실분들은 다 알텐데요!

수료 후 취업 연계와 관련해서도 추후에 포스팅 할까 해요. 취뽀하는 그날까지..!!! 열심히 블로그 글도 작성하고, 여러 기업들의 문을 두들겨 볼 생각입니다!

우선은 최종 프로젝트 내용을 정리하는 시간을 가져볼까 해요.

지난 포스팅에 이어서 진행하겠습니다!!

지난 포스팅 내용이 궁금하시다면 이쪽 링크를 눌러주세요 (찡긋)

최종 프로젝트, 팀 PS공병은행 (1) -- [스마트인재개발원]

약 3주간의 최종 프로젝트를 끝으로 8월 13일에 스마트인재개발원 에서의 길고긴 대장정을 마무리 했습니다. 이제 QR 안찍는당~~~ ㅜㅜ 뭔가 시원섭섭하네요... 제가 들었던 과정은 지능형 IoT 융합

jaws-coding.tistory.com

그 큰 PVC관을.. 대체 코딩에 어디다!!! 써먹느냐!! (두둥탁!)

제가 IoT반인만큼 하드웨어가 중요하다는 사실을 저번 포스팅을 통해서도 언급했었는데요,

특히 스마트인재개발원 에서는 재료를 사서 직접 가공해야하는 IoT반에는 특별히 재료비 지원금이 나옵니다.

(이걸 다 직접 사야해???!! 하신다면 걱정은 nono !!)

저희는 그래서 웹이나 어플 제작 일정 외에도 하드웨어 일정을 맞춰서 진행하는 것이 프로젝트의 큰 관건이라고 할 수 있어요.

저는 2차 팀장을 해봐서 (2차 부터 IoT반의 특색이 드러난답니다.) 프로젝트를 진행 하며 팀장이 해야하는

여러 일들을 경험해 보았는데요,

특히 제일 중요했던 건... 사전에 미리 아이디어 컨펌을 받은 후에 재료 구매리스트를 짜야한다는 것이죠!!!

앞에 편의점 가듯 물건을 구할 수 있는 것이 아니기 때문에 배송되는 날짜도 중요하고, 있는 부품을 어떻게 잘 활용할 것인지 (이게 아무래도 제일 시간적으로도 여유가 있겠죠?) 필요한 부품은 어떤것인지, 예산에 초과하지는 않는지...등등!!

계획을 잘 세워야한답니다.

정보력도 중요하구요!!! 그래서 저희 팀은 행동대장~~(단지 제가 차가 있어서 그런게 아닙니다..ㅎㅎ)~~인 제가 적극적으로 재료 구하기에 힘을 많이 실었던것 같아요.

그렇게해서 PVC관을 차에 실을 수 있을 정도의 크기로 구매한 뒤, 팀장님 집 옥상에서 다시 원하는 크기로 가공을 했어요.

바로 100% 수작업으로 말이죠!

이쯤 되면 제 전공이 의심스럽지만...^^;; 제 그라인더를 이용해서 원하는 크기로 절단을 했답니다!

그라인더는 제가 마침 가지고 있어서 편하게 사용이 가능했지만....

기타 재료들을 가공하는데 (최종 프로젝트 보다보니 스케일이 커지더라구요!) 여러 장비가 필요 했습니당

그렇지만.. 그 장비를 구할 수 없었기에... 방법이 없을까 요리조리 찾던 중!!

광주 북구 주민센터에서 생활공구를 대여해주는 '우리동네 물품 공유방' 이라는 좋은 시스템을 운영하고 있더라구요!!

스마트인재개발원 을 다니며 정말 다양한 경험을 하고 있는 것 같아요

출처 - https://m.blog.naver.com/gjbukgu/221469556845 (광주북구청 블로그)

스마트인재개발원 에서 IoT반을 희망하고 계신분들은... 광주 북구 주민센터 내에서 이러한 공구도 대여할 수 있다는 점!!

꼭 알려드리고 싶어서 이미지도 가져왔어요 ㅎㅎ (대신 북구 주민이어야합니다~~ 참고해주세용!)

들어보니 8/30일에 저희반의 다다음 후배 기수 반이 개강하더라구요 ~~

https://www.smhrd.or.kr/curriculum2

교육과정 - 스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

저의 포스팅을 보다가 궁금하시면 여기 링크에 접속하셔서 꼭 살펴보셨으면 좋겠어요!!!

코딩하는 것 뿐만 아니라 직접 만들어서 내가 짠 코드로 하드웨어를 조작하는 것에 관심이 많으신 분들이라면 정말 즐겁게 교육을 받으실 수 있을 것 같아요!!

그렇게 해서!! 저희 팀은 필요한 공구를 빌려가지고 또 하드웨어 제작을 하는 데 매진했습니다..ㅎㅎ

전기 릴선과 전동 드릴을 빌려서 스마트인재개발원 충장로점 (스마트인재캠퍼스)이 있는 건물 옥상에서 필요한 구멍을 뚫었습니다

ㅠ.ㅠ (물론 작업 후 정리정돈은 깨끗이!!)

어마무시한 드릴 촉!!! 구멍이 정말 잘 뚫렸어요..ㅋㅋ

다른 반 친구들이 호기심 어린 눈으로 저희를 엄청 쳐다봤답니다... 하하

그렇게해서 .. 만든 완전 초기 롤릴롤린 Ver.0.1 !!

아직 모터를 달기 전이라서 수동으로 돌리고 있는 모습..보이시나요..?

이런 방향으로 저희는 병이 넘어가게 하려고 구상을 했어요.

이제 병의 바코드를 스캔해주는 스캐너 모듈과 PVC관을 직접적으로 제어하는 모터를 달아야 했구요!

병의 종류 판단이나 모터의 제어 / 작동여부를 판단하는건 바로바로! 컴퓨터가 해야하는 일입니다!!

이제 코드 입력과 나머지 추가 부분을 넣어주어야 하겠죠???

그리고 아두이노와 라즈베리 파이의 본격적인 하드웨어 수업을 맡으신 미희쌤께서 항상 저희에게 강조하신 말이 있는데요..... 바로..

"테스트 꼭 해보기!!! 각각의 모듈이 작동하는지 테스트를 먼저 해봐야 돼~~"

라는 말이었습니당 ㅋㅋㅋ 각 부품들이 정상적으로 작동하는지 여부를 먼저 확인한 뒤에 코드를 짜야 어떤 부분이 잘못되고 있는지 확인이 쉽기 때문이죠!

이렇게 버튼을 이용해서 제어가 되는지 확인하는 작업을 진행했답니다!

하드웨어의 전반적인 진행은 여기까지이구요! 다음 포스팅에서는 웹과 어플은 과연 어떻게 진행을 하였는지에 대해 설명해드리려고 합니다!

저의 부족하지만 정성어린 포스팅을 보신분들은.. 공감 꾹 눌러주세요! 감사합니다

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

최종 프로젝트, 팀 PS공병은행 (1) -- [스마트인재개발원]

harotea — Sun, 15 Aug 2021 21:07:27 +0900

약 3주간의 최종 프로젝트를 끝으로 8월 13일에 스마트인재개발원 에서의 길고긴 대장정을 마무리 했습니다.

이제 QR 안찍는당~~~ ㅜㅜ 뭔가 시원섭섭하네요...

제가 들었던 과정은 지능형 IoT 융합 SW 전문가 과정(NCS) 3차 입니다!!

지난 3월 18일을 시작으로 8월 13일에 끝을 맺었네요~ 스마트인재개발원 은 CGI센터(본원)와 캠퍼스(동구에 위치) 두 군데서 과정이 이뤄지고 있습니다. 저는 스마트인재개발원 캠퍼스에서 과정을 진행하였어요.

블로그 포스팅을 하는김에 후기도 후기지만 먼저 최종 프로젝트를 진행하면서 다뤘던 여러가지들을 정리 해 보고자 합니다.

제가 있는 IoT반은 다른 반들과는 다른 특징이 있어요! 바로바로.. 눈에 보이고 실제로 작동해볼 수 있는 하드웨어가 같이 겸비해서 프로젝트가 진행된다는 점 입니다!

때문에 저희 반은 2차 프로젝트에서 아두이노와 관련 모듈을 활용하여 하드웨어와 웹 간의 데이터 송수신을 익히고 최종 프로젝트를 시작하기 전에 라즈베리 파이와 파이썬, 플라스크 서버 연결하기 등의 커리큘럼을 스마트인재개발원 에서 배우고 본격적으로 찐~찐찐 최종 프로젝트를 시작하게 되었습니다!!!

우리 팀은 소주병, 맥주병을 반환하면 일부 돈으로 바꿔주는 '빈용기환급금제도'를 이용한 기존의 무인 공병회수기에서 좀 더 발전된 방향으로 모색해보자! 라는 부분에서 프로젝트의 방향을 잡게 되었습니다.

따라서 기존의 무인 공병 회수기가 얼마나 존재하고 있는지, 어떤 방식으로 사용하는지, 불편한 점은 무엇인지 등등의 사전 조사가 이뤄졌는데요.

생각보다 전국의 무인 회수기 대수가 많이 없었고 이를 이용하거나 알고 있는 사람도 많이 없었습니다.

또한 이런 회수기를 더 편리하게 이용할 수 있는 어플리케이션도 현재 나와있는게 없었기 때문에 저희의 아주 강점이 될 수 있는 중요한 포인트 였습니다.

그렇게 해서 웹 / 어플리케이션 / 하드웨어 이 세가지를 펼쳐 나가는 것이 우리 팀의 방향이자 목표였습니다.

제일 먼저 어떻게 만들지 구상을 해야겠죠?

#1. 구상 스케치하기 - 하드웨어 / 웹 / 어플리케이션

다음과 같이 하드웨어 스케치를 하며 어떤 크기와 모양으로 만들어볼지 팀원들과 의견을 나누었습니다.

기존의 일반적인 박스형태의 회수기 모양에서 벗어나서 좀더 다양한 모양으로 접근해보면 좋을 것같아서 병모양의 일부를 잘라온 모양을 차용해서 회수기 전체적인 외관을 정하게 되었습니다

초기 회수기의 정면도와 평면도 구상 스케치

병 투입구 내부의 롤러 부분 구상 스케치

회수기가 아무래도 병을 담아야하다보니 프로토타입임에도 불구하고 생각보다 크기가 꽤 커질 것 같았습니다.

그래서 맨 처음 구상했던 스케치 부분에서 윗부분은 날리고 옆의 곡면 부분을 살려서 진행하게 되었습니다.

2차 회수기 스케치

어플리케이션과 웹 페이지는 각각 병 반환자가 어플을 쓰게 하고, 전반적인 것을 관리할 수 있는 페이지를 웹으로 제작하게 되었습니다.

각각의 페이지들은 스토리보드를 통해 각 화면 구성과 기능을 정의하였습니다.

어플리케이션 스토리보드

웹 페이지 스토리보드

웹이나 어플리케이션은 개발 언어와 IDE를 설정하고 스토리보드에 짠 계획에 맞게 개발을 시작하면 되었는데, 하드웨어는 재료준비가 우선적으로 되어있어야 시작할 수가 있었습니다.

그런데 우리 팀의 회수기에 스케치를 보시면 알겠지만, 병을 넘겨주는 롤러부분을 어떻게 구현할 것인가 하는 부분에서 고민이 많았습니다.

제 전공이 조각전공이다보니 남들보다는 더 다양한 재료를 써본 경험이 있어 롤러부분은 실제 배관에도 쓰이는 PVC 파이프로 써보면 어떻겠냐는 의견을 내게 되었습니다. 그렇게해서 적당한 PVC 파이프를 찾는 여정이 시작되었습니다..!!

PVC 파이프를 써 볼려고 했던 이유는 일단 다양한 내부 지름의 파이프들이 있고 재질 또한 튼튼하고 가공이 비교적 쉬워서 선택을 하였는데 직접 재료를 구하려고 알아보다보니 시중에 구매할 수 있는 파이프는 기본이 4M 단위로 나와있었습니다. 우리는 고작 35cm 정도가 필요할 뿐이었는데 나머지를 처리하기 어려울뿐더러 가져가는 부분에서도 문제가 있었습니다. 그래서 팀장님과 제가 한참 더울 때 정말 땀을 줄줄 흘리면서 공구거리의 여러 자재점을 찾아서 문의했던 기억이 납니다.. ㅜㅜ

그러다가..!! 정말 정말 친절하신 한 자재점에서 필요한 부분을 잘라서 판매 해주시겠다고 하여 롤러부분의 재료를 구할 수 있게 되었습니다!!! 시작부터 고생이 많았어요.. ㅠㅠ

너무너무 친절했던 자재점 ㅠㅠㅠ 많이 파세요 사장님 ㅠㅠ

저 많은 배관들이 보이시나요....?? 4M의 길고긴 친구들이랍니다...^^

그리고... 원하는 파츠를 획득!!! ✨ ✨✨

지금까지만 보면.. 이게 코딩하고 무슨 상관이 있지..!!? 하실 테지만, 앞으로의 진행과정을 포스팅할테니

지켜봐주세요! (찡긋)

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Vue.js 인스턴스 정리! [스마트인재개발원]

harotea — Sun, 8 Aug 2021 22:51:18 +0900

이번주에는 스마트인재개발원 랩실스터디에서 공부했던 내용 중 Vue.js 인스턴스에 대해 정리해 볼까 합니다!

Vue에서 인스턴스의 개념은 매우 중요합니다. 그렇기 때문에 더욱더 기초를 잡고, 정리해야하겠죠??

스마트인재개발원 스터디 발표내용을 바탕으로 내용을 정리해 보겠습니다.

뷰 인스턴스
뷰 인스턴스의 유효 범위
뷰 인스턴스 라이프 사이클

1. 뷰 인스턴스

뷰 인스턴스는 뷰로 화면을 개발하기 위해서 필수적으로 생성해야하는 기본 단위 입니다.

뷰 인스턴스의 생성은 아래 그림과 같이 new Vue({}); 라는 입력을 통해 생성이 가능합니다.

new Vue({
	el: '태그이름', //기본적으로 최상위 실행인 App태그가 들어가게된다.
    data: {
    //data 내용들
    },
})

이렇게 data안에 실행이 될, 우리가 출력하고 싶은 실제 data들을 저장하고, 여기에 key: value 의 object 단위로 데이터에 접근-출력 하게 되는 것입니다.

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할때 Vue를 생성자 라고 합니다.

Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다.

생성자를 사용하는 이유는, 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서입니다.

뷰 인스턴스를 생성하게 되면 그림을 예시로 들자면 Vue라는 이름의 집 한채가 지어지게 되는 것입니다.

그리고 el 속성을 통해 어떤 태그에 접근하여 데이터를 뿌릴 것인지 설정해 준 뒤,

Vue의 특별한 또 한가지 속성인!! ★ {{ mustache }} ★ 을 사용하여 데이터의 key-name값을 불러와서

실제 클라이언트 뷰 (화면) 에서 원하는 값을 출력할 수 있게 되는 것입니다.

뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다.

위에서 먼저 설명했던.. el속성도 미리 정의 되어 있고, 뷰로 만든 화면이 그려지는 시작점을 의미합니다.

뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 합니다.

돔 요소를 선택할 때에는 CSS 선택자 규칙과 똑같이 사용합니다.

이외에도 template, methods, created 등 미리 정의되어 있는 속성을 사용할 수 있습니다.

2. 뷰 인스턴스의 유효범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타납니다. 이를 인스턴스의 유효 범위라고 합니다. 그 다음에 스마트인재개발원 스터디 발표 내용이기도 한 Vue 컴포넌트- 지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하려면 꼭 알아야하는 개념이며, 인스턴스의 유효범위는 el 속성과 밀접한 관계가 있습니다.

먼저, 인스턴스가 생성된 후 화면에 어떻게 적용되는지 알아야합니다.

다음 그림의 흐름도를 보며 살펴보겠습니다!

이 흐름도대로라면 위의 예시의 {{ message }} 는, Hello Vue.js! 라는 출력값을 도출해볼수 있겠죠???

그림을 보며 흐름도를 다시 생각해보세요!

그렇다면, 인스턴스의 유효 범위를 벗어나면 어떻게 될까요??

예시 그림처럼 이미 오류가 떠서 밑줄이 쳐져있는 것을 볼 수 있습니다.

말 그대로 {{ message }} 라는 부분은 el속성에 의한 app태그 안에서만 존재하는, data에 접근할 수 있는 명령문인데

이 문장이 app이 관여하는 태그 바깥으로 갔기 때문에 당연히 오류가 발생하게 됩니다.

3. 뷰 인스턴스 라이프 사이클 (생애주기)

스마트인재개발원에서 주력하고 제일먼저 배웠던 JAVA를 통한 JSP나 Spring에서도 어떠한 데이터의 흐름 즉, 생애주기가 있는데요,

뷰 인스턴스도 마찬가지입니다.

인스턴스가 생성되어 화면에 부착되고 어떠한 내용들이 업데이트 되고 소멸이 되는 과정이 발생합니다.

이를 뷰 인스턴스 라이프 사이클 이라고 합니다. 흐름도는 아래와 같습니다.

beforeCreate : 인스턴스 생성 후 제일 처음 실행되는 라이프 사이클. Data속성, methods속성 인스턴스에 정의 X, 돔과 같은 화면 요소도 접근 X
Created : Data속성, methods속성 인스턴스에 정의 O, this키워드를 통해 속성에 정의된 값에 접근하여 로직실행 가능! 단, template 속성에 정의된 돔 요소 접근 X
beforeMount : template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el속성에 지정한 돔에 인스턴스 부착하기 전 단계.
Mounted : Template 속성에 정의한 돔에 접근 O, 화면 요소를 제어하는 로직 수행하기 좋음
beforeUpdate : 인스턴스에 정의한 속성들이 화면에 치환된 후 뷰의 반응성 제공을 위해 데이터 관찰이 수행되는 단계
Updated : 데이터가 변경되고 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 아직 인스턴스에 접근 가능!
뷰 인스턴스의 데이터를 삭제하기 좋음
destroyed : 뷰 인스턴스가 파괴되고 나서 호출되는 단계. 뷰 인스턴스에 정의한 모든 속성 제거, 하위에 선언한 인스턴스들 또한 모두 파괴됨

다음 포스팅은 기회가 된다면 뷰 컴포넌트와 라우터에 대해 다뤄볼까 합니다.

스마트인재개발원 에서 JAVA 뿐만 아니라 더 다양한 프로그래밍 언어를 배워 볼 기회를 잡아보시는 건 어떨까요?

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Vue.js 이벤트 핸들링 / Computed 속성 [스마트인재개발원]

harotea — Sun, 1 Aug 2021 23:51:30 +0900

이번 포스팅은 '스마트인재개발원' 랩실에서 진행한 7/22 6주차 Vue.js 에 관한 발표자료를 주제로 활용하였습니다.

Vue에서 이벤트를 다루는 방법에 대해서 알아보겠습니다.
HTML에는 <a>나 <input>과 같은 기본 이벤트들이 있는데요, 또한 자바스크립트를 통해서
기본 이벤트와 어우러지게 사용하는 방법들이 있습니다.
여기에서 Vue.js는 자바스크립트로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서
좀 더 쉽게 구현할 수 있는 방법을 제공하고 있습니다.

v-on 디렉티브를 사용해서 이벤트를 처리하는 방법에 대해 알아보겠습니다.

페이지에 보여지는 숫자를 증가시키고, 감소시키는 간단한 카운터를 만들어보며 예제를 알아보겠습니다.

우리가 카운터를 만들기 위해선, 버튼의 click 이벤트 발생 시 우리가 준비한 작업을 할 수 있게 설정을 해야겠죠?

그러기 위해선 이벤트가 발생 했을 때 어떤 작업을 할 지 함수를 준비해주어야 합니다.

이 함수는 뷰 인스턴스 내부에 위치해 있는데,
Vue 객체와 관계가 있으므로, 이를 메소드(method)라고 부릅니다.

메소드를 준비할 때는, 우리가 뷰 인스턴스에서 사용할 데이터들을 data 안에 넣은 것처럼
함수들을 만들어서 뷰 인스턴스의 methods 안에 넣으면 됩니다!

button설정만 했을 때에는 그냥 클릭만 가능한, 아무 기능도 하지 않은 버튼들 입니다.
이제 v-on 디렉티브를 사용하여 기능을 넣어줍니다.
이 디렉티브를 설정 할 때는 다음과 같은 형식으로 쓰게 됩니다.

실행해보게되면.. 더하기는 연도에서 +1씩, 빼기는 그반대로의 결과를 보여주게 됩니다.
Vue를 사용하면 자바스크립트를 그렇게 많이 입력하지 않아도, 이렇게 쉽게 구현할 수가 있습니다.

그리고 전의 v-on 코드를 좀 더 편하게 작성 할 수 있는 방법이 존재합니다. 바로 v-on: 을 @로 대체하는 것 입니다.

Vue에서는 복잡한 자바스크립트 구현을 간단히 처리하기 위해서 다음과 같은 수식어를 제공하고 있습니다.
이 수식어는 이벤트명에 .으로 연결하여 사용합니다.
그 밖에도 키 수식어라고 해서 키보드 이벤트 리스너로 key-up이나 엔터와 같은 키 수식어도 추가하여 사용할 수 있습니다.

Vue.js의 Computed 속성은 템플릿 내 복잡한 로직이 필요한 경우 이를 활용하면 좋습니다.

하지만 다음과 같이 너무 많은 연산이 템플릿 안에 들어가게 되면 코드가 비대해지고 유지보수가 어렵습니다.
이 코드는 더 이상 간단하고 명료하다고 볼 수 없겠죠?

message라는 데이터를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 할 것 입니다.

복잡한 로직이라면 반드시 computed 속성을 사용해야 하는 이유입니다.

다음 포스팅에서는 Computed 속성이 구체적으로 어떻게 쓰이는지에 대한 예제와 그 밖의 다양한 인스턴스 내의 데이터 접근법에 대해 설명해보도록 하겠습니다!

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

내 이름은 Vue.js! 내 장점은 말이야~ [스마트인재개발원]

harotea — Sun, 1 Aug 2021 23:50:40 +0900

이번 포스팅은 스마트인재개발원 랩실스터디에서 공부한 내용을 담았습니다!

지난주 Vue.js 소개글(1) : https://jaws-coding.tistory.com/18

내 이름은 Vue.js! 나를 소개하지! [스마트인재개발원]

드디어 저의 스터디 최종 목표인 Vue.js 써보기의 도입부입니다!! 본 내용은 스마트인재개발원 랩실에서 4주 차 발표에 진행했던 Vue.js 주제를 가지고 포스팅했습니다. Vue.js란 무엇인가! 이것을 알

jaws-coding.tistory.com

이번 포스팅은 Vue.js의 장점과 사용예시를 들어보겠습니다.

Vue의 장점은 크게 두 가지로 나뉘어 볼 수 있는데요,

1. 데이터 바인딩

2. 가상 돔 기반 랜더링

으로 나누어서 볼 수 있겠습니다!

1. 데이터 바인딩

Vue.js는 data(){}; 안에 보관하고 있는 'key: value' Object 타입의 데이터들의 key 값에 접근하여

바로바로 ~~(산지직송)~~ HTML태그 안에서 데이터 값 변경을 해줍니다.

Vue.js의 데이터 바인딩에는 단방향, 양방향, 내용 바인딩 세 가지가 있습니다.

Vue.js의 데이터바인딩

① 단방향 - 위의 예시처럼 데이터 값이 변경되면 자동으로 업데이트를 해줍니다.

② 양방향 - input태그와 함께 주로 사용되며 입력시 데이터가 변경 == 변경된 데이터가 출력 됩니다.

<input type="text" v-model="name">
<div>
	입력한내용 : {{name}}
</div>

input박스 안에 초기에 지정한 name 값이 나오게 되며.. input에 값을 입력함과 동시에 div 태그 안의 name

또한 업데이트가 됩니다.

③ 내용 바인딩 - v-text, v-html 디렉티브의 사용으로 태그 내부설정이 가능합니다.

각각 innerText, innerHTML에 바인딩 됩니다.

<div v-text="message"></div> <!--1번-->
<div v-html="message"></div> <!--2번-->
<script>
	...
	data:{
    		message:"<h1>this is test message</h1>"
    	}
    	...
</script>

1번의 경우에는 태그가 텍스트 형식으로 출력이 되고

2번의 경우에는 h1 태그가 적용되어 그에 맞게 출력이 됩니다.

{{ 데이터바인딩 }}을 사용하는 이유는,

첫번째, HTML을 좀더 쉽게 사용하기 위함입니다. 가변적인 데이터를 사용할 때 특히 유용하게 쓰이겠죠??

HTML에 하드코딩을 해 놓으면 어떠한 데이터가 변경이 될 때 일일히 찾아서 변경을 해주거나, 코드가 이리저리 많이 엮여 있다면 더 불편할 것 입니다.

두번째, 데이터바인딩을 통해 Vue의 실시간 자동 렌더링 기능을 적극적으로 활용할 수가 있습니다.

2. 가상 돔 렌더링

Vue.js는 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하였습니다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신합니다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 렌더링 방식보다 더 빠르게 화면을 그릴 수 있습니다.

위의 그림은 가상 돔에 대해 간단하면서도 명확하게 표현해준 그림입니다.

위 그림을 설명해 보자면 모델에서 어떠한 변화(보라색 부분)가 일어나게 되면 변화된 부분이 가상 돔에게 전달이 됩니다. 가상 돔은 Real DOM의 구조를 가지고 있으며, Real DOM과 변화된 부분이 정확히 어떻게 달라졌는지 스캔하게 되고 그림에서와 같이 빨간 부분(업데이트 해야하는 부분)을 인식하게 되는 것 입니다.

그렇게되면 이걸 패치(Patch)해서 실제 UI 단에 보여지는 부분에서 변화해야하는 부분(빨간 네모)을 업데이트 하여 보여주게 되는 방식입니다.

지금까지 Vue의 큰 두가지 장점을 알아보았습니다.

그렇다면 그밖의 Vue의 특징은 어떤 것이 있는지 알아보겠습니다!

MVVM패턴

Vue.js는 우리가 흔히 알고 있는 MVC 패턴에서 발전 된 MVVM패턴을 따르고 있습니다.

이것은 V-- 즉 View 단이 더 세분화하여 보여지게 된 것입니다.

다음 예시 그림에서처럼 뷰 모델이 반응-요청처리를 해주면서 기존의 C-- (Controller) 단을 겸해서 맡게 되는 것입니다.

이 View모델이 중간 영역을 해결해 줌으로써 Vue만의 즉각적인 반응과 장점을 보여주게 되는 것입니다.

Vue의 MVVM 구조의 흐름은 다음과 같은 예시로 살펴볼 수 있습니다.

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

내 이름은 Vue.js! 나를 소개하지! [스마트인재개발원]

harotea — Sun, 25 Jul 2021 22:38:41 +0900

드디어 저의 스터디 최종 목표인 Vue.js 써보기의 도입부입니다!!

본 내용은 스마트인재개발원 랩실에서 4주 차 발표에 진행했던 Vue.js 주제를 가지고 포스팅했습니다.

Vue.js란 무엇인가! 이것을 알아보기 위해 다음과 같은 순서로 설명해 볼까 합니다.

SPA 프레임워크
Vue.js - Vue의 탄생
Vue의 장점
Vue의 특징

1. SPA 프레임워크

예전에는 PC용 웹사이트 하나만 만들면 되었지만 모바일 시대가 열리고,

앱이나 스마트폰 브라우저로 서비스들이 이용되기 시작하면서 이제는 어느 정도 갖춰진 사업을 하는 회사에서는 개발자들이 PC용 웹, 모바일용 웹 그리고 iOS와 안드로이드 앱과 서버까지 개발해야 하게 되었습니다.

먼저 PC용 사이트의 경우에는 접속이 들어오면 데이터베이스에서 정보들을 찾아서 그걸로 HTML, CSS, Javascript로 렌더링하고 이걸 PC 브라우저로 보내줍니다.
반응형으로 만들지 않는다는 가정 하에 모바일용 사이트도 이러한 과정을 거쳐야 합니다.
안드로이드나 iOS의 네이티브 앱은 앱 개발자들이 만든 앱에서 서버에 정보를 요청하면 데이터베이스에서 정보들을 찾아서 앱으로 전송하고 앱에서는 이 정보들을 받아서 안드로이드나 iOS의 방식으로 폰 화면에 띄워주게 됩니다.

여기서 겹치는 부분들을 최소화하고 업무를 좀 더 깔끔하게 분할할 수는 없을까요?

안드로이드와 iOS에는 자체적인 SW와 시스템이 있어서 서버로부터 데이터만 전송받으면 화면이 보일 수 있습니다.
웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도 이걸 브라우저에서 HTML, CSS, JS로

랜더링 해낼 수 있다면, 이제 서버는 어디서 정보를 요청하든 동일한 작업을 수행해서 데이터를 전송하면 될 것입니다.

프론트엔드와 백엔드를 분리!

웹 사이트 개발을 이렇게 사용자 컴퓨터의 브라우저에서 돌아가는 프런트엔드와 서버에서 돌아가는 백엔드로 분리하는 것입니다.
브라우저에서도 동작하는 자바스크립트란 언어로 강력한 라이브러리나 프레임워크를 만들면 가능하지 않을까요??

바로 그게 Angular, React, Vue 같은 SPA 프레임워크입니다.
Angular, React, Vue는 방식들은 다르지만 기본 아이디어와 원리는 유사합니다.

2. Vue.js - Vue의 탄생

앵귤러나 리액트의 경우에는 현 프런트엔드 프레임워크 시장을 보았을 때, Vue보다 상대적으로 오래된 프레임워크이며 이미 많은 기업에서 시스템을 해당 프레임워크로 구축해 서비스하고 있습니다.

뷰의 창시자인 에반도 구글에서 일할 당시 브라우저 상에서 많은 프로토타이핑 작업을 앵귤러로 구현하였습니다.

에반은 앵귤러의 데이터 바인딩 방식과 돔(DOM)에 직접 접근하지 않고도 데이터를 표현하는 방식에 흥미를 느꼈습니다.

하지만 앵귤러의 경우 자바스크립트를 보완하여 나온 타입 스크립트나 ES6 등의 언어를 기반으로 방대한 크기의 프레임워크를 이해해야 하기에 입문자라면 부담을 느낄 수 있습니다.

그래서 에반은 앵귤러의 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하였고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작했습니다. 그렇게 하여 뷰가 탄생하게 되었습니다.

3. Vue의 장점

배우기가 쉽다!

- HTML, CSS 그리고 Javascript에 대한 이해도가 있다면 일주일 좀 더 보태서 하루 안에도 전반적인 이해가 가능할 것입니다.

리액트, 앵귤러에 비해 성능이 우수하고 빠르다!
리액트와 앵귤러의 장점을 가지고 있다!

- Vue는 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 두 가지 특징을 모두 가지고 있습니다.

이번 포스팅에서는 뷰의 전반적인 장점에 대해서 까지 다뤄보았고, 다음 포스팅에서 Vue의 장점을 어떻게 쓰는지 예시와 함께 설명해 드리도록 하겠습니다.

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

AJAX 그것이 알고싶다! (2) [스마트인재개발원]

harotea — Sun, 25 Jul 2021 22:08:06 +0900

AJAX 그것이 알고싶다!(1)

https://jaws-coding.tistory.com/14

AJAX 그것이 알고싶다! (1) [스마트인재개발원]

본 내용은 스마트인재개발원 랩실에서 07/01 3주차 발표에 진행했던 AJAX 주제를 포스팅 해보려고 합니다. AJAX는, AJAX는 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다. 간단히 말해서,

jaws-coding.tistory.com

그러면 지난번에 이어서 이번에는 AJAX의 필요성과 흐름 그리고 장단점에 대해 포스팅 해보겠습니다!

앞서 설명했던 동기와 비동기 처리방식을 선으로 나타낸 그림입니다.

동기와 비동기 처리방식을 한눈에 볼 수 있으니 차이점을 공부하실 때 참고하시면 되겠습니다.

출처 - https://wickedmagica.tistory.com/184

웹이 동작하는 흐름은 AJAX가 등장한 이전과 이후로 나누어서 볼 수가 있는데요!
먼저 AJAX가 사용되기 이전의 웹의 초창기 클래식 웹 모델을 보도록 하겠습니다.

1. Classic Web application model
브라우저 클라이언트가 상단에 있고, 하단에는 서버-사이드 시스템 부분이 있습니다. 보통 백엔드 개발자라고 하는 것이 이 부분을 담당하시는 분들이 됩니다.
브라우저 클라이언트 부분은 사용자 그리고 사용자들에게 화면을 제공해주는 프런트엔드 개발자가 이 역할을 맡게 되어있습니다.

밑부분 백엔드 쪽에서는 서버가 있고, 위는 보통 클라이언트 단이라고 부르게 되고 유저 인터페이스가 그 안에 있습니다.

브라우저에서 사용자가 도메인 주소를 통해서 서버 요청을 하게 되면 서버단에서 데이터베이스에서 데이터를 꺼냅니다.
백엔드 환경에서의 프로세싱, 처리를 해주게 되고, 그리고 이 시스템에서 네트워크 통신을 통해서 사용자의 브라우저로 데이터를 전송해줍니다.

그럼 전송받은 데이터가 이미지 파일이나 html 같은 구조 언어, 그리고 css 스타일 언어와 같은 것들이 이 내에서 해석이 됩니다.
해석이 되어 사용자가 보는 UI로 구현이 되는 것입니다.
웹을 사용하시면서 일반적인 데스크톱에서 사용되는 애플리케이션보다 느린 경험을 좀 하게 되는 데, 이유가 여기에 있습니다.

통신을 해서 데이터를 받아서 조립을 해서 만든 화면이 필요하니까 (UI단에서) 서버에서는 데이터를 전송해줘야 되고..

이러한 과정을 거치다 보니, 사용자가 보는 시간대가 빠르지가 않게 되는 것입니다.
느리게 구성이 돼서 화면이 보이는 것! 그것이 초창기 웹 애플리케이션입니다.

이때 요청과 응답이라는 과정이 있는데 요청할 때 (request) HTTP 프로토콜을 가지고 브라우저를 통해서 주소를 입력하게 되면 해당 주소가 가진 IP 어드레스의 통신을 통해서 서버에서 응답을 받게 됩니다.

서버가 프라이밍 처리를 해서 데이터 (- HTML이나 CSS, JS 등 데이터들)를 전송해줍니다.
이걸 응답(reponse) 한다고 얘길 하는 것이죠!
그래서 이런 클래시컬한 모델에서는 상당히 느리게 작동하게 됩니다.
또 하나 단점은 매번 요청을 하면 매번 새로운 데이터를 보내서 다시 화면을 구성을 해야 됩니다.
즉 우리가 뭔가를 클릭하고 액션을 요청할 때마다 서버에 요청을 하게 되고, 서버는 그걸 처리한 다음에 다시 페이지를 만들어서 전송을 해주는 시스템입니다. 상당히 느리겠죠?

2. Ajax Web application model

반면에, AJAX를 사용하는 시스템을 보겠습니다.
기존의 브라우저 클라이언트랑 서버 계층 외에 중간 계층이 생겼습니다.
여기서 중요한 역할을 하는 것이 자바스크립트입니다.
자바스크립트에는 엔진이 포함되어 있는데 정확히는 브라우저 엔진이 포함되어 있는 것입니다.
다음과 같이 AJAX 엔진이라는 것이 포함되어 있습니다. 이 AJAX엔진이 하는 일이 무엇이냐면 브라우저단에서 사용자 인터페이스를 통해서 사용자 요청을 하게 되면 자바스크립트 함수가 AJAX엔진을 통해서 이를 요청을 합니다.
그러면 엔진은 다시 서버에 요청을 합니다. 이때 중요한 차이점은 옆의 모델은 모든 데이터를 한 번씩 다 불러오게 됩니다.
하지만 이 모델은 일부만 바꿀 수 있는 것이죠. 그래서 요청을 할 때 일부분의 필요한 데이터만 요청을 합니다.

그러면 web and or xml server 이 쪽 데이터의 서버에서는 데이터베이스에서 필요한 자료만 꺼내고, 프로세싱을 통해서 xml 또는 json 같은 데이터를 보내주게 됩니다.

기존과 다른 점은 기존에는 html과 css 같은 데이터들을 다 보내줘야 되는데, AJAX를 사용하게 되면 정말 딱 필요한 데이터만 보낼 수 있게 됩니다.
당연히 모든 데이터가 이동하는 것보다는 필요한 데이터만 읽어오는 것이 보다 시간이 적게 들게 되겠죠?
그리고 AJAX엔진을 통해서 받은 데이터를 이 내부에서 조립을 해가지고 UI를 통해서 보여주게 되는 것입니다.

다음은 AJAX의 장, 단점입니다.

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

[스마트인재개발원] 5개월 후기!

harotea — Sun, 18 Jul 2021 20:15:10 +0900

안녕하세요! 7월 중순을 향해 가면서 날이 많이 무더워지고 있네요..

3월에 들어올 때만 해도 언제 8월이 되나 했는데.. 벌써 수료까지 한 달 밖에 남지 않았습니다!!!!

이번에는 '스마트인재개발원'을 다니면서 느낀 점을 공유해보려고 해요!

먼저 저에 대해 말해보자면,

저는 미술학과 조소를 전공한 컴퓨터와는 관련이 없던.. 비전공자입니다.

올해 초 IT에 관심을 갖게 되면서 내가 좋아하는 일에 IT 기술을 접목시킬 수 있으면 더 좋은 강점이 되지 않을까?

하는 생각에서 공부를 시작하게 되었어요.

<코딩 부트캠프의 아픈 추억>

JAVA의 J도...Javascript가 뭔지도 모르고 시작한 코딩 부트캠프에서, 정말 컴퓨터 언어 관련 지식 0이었던 저에게 100% 온라인 수업은 한 달 여 만에 눈물을 머금고 내려놓아야 했던 쓰라린 기억이 되었습니다.

<이대로 포기할 순 없다!>

부트캠프의 아픔을 뒤로하고, 배우기로 맘 먹은 저의 의지를 꺾을 수는 없었어요!

나라에서도 4차 국가 전략기술의 핵심인 IT분야를 지원하는 만큼 다양한 국비지원 교육기관처가 있었는데요,

저는 기간도 마침 적당하고 후기가 너무 좋았던 '스마트인재개발원'의 교육과정이 마음에 들었어요.

무엇보다도 제일 큰 장점 중 하나는 타 지역 교육생들에게 기숙사비를 지원해준다는 점이에요!

전화 상담을 통해 이 점을 다시 확인 하였고, 인터넷 접수와 추후 면접을 통해 스인재와 함께 하게 되었답니다.

저는 전주에서 이렇게 광주로 오게 되었고, 어느 덧 수료까지 한 달을 앞두고 있네요...!

1. 장소

스마트인재개발원은 남구의 CGI센터와 스마트인재캠퍼스인 동구의 광주아트센터 두 곳으로 교육이 진행이 됩니다.

저는 '지능형IoT 융합 SW 전문가 과정(NCS)' 3기이고 동구에서 수업을 듣고 있어요.

문화전당 역과 가까이 있어서 지하철, 버스를 타고 오기가 편하답니다!! 충장로 하고도 가까워요.

하지만 저는 자취를 하고 있기 때문에.. 걸어서 10분거리의 '스세권'(스인재 ~~근처)~~에서 살고 있답니다 하하하

다만 골목이 많아서.. 자차로 다니시기에는 남구보다는 불편한 점이 있어요.. 주차가 힘듭니다 ㅠ.ㅠ

대중교통편은 좋은 편이에요!!

2. 주변 식당 (점심시간에 필수!!)

근처가 충장로.. 조금 걸어가면 동명동인만큼 주변에 먹을 곳이 천국!!이라는 장점이 있어요 ㅎㅎ

덕분에 다양한 카페와..먹거리들.. 점심시간에 오늘은 어디 가지..? 하는 고민을 충족시킬 만큼 다양한 메뉴를 맛볼 수 있는 식당이 많아서 점심이 너무 행복하답니다.

개발원 근처 중심으로 꼽자면..

중국집 - 1515 (술먹은 다음날엔 여기 짬뽕이라는 암묵의 룰이..)

분식 - 손수김밥, 고봉민 김밥, 봉구스 밥버거, 대접

쌀국수 - 건물 바로 아래의 쌀국수집!

한식 - 신신 식당(요일별 음식이 달라요), 하동정(6천 원 한식뷔페의 행복), 명덕 식당(설렁탕 맛집), 행복한 담벼락

돈가스 - 통 큰 경양식, 미미당

이렇게 등등..! 이 있습니다. 정말 많죠??

3. 지난 5개월 간 느낀 점

5.15 스승의날 기념 우리가 준비한 이벤트!

1) 초반 수업과 Java Festival

초반에는 눈물을 머금고 배운 부트캠프에서의 공부와.. 담임이신 예진 선생님과 현석 선생님의 열정적인 지도 아래 JAVA 기초를 배워서 즐겁게 초반 적응 단계를 거친 것 같아요.

그리고 스인재의 명물은 자바 페스티벌! 을 통해서 1차 팀과 함께 더 돈독히 우정을 쌓고.. 지식도 같이 쌓을 수 있었어요.

우리 팀은 2등..!!

자바페스티벌...★

2) 1차 프로젝트

1차 프로젝트에서는 순수한 JAVA와.. GUI를 가지고 프로그램을 구현하는 것이었는데, 배운 내용을 최대한 활용해서 팀원들과 으쌰 으쌰.. 턱없이 부족한 것 같았는데 2등 해서 기분이 너무 좋았어요 ㅎㅎ

2차 프로젝트팀!

3) 2차 프로젝트

이번에는 제가 직접 팀장 지원을 해서 팀을 꾸렸는데요, 본격적으로 웹페이지 구현을 하고 IoT반 답게 아두이노 모듈을 활용해서 하드웨어 적인 부분도 구현하는 게 두 개 다 해야 해서 힘들기도 했지만 그만큼 재미도 있고 뿌듯하기도 했던 프로젝트였습니다.

4) 최종 프로젝트 시작..!

대망의 최종 프로젝트..! 는 곧 시작이고, 지금 3차 팀원들과 함께 치열하게 아이디어 회의와 기획 발표를 통해 의견을 정리 중에 있답니다!

5개월 간 스마트인재개발원을 다니면서

1. 적절한 온-오프라인을 통해 수업 중 이해가 안 되는 부분이나 공부하면서 힘든 부분을 바로바로 해결할 수 있다는 점

2. 각 반마다 담임 선생님이 있어 어려운 부분에 관해 상담이 가능하다는 점

3. 여러 프로젝트를 통해 팀 워크와 팀원들 간의 유대감을 형성하며 함께 성장할 수 있다는 점

4. 후반에는 포트폴리오 및 자소서 특강이 준비되어 있어 수료 후 취업을 하는데 적극 지원을 해준 다는 점

등등! 지루할 틈 없이 즐겁게 취업 준비를 할 수 있게 해 주기 때문에 너무너무 재밌게 다니고 있어요!

IT업계에 조금이라도 관심이 있으시다면

정말 1도 고민하지 마시고,

스마트인재개발원의 문을 두드려 봤으면 좋겠습니다!

여러분도 늦지 않았습니다!!

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Vue.js 개발환경 - VS code에 설정하기 [스마트인재개발원]

harotea — Tue, 13 Jul 2021 20:43:15 +0900

< [스마트인재개발원] 랩실에서 생활하는 Sophie의 개발환경 구축하기.. >

SPA(Single Page Application)의 떠오르는 강자!

Vue.js를 사용하기위한 개발환경을 설정하기 위해 VS code에 설치해봤습니다..

먼저, 구글 창에 Node.js를 검색하여 제일 먼저 뜨는 공식 홈페이지에 접속한다.

Node.js 홈페이지에 접속

체크표시 버전 설치!

사실 Node.js만 사용하려면 안정적인 버전인 왼쪽 버전을 써도 되지만, 나는 Vue.js를 쓰기 위해 오른쪽 버전을 다운로드하였다.

(처음에 왼쪽 버전을 받아서 사용하려고 했는데, npm자체가 자꾸 에러가 나서 지우고 다시 오른쪽으로 받았더니 오류가 없었다.)

이렇게 Node.js를 설치해 주고 난 다음에 Visual Studio Code에 접속해준다. ~~(Visual Studio Code 없는 흑우들 없쥬..?)~~

Ctrl + ` 를 눌러 터미널에 접속!

VS code에 들어왔으면 터미널을 켠다.

다음과 같이 작업 파일 창 다음에 입력을 해준다. 여기서 npm warn이 안 뜨고 다운이 잘 받아진다면 성공!

다운로드하는 동시에 에디터 부가기능을 같이 설치해 보자.

VS code 제일 왼쪽 메뉴바를 보게 되면 Extensions 버튼이 있다.

이 버튼 클릭!

클릭했으면 Vetur, HTML CSS Support, Vue 3 Snippets를 순서대로 검색하여 install 해준다.

여기까지 잘 왔으면 이제 Vue 작업 폴더 (workspace)를 만들어 줄 차례이다.

먼저 바탕화면에 새폴더(작업용)를 하나 생성해주고 아래와 같이 오픈 폴더 해준다.

바탕화면에 만들었던 폴더가 잘 들어온 것을 확인해준다.

터미널을 열어서 작업폴더 하위에 vue 프로젝트를 하나 생성해준다.

*오류처리*
터미널에서 "vue create" 명령어 입력 시 아래와 같은 오류가 발생할 수 있다.

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\username\AppData\Local\Yarn\bin\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ vue
+ ~~~
+ CategoryInfo : 보안 오류: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAcces

이는 윈도우 파워쉘에서 실행했을 때 발생하는 증상으로, 이 때는 "vue.cmd create"로 사용하면 된다.

엔터를 한번 더 치면 프로젝트 생성 완료!

성공!!!!

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

AJAX 그것이 알고싶다! (1) [스마트인재개발원]

harotea — Fri, 9 Jul 2021 15:58:55 +0900

본 내용은 스마트인재개발원 랩실에서

07/01 3주차 발표에 진행했던 AJAX 주제를 포스팅 해보려고 합니다.

AJAX는,

A J A X

AJAX는 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다.
간단히 말해서, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다.
AJAX 용어에 XML이 포함되어 있기 때문에 XML만 통신 가능한 것이 아닐까 생각이 들 수도 있겠지만
XML 뿐만 아니라 저번주에 다뤘던 JSON이나 HTML, 텍스트 등을 포함한 다양한 포맷을 주고받을 수 있습니다.
무엇보다도 AJAX의 강력한 특징은 페이지 전체를 새로고침 하지 않고서도 수행이 되는 “비동기성”입니다.

AJAX는 무엇을 통해 통신할까요?

웹은 문서 공유 목적으로 만들어졌기 때문에 초창기 브라우저는 동기방식으로 서버에서 넘겨준 데이터를 출력하는 용도로만 동작했습니다.

비동기로 서버와 통신하기 위한 시도는 인터넷 익스플로러에서 XMLHttp를 시작으로 다양한 브라우저에서 비동기 통신을 지원하기 시작했고 XMLHttpRequest 객체가 표준이 되어 현재 대부분의 브라우저에서 사용할 수 있게 되었습니다.

XMLHttpRequest의 등장은 웹 발전에 많은 영향을 주었는데, 구글 맵과 같이 과거에는 프로그램 설치를 해야 볼 수 있을 법한 화면들을 웹상에서 구현 가능하도록 만들어 과거에는 설치해서 사용하던 프로그램들을 웹으로 만들어 브라우저만
있으면 사용할 수 있는 환경을 만들어주었습니다.
AJAX라는 기술을 사용해서 XMLHTTPRequest 객체를 가지고 웹을 개발하기 편하게 만들어주는 라이브러리라고 생각하시면 됩니다.

동기와 비동기

AJAX는 비동기 처리 방식으로 통신합니다. 그렇기 때문에, 동기와 비동기의 차이점이 무엇인지 알아야할 필요가 있습니다. 다음 그림을 통해 동기 / 비동기 통신이 어떤 차이점이 있는지 알아보겠습니다.

동기 개념

비동기 개념

동기 처리 방식은,

클래식컬한 웹 애플리케이션 모델을 예시로 들어볼 수 있습니다. (초기 웹 앱 모델이죠)
반면에 ajax 웹 어플리케이션 모델은 비동기입니다.
여기서 차이가 있는데요, 동기라고 하는 것은 클라이언트 단에서 요청을 행했을 때, 요청(Request)을 하게 되면 서버에서 응답을 받아서 처리하는 시간이 있게 됩니다.
그러고 나서 처리가 끝나면 다시 응답을 받을 때까지 아무것도 하지 못합니다.
지연시간이 있는 것이죠! 다시 또 사용자가 요청을 하게 되면 똑같은 일이 반복이 됩니다. 결과적으로 중간중간 로스타임이 생깁니다.

비동기 처리 방식은,

반면에 지연시간이 없습니다.
클라이언트단에서 서버 요청을 할 때에도 사용자 화면은 그대로 유지가 가능합니다.
그리고 필요한 부분만 서버요청을 받아서 ajax 엔진이 처리하는 그 시간 동안에
아무런 딜레이 타임이 없기 때문에 사용자는 중간에 멈춘다는 느낌이 없는 것이죠.
그렇기 때문에 사용자 경험을 극상화 시킬 수 있는 것 입니다.
이러한 점때문에 AJAX를 사용해서 오늘날 웹 애플리케이션을 만들게 된 것입니다.

요약정리를 해보자면,

다음과 같이 설명해 볼 수 있겠습니다.

다음 포스팅에서는 AJAX가 필요한 이유와 AJAX의 흐름과 장점에 대해 다뤄보도록 하겠습니다.

감사합니다!

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Decision Tree(결정트리) 알고리즘 [스마트인재개발원]

harotea — Fri, 9 Jul 2021 12:54:48 +0900

Decision Tree(결정 트리) 알고리즘

Tree를 만들기 위해 예/아니오 질문을 반복하며 학습한다.

다양한 *앙상블(ensemble) 모델이 존재한다

(RandomForest, GredientBoosting, XGBoost, LightGBM)

분류와 회귀에 모두 사용 가능

결정트리의 기본 구조

출처 - https://velog.io/@sset2323/04-02.-%EA%B2%B0%EC%A0%95-%ED%8A%B8%EB%A6%AC

단일 결정트리와 앙상블 모델 중 하나인 랜덤 포레스트 모델구조

특징

타깃 값이 한 개인 리프 노드를 순수 노드라고 한다.
모든 노드가 순수 노드가 될 때까지 학습하면 복잡해지고 과대 적합이 된다.
새로운 데이터 포인트가 들어오면 해당하는 노드를 찾아 '분류'라면 더 많은 클래스를 선택하고, '회귀'라면 평균을 구한다.
결정 트리의 OUT-PUT

출처 - https://www.datacamp.com/community/tutorials/decision-tree-classification-python

Decision Tree(결정트리) 과대 적합 제어

사전 가지치기 : 노드 생성을 미리 중단 (*sklearn은 사전 가지치기만 지원)
사후 가지치기 : 트리를 만든 후에 크기가 작은 노드를 삭제

트리의 최대 깊이나 리프 노드의 최대 개수를 제어

장단점 및 주요 매개변수(Hyperparameter)

트리의 최대 깊이 : max_depth (값이 클수록 모델의 복잡도가 올라간다.)

리프 노드의 최대 개수 : max_leaf_nodes

리프 노드가 되기 위한 최소 샘플의 개수 : min_samples_leaf

장점

만들어진 모델을 쉽게 시각화할 수 있어 이해하기 쉽다.

각 특성이 개별 처리되기 때문에 데이터 스케일에 영향을 받지 않아 특성의 정규화나 표준화가 필요 없다.

트리 구성시 각 특성의 중요도를 계산하기 때문에 특성 선택에 활용될 수 있다.

단점

훈련데이터 범위 밖의 포인트는 예측할 수 없다. (ex. 시계열 데이터)

가지치기를 사용함에도 불구하고 과대적합되는 경향이 있어 일반화 성능이 좋지 않다.

--> 오히려 이러한 단점을 살려 약화된 여러 모델을 앙상블로 묶어 사용하기도 한다.

Node(노드) : 어떠한 질문이나 정답

RootNode : 가장 처음 질문

LeafNode : 맨 마지막 질문

* Gini Impurity(지니 불순도) : 분류가 잘 되어있는지에 대한 판단을 알아보는 것

지니 불순도는 이름에서도 알 수 있듯이 다음과 같은 의미에서 집합의 “순도”를 측정한다.

항아리에 10개의 구슬이 들어 있고 그 중 절반가량이 빨간색이고 나머지 절반가량이 파란색인 경우 그 구슬들의 집합은 빨간색과 파란색이 섞여 있어 불순한 것으로 간주한다 (항아리 2). 반면에 항아리에 빨간색 또는 파란색 구슬만 있는 경우 그 구슬 집합은 완벽하게 순수한 것으로 간주한다.

그리하여 지니 불순도 측정값을 다음과 같은 방법으로 그래프를 통해 시각화할 수 있다. 양쪽 끝에서 지니 불순도 0 값에서 시작하여, 항아리의 빨간색 및 파란색 구슬의 수가 같은 경우 지니 불순도는 최댓값에 도달해야 한다.

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

빅데이터 : 머신러닝 개요 정리! [스마트인재개발원]

harotea — Fri, 2 Jul 2021 10:12:43 +0900

머신러닝이란?

(머신러닝 = 기계학습) -> 데이터 기반 학습 -> 예측

인공지능의 한 분야이다. 컴퓨터가 학습할 수 있도록 알고리즘, 기술 개발

통계, 데이터 마이닝, 컴퓨터 과학 등에 쓰임

데이터 마이닝 (출처 : 나무위키_https://namu.wiki/w/데이터%20마이닝)

(데이터 + 규칙)을 통해 답을 찾아내는 것,

(데이터 + 답)을 통해 규칙을 찾아내는 것

데이터 분석의 5단계

1. 데이터 수집 - 비즈니스 목적에 알맞은 데이터 소스를 수집하는 것.

시스템이나 소프트웨어를 이용하여 로그를 수집하거나 크롤링, 하드웨어를 이용한 세상 등이 있다.

2. 데이터 전처리 - 데이터를 분석 전 깨끗하게 처리하는 것

결측치 처리 : 데이터 삭제, 다른 값으로 대체(최대값, 최솟값, 중앙값 등), 예측 모델을 활용한 값 삽입

이상치 처리 : 입력오류(데이터 삭제, 다른 값으로 대체), 자연발생(feature 추가)

Feature Engineering : scaling(feature의 단위를 변경), binning(수치형-> 범주형),

transform(feature를 분리하거나 연산-날짜, 주중/주말),

encoding(범주형->수치형)

데이터 분석가는 80% 이상의 시간을 데이터 수집/전처리 과정에 사용

가비지.. 좋은 자료를 모으고, 적정하게 정리하여 넣지 않으면 가치를 발견하기 어렵다.

3. 데이터 분석 - 각 변수가 어떤 의미인지 파악

범주형(categorical data) : 성별, 혈액형, 성공 여부(nominal data), 학점, 지역

수치형(numerical data) : 발생 횟수, 학급 인원, 키, 몸무게, 혈압

기술통계 : 최댓값, 최솟값, 최빈값, 평균값, 중앙값, 분산, 표준편차, 사분위수

변수간 상관관계, 독립여부 확인

4. 데이터 예측

지도학습 / 비지도학습 모델 종류 (출처 : https://bangu4.tistory.com/96)

5. 데이터 시각화/서비스화 (데이터 시각화 부분은 나중에 한번 더 포스팅할 예정!)

- 시각화 :

파이썬 라이브러리: Matplotlib, Seaborn, ggplot
태블로 Tableau
자바스크립트 라이브러리: D3

- 서비스화

머신러닝의 종류 (출처 : https://opentutorials.org/course/4548/28949)

머신러닝의 종류

지도 학습(Supervised Learning) - 답이 주어진 상태에서 학습
비지도 학습(Unsupervised Learning) - 답 없이 학습
> 예측 이전에 데이터를 정제하거나 묶어볼 때 주로 사용한다.
강화 학습(Reinforcement Learning) - 게임산업, 실시간 결정, 로봇 내비게이션

1. 지도 학습 (Supervised Learning)

정답을 알려주며 학습시키는 것!

X값 = input data

y값 = Label (정답)

1-1) 분류

미리 정의된 정답(클래스) 중 예측

입력 (속성), 출력 -> 클래스 값

- 이진 분류(둘 중에 하나 분류)

(ex. 스팸메일인지 아닌지! True / False 결과)

- 다중 분류

(ex. 동물 사진을 주고 고양이, 호랑이, 사자, 강아지 등으로 분류된 결과)

1-2) 회귀

연속적인 숫자 예측. 어떤 데이터들의 특징(feature)을 토대로 값을 예측하는 것.

예측 값의 작은 차이가 중요하지 않다. (예측 값들은 연속성을 갖는다. 그래프 생각해보면 된다.)

2. 비지도 학습 (Unsupervised Learning)

정답을 따로 알려주지 않고(Label 없음) 비슷한 데이터들을 '군집화' 하는 것.

그룹핑 알고리즘!

라벨링이 되어있지 않은 데이터로부터 패턴이나 형태를 찾아야 하기 때문에 지도학 습보다 난이도가 있다.

실제로 지도 학습에서 적절한 특징(feature)을 찾아내기 위한 전처리 방법으로 비지도 학습을 이용하기도 한다.

3. 강화 학습(Reinforcement Learning)

강화 학습은 지도, 비지도 학습과는 조금 다른 개념이다.

분류할 수 있는 데이터가 존재하지 않고,

데이터가 있어도 정답이 따로 정해져 있지 않으며

자신이 한 행동에 대해 보상(reward)을 받으며 학습하는 것을 말한다.

3-1) 강화 학습의 개념

에이전트(Agent)
환경(Environment)
상태(State)
행동(Action)
보상(Reward)

(출처 : https://opentutorials.org/course/4548/28949)

강화 학습의 동작 순서

1. 정의된 주체(agent)가 주어진 환경(environment)의 현재 상태(state)를 관찰(observation)하여,

이를 기반으로 행동(action)을 취한다.

2. 이때 환경의 상태가 변화하면서 정의된 주체는 보상(reward)을 받게 된다.

3. 이 보상을 기반으로 정의된 주체는 더 많은 보상을 얻을 수 있는 방향(best action)으로 행동을 학습하게 된다.

<머신러닝의 단계>

① 문제 정의

② 데이터 수집

③ 데이터 전처리

④ EDA(탐색적 데이터 분석, 시각화)

⑤ 모델(알고리즘 `=. 머신) 선택, 하이퍼 파라미터 조정

⑥ 학습

⑦ 평가

⑧ 예측

일반화(Generalizstion) - 훈련 세트로 학습한 모델이 테스트 세트에 대해 정확히 예측하도록 하는 것

과대 적합(Overfitting) - 훈련 세트에 너무 맞추어져 있어 테스트 세트의 성능 저하

과소 적합(Underfitting) - 훈련 세트를 충분히 반영하지 못해 훈련 세트, 테스트 세트에서 모두 성능이 저하

해결방법

주어진 훈련 데이터의 다양성이 보장되어야 한다. 다양한 데이터 포인트를 골고루 나타내야 한다.
일반적으로 데이터 양이 많으면 일반화에 도움이 된다.
하지만 편중된 데이터를 많이 모으는 것은 도움이 되지 않는다.
규제(Regularization)를 통해 모델의 복잡도를 적정선으로 설정한다.

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

JSON과 친해지기(2) [스마트인재개발원]

harotea — Mon, 28 Jun 2021 21:12:29 +0900

오늘은 이어서 JSON과 친해지기 2탄! 을 포스팅을 해보겠습니다.

JSON은 다른 언어들과도 비슷하게 String, Number, Object, Array, Boolean 그리고 null 값으로 구성되어 있습니다.

JSON Object(객체) 기본구조 – ‘name-value’ 형식의 쌍

var person = {
	"name" : "Jason",
   	 "birth" : "88-12-02",
   	 "nation" : "Korea",
}

JSON 객체의 기본구조 형태는 비순서화된 set으로 이루어져 있습니다.

이를 표현하는 방식은 중괄호 {}로 시작하고 끝내며, 이 중괄호 안에 key(name)과 value를 콜론(:)으로 묶어 하나의 쌍을 만듭니다. 각각의 쌍은 콤마(,)로 구분합니다.

여담으로, 파이썬의 딕셔너리와 거의 흡사한 구조이며 다루는 방식도 같습니다!

객체 안에 배열을 다음과 같이 value 값으로 넣어 줄 수도 있습니다.

JSON Array(배열)구조는 여러개의 {key:value} 값을 가집니다.

var myinfo = {
	"firstName" : "Oh",
    	"lastName" : "Jason",
    	"email" : "jason@java.script",
	"fav-fruit" : ["banana","pineapple"],
}

JSON의 변환 방법에는 크게 두 가지가 있습니다.

바로 stringify(); 함수와 parse(); 함수입니다.

stringify(); 함수는 JSON 객체를 String 타입의 객체로 변환을 시켜주는 함수입니다.

아래 예시를 보면, JSON 객체에서 " [ " 하나까지 나누어져 있는 String 객체로 변환된 것을 볼 수 있습니다.

scratch라는 함수는 변환된 json객체에 적용이 되지 않는다..

그리고 또 한 가지! 함수뿐만 아니라, 자바스크립트에만 있는 (symbol과 같은..) 특별한 데이터는 JSON에 포함되지 않는 것을 볼 수 있습니다.

JSON으로 변환되는 것을 내가 원하는 부분만 변환하고 싶다면,

Replacer 코멘트처럼 함수 형태로 전달해도 되고 배열 형태로 전달해도 됩니다.
동작 방식은 예시를 들어보자면,

cat objec에서 이름만 JSON으로 전달하고 싶다면 다음과 같이 배열에 프로퍼티 이름만 전달하게 되면 이름만 포함되어 나오게 됩니다.
이렇게 내가 원하는 프로퍼티만 골라서 정의를 하게 되면 해당하는 프로퍼티만 JSON으로 전환이 됩니다.

그리고 콜백 함수를 이용해서 조금 더 세밀하게 통제를 할 수 있습니다.
다음과 같은 방식을 통해 key와 value를 전달받아서 콜백 함수로 전달하게 되면 key과 value에 따라서 좀 더 다양하게 해 볼 수가 있습니다.
결과를 보면 >> 모든 key와 value들이 콜백 함수를 통해 전달되는 것을 볼 수 있습니다.

여기서 독특한 점은 제일 처음으로 전달되는 것은 cat의 object를 싸고 있는 제일 최상의 것이 전달이 되고

그 뒤부터 key와 value들이 전달되는 것을 알 수 있습니다.

한 가지 포인트는 cat이라는 object에는 scratch라는 함수가 있었는데 변환한 obj는 직렬화가 된 즉, String으로 만들어진 JSON으로부터 다시 obj를 만들었기 때문에 함수는 직렬화가 될 때 포함되어 있지 않습니다.
그렇기 때문에 스크래치라는 API가 없습니다.

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

JSON과 친해지기(1) [스마트인재개발원]

harotea — Fri, 25 Jun 2021 20:43:30 +0900

본 내용은 스마트인재개발원 랩실에서

06/24 2주차 발표에 진행했던 JSON 주제를 포스팅 해보려고 합니다!

JSON - Java Script Object Notation

JSON??

자바스크립트에서 데이터를 저장하는 방식이자, 자바스크립트에서 객체를 만들 때 사용하는 표현식

보시는 바와 같이, {} 중괄호 안에 key와 value 값이 :(콜론)을 사이에 두고 쌍으로 이루어져 있습니다.

브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때,

또는 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때에도 JSON데이터 타입을 이용합니다.

>> C언어나 java, Python, php, 코틀린..등등 언어들에 상관없이 거의 대부분의 언어들이

json으로 직렬화(serialization)된 object를 다시 그 언어의 특징에 맞게 object로 변환하고,

Object를 다시 json으로 직렬화 하는 것을 지원해주거나 많이 쓰여지고 있는 외부 라이브러리를 통해서 가능하게 됩니다.

직렬화와 역직렬화를 알고 넘어가자!

여기서 직렬화-- Serialization! 라는 것은 제가 찾아보고 이해한 내용으로 정리해 보자면,
직렬화라는 단어는 USB 메모리를 먼저 떠올려 봅시다.

USB메모리란 Universal Serial Bus의 줄임말로 시리얼은 연쇄, 연속적으로 이어지는 무언가를 뜻합니다.

즉, 이 JSON에서 직렬화를 한다는 의미는 object를 연속된 string 데이터나 연속된 bytes 데이터로 바꾸는 것을 뜻합니다.
object는 메모리에 존재하고 추상적인데 비해서 string/bytes 데이터는 드라이브에 저장도 할수 있고 통신선을 통해서 전송할 수도 있기 때문입니다.

반대로 string/bytes타입의 데이터로부터 object를 생성하는 행위는 역직렬화, deserialization이라 부릅니다.

영화 '스타트랙'에서의 순간이동기술

그래도 직렬화/역직렬화가 잘 와닿지 않으신다면, 영화 '스타트랙'에서의 순간이동 장면을 떠올려 봅시다.

스타트랙의 크루들은 우주에서 여러 행성을 돌아다니며 임무를 수행하게 되는데요,

그때마다 우주선으로 돌아갈 때 혹은 특정한 장소로 다시 이동할 때 순간이동 기술을 씁니다.

이때 순간이동 기술은 그냥 어떤 객체가 그대로 뿅! 하고 순식간에 사라졌다 나타나는 것이 아닌

가장 작은 원자 타입으로 분해되어 전송이 되고 다시 원하는 장소에 재조립(재결합)을 통해 원래 사람의 형태(객체)

로 돌아오는 것을 볼 수 있습니다.

이처럼 JSON의 직렬화 / 역직렬화는 이것을 서로 반대로 적용한다고 생각하면 이해가 더 쉬울 것 입니다.

즉, 언어에 구속되지 않고 자료를 쉽게 주고받을 수 있는 포맷이라는 말!

다음 포스팅에서는 JSON의 기본 구조 형태와 직렬화/역직렬화와 관련된 두 가지 변환 방법에 대해 다루겠습니다!

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

VS Code 환경 구축하기! [스마트인재개발원]

harotea — Fri, 25 Jun 2021 19:41:17 +0900

<Visual Studio Code 환경 설정 및 기초 사용법 정리>

VS Code란?

마이크로소프트가 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다.

디버깅 지원 및 Git 제어, 구문 강조 기능등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있다.

-위키백과 참고

비주얼 스튜디오 코드의 언어 지원 ▼

지원가능한 언어 참고해서 쓰자!!

설치방법

Windows

https://code.visualstudio.com 에 접속하여 다운로드 후 설치

Ubuntu Visual Studio Code 설치

Visual Studio Code 다운로드 링크 에서 Linux .deb 파일 다운로드
$ sudo dpkg -i code_1.23.1-1525968403_amd64.deb
- 만약 Package libconf-24 is not installed. 에러가 발생한다면
- $ sudo apt-get install gconf-service-backend gconf-service gconf2-common libgconf-2-4 명령어로 설치 후 위의 dpkg 명령어 입력
$ code - 터미널에서 실행 또는 데스크톱 환경에서 실행할 수 있다.

단축키 정리

ctrl+p : 파일이나 기호를 탐색
ctrl+shift+tab : 마지막 연 파일에 접근
ctrl+shift+p : 편집기 명령으로 바로 이동
ctrl+shift+o : 파일의 특정 기호로 이동
ctrl+g : 파일의 특정 행으로 이동
ctrl+p 를 눌러 ?를 입력하면 명령창에서 행할수 있는 명령 목록이 나온다.
ctrl+p : 모든 파일을 단축키로 빠르게 열수 있다. (빠른열기)
ctrl+shift+m : 상태표시줄, 에디터 하단에 현재 상태를 표시
ctrl+s : keyboard shortcuts 열람.
ctrl+, : 기본설정, vscode 의 모든 설정은 파일>기본설정>설정에 지정
ctrl+shift+x : 확장프로그램, 확장 기능 마켓 플레이스에서 다운로드해서 사용
ctrl+b : 사이드바 전환
ctrl+k, z : 젠모드
shift+alt+up , shift+alt+down : 행복사
ctrl+\ : 나란히편집, 에디터를 둘 또는 셋으로 나란히 놓고 사용할 수 있다.
ctrl+shfit+[ , ctrl+shfit+] : 코드 접기/펴기
ctrl+shfit+v : 마크다운 미리보기
ctrl+shift+F: 현재 프로젝트 전체 파일에서 검색

Git 연결하기

1) Repository 초기화

프로젝트에 사용할 특정 폴더 선택해서 열기
좌측의 소스제어 메뉴에서 (해당 폴더) 리포지토리 초기화 선택
파일을 생성하면(예를들어 readme.md) 소스 제어 아이콘에 추가/변경된 파일 갯수 확인 가능

2) git Add

소스제어 메뉴에서 아래 그림과 같이 해당 파일이나, 변경내용(CHANGES)에 마우스를 위치시키면 + 아이콘이 보이고 클릭하여 Stage 처리를 할 수 있다.
stage 처리 후에 파일을 변경했다면 변경된 파일에 M 상태를 나타내는 아이콘이 표시됨

3) git commit

Git commit, 아래 그림처럼 커밋 메시지를 입력하고 commit 아이콘을 클릭하면 Local git 저장소로 반영된다.

4) add Remote repository

Remote Git 추가
터미널을 열고(vscode에서 ctrl+` 사용) $ git remote add origin “github repository url”

5) git push

Remote Repository로 Push, 아래 그림처럼 다음으로 푸시.. 클릭
아래 그림처럼 remote add 한 origin, username, password 차례로 입력

(6) 추가 확장 플러그인 (AsciiDoc)

marketplace에서 AsciiDoc 입력 후 Download
새창띄워서 미리보기 : ctrl + shift + v
사이드에서 미리보기 :단축키 : ctrl + k v
이외에 확장프로그램은 https://junistory.blogspot.kr/2017/06/visualstudio-code_22.html 참고
출처 : https://gwonsungjun.github.io/articles/2018-06/vscodeSetting

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

3계층 구조(3 Tier- Architecture) 이해하기 [스마트인재개발원]

harotea — Sun, 20 Jun 2021 22:02:52 +0900

3계층 구조(3 Tier- Architecture) 란?
어떠한 플랫폼을 3계층으로 나누어 별도의 논리적/물리적인 장치에 구축 및 운영하는 형태

3계층 구조!!!

웹 서버 운영을 예로 들면 서버 한대에 한꺼번에 모든 기능들을 구축하는 것이 아니라 데이터를 저장하고 읽는 데이터 계층, 데이터를 처리하는 어플리케이션 계층, 그리고 데이터를 표현해주는 클라이언트(프레젠테이션) 계층과 같이 각각 3계층으로 나누어 각각의 기능으로 별도의 논리적/물리적인 장치에서 운영하는 방식이다.

그 밖에도 2계층, 4계층 처럼 다양하게 운영할 수도 있고 이 경우 다층 구조 라고도 (Multi-tier Architecture or n-tier Architecture)표현할 수 있다.

프레젠테이션 계층 (Presentation Tier)

사용자가 직접 마주하게 되는 계층이다. 따라서 주로 사용자 인터페이스(인터넷 브라우저 등)를 지원하며 이 계층은 GUI 또는 프론트엔드(front-end) 라고도 부른다. 그러므로 이 계층에서는 사용자 인터페이스와 관계없는 데이터를 처리하는 로직은 포함하지 않는다. 주로 웹 서버를 예시로 들 수 있고, HTML, Javascript, CSS 등이 이 계층에 해당 된다.

어플리케이션 계층 (Application Tier)

이 계층에서는 (프레젠테이션 계층) 요청되는 정보를 어떠한 규칙을 바탕으로 처리하고 가공하는 것들을 담당한다. (동적인 데이터 제공!) 비즈니스 로직 계층 또는 트랜잭션 계층 이라고도 한다. 첫 번째 계층에서 이 계층을 바라볼 때에는 서버처럼 동작하고(응답), 세 번째 계층의 프로그램에 대해서는 마치 클라이언트처럼 행동한다.(요청)

따라서 이 계층은 미들웨어(Middleware) 또는 백엔드(back-end)라고도 불린다. 이 계층에서는 프레젠테이션코드 (예를 들면 HTML, CSS)나 데이터 관리를 위한 코드는 포함하지 않는다. 주로 PHP, Java 등이 이 계층에 해당한다.

데이터 계층 (Data Tier)

데이터 계층은 데이터베이스와 데이터베이스에 접근하여 데이터를 읽거나 쓰는 것을 관리하는 것을 포함한다.

주로 DBMS (Database Management System)이 이 계층에 해당된다. 데이터 계층 또한 백엔드(back-end)라고도 부른다. 주로 MySQL, MongoDB 등이 이 계층에 해당된다.

1계층 구조 (1 Tier Architecture)

1. 1계층 구조

하나의 물리적인 컴퓨터 또는 서버에 3가지의 다른 기능으로 함께 구현한 방식이다.

따라서 물리적인 장비를 새로운 장비로 변경하고자 하는 경우에는 모든 구성을 함께 변경해야 한다.

2계층 구조 (2 Tier Architecture)

2. 2계층 구조

클라이언트 계층과 데이터 계층의 물리적인 컴퓨터 또는 서버로 구분하여 클라이언트 계층에서의 변경이나 데이터베이스의 변경 시 서로 영향을 받지 않는다.

3계층 구조 (3 Tier Architecture)

3. 3계층 구조

클라이언트 계층, 어플리케이션 계층, 데이터 계층으로 서버를 모두 물리적으로 나누어 구성하는 방식이다.

이에 각각의 계층에서 변화가 일어나더라도 서로 영향을 받지 않고 독립적으로 운영된다.

3계층 구조의 장점 / 단점

장점

각 계층이 분리되어 있어 업무 분담이 가능해지므로 업무 효율성이 증가할 수 있다. 또한 여러 대의 서버로 나누어 각 계층이 동작하므로 서버의 부하를 줄여줄 수도 있으며, 경우에 따라 합리적인 스케일업(서버의 성능 업그레이드)이 가능하다.

단점

1계층으로만 사용하는 것 대비 관리가 더 필요하고, 장애가 발생하는 포인트가 더 늘어날 수 있다는 점을 생각해두어야 한다.

따라서 비용이 그만큼 많이 발생하게 되므로 서비스 규모 및 사용자 증가에 따라 계층 구조를 설계 및 고려해야 한다.

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Spring 개발 환경 구축하기(1) [스마트인재개발원]

harotea — Wed, 16 Jun 2021 11:19:02 +0900

본 개발환경 구축 방법은 전자정부 표준프레임워크 기반으로 개발환경을 구축하는 방법입니다.

* 먼저 전자정부 표준프레임워크 포털에 접속한다!

메뉴 - 개발자 교육 - 교육자료 - 컴퓨터 사양에 맞는 실습재 다운로드하기

exe파일을 실행시켜 다운로드한다. 단, 경로를 C드라이브에 바로 지정해준다.

데이터베이스 서버 연결을 위해 프레임워크 안에 내장되어 있는 mysql에서 root파일에 접근하여 기본 설정을 해주자.

>startup.bat 파일을 실행시킨다.

앞의 파일을 실행시킨 뒤에 cmd를 열어준다

cmd 실행창을 연 뒤, cd C:\eGovFrame-3.10.0\bin\mysql-5.6.21\bin 를 입력한다.

mysql -u root -p 입력

처음 상태는 password가 입력되어있지 않기 때문에 mysql안의 계정에 접근하여 비밀번호를 설정해 준다.

use mysql;
show tables; -- 테이블리스트 보기
select * from user -- 계정 정보가 담긴 테이블 보기
mysql> update user set password=password('12345') where host='localhost' and user='root'; -- 계정 비밀번호 설정하기

계정 비밀번호가 설정되면 따로 쓸 데이터베이스 안의 테이블을 만들어준다.

나는 iot라는 테이블을 만들어주었다.

그리고 다시 이클립스로 돌아가서 Database Connections > 오른쪽 마우스 new 클릭

MYSQL 클릭!

Drivers 오른쪽 New Driver Definetions > 아까 생성한 데이터베이스 테이블 iot를 Database 칸에 입력해 준다.

비밀번호도 cmd 창에서 설정해줬던 12345를 입력한다. *비밀번호 입력 후 save 꼭 체크하자!*

변경하면 다음과 같다.

이렇게하면 이클립스에 mysql database가 연결된다!

+ Spring을 배우기 앞서, 추가로 개념정리 하면 좋을 것!

3-Tier 레이어, MVC 패턴

MVC 패턴

디자인패턴 중 하나이다. 하나의 어플리케이션, 프로젝트를 구성할 때 그 구성요소를 세가지의 역할로 구분한 패턴이다.

Model : 어플리케이션의 정보, 데이터를 나타낸다.

사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다!
뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다.
어떠한 변경이 일어났을 때, 변경 통지에 대한 처리방법을 구현해야만 한다.

View : 데이터 및 객체의 입력, 보여주는 출력을 담당한다. 데이터를 기반으로 사용자들이 볼 수 있는 화면이다.

모델이 가지고 있는 정보를 따로 저장해서는 안된다.
모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 한다.
어떠한 변경이 일어났을 때, 변경 통지에 대한 처리방법을 구현해야만 한다.

Controller : 데이터와 사용자인터페이스 요소들을 잇는 다리역할을 한다. 즉, 사용자가 데이터를 클릭하고, 수정하는 것에 대한 "이벤트"들을 처리하는 부분을 뜻한다. 컨트롤러 구성은 가볍게..!!

모델이나 뷰에 대해서 알고 있어야 한다.
모델이나 뷰의 변경을 모니터링 해야 한다.

* 다음 포스팅에서 더 자세히 알아보자!

3계층 구조(3 Tier Architecture)
web presentation layer - frontcontroller(user가 가장 먼저 부딪히는 층)
service(business) layer
persistence layer(영속성 레이어) - 데이터베이스 CRUD - DAO

프레젠테이션 게층(Presentation Tier) - GUI 또는 front-end
어플리케이션 계층(Application Tier) - Business Logic 계층 또는 Transaction 계층 / Middleware 또는 back-end
데이터 계층(Data Tier) - DBMS, back-end

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

Servlet 생성법 및 사용법 [스마트인재개발원]

harotea — Sun, 13 Jun 2021 22:11:29 +0900

I ♥ Servlet

서블릿(Servlet)이란??

자바 서블릿이란 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램(클래스)를 말한다.

즉, 웹용 자바! 라고 볼 수 있겠다.

서블릿를 쓰려면 JSP 또한 알고 넘어가야하는데,

JSP는 서블릿을 쓰기 좋게 포장한 것이라 볼 수 있다.

JSP는 HTML 안의 Java, Servlet은 Java 안의 HTML 이라고 알아두자!!(일단은)

이클립스에서 Servlet 생성하기!!

▷ 생성은 dynamic web프로젝트- Java Resources- src에서 관리한다.

Dynamic web-Java Resources-src

▷ src에 패키지를 생성하고 내부에 Servlet을 생성한다.

▷ Servlet 파일 이름 설정

▷ URL Mappings를 설정한다. (/이름)

▷ 메서드 선택

▷ 메소드 설명

Servlet 생명주기

init() : 최조 호출 ex(한글 인코딩, 초기 선언)

Servlet(이름.java) > 객체 생성 init()한번 호출
service() : 사용자에 입력을 처리하는 부분

데이터를 보내는 방식 (GET/POST 방식)

doget() :

dopost() :

destroy() : 서버 종료할 때

▶ 입력 받기

▶ html에서 입력받기 예제

▷ WebContent 내부 HTML 문서

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	IoT3차 열정!열정!열정~! <br>
	<form action="Ex01Datasend">
		<input type="text" name="data">
		<input type="submit" value="전송">
	</form>
</body>
</html>

▷ Servlet 내부

package com.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex01Datasend")
public class Ex01Datasend extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String data = request.getParameter("data");
		
		System.out.println(data);
	}
}

▷ 입력한 숫자에 따라서 테이블 생성 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<form action="Ex4_maketable2">
		몇 개의 방을 만들까요?<br>
		<input type="text" name="num">
		<input type="submit">
	</form>
</body>
</html>

※여기서 URL Mappings를 꼭 확인한다. 틀릴 시 오류 나며 수정 시 서버를 재시작해줘야 한다.

@WebServlet("/Ex4_maketable2")
public class Ex4_maketable2 extends HttpServlet

여기가 위아래가 동일하게 되어 있는지 확인한다.

package com.Servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Ex4_maketable2")
public class Ex4_maketable2 extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		int num = Integer.parseInt(request.getParameter("num"));

		response.setContentType("text/html; charset=utf-8");

		PrintWriter out = response.getWriter();

		out.print("<html>");
		out.print("<body>");
		out.print("<table border=1>");
		out.print("<tr>");
		for (int i = 1; i <= num; i++) {
			out.print("<td>" + i + "</td>");
		}
		out.print("</tr>");
		out.print("</table>");
		out.print("</body>");
		out.print("</html>");

	}

}

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

오버라이딩과 오버로딩, 메소드 오버로딩으로 활용하기 [스마트인재개발원]

harotea — Sun, 13 Jun 2021 21:59:21 +0900

오버로딩 vs 오버라이딩

○ 오버라이딩(Overriding)

상위 클래스(부모 클래스)가 갖고 있는 메소드(Method)를
하위 클래스(자식 클래스)에서 재정의 해서 사용하는 것

오버라이딩(Overriding) 을 알기 위해서는 먼저 상속이라는 개념부터 알아야 한다.

상속이라는 의미는 부모가 자식에게 재산을 물려주듯이(=상속) 프로그래밍에서도 의미가 비슷하다.

즉, 상속 관계 (부모-자식 == 상위-하위)에 있는 클래스 간에 같은 이름의 메소드(Method)를 정의하는 기술이다.

특징으로는

메소드 이름이 같다.
오버라이딩은 매개 변수 타입과 매개변수가 같다.

○ 오버로딩(Overloading)

같은 이름의 메소드(Method)를 여러 개 가지면서 매개 변수를 다르게 정의하는 것

오버로딩(Overloading)의 큰 장점은, 실제 프로젝트를 진행하면서 그 프로젝트에 같이 참여하는 공동 작업자
개발자 분들이 오버로딩을 사용해 작성자와 사용자가 알아보기 쉽게 하여 개발의 효율성을 높이기 위한다는
점이 있다.

더 쉽게 예시를 들어보자면, '끄다'라는 사전적 의미를 가지고서 우리는 스위치를 끄다, 불을 끄다, 담배를 끄다 등으로
표현 할 수가 있는데, 만약에 '끄다'라는 단어에 이러한 의미를 사전적으로 고지해 놓지 않았다면 위에 들었던 예시의
표현들을 일일이 정의해야 하는 번거로움이 있을 것이다.

이처럼 오버로딩(Overloading)도 하나의 메소드를 가지고 사용하는 방법(=기능)은 같지만 어떠한 것을 사용하느냐에
따라 그 방식이 각각 다를 것을 예상해 볼수 있겠다.

오버라이딩의 과정

○ 메소드 오버로딩(Method Over Loading)

메소드 오버로딩이란 메소드의 이름은 하나만 주고
매개변수를 다르게 함으로써 여러 개에 메소드를 만드는 것

ex) System.out.println에서 다양한 매개변수 자료형을 입력할 수 있다.

println에 적용된 모습

● 메소드 오버로딩(Method Over Loading) 메소드 오버로딩의 조건

메소드 이름이 같아야함
매개변수의 개수 또는 타입이 달라야함
매개변수는 같고 리턴타입이 다른경우는 오버로딩이 아님

● 메소드 오버로딩(Method Over Loading) 오버로딩의 장점

메소드 이름의 낭비방지
같은 메소드에 여러 종류의 매개변수를 받을 수 있음

○ 메소드 오버로딩 예제 (덧셈)

public class ex04 {
	public static void main(String[] args) {
		// 메소드 오버로딩은 메소드의 이름은 동일하지만 매개변수 타입, 개수를 다르게 정의

		// 2개 덧셈
		addNumberTow(2, 2);

		// 3개 덧셈
		addNumberThree(2, 3, 3);

		// 각 정수와 실수를 더하는 메소드
		addNumberIntDouble(2, 3.5);

//////////////////////////////////////메소드 오버로딩 적용 /////////////////////////////////		

		addNumber(3, 3);
		addNumber(3, 3, 3);
		addNumber(1.5, 5);
		addNumber(2.4, 1.5);

	}

	private static void addNumber(double d, double e) {
		System.out.println(d + e);
		
	}

	private static void addNumber(double d, int j) {
		System.out.println(d + j);

	}

	private static void addNumber(int i, int j, int k) {
		System.out.println(i + j + k);

	}

	private static void addNumber(int i, int j) {
		System.out.println(i + j);

	}

/////////////////////////////////////////////////////////////////////////////////////
	private static void addNumberIntDouble(int i, double d) {
		System.out.println(i + d);
	}

	private static void addNumberThree(int i, int j, int k) {
		System.out.println(i + j + k);
	}

	private static void addNumberTow(int i, int j) {
		System.out.println(i + j);

	}

}

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

객체지향프로그래밍의 특징 [스마트인재개발원]

harotea — Sun, 6 Jun 2021 18:19:52 +0900

피카소의 추상화 소

추상화 (Abstract) 공통의 속성이나 기능을 묶어 이름을 붙이는 것
객체 지향적 관점에서는 클래스(Class)를 정의하는 것을 추상화라고 정의 내릴 수 있겠다.
상세한 정보는 무시하고 필요한 정보들만 간추려서 구성!

ex) 물고기, 토끼, 햄스터, 기린이 있을 때 우리는 이것들을 각각의 객체(Object)라고 하며,
이 객체들을 하나로 묶으려 할 때, 동물 또는 생물이라는 어떤 추상적인 객체로 크게 정의해 볼 수 있겠다.
이때, 동물 또는 생물이라고 묶는 것을 추상화라고 한다.

캡슐화!

캡슐화 (Encapsulation)

관련된 필드(속성)와 메소드(기능)를 다루는 방법들을 하나로 결합시켜 묶는 것 외부로부터 실제 작동 원리(여기서
는 기능)를 알 수 없게 따로 저장 되어 있다.

만일의 상황(타인이 외부에서 기능에 접근해 조작)을 대비해서 특정 속성이나 메서드를사용자가 조작할 수 없도록
숨겨 놓았다.

이어받기!

상속 (Inheritance)

이미 작성된 클래스(상위=부모 클래스)의 특성을 그대로 이어받아
새로운 클래스(하위=자식 클래스)를 생성하는 기법
기존 코드를 그대로 재사용하거나 재정의한다. (재사용 + 확장)

다형성은 리모콘을 예시로 생각해 볼수 있다.

다형성 (Polymorphism)

사전적 의미 : '다양한 형태로 나타날 수 있는 능력'같은 기능(Method)를 호출하더라도 객체에 따라 다르게 동작하는 것 상위 클래스의 동작을 하위 클래스에서 다시 정의하여 사용하는 것 또한 다형성으로 볼 수 있겠다.

다시 정의하여 사용하는 것 ---> Overriding(오버라이딩)

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

클래스(Class)와 객체(Object), 인스턴스(Instance) [스마트인재개발원]

harotea — Sun, 6 Jun 2021 17:46:59 +0900

클래스(Class) : 객체를 정의 해 놓은 것

blueprint.. 설계도를 떠올려 보자!

비유를 들자면, blueprint 즉, 청사진이 된다. 설계도의 역할을 해주는 것이 바로 클래스(Class)이다.

객체를 생성하는 데 사용함.

객체(Object) : 클래스에 선언된 모양 그대로 생성된 실체

우리가 주변에서 볼 수 있는, 떠올려 볼 수 있는 실존하는 사물들.. 과일,의자,컴퓨터 등..을 비유로 들 수 있다.

객체(Object)의 정의 : 실제로 존재하는 것, 사물 또는 개념.

객체는 객체가 가지고 있는 기능과 속성에 따라 다르다. (예시로 자동차를 생각해 보자!)

인스턴스(Instance) : 객체를 소프트웨어에 실체화 한 것

이미지 출처 - https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=satyee&logNo=140128005527

실체화된 인스턴스는 메모리에 할당된다.

인스턴스는 객체에 포함된다고 볼 수 있다. 객체가 메모리에 할당되어 실제 사용될 때 '인스턴스'라고 부른다.

추상적인 개념과 구체적인 객체 사이의 관계에 초점을 맞출 경우에 사용한다.

객체는 클래스의 인스턴스
객체 간의 링크는 클래스 간의 연관 관계의 인스턴스
실행 프로세스는 프로그램의 인스턴스

/* 클래스 */
public class Junkfood {
  ...
}
/* 객체와 인스턴스 */
public class Main {
  public static void main(String[] args) {
    Junkfood icecream, coke ; // '객체'

    // 인스턴스화
    icecream = new Junkfood(); // icecream은 Junkfood 클래스의 '인스턴스'(객체를 메모리에 할당)
    coke = new Junkfood(); // coke은 Junkfood 클래스의 '인스턴스'(객체를 메모리에 할당)
  }
}

이렇게 생각해 보자!

막대 아이스크림을 정의 해 보면,

막대에 달려있는 아이스크림
달콤하고 시원하다.
먹기가 편하다
틀 종류에 따라 모양이 다르다.

등의 정의를 내려볼 수 있다.

이때, 이렇게 아이스크림을 떠올리며 생각한 것을 정의해 놓은 것을 클래스(Class)라고 하고, 실제로 아이스크림 틀에 의해 가공되어 만들어진 막대 아이스크림을 객체(Object)라고 한다.

틀(Class)형태마다 각각 다른 아이스크림(객체:Object)가 나온다!

아이스크림 틀 >> 클래스(Class)가 되는 것이고,

막대 아이스크림 >> 객체(Object)가 된다.

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관