profile
늦은만큼 코막고 달려!

Vue.js - 조건문

조건문을 만들어 조건대로 함수를 수행할 수 있다.프로그램의 언어마다 조건문을 사용할 수 있다. vue.js에서는 v-if를 사용하여 조건문을 수행할 수 있다. 조건문이 들어맞을 경우에만 프론트엔드에 렌더링 할 수 있다.밑의 코드에서는 if, else if, else문을

6일 전
·
0개의 댓글
·
post-thumbnail

vue.js -클래스 스타일 바인딩

js를 사용하면서 classList.add를 통해서 html의 요소에 클래스를 동적으로 추가하는 경우가 있다.예) 팔로우, 추가된 요소 동적할당 등.지금 이 페이지에서 알아볼 내용은 js에서 사용했던 동적 추가를 데이터의 바인딩을 통해서 클래스 스타일을 바인딩하는 방법

7일 전
·
0개의 댓글
·
post-thumbnail

Vue.js - watch 속성

watch 속성에 대해 배우고 기록한다.데이터의 변형을 감지하고 계산을 수행하는 함수로, 기본적으로 Computed 속성과 매우 유사하다.watch 속성은 computed 속성보다 코드의 양이 늘어나게 되지만, Computed 속성을 쓸 수 없을 상황에서 유용하다.기본

2023년 9월 19일
·
0개의 댓글
·

Vue.js - computed속성

computed 속성이란? 데이터와 흡사하며 어떠한 값을 계산된 값으로 제공해주는 속성을 정의한다.사용 예시)예를 들어 3개의 변수가 있고 그 3개의 변수를 하나로 합치려고 할 때 join()과 같은 제공함수를 사용하게 된다. 하지만 computed 속성을 사용할 경우

2023년 9월 12일
·
0개의 댓글
·

Vue.js 데이터 양방향

이벤트 키워드를 통해서 버튼을 입력하였을 때, 데이터를 변화하고 수신할 수 있다.keyup키워드를 이용하여 키를 입력할 시, methods를 실행하도록 한다.사용방법@keyup.(키번호or키명칭).ctrl.alt.shift.meta사용 방법모든 뷰 핸들러 함수와 표현식

2023년 9월 11일
·
0개의 댓글
·

Vue.js - data, methods

Data > 객체 혹은 함수의 형태로 vue 인스턴스가 사용할 정보를 가지고 있는 속성. Data의 선언 위의 예제는 data를 사용하는 방법을 나타낸 코드로, 프론트엔드에 data를 나타내기 위해선 {{}} 안에 data로 선언한 객체의 명과 객체 속성 이름을

2023년 9월 11일
·
0개의 댓글
·

vue.js - basic

입력할 데이터는 v-bind:value를 통해 데이터를 바인딩 할 수 있다.사용방법함수 응용 방법버튼 같이 어떤 상호작용을 수행했을 때 발동하는 함수를 의미한다.onclick 함수를 이용하여 특정한 함수를 호출했을 경우, v-on:click을 통해서 new Vue에 정

2023년 9월 11일
·
0개의 댓글
·
post-thumbnail

Vue.js

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계. 기존의 프로젝트를 다 전환할 필요없이 점진적으로 전환할 수 있음.직접 script를 추가하여 프로젝트에 추가할 수 있음.vue.js를 사용하

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

프로그래머스 - 조이스틱

만들고자 하는 이름이 매개변수로 주어질 때 조이스틱 조작 횟수의 최솟값을 찾는 형식이다.필요사항1 : 조이스틱 위 아래 방향 결정.알파벳을 아스키코드 값으로 변경하여 값이 Z에 가까운지 A에 가까운지 비교한 후, Z에 가까운 경우를 탐지하여 조이스틱의 방향을 결정.필요

2023년 9월 6일
·
0개의 댓글
·
post-thumbnail

프로그래머스 두 원 사이의 정수

x^2 + y^2 = r^2 을 이용한다.모든 값은 제 1사분면, 2사분면 3사분면, 4사분면 다 동일하다. 제 1사분면 값만 구해서 4배를 하는 것이 편하다.(단 x축과 y축에 겹치는 점은 4배를 하면 안된다.제외.)작은 원과 큰 원간의 x축 값을 하나씩 확인하면서

2023년 9월 6일
·
0개의 댓글
·
post-thumbnail

프로그래머스 - 연속된 부분 수열의 합

