타코벨코딩

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

자바스크립트 동기 비동기 일단 자바스크립트는 한번에 한가지 일만 한다 단일 스레드에서 동작 - 동기 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 넣기 반복문 특이다 그럼 그자료 개수 만..

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..

기능 구현 이다 버튼안에 창 alert 을 닫고 여는 기능을 구현 하였다. display: none, block 을 사용하였다. 졸리다 내일 나머지 정리해서 올린다 적은 종이나 찾자...나 개발 할 수 있ㄲㅈ,,ㅣㅣ

float 띄우기 개념 flex 줘도 되지만 float 를 사용할 수 있음 특징 float 를 사용 할 때 반듯이 float: left; float: right; html > float 쓰는 박스 맨 밑에 다가 박스를 만들거 그안에 주어야 한다 css 인데 배경 이미지 넣는 방법 background-image: url() 을 사용하면 ㄷㅚㄴ다 크기는 background-size: cover [이미지를 꽉 채우고싶다! ] width: 50% height 350px 그리고 div box 4개 만들고 싶나면 [float: left, width: 50;] 주면 가로 배열 2열이 생성이 된다!!!!!!!!! 우와우왕 클래스 네임 똑 같이 주어야지만 보인다잉 이미지가 줄어드는 장면을 구현하고 싶다면 그위에 박스 하..

리덕스 = 자바스크립트 중 라이브러리 이다 npm i redux react-redux 먼저 사용하기 위해서 터미널 창에 install 해주세요! 왜 리덕스쓰는 이유 2가지 1. 모든 컴포넌트가 props 없이 state에 직접 꺼내 쓸 수 있다. 2. 상태 관리가 용이하다(유지보수 좋다) 설명: 상태 / 한 곳에 관리 가능하다 관리 / 추적이 쉽다 설명 🫵🏻🫵🏻 리액트 에서 부모 컴포넌트 자식컴포넌트가 있다 자식에게 부모 컴포넌트를 주기 위해 우리는 props 를 사용한다. state 변수에 props 전송 하는 방법이 useState ! 좀 더 편리 한 방법으로 전송하기위해 직접주는게 아니라 필요 할 때 내가 꺼내 쓸 수 있도록 하는 것 이다. Life Cycle 라이프 싸이클 개념 알고가기 컴포넌트 ..