qwef

@import './sub.scss'; 저기에 있는 것도 같이 적용 됨. @import url(./sub.scss); 이렇게 css에서 했던걸로 해도 가능 함.

const userProperty1 = makeObj('name', 'jone'); const userProperty2 = makeObj('age', 40); const user = Object.assign({},userProperty1, userProperty2); console.log(user); function makeObj(key, value){ return { [key] : value } } Object.assign((넣을곳), 합칠객체1,합칠객체2, 3, 4.... ) 이러면 객체가 합쳐져서 return 됨 참고로, Object.assign(userProperty1, userProperty2); console.log(userProperty1); 이렇게 하면 userProperty1안쪽으로 넣어..

이렇게 한 페이지에 모두 들어 있음. style의 scoped는 scoped가 있으면 이 페이지에서만 적용된다.

const ViewMode = { UNSET : 0, WIDTH_LARGE : 1, WIDTH_SMALL : 2 } Object.freeze(ViewMode); 이렇게 객체로 구현시킨 다음에, Object.freeze로 상수화 시켜주면 됨.

과거 우리가 BasicErrorController를 사용했을 때(별다른 설정 없어도 자동으로 등록 해주는), 우리가 템플릿에 /error 경로에 에러 페이지를 에러코드.html로 만들어 두면 아무것도 하지 않아도 에러 발생 시(에러를 뿜거나 아니면 response.sendError()를 하던가) 저 에러 페이지 템플릿을 호출하게끔 해 주었다. 그럼 text/html 같은 경우는 이랬고, API는 어떻게 할까? 아무것도 안해도 된다. 먼저, BasicErrorController를 들어가 보자. @Controller @RequestMapping("${server.error.path:${error.path:/error}}") public class BasicErrorController extends Abstr..

html 같은 경우는 그냥 4xx, 5xx등의 오류 페이지만 있으면 거의 해결 가능하다. 근데 API는, 각 오류 상황에 맞는 오류 응답 스펙을 클라이언트 사이드와 서버 사이드에서 약속을 하고 데이터를 내려주어야 한다. 먼저, 그냥 가상으로 /api/members/ex 라는 uri로 호출되면 에러를 뿜게 해줬고, 그 외에는 그냥 오브젝트를 만들어서 return 해 줬다. @RestController라 Json객체로 변환되어 들어간다. @RestController @Slf4j public class ApiExceptionController { @GetMapping("/api/members/{id}") public MemberDto getMember(@PathVariable("id") String id){ ..

&.built-in { @include center; background-color: mix($color, red); } &.built-in 은 자신에 built-in 클래스가 있는 경우 mix(색1, 색2) 값을 섞는 건데, 둘 값의 중간값 주는 듯 background-color: lighten($color, 30%); 밝게 background-color: darken($color, 30%); 어둡게 background-color: saturate($color, 40%); 채도 높여주기 40% 높여줌 background-color: desaturate($color, 40%); 채도 감소 background-color: grayscale($color); 색생에 따라 회색 정도가 다르기에 색상 줘야 함. ..

@function ratio($size, $ratio){ @return $size * $ratio; } 그냥 이렇게 함수 정의해서 쓰면 됨. scss는 기본적으로 뭔가 기능 사용할 때는 @기능명 아마 저런 계산같은 것이 @function으로 쓰고 여러가지 속성 한번에 변경하는 용도가 @mixin 함수의 본질에 충실함.

scss에서 반복문도 쓸 수 있음. .container{ @include box(800px, royalblue); @include center; @for $i from 1 to 5{ .item:nth-child(#{$i}){ @include center; @include box(100px * $i); } } } @for 인덱스이름 from 1부터 to n까지 참고로 .item:nth-child(#{$i}) 여기서 #{$i} 이거는 저렇게 뭔가 값을 계산용도가 아니라 인덱스 용도로 쓸 때는 #{변수명} 이렇게 접근 해야 함. 보간법이라고 함. background-image: url('https://picsum.photos/200/300?random=' + $i); 이런 식으로도 가능함.