분류 전체보기26 text-wrap: balance Selectors and style queries aren’t the only places that we can embed logic within our styles; typography is another one. From Chrome 114, you can use text-wrap balancing for headings, using the text-wrap property with the value balance. https://developer.chrome.com/blog/css-text-wrap-balance/ CSS text-wrap: balance - Chrome Developers A classic typography technique of hand-authoring line breaks .. 2023. 5. 30. :has() Speaking of powerful, dynamic features, the :has() selector is one of the most powerful new CSS capabilities landing in modern browsers. With :has(), you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means, we essentially now have a parent selector. Building on the container query example, yo.. 2023. 5. 30. Style Queries The container query specification also allows you to query the style values of a parent container. This is currently partially implemented in Chrome 111, where you can use CSS custom properties to apply container styles. This is just the beginning for style queries. In the future, we’ll have boolean queries to determine if a custom property value exists and reduce code repetition, and currently .. 2023. 5. 30. Container Queries The @container CSS at-rule is a conditional group rule that applies styles to a containment context. Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container changes size. An optional case-sensitive container-name can be provided which filters the set of query containers considered to just those with a mat.. 2023. 5. 30. nth-of syntax The advanced nth-child syntax gives a new keyword ("of"), which lets you use the existing micro syntax of An+B, with a more specific subset within which to search. If you use regular nth-child, such as :nth-child(2) on the special class, the browser will select the element that has the class special applied to it, and also is the second child. This is in contrast to :nth-child(2 of .special) whi.. 2023. 5. 30. e2d Testing e2d Testing 2023. 4. 26. metaData metaData 2023. 4. 26. Reflector Reflector 2023. 4. 26. slug 슬러그(Slug)란 원래 신문이나 잡지 등에서 제목을 쓸 때, 중요한 의미를 포함하는 단어만을 이용해 제목을 작성하는 방법을 말합니다. 조사나 전치사 등을 빼고 핵심 의미를 담고 있는 단어를 조합해서 긴 제목을 간단 명료하게 표현하는 것이죠. 많은 기사를 다루어야 하는 신문 등에서 편집하는 방법인 것이죠. 띄어쓰기는 하이픈(-)으로 대체하고, 쉼표나 마침표 등 기호를 자동으로 없애주거나 원하는 형태로 변환. Apple-tv apple tv >> apple-tv Apple TV 이런 3가지 text type을 아래와 같은 형태로 변경하여 같은 text로 묶어 불필요한 분산을 방지. const a = Text_value .trim() .toLowerCase() .replace(/ +/g, ' '); //re.. 2023. 4. 26. Unit Testing Unit Testing vs End to End Testing - Unit Testing : Unit testing should be conducted independently. 2023. 4. 22. Email Verification Email 검증 - verification entity - create verifications - verifying user - mailgun - mail module - frontend 작업 전까지는 수동으로 verification 가능. 2023. 4. 22. Typescript - Utility Types(partial, record ... ) https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 2023. 4. 22. One-to-one relations A가 오로지 하나의 B만 포함한다! B역시 오직 하나의 A만 포함한다. https://typeorm.io/one-to-one-relations One-to-one is a relation where A contains only one instance of B, and B contains only one instance of A. Let's take for example User and Profile entities. User can have only a single profile, and a single profile is owned by only a single user. // Profile import { Entity, PrimaryGeneratedColumn, Column } from "typeor.. 2023. 4. 14. [User] update Profile User의 Profile을 Update! (email & password) // users.resolver.ts ... @UseGuards(AuthGuard) @Mutation((returns) => EditProfileOutput) async editProfile( @AuthUser() authUser: User, @Args('input') editProfileInput: EditProfileInput, ): Promise { try { await this.userService.editProfie(authUser.id, editProfileInput); return { ok: true, }; } catch (error) { return { ok: false, error }; } } ... // user.. 2023. 4. 14. [User] Authentication #5 AuthUser Decorator login이 되어있지 않다면 request를 멈추게 함. Decorator를 만들어보자~ // auth-user.decorator.ts // custom decorator export const AuthUser = createParamDecorator( (data: unknown, ctx: ExecutionContext) => { const gqlContext = GqlExecutionContext.create(ctx).getContext(); return gqlContext['user']; }, ); // user.resolver.ts ... @Query((returns) => User) @UseGuards(AuthGuard) me(@AuthUser() authUser: User) { return au.. 2023. 4. 8. 이전 1 2 다음 728x90
