IT로그아웃

이번 글에서는 FLUX라는 패턴에 대해알아보고 등장배경에 대해 알아보겠습니다. MVC 한계점? MVC에서 View는 Controller에 연결되어 화면을 구성하는 단위요소이므로 다수의 View들을 가질 수 있습니다. 그리고 Model은 Controller를 통해서 View와 연결되어지지만, 이렇게 Controller를 통해서 하나의 View에 연결될 수 있는 Model도 여러개가 될 수 있습니다. 즉, 화면에 복잡한 화면과 데이터 구성이 필요하다면, Controller에 다수의 Model과 View가 복잡하게 연결되어 Massive ViewController(대규모 MVC 어플리케이션)가 되어버립니다. View와 Model간에도 관계가 복잡하게 연결되어있어서 수정시 테스트가 힘들고, 파악이 어렵기 때문에..

Vue 이벤트 Vue에서 이벤트를 다루는 방법에 대하여 알아보겠습니다. Vue에서는 이벤트를 인라인 이벤트 처리방법과 이벤트 메서드 헨들링 방법이 존재합니다. 1. 인라인 이벤트 Vue의 이벤트의 경우에는 v-on디렉티브를 통해 이벤트를 처리할 수 있습니다. 가장 많이 사용되는 Click이벤트를 구현하여 보겠습니다. 굳 굳 클릭 이벤트의 경우 버튼을 클릭시 변수good의 값이 +1 되는 이벤트를 작성한 코드입니다. 위와 같이 인라인 이벤트의 경우 클릭이벤트에서 원하는 코드를 입력하여 직접 실행하도록 합니다. 하지만 인라인 이벤트의 경우 한계점이 존재합니다. 어떠한 한계점이 존재할까요? 그렇습니다. 이벤트의 코드가 변경되거나 로직이 복잡해졌을 경우입니다. 위에 문제점을 해결 하기 위해 우리는 vue에서는 ..

Vue 디렉티브 디렉티브란 ? HTML 안에서 v-접두사를 사용하는 속성들을 의미합니다. 화면의 요서를 더 쉽게 조작하기 위하여 사용하는 기능들을 의미합니다. 1. v-text 해당 HTML 태그에 text를 표시 할 경우 사용됩니다. innerText와 동일한 기능을 수행합니다. 2. v-if 지정한 뷰데이터 값에 따라 해당 HTML 을 표시하거나 표시하지 않습니다. JAVASCRIPT의 if구문과 같은 방법 사용 가능 flag 값이 1 일 경우 표시 하겠습니다 flag 값이 2 일 경우 표시 하겠습니다 그 외의 값 일 경우 표시하게습니다. 해당 코드를 실행 시킬시 flag값에따라 표시되는 text가 다르다는 것을 확인 할 수 있습니다. 3. v-for 지정한 뷰 데이터 개수만큼 해당 HTML을 반복출..

개발 환경 설정 1. Visual Studio Code : 코드 편집 툴 1) 설치 사용 가능한 코드 편집 프로그램을 설치 하여줍니다. [비쥬얼 스튜디오] : https://code.visualstudio.com/ 추가 확장 프로그램 Auto close Tag : 자동 태그 닫기 Live Server : 코딩을 실시간으로 확인-적용시켜 작업하기 편리 Prettier : 코드 자동 정렬 ESLint : 소스코드를 분석해 문법 에러 vscode-icons : VSCode 내 파일의 아이콘을 설정하여 무슨 파일인지 한번에 파악가능 Vetur : 문법 강조, vue.js 파일 코드의 하이라이팅 지원 Vue VSCode Snippets : 코드 조작 지원, vue.js 파일 초기 구성 생성 2. Node.js N..

문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 조건 n은 길이 10,000이하인 자연수입니다. 입출력 예nreturn 3 "수박수" 4 "수박수박" 나의 풀이 function solution(n) { let answer = ''; for(let i = 1; i

문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을 사용합니다. 4..

문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..

문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를..