본문 바로가기
반응형

Study53

[Spring Boot] JSON 형태로 객체 반환하기 Intro API 서버를 만들 때 일반적으로 클라이언트한테 JSON 형식으로 데이터를 넘겨줍니다. 하지만 아래처럼 JSON 데이터를 일일이 조립하면 생산성도 떨어질뿐더러 오류가 날 확률이 높습니다. String json = "{\"name\" : \"" + name + "\"}"; return json; Spring에선 @ResponseBody 어노테이션을 통해 객체를 직접 JSON으로 변환시켜줄 수 있습니다. 이번 시간엔 JSON 형태로 response를 보내는 방법에 대해 알아보겠습니다. JSON 형태로 반환하기 우선 JSON으로 변환시킬 객체를 만들어보겠습니다. TestApi.java public class TestApi { private String id; private String passwor.. 2022. 2. 12.
[Spring Boot] Spring Boot 동작 구조 Intro Spring Framework는 주로 MVC 패턴으로 개발됩니다. MVC 패턴은 각각 Model, View, Controller란 뜻으로, 이 3가지의 요소가 서로 역할을 분담하여 요청을 처리하는 구조입니다. 이때 클라이언트가 요청하는 페이지에 따라 정적 컨텐츠와 동적 컨텐츠로 나뉩니다. 동적 컨텐츠 처리 구조 클라이언트가 요청하는 URL을 받아오고 싶을 때 아래와 같이 Controller를 정의합니다. HelloController.java @Controller public class HelloController { @GetMapping("hello") public String hello(Model model) { model.addAttribute("data", "hello!!"); retur.. 2022. 2. 12.
[CSS] CSS에서 전역변수 추가하기 CSS에서 전역변수 추가하기 전역변수 선언하기 :root 라는 가상 클래스에 전역변수를 선언할 수 있습니다. 다른 속성 선언하는 방식과 비슷합니다. 앞에 하이픈 2개 ("--")만 붙여주면 됩니다. :root { --main-color: #123456; --sub-color: #654321; } 전역변수 사용하기 var(변수명)과 같이 사용할 수 있습니다. .screen { background-color: var(--main-color); } .button { background-color: var(--sub-color); } 2022. 1. 12.
[CSS] BEM (Block Element Modifier) 방법론 Intro CSS 방법론 중에는 BEM이라는 방법론이 존재합니다. 코드 양이 적다면 구조적으로 작성하지 않아도 큰 불편함이 없지만, 코드 양이 많아질수록 구조적으로 작성하는것이 중요합니다. 이때 CSS를 적용하기 위한 클래스명을 구조적으로 작성하는 방법론 중 하나인 BEM에 대해 알아보겠습니다. 아래의 사이트를 참고하여 작성했습니다. http://getbem.com/ BEM — Block Element Modifier BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale,.. 2022. 1. 12.
[CSS] Reset CSS Intro CSS의 기본 설정값이 브라우저마다 상이하기 때문에, 같은 코드를 입력해도 브라우저에 따라 결과가 달라집니다. 이런 현상을 방지하기 위해 브라우저의 기본 설정값을 초기화 해줘야 하는데, 이러한 초기화 코드가 작성된 파일을 RESET CSS 라고 합니다. RESET CSS 적용법은 다음과 같습니다. 프로젝트에 CSS 파일 직접 추가 CDN을 사용한 실시간 다운로드 CSS 파일 직접 추가 reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, .. 2022. 1. 12.
[HTML] Head에 들어가는 태그들 Intro HTML의 Head에 들어가는 태그들에 대해 알아보자. This is my website! title 태그 내에 입력한 내용이 웹 사이트의 제목이 된다. 또한, 구글이나 Bing 등 다양한 검색엔진에서 내 웹페이지가 노출될 때 title 태그의 내용이 검색엔진에 노출된다. 검색엔진에서 내 웹페이지가 노출될 때 title 아래의 웹사이트 설명란에 content에 입력한 내용이 출력된다. 검색엔진에 웹사이트가 사용하는 언어를 알려준다. 웹 페이지가 사용하는 charset을 정의한다. 만약 설정이 되어있지 않거나 잘못 설정되어있을 경우 글자가 깨져서 출력될 수 있으므로 정확히 설정해야 한다. 웹사이트의 제목 옆에 표시될 아이콘을 설정한다. 카카오톡과 같이 다른 곳에 내 웹사이트를 공유할 때, 썸네일.. 2022. 1. 8.
[Django] 7. Model 관계 (1:1, 1:N, M:N) 설정 Intro Model들을 작성하다 보면 그들 간의 관계를 정의해주어야 합니다. 이번 시간에는 Model간의 관계를 설정하는 방법에 대해 알아보겠습니다. 1:1 관계 models 클래스의 OneToOneField를 사용하여 1:1 관계를 표현할 수 있습니다. models.py from django.db import models class Engine(models.Model): name = models.CharField(max_length=30) class Car(models.Model): name = models.CharField(max_length=30) engine = models.OneToOneField(Engine, on_delete=models.CASCADE) OneToOneField(Engine.. 2021. 11. 17.
[Django] 6. Model 작성 및 마이그레이션 Intro 웹 어플리케이션을 개발할 때 다양한 데이터를 DB에 저장합니다. 이때 저장하는 DB에 상관없이 Model 클래스만 작성해주면 Django에서 선택한 DB에 맞는 SQL문을 작성해주는 ORM (Object Relational Mapping) 기능이 있습니다. ORM 기능을 통해 모델 코드 변경 없이 모든 DB에 동일한 소스를 사용할 수 있으며, 애플리케이션 코드를 편리하게 유지보수 할 수 있습니다. 이번 시간에는 Django의 Model 작성 방법과 마이그레이션을 통한 ORM 기능 사용 방법에 대해 알아보겠습니다. Database 생성 화면 우측 상단의 Database 탭을 열어주고 + 키를 누른 뒤 원하는 DB를 선택합니다. 저는 SQLite로 진행하도록 하겠습니다. 클릭하면 아래와 같은 창이.. 2021. 11. 17.
[Django] 5. 템플릿 설정 및 렌더링 Intro 사용자에게 데이터를 보여주기 위해 HTML에 데이터를 넣어야 하는데, Django에선 이를 위해 템플릿이라는 유용한 기능을 제공합니다. HTML의 경우 정적이기 때문에 데이터를 추가하고 제거하는데 어려움이 있습니다. 하지만 템플릿을 이용하면 Python 코드를 HTML로 바꿔주어 빠르고 쉽게 동적인 웹사이트를 만들 수 있습니다. 이번 시간에는 Django의 템플릿 설정과 뷰에서 렌더링 하는 방법에 대해 알아보겠습니다. 템플릿 파일 생성 우선 reviews APP 디렉터리에 템플릿 파일을 저장하기 위한 templates 디렉터리를 만들어줍니다. 그다음 생성된 templates 디렉터리에 hello.html이라는 파일을 하나 생성해줍니다. 생성 시 기본적인 태그들은 이미 자동완성이 되어있습니다. .. 2021. 11. 16.
반응형

티스토리툴바