글쓰는 개발자

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

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) 에 접속하면 다음과 같이 잘 동작하는 지 확인할 수 있다.

tailwindcss를 분석해보면 size 관련 변수들은 rem을 기준으로 되어있다. 예를들어 text-lg 클래스의 정의를 확인해보면 font-size는 --text-lg의 값을 가지고 있고 --text-lg는 1.125rem 이다..text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height));} 반응형 미디어 쿼리부터 border-radius까지 모두 rem 기준으로 되어있다.rem은 최상위 요소의 font-size를 기준으로 계산되는 상대적인 값이다. 보통 HTML 최상위는 16px로 되어있기 때문에 1rem은 16px로 계산해도 무난하다.이렇게 상대값으로 페이지를 구성해두면 브라우저의..