글쓰는 개발자

[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. 딜레이사용시 아래..

리액트는 가상 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 어떤 타입의 색을 사용할지 여부를 말한다. 그 뒤에는 식의 시작점과 종료점..

Nest는 데코레이터를 적극 활용한다.데코레이터는 횡단 관심사(cross-cutting concern)를 분리하여 관점 지향 프로그래밍을 적용한 코드를 작성할수 있다.데코레이터 예시class UserDto { @IsEmail() @MAxLength(100) readonly email: string @Matches(/^[A-Za-z\d!@#$%^&*]{8,30]$/) readonly password: string;} 데코레이터를 이용하려면 tsconfig.js에 compilerOptions에 experimentalDecorators 속성을 true로 해야한다.{ "compilerOptions": { "experimentalDecorators": true, }}..

backdrop-filterbackdrop-filter 속성은 element의 background에 다양한 필터 효과를 줄수 있다./* 불투명 */backdrop-filter: blur(12px);/* 밝기 */backdrop-filter: brightness(50%);/* 색상대비 */backdrop-filter: contrast(200%);/* 회색조 */backdrop-filter: grayscale(50%);/* 색조 */backdrop-filter: hue-rotate(90deg);/* 색상반전 */backdrop-filter: invert(75%);/* 채도 */backdrop-filter: saturate(30%);/* 세피아 */backdrop-filter: sepia(60%);

NestJS 프로젝트 생성 NestJS 서버를 구성하기 위해 @nestjs/cli를 설치한다.$npm i -g @nestjs/cli nest 명령어를 사용해 프로젝트를 생성한다.nest new project-name 프로젝트 폴더에 들어가서 다음 명령으로 NestJS 프로젝트를 실행한다.cd npm run start:dev 브라우저로 서버(localhost:3000) 에 접속하면 다음과 같이 잘 동작하는 지 확인할 수 있다.