전체 글 608

리스트 렌더링

v-for배열을 리스트로 렌더링 > item in tiems 형식의 특별한 문법이 필요items 배열 item 반복되는 엘리먼트의 별칭const items = ref([{ message: 'Foo' }, { message: 'Bar' }])//tem {{ item.message }}//인덱스도 지원const parentMessage = ref('Parent')const items = ref([{ message: 'Foo' }, { message: 'Bar' }])//tem {{ parentMessage }} - {{ index }} - {{ item.message }} v-for 의 변수 범위 (js 와 비슷함) 분해 할당 가능const parentMessage = 'Parent'const items..

JS F-/Vue 2024.05.28

조건부 렌더링

v-if조건부로 블록을 렌더링 하는데 사용, 블록은 표현식이 truthy 값을 반환하는 경우에만 렌더링 v-elsev-if, v-eles-if 엘리먼트 바로 뒤에 오지 않으면 인식되지 않는다.전환Vue는 정말 멋지죠!아닌가요? 😢 v-else-ifelse if 블록 역할, 여러번 연결가능 A B C A/B/C 아님v-eles 와 마찬가지로 v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야함   에서 v-if 제목 단락 1 단락 2else 및 elseif도 사용가능  v-show 안녕!위와 같은 조건부 엘리먼트지만 차이점은 v-show 가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아있다는 것v-show 는 엘리먼트의 display CSS 속성만 전환함 v-if VS v-show v-..

JS F-/Vue 2024.05.28

클래스와 스타일 바인딩

일반적으로 엘리먼트에 데이터를 바인딩하는 이유 : 클래스 목록과 해당 인라인 스타일을 조작하기 위함css, style 처럼 v-bind 를 사용해서 문자열 값을 동적으로 할당 가능, 문자열 외에도 표현식은 객체나 배열로 평가가능 HTML 클래스 바인딩- 객체로 바인딩const isActive = ref(true)const error = ref(null)const classObject = computed(() => ({ active: isActive.value && !error.value, 'text-danger': error.value && error.value.type === 'fatal'}))//tem - 배열로 바인딩 const activeClass = ref('active')const erro..

JS F-/Vue 2024.05.28

계산된 속성

템플릿 자체에 너무 많은 논리를 넣으면 비대해져 유지관리가 어려워 질 수 있다.. 따라서 미리 계산시켜서 템플릿에 노출시켜주자  책을 가지고 있다: {{ publishedBooksMessage }}computed() 함수에는 getter 로 사용될 함수가 전달돼야 하며, 반환되는 값은 computed ref 일반 ref 와 유사하게  계산된 결과를 publishedBooksmessage로 접근, 계산된 ref는 템플릿에서 자동으로 언래핑, .value 없이 참조 가능 계산된 캐싱 vs 메서드 {{ calculateBooksMessage() }}// 컴포넌트 내에서function calculateBooksMessage() { return author.books.length > 0 ? 'Yes' : '..

JS F-/Vue 2024.05.27

반응형 기초(컴포지션 API)

반응형 상태 선언 ref() 컴포지션 API 에서 반응형 상태를 선언하는 권장 방법은 ref() 함수를 사용하는 것 import { ref } from 'vue'const count = ref(0)ref() 는 인수를 가져와서 .value 속성이 있는 ref 객체에 래핑하여 반환 const count = ref(0)console.log(count) // { value: 0 }console.log(count.value) // 0count.value++console.log(count.value) // 1참고 https://ko.vuejs.org/guide/typescript/composition-api.html#typing-ref싱글파일 컴포넌트 https://ko.vuejs.org/guide/scaling..

JS F-/Vue 2024.05.27

템플릿 문법

텍스트 보간법 데이터 바인딩의 가장 기본적인 형태는 Mustache(이중 중괄호) {{   }}속성 바인딩v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지 바인딩 값이 null 또는 nudefined이면 엘리먼트의 속성이 제거된 상태롤 렌더링 단축 문법불리언 특성버튼truthy 값이 있는경우 ture / 그 외 falsy 의 경우 속성 생략 여러 속성을 동적으로 바인딩 여러 속성을 나타내는 JavaScript 객체가 있는 경우const objectOfAttrs = { id: 'container', class: 'wrapper', style: 'background-color:green'}//template자바스크립트 표현식 사용 지금까지는 템플릿의..

JS F-/Vue 2024.05.27

API 스타일

옵션 API data, methods, mounted 같은 객체를 사용, 컴포넌트의 로직을 정의. 옵션으로 정의돈 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됨  숫자 세기: {{ count }}컴포지션 API import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의. SFC에서 컴포지션 API는 일반적으로  숫자 세기: {{ count }}* 사실 옵션 API는 컴포지션 API 위에 구현 그렇다면 무엇을 사용?? 옵션 API는 일반적으로 OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘 맞는  "컴포넌트 인스턴스"(예제의 this)의 개념을 중심으로 하며 반응형 세부 사항을 추상화하고 옵션 그룹을 통해 코드 구조를 실행하여 초보자에게 더 친숙 컴포..

JS F-/Vue 2024.05.27

PHP 개요

