이안의 평일코딩

slot으로 부모 -> 자식 데이터 전송법 FilterBox.vue (자식) 1. 자식 컴포넌트에서 데이터를 받아오고 싶은 곳에 을 넣는다. (출력될 위치) Container.vue (부모) {{filter}} 2. 태그사이에 데이터를 넣는다. slot 여러개 사용하기 name 속성을 주면 된다. (복잡하니 그냥 props 쓰자) FilterBox.vue (자식) 1. Container.vue (부모) 데이터1 데이터2 2. 보낼거 slot props slot 사용할 때 부모가 자식데이터 필요한 경우. FilterBox.vue (자식) 1. Container.vue (부모) {{작명.msg}} 2. 부모는 {{작명.자식데이터}} slot의 한계 slot은 HTML에만 가능하고 속성안에는 쓸 수 없다. 즉..

배열에 값 추가 .unshift() 배열의 맨 앞값 추가 .push() 배열의 맨 뒷값 추가 var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var unshift = fruits.unshift("Grape"); console.log(fruits); //"Grape","Apple", "Banana", "Orange", "Strawberry" var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var push = fruits.push("Grape"); console.log(fruits); //"Apple", "Banana", "Orange", "Strawberry","Grape" 배열에 값 제거 .sh..

이미지 업로드한 것을 HTML에 보여주려면 두가지 방법이 있다. FileReader() : 파일을 글자로 변환해준다. URL.createObjectURL() : 이미지의 가상 URL을 생성해준다. (다만 새로고침하면 사라진다.) => background-image속성으로 집어넣으면 된다. multiple을 넣으면 다수의 파일을 선택할 수 있다. accept="image/*"를 넣으면 이미지 파일을 가져올 수 있게 기본으로 설정된다. var file = e.target.files; file[0].type과 같이 자바스크립트에서 .type 사용하면 image/png 와 같이 확장자 검사가 가능하다. 조건문을 사용해 일부 확장자만 가능하게끔 설정을 해주면 된다. App.vue URL.createobjectUR..

z-index 웹사이트를 제작하는데 왼쪽사진과 같이 Navbar위로 이미지가 상단으로 올라가 당황했다. 하나만 기억하면 된다. 바로 CSS에 z-index로 우선순위를 매기면 되는 것. .Header { position: fixed; color: white; font-family: 'NanumSquare', sans-serif; background-color: #11ffee00; font-size:40px; font-weight: 400; width: 100%; height: 80px; top: 0; z-index:1; } Header라는 className을 가진 Navbar에 z-index:1을 넣어주면 가장 최상단으로 올라가 해결된다. z-index의 숫자가 낮을수록 우선순위로 밀리고 높을수록 우선순..

헤더 스크롤 시 디자인 변경 Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으로도 올려본다. iancoding.tistory.com/216 [Vue] 스크롤 시 헤더 색 변경 1. 먼저 data에 scrollPosition을 null값으로 넣어준다. 2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다. 3. mounted를 통해 위의 updateScroll()이 발생하도록.. iancoding.tistory.com Vue는 위의 블로깅을 참조. Header.js import React, {useState, useEffect} from 'react'; import "./css/Header.css"; fu..

react-reveal 꽤 유용한 사이트다. 간편하게 애니메이션을 구현할 수 있다. www.react-reveal.com/ Home - React Reveal React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects. Scroll down to see it in action. www.react-reveal.com 먼저 터미널에 아래와 같이 입력하여 설치한다. npm in..

리액트 이미지 경로 보통 public에 이미지들을 다 집어넣고 쓰는 편인데 정말 간편한 방법이 있어 공유하고자 한다. 먼저 public에 img라는 폴더를 만들어준다. 그리고 src에서 작업하는 곳에서 이미지를 불러올 때 경로를 img/를 넣으면 아주 쉽게 불러온다. import React from 'react'; import "./Card1.css"; function Card1() { return ( ) } export default Card1; 간단하쥬?

리액트 IE11 크로스 브라우징 문제 해결 Vue3로 신나게 개발을 완료하니 갑자기 익스플로러에서는 babel, polyfill을 이용해도 지원을 안해준다는 청천벽력같은 소리에 다시 React 고향으로 돌아왔다. react-app-polyfill 먼저, 터미널에 react-app-polyfill을 설치한다. (개인적으로 yarn이 더 안정적이고 오류가 덜 떠서 추천) yarn add react-app-polyfill 또는 npm install react-app-polyfill package.json development에 "ie 11"을 추가해준다. index.js react-app-polyfill/ie11과 /stable을 import해준다. import 'react-app-polyfill/ie11';..