티스토리

프로그래밍 일지

검색하기

블로그 홈

프로그래밍 일지

o0zrone.tistory.com/m

o0zrone 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[raspi] 설치한 리눅스를 GUI로 원격으로 제어 해보자!(xrdp) 초기 아이디와 비밀번호는 id : kali / pw: kali 입니다. 제일 먼저 인터넷을 연결한 뒤에 아래의 두 명령어를 입력해 리눅스를 업데이트 해줍니다. ctrl + alt + t를 누르면 터미널이 나옵니다. sudo apt-get update sudo apt-get upgrade xrdp는 GUI환경 원격 제어입니다. 터미널에 아래의 명령어를 통해 설치를 합니다. sudo apt install xrdp xrdp가 설치가 잘 됐는지 아래의 명령어로 확인을 한 뒤 systemctl status xrdp 아래의 명령어로 포트를 열어 접속 가능하게 만들어 줍니다. q를 누르면 해당 화면에서 나가 명령어 입력으로 전환됩니다. 아래의 명령어를 통해 방화벽 설정을 가능하게 합니다. sudo apt-get in.. 공감수 0 댓글수 0 2023. 5. 13.
[raspi] 라즈베리파이에 칼리 리눅스를 설치해보자! 먼저 하단의 링크에 들어가 Raspberry Pi Imager를 다운받아줍니다. https://www.raspberrypi.com/software/ Raspberry Pi OS – Raspberry Pi From industries large and small, to the kitchen table tinkerer, to the classroom coder, we make computing accessible and affordable for everybody. www.raspberrypi.com 사용 중인 OS에 맞춰 다운 받으면 됩니다. 설치 완료 후 실행시키면 아래와 같이 나옵니다. SD카드를 삽입 후 저장소 선택을 클릭하면 저장소 리스트가 나오는데 원하는 SD카드를 선택하면 됩니다. 운영체제 선택.. 공감수 0 댓글수 0 2023. 5. 11.
[D2Lang] 11. D2의 Sequence 다이어그램의 사용법을 알아보자! (2) Sequence 다이어그램에서 그룹에 대해 알아보겠습니다. 여기서 말하는 그룹은 ”{}"로 감싸진 영역입니다. 또한 여기서 사용할 alice와 bob은 먼저 명시해야 합니다. shape: sequence_diagram alice bob shower thoughts: { alice -> bob: A physicist is an atom's way of knowing about atoms. alice -> bob: Today is the first day of the rest of your life. } life advice: { bob -> alice: If all else fails, lower your standards. } 아래는 결과입니다. 결과를 보시면 이전에 설명드렸던 자식 컨테이너와 같이 나왔.. 공감수 0 댓글수 0 2023. 5. 9.
[D2Lang] 10. D2의 Sequence 다이어그램의 사용법을 알아보자! (1) Sequence 다이어그램의 경우 shape을 설정해서 사용할 수 있습니다. 다음과 같이 shape: sequence_diagram 사용합니다. shape: sequence_diagram alice -> bob: What does it mean\\nto be well-adjusted? bob -> alice: The ability to play bridge or\\ngolf as if they were games. 아래와 같이 출력됩니다. 시퀀스 다이어그램의 자식은 전체에서 동일한 범위를 가집니다. (중첩되지 않고 사용됩니다.) Office chatter: { shape: sequence_diagram alice: Alice bob: Bobby awkward small talk: { alice -> bo.. 공감수 0 댓글수 0 2023. 5. 8.
[D2Lang] 9. D2의 UML 클래스의 사용법을 알아보자! UML 클래스 다이어그램을 만들어 보겠습니다. MyClass: { shape: class field: "[]string" method(a uint64): (x, y int) } 다음과 같이 출력됨을 확인할 수 있습니다. class shape의 내부에 있는 각 key: value는 필드 혹은 메소드를 말합니다. 필드의 value는 변수 타입이며 메소드의 경우는 반환 유형입니다. class의 접근 제어자는 아래와 같이 나타낼 수 있습니다. visibility prefix meaning none public + public - private # protected 아래는 사용 예제입니다. D2 Parser: { shape: class . +reader: io.RuneReader readerPos: d2ast.P.. 공감수 0 댓글수 0 2023. 5. 7.
[D2Lang] 8. D2의 SQL Tables의 사용법을 알아보자! shape 속성울 통해서 엔티티-관계 다이어그램(ERD)을 쉽게 다이어그램으로 나타낼 수 있습니다. 예는 다음과 같습니다. basic_table: { shape: sql_table id: int {constraint: primary_key} last_updated: timestamp with time zone } constraint라는 것을 통해 sql 테이블에서의 제약을 표시할 수 있습니다. 결과는 다음과 같습니다. 다음과 같이 자동적으로 강조되는 것을 확인할 수 있습니다. 제약 조건에서 인식하는 조건들은 아래와 같습니다. 조건 축약어 primary_key PK foreign_key FK unique UNQ 아래는 외래 키를 연결시키는 예제입니다. objects: { shape: sql_table id.. 공감수 0 댓글수 0 2023. 5. 6.
[D2Lang] 7. D2의 Icons & Images의 사용법을 알아보자! 먼저 Icon의 경우입니다. 기본적으로 D2Lang에서 Icon울 지원하고 있습니다. (아래의 링크에서 확인) https://icons.terrastruct.com/ 링크에 들어가신 뒤 아이콘을 누를 경우 svg링크가 복사 되어 붙여 넣어 사용하면 됩니다. 사용 방법은 **icon: ‘icon url’**과 같이 설정하여 사용할 수 있습니다. (별도의 아이콘도 url을 통해 사용할 수 있습니다.) 웹에서 하는 plaground에서 내보내는 경우 아이콘이 같이 export되지 않아 로컬 환경에서 작업했습니다. 로컬에서 사용하는 방법은 여기에서 확인 할 수 있습니다. 아래는 icon.d2 의 내용입니다. network: { icon: https://icons.terrastruct.com/infra/019-n.. 공감수 0 댓글수 0 2023. 5. 5.
[D2Lang] 6. window에서 D2 CLI 설치 및 내보내기(svg, png)를 알아보자! window의 경우 msi를 설치해서 사용하는 방법과 WSL(윈도우 하위 시스템)에 설치하는 방법이나 도커에서 돌리는 방법이 있습니다. 여기서는 msi로 설치할 것 입니다. https://github.com/terrastruct/d2/releases 위의 링크에 들어가시면 아래와 같이 나오는데 Assetes window msi파일을 다운 받으시고 설치하시면 됩니다. 확인 누르시고 설치를 완료하시면 d2 명령어를 사용할 수 있으며 ”d2 --version”를 사용하여 제대로 설치가 되었는지 확인해 봅니다. cmd창에서 d2 --version을 입력해보시면 아래와 같이 출력됩니다. D:\>d2 --version v0.4.1 저의 경우 설치한 버전인 0.4.1이 정상적으로 설치 되었음을 확인할 수 있습니다. .. 공감수 0 댓글수 0 2023. 5. 4.
[D2Lang] 5. D2의 Text & Code를 알아보자! 오늘은 Text와 code를 삽입하는 방법에 대해 알아보겠습니다. 1번째 코드입니다. #은 주석입니다. explanation: |md # up mark context | explanation2: |md # can use markdown context | explanation -> explanation2 plankton -> formula: will steal formula: { equation: |latex \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h} | } 아래의 사진은 결과입니다. upmark와 can use markdown은 마크다운 문법을 사용했으며 옆의 plankton과 formula는 LaTex(MathJax)를 통해 수식을 나타낸 것입니다. |사용할.. 공감수 0 댓글수 0 2023. 5. 3.
[D2Lang] 4. D2의 Container를 알아보자! 오늘은 container의 중첩과 색상을 설정하는 방법을 알아보겠습니다. 아래의 예제 코드를 입력하시고 돌려보시면 아래의 사진과 같이 출력됩니다. root parent container1.child container1 parent container2: { label: parent2 child container2 -> child container3 } extra: extra parent { child1 -> _.parent container2.child container3 child2 -> _.parent container2 } parent container1.child container1 -> parent container2.child container2 root -> parent container1.c.. 공감수 0 댓글수 0 2023. 5. 2.
[Vue.Js] 15. Vue.Js template (3 methods, computed, watch) methods, computed, watch에 대해 알아보겠습니다. methods는 호출하는 경우에만 로직이 실행되며 computed의 경우 데이터의 값이 변경되면 알아서 자동적으로 실행되어 주는 차이가 있습니다. computed는 연산 결과를 캐싱(보관)하고 있다. 쓰는 경우에 가져다 쓸 수 있어 복잡한 연산에 특화 되어있다 생각하시면 됩니다. watch의 경우는 데이터의 변화를 감지하고 특정 로직을 수행하는데 computed와 다르게 비동기 처리(웹 통신 등)에 적합합니다. 아래는 전체 코드입니다. {{ method_message }} {{ computedMessage }} click me! 버튼을 클릭할 때 마다 methods의 methodsMessage()를 호출해서 변환시켜 줍니다. comput.. 공감수 0 댓글수 0 2023. 5. 1.
[Vue.Js] 14. Vue.Js template (2 디렉티브 속성) 디렉티브 속성들 입니다. ‘v-’가 들어가는 모든 속성이 여기에 해당됩니다. v-text: {{}} 와 동일합니다. v-html: innerHTML을 업데이트 합니다. v-show: css의 display 속성과 동일합니다. v-if: 조건부로 렌더링을 합니다, v-else: v-if 또는 v-else-if 다음에 와야 됩니다. v-else-if: v-if 다음에 와야 됩니다. v-for: 요소를 반복해서 렌더링 합니다. v-on: event Listener를 연결합니다. v-bind: component의 props 혹은 여러 속성을 동적으로 바인딩 합니다. v-model: input 타입의 요소 혹은 component에서 양방향 바인딩을 만듭니다. v-slot: props를 받을 slot에 지정해 줍니.. 공감수 0 댓글수 0 2023. 4. 30.
[Vue.Js] 13. Vue.Js template (1 데이터 바인딩) Vue Js의 template은 Vue의 객체나 데이터와 HTML. CSS 등을 묶고 브라우저에 보여지는 형태로 변환하는 속성입니다. template에서 결국 render()함수로 변환되어 사용되기 때문에 render()에 대한 이해가 높다면 render()로 작업하셔도 괜찮습니다만 template에 대해 배워보겠습니다. 일단 맨 처음에 사용했던 **’{{ }}’**을 기억하시나요. 이는 데이터 바인딩의 문법입니다. {{}}을 사용하는 방법과 v-bind를 사용하는 방법이 있죠. 먼저 {{}}는 아실겁니다. 사용하면 해당되는 data를 가져와 치환했죠. 그게 변경되어도 처음 1회만 하고 싶다면 아래와 같이 v-once를 붙여 한번만 바뀌게 할 수 있습니다. {{ message }} 아래는 v-bind 코.. 공감수 0 댓글수 0 2023. 4. 29.
[Vue.Js] 12. Vue.Js Http 통신(axios) 일단 Http통신이 무엇인지 알아야 합니다. 간략하게 말씀드리면 HTTP(Hypertext Transfer Protocol)는 인터넷 통신 프로토콜입니다. www(World Wide Web)에서 사용되는 기본 프로토콜이며 웹 브라우저와 웹 서버가 통신하기 위해 사용됩니다. 대표적으로 ajax(jQuery)가 흔히 사용되고 있습니다. Vue에서도 ajax를 지원하기 위한 라이브러리로 Vue Resource와 axios가 있는데 Vue Resource는 더 이상 사용되지 않습니다. 그래서 axios를 사용하겠습니다. axios는 promise기반의 API 형식이 제공되어 곧 바로 사용하기 편합니다. Promise기반의 API란 실행 흐름에서 비동기 처리를 유연하게 처리하기 위한 API입니다. axios를 사.. 공감수 0 댓글수 0 2023. 4. 28.
[Vue.Js] 11. Vue.Js 네스티드 라우터 & 네임드 뷰 (2) 이제 네임드 뷰를 만들어 보겠습니다. 아래는 전체 예제 코드입니다. app area 필요한 부분만 보겠습니다. app area 필요한 부분이 많은데요. 천천히 알아가 봅시다. app에 이름(name)을 지정한 router-view를 둡니다. header, body, footer 통 3개를 만들고 script의 Vue코드를 보겠습니다. component는 template밖에 없으므로 생략하고 VueRouter쪽에 기존과 다르게 path 지정 후에 component에 (router-view name) : (component name)으로 매칭시켜줍니다. 그리고 실행 시키면 아래와 같이 나옵니다. 이를 통해 router-viewdml 이름을 지정하고 그 영역에 특정 component를 구성한 것을 알 수 있습.. 공감수 0 댓글수 0 2023. 4. 27.
[Vue.Js] 10. Vue.Js 네스티드 라우터 & 네임드 뷰 (1) 일단 네스티드 라우터와 네임드 뷰의 차이를 알고가겠습니다. 네스티드 라우터는 중첩된 라우터라고 말할 수 있는데요. 아래와 같이 Root Component(router)안에 Parent Component(router)안에 Child Component가 두 개있음을 볼 수 있습니다. Component안에 Component가 중첩되어있는 상태이죠. 그에 반해 네임드 뷰는 각 고유 영역을 가지고 있고 해당 영역에 대해 여러 component를 렌더링할 수 있습니다. 정리하면 네스티드 라우터를 사용하면 계층 구조로 제작 가능하고 네임드 뷰로 만들면 특정 영역을 여러 component로 렌더링 할 수 있습니다. 두 경우를 같이 사용하면 복잡하나 모듈화 된 어플리케이션을 만들 수 있습니다. 그러면 이제 네스티드 라우.. 공감수 0 댓글수 0 2023. 4. 26.
[Vue.Js] 9. Vue.Js 화면 구성 요소 변경 (Router) 뷰는 일단 SPA를 지원하는 프레임워크입니다. SPA(Single Page Application)는 단일 페이지로 콘텐츠를 동적으로 업데이트하는 웹 응용 프로그램입니다. 새 링크로 이동할 때마다 새 페이지를 로드하는 웹 애플리케이션과 반대 되죠. SPA를 구현하기 위해 화면 구성 요소 중 일부를 변경할 예정입니다. 라우터(Router)라는 것을 사용해서 라우팅(Routing)을 할 것인데요. 라우팅: 웹 페이지간 이동하는 방법 (화면에 깜빡거림 없이 전환 가능) 뷰에서는 라우터를 지원하고 있어 어렵지 않게 가능할 것입니다. 뷰 라우터를 사용하려면 아래의 구분을 script에 추가해야 사용 가능합니다. 아래가 이번에 사용할 문법입니다. 페이지를 이동할 때 사용되는 태그입니다. 클릭 시 지정해둔 “URL l.. 공감수 0 댓글수 0 2023. 4. 25.
[Vue.Js] 8. Vue.Js 컴포넌트간의 통신3 같은 관계와 다른 관계의 예를 같이 알아보는 이유는 동일한 방식으로 하는 것이 더 수월하기 때문입니다. 일단 같은 관계의 경우 부모가 있다면 이전에 배운 방식 두 가지를 사용하여 하위1→상위→하위2 식으로 상위의 관계를 통해 통신을 해야합니다. 이 방식은 같은 부모를 가져야만 가능하기 때문에 별도로 알아보진 않겠습니다. 이번에는 이벤트 버스라는 것으로 통해 통신을 해 볼 것입니다. 그러면 굳이 같은 부모를 가질 필요도 없어지죠. 이번에 쓸 문법은 $emit과 $on입니다만 새로 인스턴스를 생성해서 그 인스턴스의 메소드를 호출해 줄 겁니다. 일단 전체 예제 코드입니다. 양이 많으니 필요한 부분만 설명 드리자면 child-component만 사용됩니다. 아래의 Vue코드를 보시면 eventBus로 사용할 V.. 공감수 0 댓글수 0 2023. 4. 24.
[Vue.Js] 7. Vue.Js 컴포넌트간의 통신2 저번에 상위에서 하위에 props를 통해 데이터를 넘겨주는 방법을 봤습니다. 이번엔 하위에서 상위로 데이터를 보내는 방법에 대해 알아보겠습니다. 일단 이벤트 버스라는 것을 통해 전달해야 되며 Vue에서는 ”$emit”(이벤트)과 ”v-on:”(이벤트 수신)속성을 통해 주고받을 수 있습니다. 아래는 전체 예제 코드입니다. 양이 많으니 Vue 코드와 app영역 만 따로 보겠습니다. Vue.component('child-component', { template: 'Display', methods: { displayTxt: function() { this.$emit("display-text"); } } }); new Vue({ el: '#app', methods: { parent_event: function().. 공감수 0 댓글수 0 2023. 4. 23.
[Vue.Js] 6. Vue.Js 컴포넌트간의 통신1 뷰에서는 컴포넌트가 가진 값을 다른 컴포넌트가 그냥 가져다 쓸 수 없습니다. 예시를 들자면 아래와 같이 test-component2의 data를 보시면 retrun으로 test_component1의 data에 접근하려는 것을 확인할 수 있습니다. 하지만 아래의 출력 결과와 같이 data2 뒤에는 아무것도 출력 되지 않았습니다. 그 이유는 test_component2에서 test_component1의 data에 접근할 수 없었기 때문이죠. 그래서 이제부터 컴포넌트 간의 통신 방법에 대해서 공부해 보겠습니다. 첫 번째 방법은 부모와 자식 관계의 통신입니다. 서로 다른 범위를 가지고 있어 참조할 수 없기 때문에 상위인 부모 컴포넌트에서 자식(하위)컴포넌트끼리 데이터를 통신하는 방법입니다. 상위에서 하위로 데이.. 공감수 0 댓글수 0 2023. 4. 22.
[Vue.Js] 5. Vue.Js Component를 알아 보자! Component(컴포넌트)란 조합하여 화면을 구성하는 블록(특정 영역)을 의미합니다 화면을 구조화하여 하나의 패턴으로 개발을 할 수 있어 재사용 및 유지 보수가 수월합니다. 또한 이미 방식이 정해져 있어 다른 사람이 작성한 코드라 할지라도 이해가 쉽습니다. 화면 전체를 크게 Header, Body, Footer로 3 분할한 사진입니다. 트리 구조로 보면 다음과 같이 표현할 수 있습니다. 3개의 큰 영역으로 분할 했습니다. 실제로 화면을 구성하는 경우 이러한 형태를 유지하면서 구현해야 합니다. 이제 활용하기 위해 등록하는 방법을 알아보겠습니다. 컴포넌트 역시 전역과 지역이 있으며 전역은 어디서나 사용 가능하고 지역은 특정 인스턴스에서만 사용 가능합니다. 전역 컴포넌트 아래의 코드를 입력하시고 돌려보시면 .. 공감수 0 댓글수 0 2023. 4. 21.
[Vue.Js] 4. Vue.Js 인스턴스의 Life cycle를 알아 보자! Vue Js의 Life Cycle에는 생성 → 부착→갱식→소멸 4단계가 있고 각 단계 전과 후에 이벤트를 등록 할 수 있습니다. 라이프 사이클과 그 예약어를 보겠습니다. Start와 End는 임의로 추가했습니다. 저 흐름으로 진행된다 생각하시면 되며 각 이벤트에 대해 설명드리겠습니다. beforeCreate - 인스턴스가 생성된 후 실행 되는 단계이며 아무것도 생성되지 않은 상태입니다. created - data 속성과 methods속성이 정의되어 접근 가능한 상태입니다. - 접근하여 특정 로직 실행이 가능하며 화면에 요소를 부착하기 이전이라 template속성에 정의된 요소에는 접근할 수 없습니다. - 서버에서 데이터를 요청하고 받아오는 로직을 실행시키는 단계입니다. beforeMount - js의 r.. 공감수 0 댓글수 0 2023. 4. 20.
[D2Lang] 3. D2에서 화살표 모양을 바꿔보자! 오늘은 화살표의 다양한 모양과 색상 설정하는 방법을 알아보겠습니다. 아래의 예제 코드를 입력하시고 돌려보시면 아래의 사진과 같이 출력됩니다. x1 -> y1 x2 -- y2 x3 dst로 "(시작 Box ) (화살표) ( 도착 Box )"의 형태를 기본으로 가지고 갑니다. 화살표의 종류는 아래와 같이 4종류이며 화살표의 머리 종류는 총 8개 있습니다. x5와 y5의 두번째 노란색 화살표를 보시면 triangle과 arrow의 차이가 안 보이는데요. 일단 문서에 따르면 arrow의 경우 triangle보다 더 뾰족하다고 합니다. x5 y5를 보시면 제가 style.filled속성을 사용했는데요. filled의 경우 현재 rectangle과 circle만 지원되고 있습니다. 또한 label속성으로 직접 화살.. 공감수 0 댓글수 0 2023. 4. 19.
[Vue.Js] 3. Vue.Js에서의 인스턴스를 알아 보자! Vue에서 인스턴스란 Vue 생성자를 사용하여 생성된 개체를 의미합니다. 그러면 생성된 인스턴스는 고유한 데이터, 메서드 및 옵션을 가질 수 있고 이를 통해 화면에 원하는 것을 보여줄 수 있게 됩니다. Vue가 가지는 여러 속성이 있는데 속성에 관해서는 사용할 때 설명드리겠습니다. 일단 이전 예제에서 new Vue({~})를 통해 Vue 인스턴스를 만들어 사용했습니. 이전에 만든 index.html을 열고 F12를 눌러 개발자 도구를 통해 html코드를 확인해 볼 경우 {{ message }}로 입력했던 부분이 아래의 new Vue 안의 message뒤에 있는 ‘Hello Vue!’가 되어있는 것을 확인하실 수 있습니다. 또한 확장 프로그램인 Vue 아이콘이 활성화 됨을 확인할 수 있으며 F12를 통해 .. 공감수 0 댓글수 0 2023. 4. 18.
[Vue.Js] 2. Vue.Js의 개발 환경을 set up해보자! 일단 설치해야 되는 어플리케이션을 알아봅시다. 크롬 (브라우저) visual studio code (이하 vs code : 텍스트 에디터로 다른 환경 사용 중이 시라면 사용하셔도 무방합니다) Node.js Vue.Js dev tools (chrome extension) 일단 크롬 브라우저를 설치하는 방법을 알아보겠습니다. https://www.google.com/intl/ko_kr/chrome/에서 다운받으실 수 있습니다. 아래의 다운로드 버튼을 누르시면 installer가 다운되며 다운 후 실행시켜 크롬을 설치하시면 됩니다. vs code는 https://code.visualstudio.com/에서 설치하실 수 있습니다. 크롬과 동일하게 아래의 다운로드를 누르시면 installer가 설치되며 실행시켜 .. 공감수 0 댓글수 0 2023. 4. 17.
[D2Lang] 2. D2를 통한 다이어그램 상자의 모양 바꾸기! 매우 간단하게 변경하실 수 있습니다. d2에서 모양을 바꾸는 방법은 그냥 (개체 이름).shape 뒤에 지원되는 모양을 적으시면 됩니다. 아래 예제는 지원하는 모양을 정리해둔 예제입니다. 이외에는 special shape types라고 있는데 나중에 따로 정리하겠습니다. 일단 grid-rows: 4로 모양들을 4행으로 정리했습니다. grid-rows: 4 rectangle.shape: rectangle square.shape: square page.shape: page parallelogram.shape: parallelogram document.shape: document cylinder.shape: cylinder queue.shape: queue package.shape: package step.s.. 공감수 0 댓글수 0 2023. 4. 16.
[D2Lang] 1. D2를 통한 다이어그램 그리기 시작하기! D2라는 언어는 텍스트를 다이어그램(Diagram)으로 만들어 주는 다이어그램 스크립팅 언어입니다. D2라는 이름의 유래는 아래와 같다고 합니다. Declarative Diagramming -> D2 간단한 언어이기 때문에 공식 문서를 보고 직접 하셔도 된다 생각합니다. 또한 D2는 개발자 친화적으로 만들기 위해 노력했고 가독성을 높였다고 합니다. D2를 웹에서 사용하기 D2 Playground An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams. play.d2lang.com 접속해 보시면 아래의 화면이 뜨고 초록색 상자로 표시해둔 compile.. 공감수 0 댓글수 0 2023. 4. 15.
[Vue.Js] 1. Vue.Js란? Vue.Js는 웹 개발에 사용되는 언어입니다. Java Script로 이루어진 프레임워크이며 Vue를 통해 웹 상에서 보여지는 화면을 구성할 수 있습니다. 기존의 Html, Css, Js를 모르셔도 쉽고 빠르게 배울 수 있고 개발 속도 또한 빠르다는 강점이 있습니다. 일단 장단점에 대해 알아보겠습니다. 장점 학습 용이 - 구문과 개념이 간단하여 비교적 쉽게 시작할 수 있습니다. 다양성 및 유연성 - 유연하여 기존 프로젝트와 통합하기도 유리하며 간단한 UI 구성 요소 또는 복잡한 SPA(단일 페이지 응용 프로그램)를 구축 등 다양하게 사용할 수 있습니다. 구성 요소 기반 아키텍처 - 구성 요소 기반 아키텍처를 따라 재사용 및 유지 관리가 가능합니다. 이는 재사용, 모듈 및 유지 보수를 수월하게 만들어 개발.. 공감수 0 댓글수 0 2023. 4. 14.
[Design Pattern] 24. Interpreter Pattern(인터프리터 패턴) C# 자신의 문법을 정의하고 인터프리터 객체를 사용하여 문법을 분석하여 출력하는 디자인 패턴입니다. 행동 패턴(Behavioral Design Patterns) 중 하나입니다. 장점 새로운 표현(문법)을 추가할 수 있기 때문에 확장 및 수정이 수월할 있습니다. 언어 또는 문법을 개체 지향 트리 구조로 나타낼 수 있으므로 이해 및 유지 관리가 더 쉬워집니다. 언어나 문법에 따라 작동하는 복잡한 규칙이나 알고리즘을 더 쉽게 구현할 수 있습니다. 단점 복잡한 언어나 문법의 경우 구현하기가 복잡할 수 있습니다. 언어나 문법을 나타내는 트리 구조를 생성해야 하므로 다른 방식보다 안좋 수 있습니다. 트리 구조의 다양한 곳에서 오류가 발생할 수 있으므로 디버깅하기 어려울 수 있습니다. C#으로 Console 프로젝트를 하.. 공감수 0 댓글수 1 2023. 4. 13.
[Design Pattern] 23. Builder Pattern(빌더 패턴) C# 복잡한 객체들을 단계별로 생성할 수 있도록 도와주는 디자인 패턴입니다. 생성 패턴(Creational Design Patterns) 중 하나입니다. 장점 객체들을 단계별로 생성하거나 생성 단계들을 연기하거나 재귀적으로 단계들을 실행할 수 있습니다. 제품들의 다양한 표현을 만들 때 같은 생성 코드를 재사용할 수 있습니다. 단일 책임 원칙을 만족하여 로직에서 복잡한 생성 코드를 분리시킬 수 있습니다. 단점 패턴이 여러 개의 새 클래스들을 생성해야 하므로 코드의 전반적인 복잡성이 증가합니다. C#으로 Console 프로젝트를 하나 생성해서 할 것입니다. 이번엔 Person을 생성하고 정보를 입력하여 빌드하고 출력하겠습니다. 일단 프로젝트의 tree구조는 아래와 같습니다. Builder(Project) |- P.. 공감수 0 댓글수 0 2023. 4. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.