서버 사이드에서 자주 사용하는 언어 브라우저의 요청 HTML 문서에 서버 사이드 스크립트 언어의 코드가 포함되어 있으면, 서버는 이 부분을 처리하고 결과를 브라우저로 반환. 동적 웹 페이지: 서버에 미리 저장된 파일이 아닌 서버에 있는 데이터들을 서버 사이드 스크립트 언어로 가공하여 생성되는 페이지 PHP 의 특징 1. 대부분의 웹 서버에서 지원 1. 작성해야하는 코드의 양이 적다(?) 1. 텍스트 처리에 특화 - HTML 문서 처리에 적합(?) PHP 의 단점 1. 간단한 사이트 제작을 위한 언어로써 복잡한 사이트에 효율이 떨어진다. 1. 보안에 안전하지 않다. 버전별 주요 특징 5 -> 객체 지향 프로그래밍의 개념이 많이 추가 5.3 -> 네임스페이스가 추가 5.4 -> 단일 상속의 한계를 없앤 트레..

Language/PHP 2024.04.21

데이터 정규화

제 1정규화 : 한칸엔 하나의 데이터만!회원번호회원이름프로그램1김민수헬스2강만수테니스3최민식골프3최민식탁구제 1정규형 테이블 제 2정규화 : 현재 테이블의 주제와 관련없는 컬럼을 다른 테이블로 빼는 작업* 현재 테이블은 수강등록현황 테이블* 정확한 명칭은 partial dependency 를 제거한 테이블 ex) 가격은 프로그램에 종속되어 있음 이걸 제거하면 됨* Composite primary key : 합하면 primary key 기능을 할 수 있는 컬럼. 회원번호 회원이름 프로그램 가격납부여부1 김민수 헬스 500002 강만수 테니스 800013 최민식 헬스 500014 최민식 탁구 60000 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓..

DB/MariaDB 2024.03.22

git 명령어 몇 가지

git 명령어 현재 프로젝트 파일에 git init > git 사용 시작 git add (staging area / add 하는것을 스테이징 한다라고 한다.) git commit -m '메모' (repository) 여러개 git add test1.text test2.text git add . 전체 git status 어떤걸 스테이징 했는지, 어떤걸 까먹었는지 확인 가능 git log --all --oneline 깃 로그를 보고 싶다 git log --all --oneline --graph 그래프형식으로 보여줌 git diff 최근 커밋 vs 현재파일 차이 git difftool > 툴처럼 보여줌 git difftool '커밋아이디' > 특정커밋 확인가능 :q or :qa 종료 git branch '브랜..

Git 2024.03.20

같은 숫자는 싫어

문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나 ..

기능개발

문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자..

올바른 괄호

올바른 괄호 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 제한사항 문자열 s의 길이 : 100,000 이하의 자연수 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다. 입출력 예 s answer "()()" true "(())()" true ")()(" false "(()(" false ..

전화번호 목록

전화번호 목록 문제 설명 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요. 제한 사항 phone_book의 길이는 1 이상 1,000,000 이하입니다. 각 전화번호의 길이는 1 이상 20 이하입니다. 같은 전화번호가 중복해서 들어있지 않습니다. 입..

위장

위장 문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clo..

폰켓몬

폰켓몬 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 ..

JadenCase 문자열 만들기

JadenCase 문자열 만들기 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 입출력 예sreturn "3people unFollowed me" "3people Unfollowed Me" "for ..

제일 작은 수 제거하기

제일 작은 수 제거하기 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한 조건 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 입출력 예arrreturn [4,3,2,1] [4,3,2] [10] [-1] import java.util.*; class Solution { public int[] solution(int[] arr) { int[] answer = Arrays.stream(a..

나누어 떨어지는 숫자 배열

나누어 떨어지는 숫자 배열 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예arrdivisorreturn [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1] 입출력 예 설명 입출력 예#1 arr의 원소 중 5로 나누어 떨어지는 원소는 ..

평균 구하기

평균 구하기 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 arrreturn [1,2,3,4] 2.5 [5,5] 5 import java.util.*; class Solution { public double solution(int[] arr) { return Arrays.stream(arr).asDoubleStream().average().getAsDouble(); } }

알고리즘 2023.02.16

서울에서 김서방 찾기

서울에서 김서방 찾기 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. 입출력 예seoulreturn ["Jane", "Kim"] "김서방은 1에 있다" import java.util.*; class Solution { public String solution(String[] seoul) { int idx = A..

문자열 내 p와 y의 개수

문자열 내 p와 y의 개수 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 제한사항 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 입출력 예sanswer "pPoooyY" true "Pyy" false 입출력 예 설명 입출력 예 #1 'p'의 개수 2개, 'y'의 개수 2개로 같으므로 t..

문자열을 정수로 바꾸기

문자열을 정수로 바꾸기 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. class Solution { public int solution(String s) { return Integer.parseInt(s); } }

자릿수 더하기

자릿수 더하기 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 입출력 예Nanswer 123 6 987 24 입출력 예 설명 입출력 예 #1 문제의 예시와 같습니다. 입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다. import java.util.*; import java.util.stream.*; public class Solution { public int solution(int n) { return Arrays.stream(Stream.of(String.va..

정수 내림차순으로 배치하기

정수 내림차순으로 배치하기 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. 입출력 예nreturn 118372 873211 import java.util.*; class Solution { public long solution(long n) { String[] arr = String.valueOf(n).split(""); Arrays.sort(arr); StringBuilder sb = new StringBuilder(); for (String s : arr) { sb.append(s)..

콜라츠 추측

콜라츠 추측 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 –1을 반환해 주세요. 제..

알고리즘 2023.02.16