봉보로봉봉

TypeIt 글자가 적히는 애니메이션을 추가할 수 있다. https://www.typeitjs.com/ TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com Scrollout2 재미있는 스크롤 애니메이션을 추가할 수 있다. https://scroll-out.github.io/ ScrollOut Effects and CSS Vars on Scroll! scroll-out.github.io Animejs 재밌는 애니메이션을 추가 할 수 있다. https://animejs.com/ anime.js Javascript animation engine animejs.com Rellax js 페이지를 ..

새롭게 알게 된 CSS 속성 calc() calc를 사용하면 css속성값에 계산식을 이용할 수 있다. , , , , , , 또는 를 받는 속성의 값으로 사용할 수 있다. length구문에 해당하는 아무 값에나 사용할 수 있다. 덧셈, 뺄셈, 곱셈, 나눗셈이 가능하다. 곱셈과 나눗셈은 오른쪽 피연산자가 숫자여야한다. width: calc(100% - 80px); filter 흐림효과나 색상 변형 등 그래픽 효과를 요소에 적용한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow..

command not found: dbmate dbmate up을 설치했는데도 안돼서 글로벌로 설치했더니 해결 됐다. Error: unsupported driver MissingDriverError: Wrong driver: "undefined" given. .env파일에서 변수를 사용하고 있었는데 .env파일명이 .env.test로 되어있었고, 안에 변수에 값도 내 상황과는 달라서 수정해서 해결했다. Error during Data Source initialization Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL cl..

Top Button 구현하기 내가 짠 코드 ... const TopButton = (props) => { const [button, setButton] = useState(false); useEffect(() => { const handleShowButton = () => { window.scrollY > 750 && window.scrollY { window.removeEventListener('scroll', handleShowButton); }; })..

useLocation() 사용자가 현재 머물러 있는 페이지에 대한 정보를 받아온다. http://localhost:3000/home?keyword=react location에서 pathname을 사용하면 쿼리를 제외한 /home을 가져오고 search를 하면 ?keyword=react 쿼리스트링을 가져온다. useLocation을 선언하고 location.pathname이나 location.search로 접근할 수 있다. import React from 'react'; import { useLocation } from 'react-router-dom'; const App = () => { const location = useLocation(); console.log(location.pathname) //..

npm 설치 npm install --save styled-components import import styled from 'styled-components' vscode 익스텐션 설치 vscode-styled-components (코드 컬러 색상) styled-components-snippets (코드 스니펫) 파일분리 스타일 컴포넌트 코드와 리액트 컴포넌트 코드가 한 파일에 같이 있어서 길어진다면 파일 분리를 할 수도 있다. // Components.styled.js import styled from 'styled-components'; export StyledDiv = styled.div` background-color: red; ` // Components.js import * S from '...

클래스 클래스 선언 private과 public을 사용해서 클래스 프로퍼티를 선언할 수 있다. 두개 다 자바스크립트에서는 보이지않고 문제없이 작동하지만 private은 클래스 밖에서 수정할 수 없고 public은 가능하다. 생략해서 적으면 public이 된다. class Player { constructor( private firstName:string, private lastName:string, public nickname:string ){} } const kim = new Player("code", "kim", 'code kim') kim.lastName // 에러메세지를 띄움 kim.nickname // 문제 없음 추상 클래스 abstract 키워드로 만들 수 있다. 다른 클래스가 상속 받을 수 ..

경계다루기 // a와 b에 들어가는 경우들과 함수 네이밍 const myFunction = (a, b) => {} Max, Min 최소값과 최대값을 다룬다. 최소값과 최대값 포함 여부를 결정해야한다. (이상 vs 초과, 이하 vs 미만) 네이밍에 최소값 최대값 포함 여부를 포함한다. Begin, End 숙소 예약을 하는 프로그램에서 예약 시작일, 예약 마지막일과 같은 경우이다. 함수명을 잘 지어서 인자의 순서 자체로 무엇인지 추론할 수 있도록 하면 좋다. 예 : reservationDate(begin, end) First, Last 연속성이 보장되지 않는 경우에 사용한다. 연속적인 규칙은 없지만 항상 first와 last는 존재하기 때문이다. 연속되지 않는 숫자들이나 학생들 같은 경우도 연속성이 보장되지..