Web

[Spring] 스프링 MVC 흐름

스프링 MVC의 웹 요청을 처리하는 과정은 다음과 같다. ① 웹 브라우저(클라이언트)에서 URL을 요청하면 가장 먼저 디스패처 서블릿에 전달된다. ② URL 요청을 받은 디스패처 서블릿은 어느 컨트롤러에서 요청을 처리할지 결정하려고 핸들러 매핑으로 적합한 컨트롤러를 검색한다. ③ 핸들러 매핑은 클라이언트 요청을 처리할 컨트롤러를 결정하여 디스패처 서블릿에 반환한다. ④ 컨트롤러는 해당 클라이언트 요청을 전달받는다. GET 또는 POST 방식을 기반으로 적합한 메서드를 호출한다. ⑤ 호출된 메서드는 정의된 비즈니스 로직으로 모델 데이터를 설정하고 뷰 이름을 디스패처 서블릿에 반환한다. ⑥ 디스패처 서블릿은 웹 브라우저에서 들어온 요청을 처리한 결과를 보여 주려고 뷰 리졸버에 도움을 요청하여 응답 결과를 생..

[스프링 입문] Section 3. 회원 관리 예제 - 백엔드 개발

1. 비즈니스 요구사항 정리 데이터 : 회원ID, 이름 기능 : 회원 등록, 조회 아직 데이터 저장소가 선정되지 않음(가상의 시나리오) 개발을 해야 하는데, 성능이 좋은 DB를 사용할지? NoSQL을 사용할지? 아직 정해지지 않은 상황에서 개발을 해야 하는 상황 일반적인 웹 애플리케이션 계층 구조 컨트롤러 : 웹 MVC의 컨트롤러 역할 (ex. 이벤트 처리 등) 서비스 : 핵심 비즈니스 로직 구현 (ex. 회원 중복 확인 등) 도메인 : 비즈니스 도메인 객체 (ex. 회원, 주문, 쿠폰 등), 주로 데이터베이스에 저장하고 관리됨 리포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리 클래스 의존관계 MemberService 회원 비즈니스 로직이 있는 회원 서비스 (서비스 클래스에 핵심 비..

[스프링 입문] Section 2. 스프링 웹 개발 기초

1. 정적 컨텐츠 정적 컨텐츠는 만들어진 파일 그대로 사용자에게 전달된다. 기본적으로 스프링 부트는 정적 컨텐츠를 /static (/public, /resources, /META-INF/resources)에서 제공한다. 스프링 부트 매뉴얼 : https://docs.spring.io/spring-boot/docs/2.7.8/reference/htmlsingle/#web.reactive.webflux.static-content resources/static/hello-static.html 정적 컨텐츠 입니다. 실행 : http://localhost:8081/hello-static.html 정적 컨텐츠 이미지 /hello-static.html 요청을 받고, 내장 톰캣 서버는 컨트롤러에서 hello-stati..

[스프링 입문] Section 1. 프로젝트 환경설정

1. 프로젝트 생성 📝 사전 준비물 Java 11 설치 IntelliJ 설치 1. 스프링 부트 스타터 사이트 이동해서 스프링 프로젝트 생성 https://start.spring.io/ 2. 프로젝트 선택 1) Project (빌드 도구 - Maven, Gradle) 빌드는 소스코드 파일들을 컴퓨터에서 실행할 수 있는 소프트웨어로 변환하는 일련의 과정으로 컴파일, 패키징, 테스트, 배포 등의 작업들을 말한다. 빌드 도구는 이러한 빌드 과정을 자동으로 수행해 주는 도구이다. 과거에는 Maven을 주로 사용했고, 요즘에는 Gradle을 사용한다. (Maven으로 프로젝트를 생성하게 되면 pom.xml이 생성되고, Gradle로 프로젝트를 생성하게 되면 build.gradle, settings.gradle이 생..

[Java] 진수변환

📌 10진수 → n진수 방법1 2진수 : Integer.toBinaryString(int i) 8진수 : Integer.toOctalString(int i) 16진수 : Integer.toHexString(int i) 리턴 타입은 String public class test { public static void main(String[] args) { int num = 123; // 10진수 -> 2진수 System.out.println(Integer.toBinaryString(num)); // 10진수 -> 8진수 System.out.println(Integer.toOctalString(num)); // 10진수 -> 16진수 System.out.println(Integer.toHexString(num)..

[Java] char타입 입력받기(Scanner, BufferedReader)

자바 Scanner와 BufferedReader는 String타입으로만 입력을 받기 때문에 char타입을 입력받는 기능이 없다. 그럼, 어떻게 문자를 입력받을 수가 있을까? charAt()을 이용하면 된다. 💡 charAt(int index) String타입의 문자열에서 지정된 index에 있는 문자를 char타입으로 변환해 준다. Scanner next()로 문자열을 입력받아 charAt(0)으로 첫 번째 문자를 꺼내오면 된다. Scanner scan = new Scanner(System.in); char word = scan.next().charAt(0); BufferedReader readLine()으로 문자열을 입력받아 charAt(0)으로 첫 번째 문자를 꺼내오면 된다. BufferedReade..

[React.js] Props / State / 생명주기

Props Props(Properties의 줄임말)는 컴포넌트에 전달하는 속성과 같은 것으로, 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. 컴포넌트는 전달받은 Props에 따라 표시하는 스타일과 내용을 변경한다. Props 학습 준비 먼저 이전 포스팅에서 계속 작업하던 폴더에 ColoredMessage라는 이름으로 컴포넌트를 만들고, 아래 코드를 작성해 준다. 🔽 ColoredMessage.js export const ColoredMessage = () => { const contentStyle = { color : "red", fontSize : "20px" }; return 안녕하세요! }; 🔽 ColoredMessage 임포트 import { ColoredMessage } fr..

[React.js] 이벤트와 스타일

리액트에서 이벤트를 실행하는 방법과 스타일을 적용하는 방법을 배워보자.😊 이벤트 취급 방법 리액트에서는 이벤트 등을 캐멀 케이스로 작성한다. 💙 캐멀 케이스 표기법 onclick ❌ onClick ⭕ onchange ❌ onChange ⭕ 그리고 JSX에 작성되어 있는 HTML과 같은 태그 안(return 이후 등)에서는 { }로 감싸서 자바스크립트를 작성한다. 이를 바탕으로 버튼을 클릭했을 때 alert가 실행되는 기능을 구현하면 다음과 같다. 🔽 alert 기능 구현 // App.js export const App = () => { // 버튼 클릭 시 실행되는 함수 정의 const onClickButton = () => { alert(); }; return ( Hello! 안녕하세요! 버튼 ); };..

[React.js] JSX 표기법 / 컴포넌트 사용 방법

JSX 표기법 리액트는 JSX 표기법을 사용한다. JSX는 영어로 다음과 같은 의미를 갖고 있다. A syntax extension jo JavaScript. 문장을 그대로 해석해 보면 자바스크립트의 확장 문법이라는 뜻이다. 그럼 문법을 어떻게 확장한 것일까? JSX는 JavaSciprt와 XML/HTML을 합친 것이라고 보면 된다. JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것이다. 먼저 리액트 프로젝트를 만든 뒤 src 폴더 안에 있는 파일을 모두 삭제하고, index.js를 새로 만든다. index.js에 리액트 기반을 작성하면서 JSX에 관해 알아보자. 먼저 react-dom 라이브러리에서 ReactDom이..

[React.js] React 란? / 리액트 개발 시작하기

React (리액트) 란? 리액트(React, React.js 또는 ReactJS)는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다. 💬 라이브러리 : 자주 사용되는 기능을 정리해 모아 놓은 것 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트의 특징 1. Component-Based (컴포넌트 기반) 리액트는 컴포넌트 기반의 UI 라이브러리이다. 컴포넌트란 독립적으로 존재할 수 있는 UI요소, 페이지에서 화면을 이루고 있는 구성 요소를 의미..