적자 생존 (Write, Survive!)

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 파악"aabbaccc"의 경우 "2a2ba3c"(문자가 반복되지 않아 한번만 나타난 경우 1은 생략함) "abcabcdede"와 같은 문자열은 전혀 압축되지 않음.문자열을 1개 이상의 단위로 잘라서 압축하여 더 짧은 문자열로 표현예를 들어, "ababcdcdababcdcd"의 경우 문자를 1개 단위로 자르면 전혀 압축되지 않지만, 2개 단위로 잘라서 압축한다면 "2ab2cd2ab2cd"로 표현다른 방법으로 8개 단위로 잘라서 압축한다면 "2ababcdcd"로 표현할 수 있으며, 이때가 가장 짧게 압축하여 표현할 수 있는 방법 가장 짧은 압축 단위를 찾..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 파악n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 갯수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다.노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하도록 solution 함수를 작성해주세요.제한사항노드의 개수 n은 2 이상 20,000 이하입니다.간선은 양방향이며 총 1개 이상 50,000개 이하..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다.이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다.단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다.예를 들면,arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 soluti..

이번 단원은 라우팅이다.라우팅을 이용하면 우리가 하나의 홈페이지에서 여러 페이지로 이동하는 것과 같은 기능을 구현할 수 있다.1. vue-router란?최근 개발되는 웹 애플리케이션은 SPA(단일 페이지 애플리케이션) 구조 SPA(단일 페이지 애플리케이션: Single Page Application): 하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공 여러 화면을 하나의 페이지 안에서 제공, 화면을 별도로 로딩 X→ 화면마다 고유의 식별자(URI)를 기반으로 화면을 렌더링해야 함 요청한 URI 경로에 따라 각각 다른 화면이 렌더링vue-router 라이브러리를 이용vue-routervue.js의 공식 라우터 라이브러리중첩된 경로, 뷰를 매핑컴포넌트 기반의 라우팅 구현Vue.js의 전환..

1. Composition API란?Composition API는 대규모 Vue 애플리케이션에서 컴포넌트의 로직을 효과적으로 구성하고 재사용 할 수 있도록 만든 함수 기반 API이며, Vue3에서 새롭게 추가된 기능이다. 기존 컴포넌트 작성방식 → data, methods, computed, watch와 같은 옵션API(Options API)를 이용복잡한 구조의 애플리케이션일 경우 단점이 존재컴포넌트 내부에 동일한 논리적 관심사 코드가 분리하여 존재컴포넌트 로직 재사용의 불편함2. setup 메서드를 이용한 초기화Vue 3 컴포넌트의 초기 실행 지점data, methods, computed 옵션이 사라지고 초기화 작업을 수행하는 setup 메서드를 이용해 컴포넌트 상태를 초기화 setup()으로 사용하거..

단일 파일 컴포넌트의 심화과정이다.학습 난이도가 쉽지 않아 정리 과정에서 대표 강사님의 정리본을 참고하였다.1. 단일 파일 컴포넌트에서의 스타일컴포넌트 내에서 CSS 범위를 현재 컴포넌트로만 지정하는 것과 동일한 효과2. 슬롯(Slot)슬롯(Slot) : Vue 컴포넌트에서 콘텐츠를 전달하는 강력한 방법컴포넌트를 더 유연하고 재사용 가능하게 만들어주는 중요한 기능 슬롯 = 구멍부모 컴포넌트에서 자식 컴포넌트로 HTML 내용을 전달할 수 있게 해주는 창구 역할 예를 들어, 버튼 컴포넌트를 만들 때:버튼의 스타일, 동작은 같지만버튼 안의 텍스트나 아이콘은 다르게 하고 싶을 때 슬롯을 사용슬롯을 사용하기 전에는 자식 컴포넌트가 정해놓은 템플릿만 불러올 수 있었음.슬롯의 장점컴포넌트 재사용성 증가: 같은 구조에..

단일 파일 컴포넌트(Single File Component) : 컴포넌트 하나를 .vue 파일 하나에 작성하여 붙여진 이름Vue의 기본 구성 단위나의 파일에 , : 컴포넌트 내부에서 사용할 Vue 컴포넌트 내부의 옵션을 정의할 수 있다. : 컴포넌트가 사용할 스타일을 지정2. 프로젝트 구조- main.jsimport { createApp } from 'vue';import App from './App.vue';import './assets/main.css';const app = createApp(App);app.mount('#app');간단한 단일 파일 컴포넌트- CheckboxItem.vue 옵션1name 옵션을 지정하지 않으면 Vue.js 개발자 도구에서 컴포넌트 트리가 제대로 나타나지 않을 ..

스타일 역시 바인딩으로 처리할 수 있다.코드 예시로 알아보자. (예제가 길어서 생략하여 첨부하였다.)1. HTML의 스타일 적용기존의 HTML의 스타일 적용클래스명, 속성명 지정시 케밥 표기법으로 적용 (kebab-style)JavaScript 표현식에서는 ‘-’ 표기가 연산자이므로 사용할 수 없음.→ 케밥 대신에 카멜 표기법을 사용 (camelStyle)인라인 스타일v-bind:style = :style데이터 속성에 자바스크립트 객체로 작성 객체 형태로 스타일 지정테스트... 마우스 이벤트로 동적 스타일 변경테스트...2. CSS 클래스 바인딩v-bind:class = "...” = :class=”..."클래스명 문자열을 바인딩하는 방법true/false 값을 가진 객체를 바인딩 하는 방법문자열로 클래..

이벤트 처리는 재밌지만 꽤 어렵다고 느껴지는 것 같다.1 .인라인 이벤트 처리v-on 디렉티브를 이용. → @으로 줄여쓸 수 있음v-on:[이벤트이름]=”표현식” → @event=”” : 이벤트에는 click과 같이 이벤트명을 넣는다.인라인 이벤트로 처리하면 $event를 사용여러 기능을 인라인 이벤트로 모두 작성하기 힘듬→ 컴포넌트 인스턴스에 등록한 메소드를 이벤트 처리 함수로 사용할 수 있음.이벤트 핸들러 메서드Vue 인스턴스의 methods 속성에 정의한 함수를 이벤트 처리 함수로 연결 카운터: {{ count }} +1 증가 두 개의 메서드가 존재하고, 두 개의 메서드를 모두 호출하고 싶을 때두 개의 핸들러 실행 2. 이벤트 객체메서드의 첫 번째 인자로 이벤트 객체 e를 전달받을 ..

애플리케이션 인스턴스 : vue.createApp메서드를 호출하여 만들어진 객체 옵션 객체 : Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체 (name, data옵션) 루트 인스턴스 : DOM 트리에 마운트되어야 화면으로 렌더링 (vm) 1. Data 옵션: 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용 관리와 추적 → 변경을 탐지하고 추적하여 화면을 갱신 반드시 객체를 리턴하는 함수로 부여되어야 함. 초기 문자를 사용할 때, 특수문자를 사용하면 안된다.→ 특히, $로 시작하는 이름은 인스턴스 내부에서 특별한 용도이기 때문에 $,_로 시작하면 안됨.2. 계산된 속성(Computed Property): data나 다른 속성이 변경될 때 함수가 실행되어(계산된) 저장된 캐싱된 값 함수의..