전체 글 (7) 썸네일형 리스트형 Vue.js에서 style scoped로 CSS 캡슐화 완벽 이해하기 안녕하세요,오늘은 Vue.js에서 컴파일 후 결과:HTML: Hello, Vue!CSS: .title[data-v-12345] { color: blue; font-size: 18px; }이렇게 data-v-xxx 속성을 통해 스타일이 해당 컴포넌트에만 적용됩니다.2. 전역 스타일 vs. Scoped 스타일CSS를 작성할 때, 전역 스타일과 scoped 스타일 중 어떤 걸 선택해야 할까요? 둘의 차이를 명확히 알아보겠습니다.전역 스타일정의: 3. Scoped 스타일과 컴포넌트 임포트Vue에서 컴포넌트를 임포트할 때, Parent Title 동작:Child.vue의 .title은 color: blue;로, Parent.vue의 .title은 color: red;로 적용됨.Child.vue.. Spring Boot에서 OAuth2 의존성 추가로 로그인 화면이 나타나는 이유 최근 Spring Boot 프로젝트를 진행하면서 OAuth2 연동을 테스트하기 위해 관련 의존성만 추가했습니다.그런데, 로그인 화면을 따로 만들지도 않았고, Spring Security 설정도 하지 않았는데, localhost:8080에 접속하자 기본 로그인 화면이 나타났습니다.처음엔 당황했지만, Spring Boot 공식 문서와 의존성 구조를 살펴보며 원인을 파악했습니다. 이 글에서는 왜 이런 일이 발생했는지, 그리고 이를 해결하거나 활용하는 방법을 공유하려고 합니다.왜 로그인 화면이 나타났을까?프로젝트 설정제가 추가한 의존성은 단 하나입니다: org.springframework.boot spring-boot-starter-oauth2-clientSpring Security 관련 의존성을 직.. HTML img 태그 탐구: Content-Type 없이도 이미지가 렌더링되는 이유 1. 상황 소개최근 프로젝트를 분석하면서, 프론트엔드에서 이미지를 다루는 방식에 대해 흥미로운 점을 발견했습니다. DB 테이블에 IMG_URL 컬럼이 있었고, 업로드된 파일과 연결되어 있습니다. 서버에서는 파일 ID를 기반으로 이미지를 가져오는 API(localhost:8080/api/image/{fileId})를 제공하고 있고, 그 API의 URL을 파일 업로드 시에 IMG_URL에 저장하여.이미지를 불러올 때는 해당 URL만 불러오면 되도록 구성되어 있었습니다. 흥미로운 점: 브라우저에서 해당 API를 직접 열면 이상한 문자가 나열되지만, 태그에서 사용하면 정상 이미지로 표시됩니다. 해당 API는 ResponseEntity만 반환하며, Content-Type 헤더는 없습니다.2. img 태그.. Git 특정 브랜치에서 다른 브랜치로 커밋 옮기기 (feat. cherry-pick) 1. 문제 상황프로젝트 개발 도중 main 브랜치에서 작업을 하고 있었는데, 추가 기능은 별도의 새 브랜치에서 진행해야 하는 요구사항이 생겼습니다. 문제는 이미 main 브랜치에서 커밋을 완료한 상태였다는 점이었습니다.아직 원격 저장소(GitLab)에는 push를 하지 않았지만,이 커밋을 그대로 새로 만든 기능 브랜치에 옮겨야 했습니다. 정리하자면 :main에서 코드를 작성하고 커밋까지 완료아직 push는 하지 않은 상태 새 브랜치를 만들어, 해당 커밋을 옮겨서 작업 이어가기 2. 해결 과정먼저 원격 저장소에 새 브랜치를 만들고, 로컬에 가져왔습니다.# 원격 저장소에서 새 브랜치 목록 가져오기git fetch origin# 새 브랜치로 체크아웃 (로컬에 없으면 자동생성)git checkout -b fea.. [Spring] 객체지향 설계와 스프링 객체지향 설계와 스프링에 대해 정리하겠다. 스프링의 핵심 가치는 좋은 객체지향(SOLID)이다. 스프링이란? 스프링이란 단어는 1. DI 컨테이너 기술 2. 스프링 프레임워크 3. 스프링 부트, 스프링 프레임 워크를 다 포함한 스프링 프레임워크 생태계 등 문맥에 따라 다르게 사용된다. 스프링을 왜 만들었을까? 스프링의 핵심 개념(핵심 컨셉)은 1. 자바 언어 기반의 프레임 워크 2. 자바의 핵심 - 객체 지향 언어 3. 객체 지향 언어의 강력한 특징을 살려내는 프레임 워크 이다. Spring 이전에는 EJB라는 것을 이용해 개발을 했는데 EJB를 사용하면 EJB에 너무 의존적이고 코드가 더러워져 객체지향과는 멀어진 개발을 하게 됐기 때문에 스프링이 만들어졌다. 좋은 객체 지향 프로그래밍이란? 좋은 객체지.. [JPA] JPA와 ORM그리고 Hibernate의 개념 JPA와 ORM 그리고 Hibernate의 개념에 대해 알아보자. 1. JPA와 ORM 1-1. JPA(Java Persistent API) JPA란 자바 ORM 기술에 대한 API 표준 명세를 의미한다. JPA는 ORM을 사용하기 위한 인터페이스를 모아둔 것이며, JPA를 사용하기 위해서는 JPA를 구현한 Hibernate, EclipseLink, DataNucleus 같은 ORM 프레임워크를 사용해야 한다. (Hibernate에 대한 개념은 아래 링크로) 1-2. ORM(Object Relational Mapping) ORM이란 객체와 DB의 테이블이 매핑을 이루는 것을 말한다. 더 쉽게 말하자면 객체가 테이블이 되도록 관계를 만들어준다는 뜻이다. ORM을 이용하면 SQL Query가 아닌 코드(메서.. [Spring] @RestController Spring에서 Controller를 지정해주기 위한 어노테이션으로 @Controller와 @RestController가 있다. 두 어노테이션의 주요한 차이점은 HTTP Response Body가 생성되는 방식이다. 1. @Controller 1-1. [View 반환하기] @Controller는 주로 View를 반환하기 위해 사용한다. 1) Client는 URL 형식으로 웹 서비스에 요청을 보낸다. 2) DispatcherServlet이 요청을 위임할 HandlerMapping을 찾는다. 3) HandlerMapping을 통해 요청을 Controller로 위임한다. 4) Controller는 요청을 처리한 후 ViewName을 반환한다. 5) DispatcherServlet은 ViewResolver를 통.. 이전 1 다음
