열이의 개발블로그

뷰 컴포넌트를 생성할 때 컴포넌트의 이름은 반드시 여러 개의 단어를 사용해야 한다. 프로젝트를 생성한 뒤 프로젝트/src/components 안에 컴포넌트를 하나 생성해 보자! Test라는 이름을 가진 컴포넌트를 하나 생성하면 이렇게 빨간색으로 오류가 뜨게 된다. 이유는 무엇일까? 위의 오류를 읽어보면 "Test"라는 컴포넌트는 반드시 여러 개의 단어를 조합해 이름을 지어야 한다고 한다. 그렇다면 위와 같이 이름의 규칙은 어떤게 있을까? ✅ 컴포넌트 이름 규칙 컴포넌트 이름은 항상 여러 문자로 지어야 한다. 하지만 루트 컴포넌트인 App과 기본으로 제공되는 또는 와 같은 것은 제외한다. 이는 이미 존재하거나 미래에 존재할 HTML 요소들과의 충돌을 막기 위함이다. (HTML 요소는 한 단어이기 때문) 자..

Vue를 사용하여 프로젝트를 생성해보자! 우선 터미널에 아래와 같은 코드를 입력하자. $ vue create test 필자는 Vue CLI 5.0.8버전을 사용하고 있다. create 명령어를 입력했다면 위와 같은 화면을 볼 수 있다. 이때 Vue의 버전을 골라 선택해주면 된다. [Vue 2]를 사용하여 프로젝트를 생성해보도록 하자. 위와 같은 코드가 나타나며 프로젝트가 생성되었다!! 생성된 프로젝트는 위와 같다. 이제 Vue를 이용하여 프로젝트를 진행해보자

https://www.acmicpc.net/problem/17404 17404번: RGB거리 2 첫째 줄에 집의 수 N(2 ≤ N ≤ 1,000)이 주어진다. 둘째 줄부터 N개의 줄에는 각 집을 빨강, 초록, 파랑으로 칠하는 비용이 1번 집부터 한 줄에 하나씩 주어진다. 집을 칠하는 비용은 1,000보다 작거나 www.acmicpc.net 문제 분석 각 집의 색은 이전, 이후의 집과 색이 달라야 한다. 집의 색이 정해진다면 비용을 누적하여 가장 작은 비용을 출력하면 된다. 기준이 없으므로 1번 집부터 색을 칠한다고 가정했을 때, 1번 집의 색이 빨강이라면 2번 집은 초록과 파랑 중 골라야하고 N번 집도 초록과 파랑 중 골라야 한다. 1149번: RGB거리 문제 위의 문제의 경우는 자기 자신의 바로 다음 ..

Do it! Vue.js 뷰 템플릿 뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 ✏️ 템플릿 속성 사용 방법 1. ES5에서 뷰 인스턴스의 template 속성을 활용 template: 'Hello {{ message }}' 템플릿 속성의 특징 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 하고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해줌 1. {{ message ]} ... ..

Do it! Vue.js 뷰 HTTP 통신 ✏️ 웹 앱의 HTTP 통신 방법 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해줘야 하기 때문 HTTP란? 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식 서버에 '해당 데이터를 보내주세요.'라는 메시지를 보내는 것이 'HTTP 요청을 보낸다.'와 같은 의미 웹 앱 HTTP 통신의 대표적인 사례로 제이쿼리(jQuery)의 ajax ajax는 서버에서 받아온 데이터를 표시할 때 화면 전..

Do it! Vue.js 뷰 라우터 ✏️ 라우팅이란? 라우팅이란 웹 페이지 간의 이동 방법 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용 싱글 페이지 애플리케이션(SPA) 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 라우팅을 이용하면 화면 간 전환이 매끄럽고 애플리케이션의 사용자 경험을 향상시킬 수 있음 라우팅 사용시 웹 페이지 요청과 응답 과정에서 화면 상 깜빡거림 없이 매끄럽게 전환 가능 대표적인 라우팅 라이브러리 router.js, navigo.js ✏️ 뷰 라..

Do it! Vue.js 뷰 컴포넌트 통신 ✏️ 컴포넌트 간 통신과 유효 범위 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없음 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접 참조할 수 없음 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제 my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌트의 data.cmp1Data를 참조하고 있음 자바스크립트의 객체 참조 방식을 생각해 보면 참조 값 100이 화면에 표시되어야 하지만 아무것도 표시하지 않음 {{ cmp2Data }}에 아무것도 출력되지..

Do it! Vue.js ✏️ 뷰 컴포넌트 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역) 자료구조의 트리(Tree) 모양과 유사 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 코드의 재사용성이 증가함 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해 가능 컴포넌트 등록 컴포넌트 등록 방법에는 전역과 지역, 두 가지가 있음 지역(Local) 컴포넌트 특정 인스턴스에서만 유효한 범위를 갖음 전역(Global) 컴포넌트 여러 인스턴스에서 공통으로 사용할 수 있음 전역 컴포넌트 등록 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록 전역..

https://www.acmicpc.net/problem/10942 10942번: 팰린드롬? 총 M개의 줄에 걸쳐 홍준이의 질문에 대한 명우의 답을 입력으로 주어진 순서에 따라서 출력한다. 팰린드롬인 경우에는 1, 아닌 경우에는 0을 출력한다. www.acmicpc.net 문제 분석 팰린드롬(palindrome)이란? 팰린드롬[나무위키] 회문 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 회문(回文) 또는 팰린드롬(palindrome)은 거꾸로 읽어도 제대로 읽는 것과 같은 문장이나 낱말, 숫자, 문자열(sequence of characters) 등이다. 보통 낱말 사이에 있는 띄 ko.wikipedia.org 문제는 N개의 자연수 중 S번째 수부터 E번째까지의 수가 팰린드롬인지 ..

https://www.acmicpc.net/problem/1958 1958번: LCS 3 첫 줄에는 첫 번째 문자열이, 둘째 줄에는 두 번째 문자열이, 셋째 줄에는 세 번째 문자열이 주어진다. 각 문자열은 알파벳 소문자로 이루어져 있고, 길이는 100보다 작거나 같다. www.acmicpc.net 문제 분석 LCS란 최장 공통 부분수열이다. 만약 문자열이 두 개(예제 입력 1의 위 두 문자열)라고 가정하였을 때, 다이나믹 프로그래밍(DP)를 사용하여 쉽게 LCS를 계산할 수 있다. 위의 그림과 같이 두 문자열을 앞에 공백이 있는 이차원 리스트로 만든다. 그 후 이중 반복문을 돌면서 같은 문자열이 있는지 탐색한다. 1. 같은 문자를 만난 경우 이 때, 같은 문자를 만난다면 대각선 왼쪽 위에 있는 수에 1을..