글쓰는 개발자

사용자를 생성하려면 root 권한 혹은 사용자 생성 권한을 가진 사용자로 로그인 해야한다.사용자 생성1. root계정으로 로그인mysql -uroot -p 2. 사용자 생성사용자 ID와 비밀번호로 사용자를 생성한다. localhost에서만 접속하려면 localhost용 계정을 생성한다.create user '사용자ID'@'localhost' identified by '비밀번호';외부에서 접속 하려면 @뒤에 ip를 적거나 모든 ip 허용을 위한 %를 host로한 계정을 생성한다.// ip 기반 접속create user '사용자ID'@'192.168.0.7' identified by '비밀번호';// 모든 외부 접속 허용create user '사용자ID'@'%' identified by '비밀번호'; 3. ..

스크롤을 내리면 애니메이션이 동작하면서 보이지 않았던 컴포넌트들이 나타나는 웹 페이지들이 있다.transition 속성을 사용한 웹페이지인데 transition은 속성의 변화를 감지하는 기술이기 때문에 스크롤의 위치를 감지해서 애니메이션 효과를 주고 싶은 컴포넌트에 클래스를 할당해야 한다.예를들어 스크롤이 지나간 자리는 새로운 클래스가 하나 추가되어야 하는 식으로 말이다.// 스크롤이 지나가기 전...// 스크롤이 지나간 후...하지만 다양한 컴포넌트가 존재하고 모든 컴포넌트 별로 scroll을 감지하여 state를 할당하고 코드가 난잡해 지고 만다.따라서 엘리먼트를 감싸는 커스텀 컴포넌트를 만들어 엘리먼트의 위아래로 감싸준다면 자동으로 스크롤이 지나갈때 클래스를 할당해주는 역할을 수행하도록 할수 있다...

[css] transitiontransition웹페이지에서 애니메이션 효과를 구현하는데는 두가지 방법이 존재한다. tansition과 animation이다.이 중 transition 속성은 transition에 지정된 속성의 변화를 감지하여 각 속성간의 변화를 천천gran007.tistory.com animationanimation 속성은 transition과 함께 웹페이지의 애니메이션을 동작할수 있게한다.animation은 transition과 다르게 keyframe이라는 속성을 사용하여 조금 더 세분화된 동작의 사용이 가능하며 상태값의 전후를 억지로 변경하지 않아도 되며 동작의 반복등도 가능하다.키프레임은 다음과 같은 하위 속성으로 구성된다.@keyframes animationName { /* fro..

transition웹페이지에서 애니메이션 효과를 구현하는데는 두가지 방법이 존재한다. tansition과 animation이다.이 중 transition 속성은 transition에 지정된 속성의 변화를 감지하여 각 속성간의 변화를 천천히 보여주는 애니메이션 효과를 만들어낸다.transition은 4개의 파라미터를 가진다.1. 어떤 속성을 transition 할지 (ex. transform, opacity, margin, padding 등등)2. 몇초간 애니메이션 효과를 보여줄지3. 어떤 애니메이션 효과를 적용할지애니메이션 효과로는 ease, ease-in, ease-out, ease-in-out 등이 있고 cuibc-bezier() 함수로 커스텀된 애니메이션 효과를 사용할수 있다.4. 딜레이사용시 아래..

1. media querymedia query는 웹 화면의 길이에 따른 css를 구분하여 적용하기 위한 css 문법중 하나이다.이는 화면 비율에 따라 각각 다른 형태의 UI를 구성하기 위해서 사용되며 사용법은 다음과 같다.@media (조건) { 스타일} 조건으로는 보통 두가지 속성이 들어가는데 max-width와 min-width이다. max-width가 조건으로 들어가면 해당 max-width 까지 해당 속성이 적용이 된다는 것이고, min-with가 조건으로 들어가면 min-width 이상의 크기일때 해당 속성이 적용된다는 뜻이다.예를들어 아래와 같이 max-width를 지정해 두면 640px 이상에서는 기존의 스타일이 유지되고 640px 이하가 되면 media query 내부에 있는 속성을 적용..

리액트는 가상 Dom을 사용한다.Dom의 복제본인 가상 dom을 만들어두고 useState등 hook으로 생성된 변수와 이들이 사용된 element를 계속 감시하고 있다가 변화가 감지되면 가상 dom을 이용해 변화가 된 부분만 빠르게 리렌더링 (다시 그리기) 해준다.1. useStateuseState의 사용법은 다음과 같다.export default function ReactComponent() { const [name, setName] = useState('');... return ( {name} )}대괄호의 앞부분은 변수 뒷부분은 셋함수이고 useState의 파라미터로는 초기값이 들어간다.해당 변수는 React의 엘리멘트에 값으로 사용되고 set함수가 호출되는 순간 변경이 감..

box-shadowbox-shadow는 엘리먼트에 그림자를 더하는 역할을 합니다.box-shadow는 다양한 방식의 파라미터를 사용할 수 있습니다. box-shadow: x축 y축 colorx축 y축 각각 위치만큼 해당 color로 그림자를 표시합니다.box-shadow: 3px 3px black; box-shadow: x축 y축 blur colorx축 y축 각각 위치만큼 blur(px)의 효과를 주고 그림자를 표시합니다.box-shadow: 3px 3px 3px black; box-shadow: x축 y축 blur 추가length colorx축 y축 각각 위치만큼 blur효과를 주고 다시 4번째 파라미터 px만큼 크기를 늘립니다.box-shadow: 3px 3px 3px 3px black; box-sh..

linear-gradient 속성은 잘 사용한다면 화면의 단조로움을 제거하고 신비로운 느낌을 줄 수 있다.위와 같은 효과를 주기 위해서는 다음과 같은 속성들을 사용한다.background: linear-gradient(to bottom right in oklab, var(--color-blue-600) 0%, var(--color-blue-700) 100%); linear-gradient 속성은 background 혹은 background-image에 사용한다. 첫 파라미터는 linear-gradient의 방향을 지정한다. to bottom right를 지정했으니 왼쪽위에서 오른쪽 아래방향으로 그레디언트가 퍼진다. in oklab 어떤 타입의 색을 사용할지 여부를 말한다. 그 뒤에는 식의 시작점과 종료점..