타코벨코딩

https://rintiantta.github.io/jpub-vue/guide/chapter1.html 고양이도 할 수 있는 Vue.js Click ※ 버튼을 클릭하면 경고창이 출력됩니다. rintiantta.github.io 이거랑 유튜브 코지코더 뷰 튜토리얼 일요일 공부하깅 낼 결혼식간다이잉

컴포넌트 란 ? [ 화면을 구성할 수 있는 블록을 말한다. 컴포넌트를 활용하면 화면을 빠르게 구조화 할 수 있으며, 일괄적인 패턴으로 코드를 개발 할 수있다, 또한 코드를 재사용 할 수 있다] 그럼 vue.js 에서 컴포턴트란..? vue js에서는 가장 강력한 기능 중 하나이다. 🔥 element 를 확장하여 재사용 가능 한 코드를 캡슐화 하는 데 도움을 준다. 상위 수준에서 컴포넌트는 vue 의 compile 컴파일러 에 의해 동작이 추가 된 사용자 지정 엘리먼트이다. 경우에 따라 특별한 is 속성으로 확장된 원시 html element 로 나타 낼 수도 있다. vue.js Component 생성 2가지가 있다. 1. 전역 global component : 공통적으로 모든 범위의 여러 인스턴스에서 사..

JS 이용한 미니 쇼핑 게임입니다. Javascript 의 fetch API 를 활용하여 데이터 바인딩 하였다. 티셔츠 바지 치마 버튼 과 색상 버튼 에 클릭이벤트를 추가하여 옷의 종류와 색상을 filtering 기능 구현 하였습니다 // Fetch the items from ths JSON file function loadItems() { return fetch("/data/data.json") .then((response) => response.json()) .then((json) => json.items); } 1. 로드 아이템 함수를 생성 우리는 패치를 통해 데이터를 받아 올거야 데이터를 받아온 것이 성공이면 json 형태로 반환 한다. 그리고 json안의 items 리턴한다. // Update ..

Shift + command + 5 그ㄴ만까먹기

자바스크립트 동기 비동기 일단 자바스크립트는 한번에 한가지 일만 한다 단일 스레드에서 동작 - 동기 Synchronous Means : 동시에 발생하는 순차적으로 직렬적으로 테스크를 수행 요청을 보냈으면 응답을 받아야 다음 동작이 실행 =>순차적으로 실행됨으로 어떤 작업이 작업중이면 뒤 작업은 대기상태 블로킹 (작업 중단) 발생한다. - 비동기 Asynchronous : 동시에 발생하지 않는다 병렬적으로 테스크를 수행한다. =>현재 작업의 종료 여부와 상관없이 다음 작업 실행 단점: 동기 방식과 다르게 완료 순서가 보장되지 않는다. 블로킹 발생 하지 않는다. console.log("Hello"); setTimeout(() => { console.log(“coffee..

-for each Array 뒤에 붙여 쓰는 반복문 / 객체만 사용 가능 한 메서드 이다 / 배열의 여러 요소들을 반복하며 작업을 수행한다 array.forEach(function() {} 형식 ! 사용방법 ()파라미터 3개 최대 사용 가능 하다. for 문 i 조건식 없이 콜백함수로 실행이 가능하다 // forEach let lin = ['singer','korean','사랑했잖아']; lin.forEach(function(a,i) { console.log(lin[i]) }) // a 는 lin 의 데이터 하나하나를 의미한다 [['singer','korean','사랑했잖아'];] // i 는 lin 의 인덱스 의미 증가 -for in 반복문 [ object ] for (변수 in 객체) {반복할 코드}..

vue .js 란 자바스크립트 라이브러리 중 하나이다 ... 리액트 보다 문법이 간단해서 많이들 사용한다고 한다. 리액트 공부하면서 어렵다고 많이 느꼈는데 vue .js 공부를 오늘 잠깐 해보니 문법이 훨씬 쉽고 빠르다 Vue js. 능력 자동으로 렌더링이 된다 1. 자주 변경될 데이터들은 스크ㄹ비트로 밑에 저장해둠 {{ 데이터바인딩}} 이거 중괄호 쓰면서 다져다가 쓰세여ㅛㅁ Html속성도 데이터 바인딩 가능 : 속성 = “데이터바인딩 이름” 반복문 사용하는 방법 v- for 이름 라는 어레이를 만들어서 [] 반복하게 만들것이다 필요한 정보를 [] 데이터 안에 담아 두고 이름 In 몇회 반복 =< 이자리에 이름을 넣어준다 vue.js 는 Array , object 넣기 반복문 특이다 그럼 그자료 개수 만..

박스 안에 글씨를 중앙 정렬하고 싶어었는데 align -items: center 사용 하면 먹는다.. 멍청멍청

position : 포지션 말 그대로 상 태 위치 지정요소이다 포지션은 상속이 되지 않는다. relative, absolute, fixed, sticky 중 하나인 요소입니다. 즉, 값이 static이 아닌 모든 요소를 말합니다 static 은 기본값입니다. 포지션을 지정하지 않았을 대 defaut 값 가장 위 top , left 왼쪽에 배치가 된다. static 은 top, left, bottom, right 값을 전부 무시한다 상태 위치 지정 요소는 position 계산값인 relative 요소입니다. 부모 기준의 element 위치 절대적인 위치 값을 설정한다. relative 현재 위치에서 이동! left - right 왼 우 가로축 거리 지정 top-bottom 우 아래 세로 축 거리 지정 절대..

div 안에 text를 가로 세로로 정렬하는 방법을 적어봅니다 자꾸 까먹고 찾아보는 건 이해를 잘 안하고ㅠ 넘어가기 때문인 것 같습니다. 1. text-align: center; text-align 은 가로 정렬을 설정 할 수 있는 속성이다 가운데 정렬을 하기 위해 center 중앙 센터로 설정 했습니다. 2.justify-content 메인축 방향 정렬 display : flex 를 주고 justify-content: center 속성으로 설정합니다. 메인축 방향으로 정렬 (오뎅꼬치 방향으로 정렬) 그 축에서 만 움직인다 !! 3. align 수직축 ( 오뎅을 뜯어내는 방향으로 정렬) 이건 위로 아래로 움직일 수 있다 4. 세로 로 가운데 정렬 padding 사용 padding 100px 0; alig..