풀스택챌린지

MVVM 패턴 Vue는 MVVM 패턴에서 부분적으로 영감을 받았다고 한다. 그렇기 때문에 MVVM 패턴을 알고있어야 할 필요가 있다. MVVM 패턴은 다음 세 가지를 포함한다. Model : 데이터 관리를 의미하며 Vue에서는 Javascript Object를 의미한다. View : 사용자들에게 출력되는 화면이며 Vue에서는 디렉티브를 사용한다. View Model : Model과 View의 인터페이스 역할을 한다. Vue의 인스턴스가 하는 역할이다. 위에 3개의 역할이 독립적으로 동작하여 의존성을 낮추고 유지보수가 용이하도록 하였다. Vue는 각각의 기능을 다음과 같이 분리하였다. View에서는 Vue의 디렉티브를 통해 데이터를 사용자에게 출력한다. {{ message }} Model은 화면에 보여줄 ..

사용자 입력 핸들링 사용자와 앱이 상호작용할 수 있도록 이벤트 리스너를 사용하는데 Vue에서는 v-on을 통해 할 수 있다. 다음은 버튼을 눌렀을 때 문자열을 뒤집는 것이다. v-on에 이벤트를 등록할 수 있으며 여기서 click 이벤트가 발생했을 때 reverseMessage함수를 등록한다. 함수 등록은 methods 안에 정의한다. {{ message }} 문자열 뒤집기 위와 똑같은 기능을 바닐라 자바스크립트로 아래와 같이 작성할 수 있다. 아래의 코드에서는 DOM을 직접 조작하여 기능을 만들지만 Vue에서는 내부에서 DOM조작을 도와준다. Javascript 문자열 뒤집기 v-model을 통해 입력과 동시에 데이터가 변경되는 양방향으로 바인딩할 수 있다. 아래의 코드를 통해 input이 messag..

선언적 렌더링 Vue에서 HTML 요소 내에 문자열과 같은 데이터를 어떻게 렌더링하는지 알아보자. 먼저 바닐라 자바스크립트를 통해 안에 문자열을 삽입하기위해서는 아래와같이 코드를 작성할 수 있다. 먼저 태그를 불러온 뒤에 안에 문자열을 넣는다. Vue에서는 위와같이 출력하기위해 다음과 같이 작성할 수 있을 것이다. id가 app인 를 Vue 인스턴스를 생성하여 연결한다. 이후에 data라는 속성 내에 message라는 변수를 생성하고 문자열을 넣어주면 HTML 문서 내에 message가 선언된 부분에 해당 문자열이 출력된다. {{message}} Vue에서는 DOM 요소와 인스턴스를 연결하여 반응형으로 만든다. 이는 데이터의 변경 사항이 있을 때 업데이트가 된다는 의미이다. message의 문자열을 변경..

Intro JavaScript에서 동기와 비동기에 대해 알아보기 전에 JavaScript가 어떻게 동작하는지 알아보자. JavaScript의 엔진은 기본적으로 싱글스레드로 프로그램을 처리한다. 싱글스레드로 처리할 때 실행할 코드를 하나의 Call Stack을 사용하게되는데 스택 자료구조처럼 동작을 한다. 처리할 코드를 Call Stack에 PUSH하고 처리가 완료된 코드는 POP하게된다. 따라서 기본적으로 JavaScript의 엔진은 프로그램을 동기식으로 처리한다. 하지만 JavaScript 엔진 이외에 Web API, Task Queue, Event Loop등이 JavaScript 런타임 환경에서 실행된다. 그리고 각각의 역할은 다음과 같다. - Web API : 브라우저에서 제공되는 API로 setT..

- 1901 1부터 정수 n까지 출력하는 재귀함수를 설계하시오. num=int(input()) def f(num): if num!=1: f(num-1) print(num) f(num) - 1902 정수 n부터 1까지 출력하는 재귀함수를 설계하시오. num=int(input()) def f(num): if num==1: print(num) else: print(num) f(num-1) f(num) - 1904 시작수(a)와 마지막 수(b)가 입력되면 a부터 b까지의 모든 홀수를 출력하시오. a,b=input().split() a=int(a) b=int(b) def odd(a,b): if a>b: return 0 elif b%2: odd(a,b-1) print(b,end=" ") elif not b%2: o..

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.   - 1548다음과 같이, 점수를 입력 받아 학점을 출력하시오.90 점 이상 ~ 100점 이하 : A80 점 이상 ~ 90점 미만 : B70 점 이상 ~ 80점 미만 : C60 점 이상 ~ 70점 미만 : D60 점 미만 : F def grade(score): if score>=90 and score=80 and score=70 and score=60 and score- 1549정수를 입력 받아 절댓값을 출력하시오.def abs(number): if number>0: print(number) else: print(-number)number=int(input())abs(nu..

먼저 1476을 참고로 풀이방법을 간략하게 보자 1 3 6 9 2 5 8 11 4 7 10 12 위와 같이 출력이 되어야 하는데 각 자리에 값이 아닌 위치를 표기해보았다. 0, 0 0, 1 0, 2 0, 3 1, 0 1, 1 1, 2 1, 3 2, 0 2, 1 2, 2 2, 3 위의 표에서 규칙을 보면 y와 x의 좌표를 더하면 어느정도 규칙이 보이는 것을 알 수 있다. 이를 활용하여 풀어보자. - 1476 다음과 같은 n*m 배열 구조를 출력하기 입력이 3 4인 경우 다음과 같이 출력한다. 1 3 6 9 2 5 8 11 4 7 10 12 ''' 1 3 6 9 2 5 8 11 4 7 10 12 ''' n,m=map(int,input().split()) numbers=[[0 for _ in range(100..

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.  - 1468다음과 같은 n*n 배열 구조를 출력하기입력이 3인 경우 다음과 같이 출력한다.1 2 36 5 47 8 9n=int(input())number=[[0 for _ in range(100)]for _ in range(100)]flag=Truecnt=1for y in range(n): if flag: for x in range(n): number[y][x]=cnt cnt+=1 flag=False else: for x in reversed(range(n)): number[y][x]=cnt ..

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.   - 1460다음과 같은 n*n 배열 구조를 출력하기입력이 3인 경우 다음과 같이 출력한다.1 2 34 5 67 8 9n=int(input())num=1for y in range(n): for x in range(n): print(num,end=" ") num+=1 print()- 1461다음과 같은 n*n 배열 구조를 출력하기입력이 3인 경우 다음과 같이 출력한다.3 2 16 5 49 8 7n=int(input())arr=[[0 for _ in range(n)] for _ in range(n)]num=1for y in range(n): for x in reversed(r..

- 1091 시작 값(a), 곱할 값(m), 더할 값(d), 몇 번째인지를 나타내는 정수(n)가 입력될 때, n번째 수를 출력하기 a,m,d,n=input().split() a=int(a) m=int(m) d=int(d) n=int(n) cnt=1 while True: if cnt==n: break a*=m a+=d cnt+=1 print(a) - 1092 같은 날 동시에 가입한 인원 3명이 규칙적으로 방문하는, 방문 주기가 공백을 두고 입력되었을 때 3명이 다시 모두 함께 방문해 문제를 풀어보는 날(동시 가입/등업 후 며칠 후?)을 출력하기 a,b,c=input().split() a=int(a) b=int(b) c=int(c) num=1 while True: if (num%a==0)and(num%b==..