합 k가 매개변수로 주어졌을 때, 수열에서의 총 합을 구했을 때, 합이 k와 같을 경우 해당 수열의 첫 자릿수를 찾고 마지막 자릿수를 (i,j) 형식으로 배열로 저장한다.해당 하는 k의 합의 배열을 저장해둔 값에서 j-i를 했을 때 가장 최솟값을 구하여 그 해당하는

2023년 9월 5일
·
0개의 댓글
·

프로그래머스-요격시스템

https://school.programmers.co.kr/learn/courses/30/lessons/181188 문제는 다음과 같다. 문제 해석 > 이 문제는 2차원 공간에서 미사일이 발사된 범위를 제공하였을 때 모든 폭격 미사일을 요격하기 위해 필요한 요격

2023년 9월 5일
·
0개의 댓글
·
post-thumbnail

프로그래머스-단체사진 문제

https://school.programmers.co.kr/learn/courses/30/lessons/1835이 문제를 푸려면 순열을 이해해야한다.제한 조건1 <= n <= 100data의 원소는 다섯 글자로 구성된 문자열이다. 각 원소의 조건은

2023년 9월 5일
·
0개의 댓글
·
post-thumbnail

Todolist - 구상 및 구현

개요 Spring FrameWork를 이용하여 배웠던 기술들을 활용한다. 배웠던 기술들을 복습하여 코딩에 익숙해지도록 노력한다. 사용할 툴 백엔드 STS 프론트 엔드 Visual Studio 사용할 기술 Spring FrameWork ajax JavaScri

2023년 9월 4일
·
0개의 댓글
·
post-thumbnail

AWS로 FreeTier 데이터베이스 구현

Amazon Web Services의 약자로 전 세계적으로 분포한 데이터 센터에서 175개가 넘는 기능의 서비스를 제공하는, 세계적으로 가장 포괄적이며, 널리 채택되고 있는 클라우드 플랫폼AWS가 유명한 이유는 많은 개발자들이 도메인을 통해 프로젝트를 배포할 때 아마존

2023년 9월 4일
·
0개의 댓글
·
post-thumbnail

카카오 API 로그인 구현

목적 > 카카오 REST API를 사용하여 카카오 서버로 부터 로그인을 구현한다. REST API를 사용하는 법에 대해 간략히 설명 > - REST API는 사용자가 웹서버에게 계정 정보를 전달해주고 웹서버는 카카오 측에 앱키와 함께 계정정보를 전달, 받은 앱키와

2023년 8월 30일
·
0개의 댓글
·
post-thumbnail

SPRING-구글 REST API로 로그인 구현

목표: 구글 로그인을 구현한다.구글 클라우드 서비스에서 콘솔 -> API 및 서비스로 접속 새 프로젝트 작성2.oauth 동의화면을 들어가 USER TYPE(외부)을 등록.범위를 입력범위를 입력해도 되지만 default값으로 설정 가능default 값은 이메일, 프로필

2023년 8월 28일
·
0개의 댓글
·
post-thumbnail

artstroke 게시판(7)

게시판 삽입게시판 삭제게시판 수정게시판 상세페이지 <─★좋아요팔로잉(작가에 대해서만)게시판 상세페이지(2)게시판 상세페이지 4-1. 팔로우4-2. 좋아요4-3. 댓글좋아요 기능은 게시판에 대한 추천 기능을 생각하면 편하다.좋아요를 눌러 하트를 활성화하면 게시판의

2023년 6월 28일
·
0개의 댓글
·
post-thumbnail

artstroke 게시판(6)

게시판 삽입게시판 삭제게시판 수정4\. 게시판 상세페이지좋아요팔로잉(작가에 대해서만)전 시간까지 게시판 삽입, 삭제, 수정에 대해서 알아보았다. 이제 게시판의 상세페이지를 뜯어보면서 세세한 기능을 구현해보도록 하겠다.이 프로젝트는 상업적인 활동을 하지 않습니다.이것이

2023년 6월 28일
·
0개의 댓글
·
post-thumbnail

artstroke 게시판(5)

게시판 삽입2\. 게시판 삭제게시판 수정게시판 상세페이지좋아요팔로잉(작가에 대해서만)게시판 삭제를 구현해보자.삽입된 게시판에는 고유의 게시판 id가 기록되어있다. 그리고 로그인한 아이디와 게시판을 만든 아이디가 일치할 때 삭제 버튼을 활성화 해야한다. 다음은 그것을 구

2023년 6월 28일
·
0개의 댓글
·