본문 바로가기

웹 개발

(97)
Spring Boot) 1. 개발 환경의 변화와 자바 1. 웹 애플리케이션 컨테이너 웹 애플리케이션이 배포되는 공간 웹 서버 : 정적 파일 제공하는 서버 웹 애플리케이션 서버 : 동적 페이지를 생성 가능한 서버 (= 웹 애플리케이션 컨테이너, WAS) 1.1 클래스 로더 Write once, run anywhere, 한번 작성하면 플랫폼에 상관없이 쓸 수 있다. 자바 코드 작성 → 컴파일 → JVM에서 실행 가능한 상태 JVM에서 클래스를 실행하기위해 클래스 로더가 필요 ClassNotFoundException : 클래스 로더가 라이브러리나 클래스를 인식하지 못해서 발생하는 오류로 클래스패스에 추가하면 해결 1.1.1 특징 계층적 구조 (상위 → 하위) 최상위 : 부트스트랩 틀래스 로더 클래스 로딩 위임 가능 가시적인 규약(클래스 로딩 시 가능한 범위)가 ..
Spring Boot) Spring Boot 프로젝트 예제로 기초 이해하기 / Building an Application with Spring Boot Spring Boot 프로젝트 예제로 기초 이해하기 spring boot 동작 방식을 이해하기 위해 공식 사이트에서 제공한 가이드를 따라 연습한 내용을 정리한 자료입니다. Building an Application with Spring Boot this guide is designed to get you productive as quickly as possible and using the latest Spring project releases and techniques as recommended by the Spring team spring.io 1. 나의 개발 환경 IntelliJ IDEA CE Mac OS JDK 1.8 Gradle + intelliJ에서 스프링 부트 프로젝트를 시작하는 방법은 생략할..
Spring Boot) Gradle이란 Gradle 오픈소스 빌드 자동화 툴 거의 모든 타입의 소프트웨어를 빌드할 수 있는 유연함이 강점인 툴로 Maven 보다 빌드 스크립트 작성이 간편하다. 1. Gradle 특징 오픈 소스 기반 빌드 자동화 툴 Groovy 기반 : 자바와 문법이 유사하여 자바 개발자가 쉽게 익힐 수 있다. Maven에 비해 빌드 시간이 짧고 빠른 성능을 보인다. convention을 기반으로 빌드하여 스크립트 규모가 작고 가독성이 높다. configuration injection을 사용해서 프로젝트 조건을 체크할 수 있어 프로젝트별 cofiguration을 다르게 설정할 수 있다. 멀티 프로젝트 빌드 지원을 위해 설계되었다. Andorid Studio, IntelliJ IDEA, Eclipse 등의 IDE에서 Gradle..
웹 개발) 브라우저 저장소 Web Storage Web Storage key-value로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴 웹 데이터를 클라이언트에 저장할 수 있는 자료구조 데이터의 지속성에 따른 구분 cookie와 달리 저장된 데이터가 클라이언트에만 존재하고 서버로 전송되지 않는다. 용량 제한이 없다. 만료기간 설정이 따로 없고, 한번 저장한 데이터는 영구적으로 존재한다. Local Storage 지정한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관할 수 있다. 도메인마다 별도의 로컬 스토리지가 생성된다. 브라우저를 종료해도 데이터가 보관되어 다음 번 접속에도 그 데이터를 사용할 수 있다. 도메인만 같으면 전역적으로 공유할 수 있다. Session Storage 데이터의 지속성과 접근 범위에 특수한 제한이 있다. 현재..
웹 개발) Reatful API REST란? REpresentational State Transfer 웹 상의 모든 자원에 대한 고유한 URI를 부여하여 활용하는 것 REST API란? HTTP 통신에서 어떤 자원에 대해 CRUD (create, read, update, delete) 연산을 수행하기 위해 URI (resource) 요청을 보내는 방식 1. REST API의 구성요소 Resource 고유한 ID를 가지는 자원 서버가 가지고 있는 자원에 대하여 클라이언트가 요청을 보낸다. URI Method PUT : 서버에게 자원 업데이트를 요청하는 것, 자원이 없다면 새로운 자원 생성을 요청 (update)DELETE : 서버에게 자원 삭제를 요청 (delete)처리를 위한 연산에 맞는 메소드를 사용하여 서버에 요청을 보낸다. PAT..
백엔드 배경지식 Backend Background) MVC (Model-View-Controller) 프레임워크 : Java Spring, Python Django, Javascript express 기초 개념 알아보기 MVC 프레임워크 1. [Java] Spring Framework 자바 플랫폼을 위한 오픈소스 애플리케이션 프레임워크 우리나라 공공기관 웹 서비스 개발시 사용 권장되는 전자 정보 표준 프레임워크 1.1 제어 반전 컨테이너 (IoC : Inversion of Control) 메소드나 객체의 호출 작업을 개발자가 아닌 프레임워크가 필요에 따라 제어 즉, 제어권이 사용자가 아닌 프레임워크에로 역전 객체 간 결합도를 줄이고 유연한 코드를 작성할 수 있게 함 가독성 및 코드 중복, 유지 보수 측면에서 좋음 Java relection 특징 사용 객체를 통해 클래스의 정보를 분석하는 프로그램 기법 JVM에서 실행되는 어플리케이션의 런타임 동작을 검사하거나 수정할 수 있는 기능이 필요한 프로그램에서 사용 클래스의 구조..
백엔드 배경지식 Backend Background) MVC (Model-View-Controller) 패턴 MVC (Model-View-Controller) 패턴 1. 개념 소프트웨어 디자인 패턴의 일종으로, 사용자 인터페이스 - 비즈니스 로직을 분리하여 시각적 요소와 서버 작업을 서로 영향 없이 운영되어 유지보수가 편리한 어플리케이션을 만들 수 있다. 디자인 패턴 소프트웨어 개발 차원에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결 '규칙' 템플릿 2. 구성요소 사용자가 컨트롤러를 조작 컨트롤러가 모델을 통해 데이터를 가져옴 데이터를 바탕으로 시각적인 요소를 가미하며 뷰에 표현 사용자는 뷰를 통해 데이터를 봄 2.1 모델 (Model) 어플리케이션이 '무엇'을 할지 정의 어플리케이션의 정보 DB, data 처리 로직 컴포넌트 어떤 동작을 수행하는 코드 사용자 쿼리에 대한 데이터 제공 데..
React) react-router-dom 특정 경로에서만 특정 컴포넌트 랜더링 되게 하기 React) react-router-dom 특정 경로에서만 특정 컴포넌트 랜더링 되게 하기 저는 주로 프로젝트의 최상위 요소인 App 요소ㄹㄹ BrowerRouter로 만들어 사용하는데 이때, Header 와 Footer는 모든 경로에서 고정된 위치에 있게 하기 위해서 Route로 설정하지 않고 그냥 최상단에 header를 최하단에 footer를 위치시켰습니다. 그런데 하다보니 특정 path에서 footer를 렌더링하고 싶지 않아져서 고민하다가 찾아낸 방법을 공유합니다. import React from 'react'; import { BrowserRouter, Route } from 'react-router-dom'; import Header from './static/component/header'; ..