전체 글505

• 

  [JS] Axios 1. Axios Promise 기반 HTTP라이브러리다. Promise Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise 2. 설치 npm, bower, yarn 등 여러 방식이 있다. https://axios-http... 기록/FRONTEND 2022. 5. 24.

• 

  [BOJ] 13458 시험감독 - JAVA 1. 문제 13458번: 시험 감독 첫째 줄에 시험장의 개수 N(1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 각 시험장에 있는 응시자의 수 Ai (1 ≤ Ai ≤ 1,000,000)가 주어진다. 셋째 줄에는 B와 C가 주어진다. (1 ≤ B, C ≤ 1,000,000) www.acmicpc.net 총 N개의 시험장이 있고, 각각의 시험장마다 응시자들이 있다. i번 시험장에 있는 응시자의 수는 Ai명이다. 감독관은 총감독관과 부감독관으로 두 종류가 있다. 총감독관은 한 시험장에서 감시할 수 있는 응시자의 수가 B명이고, 부감독관은 한 시험장에서 감시할 수 있는 응시자의 수가 C명이다. 각각의 시험장에 총감독관은 오직 1명만 있어야 하고, 부감독관은 여러 명 있어도 된다. 각 시험장마다 응시생.. 코딩테스트/BOJ 2022. 5. 23.

• 

  [BOJ] 11559 PuyoPuyo - JAVA 1. 문제 11559번: Puyo Puyo 총 12개의 줄에 필드의 정보가 주어지며, 각 줄에는 6개의 문자가 있다. 이때 .은 빈공간이고 .이 아닌것은 각각의 색깔의 뿌요를 나타낸다. R은 빨강, G는 초록, B는 파랑, P는 보라, Y는 노랑이다. www.acmicpc.net 뿌요뿌요의 룰은 다음과 같다. 필드에 여러 가지 색깔의 뿌요를 놓는다. 뿌요는 중력의 영향을 받아 아래에 바닥이나 다른 뿌요가 나올 때까지 아래로 떨어진다. 뿌요를 놓고 난 후, 같은 색 뿌요가 4개 이상 상하좌우로 연결되어 있으면 연결된 같은 색 뿌요들이 한꺼번에 없어진다. 이때 1연쇄가 시작된다. 뿌요들이 없어지고 나서 위에 다른 뿌요들이 있다면, 역시 중력의 영향을 받아 차례대로 아래로 떨어지게 된다. 아래로 떨어지고 나서.. 코딩테스트/BOJ 2022. 5. 22.

• 

  [BOJ] 16235 나무재테크 - JAVA 1. 문제 16235번: 나무 재테크 부동산 투자로 억대의 돈을 번 상도는 최근 N×N 크기의 땅을 구매했다. 상도는 손쉬운 땅 관리를 위해 땅을 1×1 크기의 칸으로 나누어 놓았다. 각각의 칸은 (r, c)로 나타내며, r은 가장 위에서부터 www.acmicpc.net 봄에는 나무가 자신의 나이만큼 양분을 먹고, 나이가 1 증가한다. 각각의 나무는 나무가 있는 1×1 크기의 칸에 있는 양분만 먹을 수 있다. 하나의 칸에 여러 개의 나무가 있다면, 나이가 어린 나무부터 양분을 먹는다. 만약, 땅에 양분이 부족해 자신의 나이만큼 양분을 먹을 수 없는 나무는 양분을 먹지 못하고 즉시 죽는다. 여름에는 봄에 죽은 나무가 양분으로 변하게 된다. 각각의 죽은 나무마다 나이를 2로 나눈 값이 나무가 있던 칸에 양분.. 코딩테스트/BOJ 2022. 5. 21.

• 

  [JS] Module 1. Module 프로그램을 기능별로 여러 개의 파일로 나누는 형태. 2. 내보내기 : export 1) 선언하면서 내보내기 export const title = '계산기 모듈'; export function add(i, j) { return i + j; } export function sub(i, j) { return i - j; } 2) 내보내기 위한 상수, 메서드 지정 const title = '계산기 모듈'; function add(i, j) { return i + j; } function sub(i, j) { return i - j; } //내보내기 위한 상수, 메서드 지정 export { title, add, sub }; 3) json 객체로 내보내기 key:value 형태임에 주의한다. ex.. 기록/FRONTEND 2022. 5. 20.

