글쓰는 개발자

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';}, []);

HTTP나 Postman을 통해 최종 API를 직접호출하는것도 좋은 방법일수 있지만 내부적으로 시나리오를 구성해 테스트를 만들어 두면 서비스가 제대로 잘 만들어 졌는지 한번에 확인 가능하고, 여러번 호출해 보며 버그를 수정하거나 구현이 제대로 이루어 졌는지 확인할수 있습니다. [kotlin / spring] CRUD Rest API 구현 / JPA 테이블 연동JPA를 사용하기 위해서는 DB 테이블과 연동할 entity와 DB에 쿼리를 전달할 Repository 그리고 이 Respository들을 사용할 Service가 필요합니다. 사용자 테이블을 만들고 해당 테이블에 사용자 생성 / 수정 /gran007.tistory.com 1. SpringBootTest테스트는 test 폴더내에 @Test 어노테이션..