profile
뚜벅뚜벅

Vue instance

vue instance 란인스턴스는 Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 필수 단위이다.vue instance 생성자Vue 생성자 함수를 이용하여 인스턴스를 생성하는 방법은 아래와 같다.Vue 객체를 생성할 때 아래와 같이 data, template,

2022년 9월 17일
·
0개의 댓글
·

[vue] computed로 버튼 validation 체크 로직 구현

value 확인해서 button validation check

2022년 8월 26일
·
0개의 댓글
·

[vue] vue router 로 데이터 전달

router에 params 전달하기

2022년 8월 26일
·
0개의 댓글
·

[JS] findIndex()

내가 누른 아이의 인덱스를 찾고 싶을 때

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

[vue-router] html5 히스토리 모드

vue-router가 경로를 처리할 때 hash mode와 history mode가 있다. vue-router의 기본 모드는 hash mode이다.URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다. 해시를 제거하기

2022년 8월 15일
·
0개의 댓글
·

코드 스플리팅

app.js안에 모든 페이지의 정보가 들어있음.실질적인 application에서는 화면의 갯수가 많아짐.한 번에 로딩해오는 건 굉장한 시간이 걸림예를 들어, 30개의 페이지가 있을 경우 처음 페이지는 로그인 페이지라고 했을 때, 첫 페이지만 들고오고 나머지 29 페이지

2022년 8월 15일
·
0개의 댓글
·

[JS] replace() 함수

javascript replace()

2022년 8월 2일
·
0개의 댓글
·
post-thumbnail

[git] 커밋하지 않고 임시 저장git stash

git stash

2022년 7월 27일
·
0개의 댓글
·

v-show 와 v-if 차이점

v-if은 조건부로 블록을 렌더링하는 데 사용된다.블록은 지시문 표현식이 진실 값을 반환하는 경우에만 렌더링된다.요소를 조건부로 표시하는 또 다른 옵션은 v-show차이점은 v-show 요소가 항상 렌더링되고 DOM에 남아 있다는 것이다. v-show는 요소의 CSS

2022년 7월 27일
·
0개의 댓글
·

[JS] 빈 객체 체크하는 법

Object.keys(obj).length === 0

2022년 6월 21일
·
0개의 댓글
·

웹뷰란?

웹뷰란? 🤔 사실 우리 앱도 웹뷰로 이벤트 페이지를 개발하고 있다. 웹뷰의 존재는 알고 있었지만, 오늘 웹뷰에 이슈가 있어 직접 코드를 수정한 기념으로 웹뷰에 대하여 기록해볼까 한다. 대부분 앱 서비스들이 네이티브로만 개발하는게 아니라 일부 페이지는 웹뷰로 개발해서 넣는다고 한다. 그 이유는 무엇이고, 장단점이 무엇인지 알아보자. 네이티브로 개발하지 ...

2022년 5월 16일
·
0개의 댓글
·

[CSS] 공백 처리 방법 / 개행처리

현재 회사 서비스 앱에서 웹뷰로 페이지를 불러오는 경우가 존재한다. 오늘은 그 웹뷰에서 개행처리가 되지 않아 나는 문제가 있고, 아래와 같은 방법으로 해결했다. 해결 방법 whit-space 요소 안에 공백 처리를 어떻게 할 지 지정하는 속성 white space란 여백이라고도 하는데 Html에서는 공백, 공란으로 이해하면 된다. 개행처리를 위해서는 코드...

2022년 5월 16일
·
0개의 댓글
·

[vue] emit 부모 컴포넌트로 이벤트 전달

this.$emit('childData', childData)받아올 다른 Component에서는 @emit으로받아올event명="현재 컴포넌트에서 사용할 Event 명" 형식으로 선언하고,emit을 사용하는 Component에서 this.$emit('@에서 작성한 em

2022년 4월 12일
·
0개의 댓글
·

[JS] break, return false 차이점

return 함수 안에서 return 명령문을 만나면 함수의 실행은 그 지점에서 중단된다. 값을 제공한 경우 함수를 호출한 곳으로 돌아가서 그 값을 반환하여 계속 실행한다. break 현재 반복문, switch문, label문을 종료하고, 그 다음 문으로 프로그램 제어를 넘긴다. 여러번 반복되는 for, switch, while 등의 루프의 경우에 해당...

2022년 4월 8일
·
0개의 댓글
·

[JS] isNaN()

건강포지션의 value값들이 NaN이기 때문에 type이 ‘HealthPositionPoint’일 경우와 value 값들이 null, undefined이 아닐 경우 조건을 따져 if문 생성확인해주어야 하는 키들로 tmpArr 만들어준다Item.value들의 키들로 fo

2022년 4월 7일
·
0개의 댓글
·

[JS] Selection and Range

javascript는 기존 선택을 가져오고, 전체 또는 부분적으로 모두 선택/선택 취소하고, 문서에서 선택한 부분을 제거하고, 태그로 감싸는 등의 작업을 수행할 수 있다. 선택한 기본 개념은 Range기본적으로 한 쌍의 "경계점"인 범위 시작과 범위 끝이다. 각 점은

2022년 3월 17일
·
0개의 댓글
·
post-thumbnail

DOM Node

노드 node HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다. HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다. DOM을 이용하여 노드 ...

2022년 3월 15일
·
0개의 댓글
·

iframe 반응형

iframe html 인라인 프레임으로, 별도의 외부의 웹 페이지 문서를 테이블이나 이미지와 같은 특정 위치에 삽입하는 기능이다. 🔎 문제 반응형 작업을 진행중이었고, 화면에 맞게 iframe의 css 수정이 필요했다. 💡 해결방안 부모요소에 width: 100% 로 설정하고 height: 0 으로 설정해주고, padding-top: 56% 을 넣...

2022년 2월 22일
·
0개의 댓글
·

typescript에서 file import 에러 해결!

typescript로 이미지를 불러올 때 에러가 났다. 이 에러를 해결해보자!! @types/global/index.d.ts 생성 프로젝트 디렉토리 root 레벨에 @types/global/index.d.ts 폴더 및 파일을 생성한다. index.d.ts 작성 허용할 확장자를 적어준다. tsconfig.json tsconfig.json - compil...

2022년 2월 7일
·
0개의 댓글
·

[pre-onboarding] CSS 발전과정

CSS, CSS in CSS, CSS in JS CSS 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 합니다. css의 가장 대표적인 문제점으로 어디에 선언하더라도 항상 global namespace를 가진다. CSS 로드 순서에

2022년 1월 26일
·
0개의 댓글
·