투투

문제 상근이는 2차원 평면 위에서 움직일 수 있는 거북이 로봇을 하나 가지고 있다. 거북이 로봇에게 내릴 수 있는 명령은 다음과 같이 네가지가 있다. F: 한 눈금 앞으로 B: 한 눈금 뒤로 L: 왼쪽으로 90도 회전 R: 오른쪽으로 90도 회전 L과 R명령을 내렸을 때, 로봇은 이동하지 않고, 방향만 바꾼다. 명령을 나열한 것을 거북이 로봇의 컨트롤 프로그램이라고 한다. 상근이는 자신의 컨트롤 프로그램으로 거북이가 이동한 영역을 계산해보려고 한다. 거북이는 항상 x축과 y축에 평행한 방향으로만 이동한다. 거북이가 지나간 영역을 모두 포함할 수 있는 가장 작은 직사각형의 넓이를 구하는 프로그램을 작성하시오. 단, 직사각형의 모든 변은 x축이나 y축에 평행이어야 한다. 아래 그림에서 거북이는 가장 처음에 ..

Vue에는 computed와 watch라는 속성이 존재한다. 두 개의 속성의 역할은 비슷하지만 분명히 차이점이 존재한다. computed와 watch를 어떻게 사용하고 언제 사용하는지 알아보자. 언제 사용할까? computed와 watch는 비슷하게 동작하여 쉽게 이해되지 않았다. 하지만 언제 사용해야하는지 알고난 후에 이해할 수 있었다. 두 개의 속성은 모두 참조하고 있는 값이 변할 때 작동한다. 하지만 computed는 계산된 결과를 반환하고 watch는 값이 변경될 때 함수가 실행된다. 따라서 watch는 특정 값에 어떠한 조건이 성립되었을 때 실행되는 함수를 등록하고 트리거로 사용할 수 있으며 computed는 일반 methods처럼 사용된다. 어떻게 사용할까? 공식문서에 나와있는 예제는 다음과 ..

문제 월드초등학교 학생회장 후보는 일정 기간 동안 전체 학생의 추천에 의하여 정해진 수만큼 선정된다. 그래서 학교 홈페이지에 추천받은 학생의 사진을 게시할 수 있는 사진틀을 후보의 수만큼 만들었다. 추천받은 학생의 사진을 사진틀에 게시하고 추천받은 횟수를 표시하는 규칙은 다음과 같다. 학생들이 추천을 시작하기 전에 모든 사진틀은 비어있다. 어떤 학생이 특정 학생을 추천하면, 추천받은 학생의 사진이 반드시 사진틀에 게시되어야 한다. 비어있는 사진틀이 없는 경우에는 현재까지 추천 받은 횟수가 가장 적은 학생의 사진을 삭제하고, 그 자리에 새롭게 추천받은 학생의 사진을 게시한다. 이때, 현재까지 추천 받은 횟수가 가장 적은 학생이 두 명 이상일 경우에는 그러한 학생들 중 게시된 지 가장 오래된 사진을 삭제한다..

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의 문자열을 변경..

문제 길이가 N인 컨베이어 벨트가 있고, 길이가 2N인 벨트가 이 컨베이어 벨트를 위아래로 감싸며 돌고 있다. 벨트는 길이 1 간격으로 2N개의 칸으로 나뉘어져 있으며, 각 칸에는 아래 그림과 같이 1부터 2N까지의 번호가 매겨져 있다. 벨트가 한 칸 회전하면 1번부터 2N-1번까지의 칸은 다음 번호의 칸이 있는 위치로 이동하고, 2N번 칸은 1번 칸의 위치로 이동한다. i번 칸의 내구도는 Ai이다. 위의 그림에서 1번 칸이 있는 위치를 "올리는 위치", N번 칸이 있는 위치를 "내리는 위치"라고 한다. 컨베이어 벨트에 박스 모양 로봇을 하나씩 올리려고 한다. 로봇은 올리는 위치에만 올릴 수 있고, 내리는 위치에서만 내릴 수 있다. 로봇은 컨베이어 벨트 위에서 스스로 이동할 수 있다. 로봇을 올리는 위치..

문제 N개의 물병이 있고 각 물병은 무한대로 물을 담을 수 있다. 이때 최대 K개의 물병만 옮길 수 있다고 하자. 처음에 각 물 병은 1만큼 담겨져있으며 같은 양이 들어있는 두 개의 물병을 하나의 물병으로 합칠 수 있다. 또한 합칠 물병이 없을 때는 1리터의 물병을 사올 수 있다. 이때 최대 K개의 물병으로 만들기위해 사온 물병의 개수를 구하라. 입력 첫째 줄에 N과 K가 주어진다. N은 10^7보다 작거나 같은 자연수이고, K는 1,000보다 작거나 같은 자연수이다. 출력 첫째 줄에 상점에서 사야하는 물병의 최솟값을 출력한다. 만약 정답이 없을 경우에는 -1을 출력한다. 접근 이진수로 접근하는 방법이 있었다. N이 1부터 8일 때 사오지않고 옮길 수 있는 병의 개수를 구해보면 N을 이진수로 변경했을 때..

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

문제 앞으로 N일간 주식 가격이 숫자로 주어진다. 이 중 K번 거래를 하려고한다. 거래를 할 때는 하루에 한 번만 할 수 있으며 첫 날을 제외하고 이전날보다 주식가격이 올랐을 때만 거래를 한다. 이 때 K번 거래를 할 수 있는지 검사하는 프로그램을 작성하시오. 입력 입력 파일에는 여러 테스트 메이스가 포함될 수 있다. 파일의 첫째 줄에 케이스의 개수 T(2 ≤ T ≤ 100)가 주어지고, 이후 차례로 T 개 테스트 케이스가 주어진다. 각 테스트 케이스의 첫 줄에 두 정수 N과 K이 주어진다. N은 앞으로 주가를 알 수 있는 날 수이며, (1 ≤ N ≤ 10,000) K는 거래의 회수이다. (1 ≤ K ≤ 10,000) 다음 줄에는 앞으로 N 날의 주가가 사이에 공백을 두고 주어진다. 주가는 1부터 10,..