▤ 목록들 ▥

Vue

setup() 함수

Composition API 사용을 위한 진입점 역할을 한다.라이프사이클(lifecycle)에서 컴포넌트 인스턴스가 생성되기 전에 실행된다.반응형 API를 사용하여 반응형 상태를 선언하고 setup()에서 객체를 반환하여 에 노출시킬 수 있다.setup()의 첫 번째 매개변수는 props이고, 두 번째 매개변수는 setup context 객체이다.예시⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️  setup() 안에서 반응형 상태를 선언하고 객체로 반환하게 되면 template과 컴포넌트 인스턴스에서 사용할 수 있다.이 때 setup() 안에서 반응형 상태를 선언했으면, 반드시 return을 해주어야 한다.메서드 또한 반응형 상태와 마찬가지로 사용방법이 똑같다.  propssetup 함수의 첫 번째 매개변수이고, ..

Vue

Composition API

Composition API는 옵션(data, methods, ...)을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.Composition API는 성격에 따라 반응형 API(Reactivity API), 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입(Dependency Injection) API로 구분된다. 반응형 API(Reactivity API)반응하는 데이터와 관련된 API 세트이다.예를 들어 ref(), isRef(), reactive()와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watchers(감시자)와 같은 것들을 만들 수 ..

Vue

컴포넌트

모듈자바스크립트 코드를 재사용할 수 있도록 분리한 파일을 모듈이라고 한다.  컴포넌트UI를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 컴포넌트를 사용하는 이유컴포넌트를 사용하면 UI를 재사용할 수 있다.프론트엔드 개발을 하다보면 반복적으로 사용하는 코드들이 있는데, 이런경우 컴포넌트로 캡슐화 하여 필요한 곳에서 사용할 수 있다. 컴포넌트를 사용하여 UI를 독립적으로 나눔으로써 코드를 클린하게 할 수 있다.프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있는데, 이럴 때 컴포넌트로 독립적으로 분리함으로써 코드를 간결하게 하여 유지보수에 용이하다.  컴포넌트 없이 사용해보기 ⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️짧은 코드이지만 긴 코드라고 가정한다면 위의 코드는 가독성이 떨어지고, 반복되는..

Vue

Vue란 ?

UI 개발을 위한 JavaScript 프레임워크이다.HTML, CSS, JavaScript를 기반으로 이루어져있고,이것들을 기반으로 웹 애플리케이션을 보다 쉽고, 효율적으로 개발하는데 도움을 준다.  JavaScript와 Vue의 차이선언적 렌더링(Declarative Rendering)Vue는 템플릿 구문( {{ 데이터 }} )을 활용하여 데이터를 선언적으로 출력(렌더링) 할 수 있도록 한다. 반응성(Reactivity)Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트한다.  React와 Vue의 공통점/차이점공통점가상 DOM을 사용한다.반응적이고 조합 가능한 컴포넌트를 제공한다.라우팅 및 전역상태를 관리하는 라이브러리가 있다. 차이점React는 ..

SKN Family AI Camp/Memoir

SK Networks Family AI Camp 5th 회고록(24.06.03-24.06.07)

기간2024.06.03 ~ 2024.06.07  한 주를 마치며어느 덧 캠프에 참여한지 5주가 지났다.이번 한 주 동안 새로 오신 강사님의 수업 방식에 완전히 적응해가고 익숙해지기까지 오랜 시간이 걸리지 않았다.내가 느낀 강사님은 애자일(Agile) 개발 프로세스를 강조하시고 중요하게 생각하시는 분이신 것 같았다.전에 다니던 회사에서도 애자일 개발 방법을 도입하였지만, 실제로 개발하면서 제대로 된 애자일 방법으로 진행되는 것 같진 않은 느낌이었다. "왜 회사에서 잘 되지 않았을까?" 라고 다시 생각해보면 개발자들 뿐만 아니라 PM, 디자이너, 기획자 등 프로젝트에 참여한 모든 인원이 애자일 방법에 대해 잘 이해하고 사용할 줄 알아야 하지 않았을까? 라는 생각이 들게 되었다.아무튼, 새로 오신 강사님은 애..

SKN Family AI Camp/Etc

DDD와 IoC

DDD (Domain-Driven Design)Domain-Driven Design의 약자이다.소프트웨어 개발 방법론 중 하나로, 복잡한 도메인을 이해하고 효과적으로 모델링하기 위해 사용되는 개발 철학과 방법이다.단어 그대로 도메인 주도 설계라고 부르고, 도메인에 집중하며 도메인의 복잡성을 최소화하기 위해 소프트웨어를 설계하고 개발한다. 예를들어, 온라인 쇼핑몰의 주요 도메인을 구성해보면 아래와 같을 것이다. 주요 구성 요소엔티티(Entity)값 객체(Value Object)집합체(Aggregate)레포지토리(Repositories)서비스(Service) 등이 있다. 엔티티(Entity)도메인 모델에서 가장 중요한 개념 중 하나로, 식별 가능하고 상태를 가지는 도메인 객체이다.고유한 식별자이어야 한다.위..