글쓰는 개발자

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

Specification의 필요성과 사용법을 간단히 알아보았다. [kotlin/spring] specification 사용의 필요성과 사용예시Spring Boot JPA 연동을 완료한 뒤 이제 API 별 CURD 구현을 통해 테이블 접근을 위한 각각의 API를 만들수 있다. [kotlin / spring] CRUD Rest API 구현 / JPA 테이블 연동JPA를 사용하기 위해서는 DB 테이블과 연동gran007.tistory.com 그럼 이 Specification을 어떻게 잘 사용할수 있을까?리퀘스트 파라미터로 조건문을 받아서 이를 파싱해서 테이블의 조건을 동적으로 검색해 사용할수 있다면 좋을텐데 그러려면 많은 추상화 작업이 필요하다. 1. API URL 설계어떤 방식으로 API 호출을 할지를 먼저..

Spring Boot JPA 연동을 완료한 뒤 이제 API 별 CURD 구현을 통해 테이블 접근을 위한 각각의 API를 만들수 있다. [kotlin / spring] CRUD Rest API 구현 / JPA 테이블 연동JPA를 사용하기 위해서는 DB 테이블과 연동할 entity와 DB에 쿼리를 전달할 Repository 그리고 이 Respository들을 사용할 Service가 필요합니다. 사용자 테이블을 만들고 해당 테이블에 사용자 생성 / 수정 /gran007.tistory.com 1. 조건별 API 생성의 문제점그런데 만약 해당 테이블의 조건문별로 검색을 해야한다면 조건문의 갯수와 조합에 따라 API가 매번 새로 만들어야 하는 문제가 있다.@GetMapping("/email/{email}")fun..

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로 계산해도 무난하다.이렇게 상대값으로 페이지를 구성해두면 브라우저의..

사용자가 웹페이지를 스크롤할때 스르륵 나타나는 애니메이션이 다양한 웹사이트에서 사용되고 있다. React를 사용할때는 페이지가 새로고침이 되어도 스크롤의 위치가 유지되는데 이때문에 현재 위치를 기반으로 걸어둔 애니메이션이 의도치 않게 동작될 때가 많다. window.history.scrollRestoration의 옵션을 manual로 변경하면 페이지를 새로고침 할때마다 스크롤이 맨위로 초기화 되기때문에 위 문제를 해결할 수 있다.useEffect(() => { window.history.scrollRestoration = 'manual';}, []);