• 

  [Vue] Component 1. Component HTML elemet를 확장해 재사용 가능한 코드를 캡슐화한다. Vue Component는 Vue instance이기도 하기 때문에 모든 옵션 객체를 사용한다. (루트에만 사용하는 옵션 객체는 제외된다.) Life Cycle Hook도 사용가능하다. data 옵션은 반드시 함수여야 한다. 2. 컴포넌트 등록 컴포넌트 이름은 케밥 표기법을 권장한다. (ex. my-component) 전역 컴포넌트 Vue.component('컴포넌트-이름', { template:'사용자 정의 컴포넌트 입니다!' }) 지역 컴포넌트 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다. new Vue({ // ... componen.. 기록/FRONTEND 2022. 5. 19.

• 

  [Vue] Event DOM 이벤트를 듣기 위해 v-on directive를 사용한다. 이벤트가 트리거될 때 javascript를 실행한다. 1. method 이름 v-on에 이벤트 발생 시 처리해야하는 method의 이름을 받아서 처리한다. 클릭 2. inline javascript 메소드 이름을 직접 바인딩하는 대신 인라인 javascript 구문에 메소드를 사용할 수 있다. 클릭 3. $event 원본 DOM 이벤트에 엑세스해야하는 경우 특별한 $event 변수를 사용해 메소드에 전달한다. Greet greet: function (e, msg) { if (e) e.preventDefault(); alert('Hello ' + msg + '!'); } 4. 이벤트 수식어 $event로 DOM이벤트에 접근할 수 있지만, m.. 기록/FRONTEND 2022. 5. 18.

• 

  [Vue] Vue Instance 1. el Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element를 사용한다. 2. data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이지만, 함수 형태를 권장한다. 3. method 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다. 보간법으로 method를 부를 때 ()를 빠뜨리지 않아야 한다. 하지만 @click 등 이벤트 처리에 파라미터가 없는 method를 사용할 경우는 method 이름만 써도 가능하다. method 안에서 데이터를 접근할 때는 "this.데이터이름"으로 접근해야한다. 이 코드는 reversedMsg()를 호출해서 message를 뒤집은 값을 .. 기록/FRONTEND 2022. 5. 17.

• 

  [Vue] Directives 1. 디렉티브 - v-접두사가 있는 특수 속성이다. - 디렉티브 속성 값은 단일 Javascript 표현식이 된다.(v-for는 예외) - 디렉티브의 역할은 표현식의 값이 변경될 때 사이트 이펙트를 반응적으로 DOM에 적용하는 것이다. 2. 종류 v-text v-model v-show v-once v-bind v-if v-html v-for v-else-if v-cloak v-on v-else 1) v-text 데이터 바인딩의 가장 기본 형태인 {{속성명}} 이중 중괄호를 사용한 것과 동일하다. 이렇게 코드를 작성하면 속성값으로 렌더링된다. 2) v-once 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행할 수 있다. {{속성명}} 3) v-html 속성값을 텍스트가 아닌 HTML로 데이터를 출력한.. 기록/FRONTEND 2022. 5. 16.

• 

  [Vue] Vue.js 1. Vue.js 사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework. 특징 1. Approachable (접근성) 2. Versatile (유연성) 3. Performant (고성능) 2. MVVM Pattern - Model + View + ViewModel - Model : 순수 자바스크립트 객체 - View : 웹페이지 DOM - ViewModel : Vue 역할. view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다. 3. 사용방법 방법은 간단하다. html header에 이 script를 추가하고 뷰 인스턴스를 생성하면 된다. 4. Vue Instance 뷰 인스턴스는 HTML의 특정 범위 안(el 속성)에서만 옵션 속성들이 적.. 기록/FRONTEND 2022. 5. 15.

• 

  [MYSQL] 그룹함수 1. 다중행 함수 하나의 값이 아닌 값들의 집합에 대해서 동작하는 함수다. COUNT COUNT(필드) 선택된 필드에서 특정 조건을 만족하는 레코드의 총 개수를 반환한다. 없다면 0을 반환한다. 중복된 값을 제외하려면 DISTINCT 키워드를 사용한다. MIN/MAX MIN(필드), MAX(필드) 선택된 필드에 저장된 값 중 가장 작은값/큰값을 반환한다. SUM SUM(필드) 선택된 숫자타입의 필드에 저장된 값의 총 합을 반환한다. AVG AVG(필드) 선택된 숫자타입의 필드에 저장된 값의 평균값을 반환한다. 2. 단일행 함수 문자열 함수 LENGTH() LENGTH('문자열') 전달받은 문자열의 길이 반환 CONCAT() CONCAT('문자열','문자열', ..) 전달받은 문자열을 모두 결합하여 하나의.. 기록/DB 2022. 5. 14.

• 

  [MYSQL] DCL(Data Control Language) 1. 사용방법 WITH GRANT OPTION : 권한을 다른 사용자에게 부여 가능 여부를 결정하는 옵션이다. 접속경로로 '%'를 설정하면 외부접속을 모두 허용한다. 계정 생성 시 [IDENTIFIED BY 암호]를 넣지 않으면 비밀번호 없는 계정을 생성한다. -- 계정 생성 CREATE USER 계정명@접속경로 [IDENTIFIED BY 암호] -- 권한 부여 GRANT 권한종류 ON 대상(DB명.테이블명) TO 계정명@접속경로 [WITH GRANT OPTION]; -- 설정한 권한 적용 FLUSH PRIVILEGES; -- 권한 확인 SHOW GRANTS FOR 계정명@접속경로 -- 권한 해제 REVOKE 권한종류 ON 대상(DB명.테이블명) TO 계정명@접속경로; 권한 종류 CREATE, ALTER.. 기록/DB 2022. 5. 13.