전체 글70 [프로그래머스] 숫자의 표현 프로그래머스 2단계 숫자의 표현 https://programmers.co.kr/learn/challenges 문제 설명 풀이 class Solution { public int solution(int n) { int startNum = 1; int answer = 0; while (startNum 2022. 6. 5. [프로그래머스] 124 나라의 숫자 프로그래머스 2단계 124 나라의 숫자 https://programmers.co.kr/learn/challenges 문제 설명 풀이 class Solution { public String solution(int n) { StringBuilder sb = new StringBuilder(); int count = 1; while (n>0){ count = n % 3; n = n / 3; if(count == 0){ n = n - 1; count = 4; } sb.insert(0, count); } return sb.toString(); } } 2022. 6. 5. [프로그래머스] 두 개 뽑아서 더하기 프로그래머스 1단계 두 개 뽑아서 더하기 https://programmers.co.kr/learn/challenges 문제 설명 풀이 import java.util.*; class Solution { public int[] solution(int[] numbers) { HashSet set = new HashSet(); for (int i=0; i 2022. 6. 5. [프로그래머스] 3진법 뒤집기 프로그래머스 1단계 3진법 뒤집기 https://programmers.co.kr/learn/challenges 문제 설명 풀이 class Solution { public int solution(int n) { int answer = 0; String stAnswer = ""; while(n > 0) { stAnswer = (n % 3) + stAnswer; n /= 3; } StringBuilder sb = new StringBuilder(stAnswer); answer = Integer.parseInt(sb.reverse().toString(), 3); return answer; } } 2022. 6. 5. [Vue.js] Vue Cli 설치하기 Vue.js Cli 설치하기 1. node.js 설치하기(8.9 이상) 1-1. 아래 링크로 들어가서 왼쪽 버전으로 node.js를 다운로드 한다. https://nodejs.org/ko/ 1-2. cmd창을 열어서 node.js가 설치되었는지 확인한다. node.js 버전 확인 node -v npm 버전 확인 npm -v 2. Vue Cli 설치하기 2-1. cmd창을 열어서 아래의 명령어를 입력한다. window 명령어 npm install -g @vue/cli Linux/Mac 명령어 sudo npm install -g @vue/cli 2-2. Vue Cli 설치 완료 2-3. cmd창을 열어서 Vue Cli가 설치되었는지 확인한다. vue --version 3. Vu.. 2022. 4. 26. [Vue.js] 뷰 컴포넌트 개념 및 예제 Vue.js 컴포넌트 개념 및 예제 컴포넌트를 사용하는 이유 {{ name }} Click! {{ name }} Click! 위와 같이 코드가 똑같은 Vue 인스턴스 app, app2가 있다. 하지만 이런 방식으로 코드를 적는 것은 불필요한 중복에 불과하기 때문에 component를 사용해서 아래와 같이 개발을 할 수 있다. component는 전역 component와 지역 component로 나뉜다. 전역 Component 사용법 반복해서 사용되어질 Vue 인스턴스에 new Vue({ }) 대신 Vue.component({ })를 사용한다. 컴포넌트의 이름을 넣는다. (아래 코드의 컴포넌트 명은 'app-button') const app = new Vue({ // 반복되어 사용될 Vue 인스턴스 }) .. 2022. 4. 26. [Vue.js] 여러 개의 Vue 인스턴스 사용하기 Vue.js 여러 개의 Vue 인스턴스 사용하기 코드 {{ name }} Click! {{ name }} Click! 실행 결과 코드 - 다른 Vue 인스턴스 제어하기 {{ name }} Click! {{ name }} Click! 실행 결과 this 대신 Vue 인스턴스가 담긴 변수의 이름 넣기 const app = new Vue({ el: '#app', data: { name: 'Jang' }, methods: { changeText() { this.name = 'Jang-change' // --> app2.name = 'Jang-change' } } }) 위의 코드에서 this.name은 app의 data의 name을 가리킨다. 이를 app2.name 으로 적는다면 app2 Vue 인스턴스의 dat.. 2022. 4. 26. [Vue.js] Vue v-for와 key 개념 및 예제 Vue.js v-for와 key 개념 및 예제 코드 // == 이름: {{ person.name }} 나이: {{ person.age }} 실행 결과 코드 - index 사용하기 {{ index }} 이름: {{ person.name }} 나이: {{ person.age }} 실행 결과 코드 - key 사용하기 {{ index }} 이름: {{ person.name }} 나이: {{ person.age }} key를 사용하는 이유 기존 엘리먼트를 재사용 및 정렬하기 위해서 v-for의 각 항목들에 고유한 속성을 제공하여 항목들을 고유한 ID로 식별할 수 있다. 반복되는 DOM 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하고는 가능하면 언제나 v-for에 ke.. 2022. 4. 26. [Vue.js] Vue v-if와 v-show 개념 및 예제 Vue.js Vue v-if와 v-show 개념 및 예제 토글이 자주 일어난다면 v-show를 사용하고, 그렇지 않다면 v-if를 사용하는 것을 권장한다. 코드 - if / else Hello Vue! Bye! Click! 실행 결과 코드 - if / else / else if H E L L O Five!! Bye! Plus! {{ number }} 실행 결과 코드 - template으로 여러 개 한번에 제어하기 H E L L O Bye! Click! 실행 결과 코드 - show Hello Vue!! Click! 실행 결과 2022. 4. 26. 이전 1 2 3 4 5 ··· 8 다음
