Web

1. Next.js란?React 기반의 풀스택 웹 프레임워크React가 UI를 그리는 라이브러리라면, Next.js는 라우팅, SSR, API, 빌드 등 앱 전체를 관리한다파일 기반 라우팅, 서버사이드 렌더링, API Route를 내장으로 제공한다 1) React vs Next.js구분ReactNext.js정의UI를 만드는 라이브러리React 기반 프레임워크역할화면을 그리는 도구라우팅, SSR, API, 빌드 등 앱 전체 관리렌더링클라이언트 렌더링(CSR)서버/클라이언트 모두 가능라우팅react-router-dom 직접 설치파일 기반 라우팅 내장데이터 패칭fetch(), SWR, React Query 직접 사용내장 fetch(), 서버 컴포넌트 활용설정Webpack, Babel 등 직접 구성자동 구성 2..

1. 폼 바인딩1) th:object 태그에 객체를 지정해서 하위 필드에서 객체명 없이 필드에 바로 접근${user.name} 대신 {name}으로 줄여 쓸 수 있음 저장 2) th:fieldid, name, value 속성을 한 번에 자동으로 설정해줌th:object와 함께 사용 --> 2. fragment 프레그먼트 (재사용 레이아웃)공통 HTML 조각(header, footer, nav 등)을 별도 파일로 분리하고 재사용1) fragment 정의 (th:fragment) 공통 네비게이션 공통 푸터 2) fragment 삽입속성의미th:insert현재 태그 내부에 프래그먼트를 삽입 (태그 유지)th:replace현재 태그 자체를 프래그먼트로 교체 태그 안에 hea..

표현식문법설명사용 예시Variable Expressions${...}변수 값을 출력할 때 사용${user.name}Selection Variable Expressions*{...}선택된 객체(현재 객체)의 값을 출력*{name}Message Expressions#{...}국제화 메시지 출력#{home.message}Link URL Expressions@{...}URL 경로 생성@{/home}Fragment Expressions~{...}다른 템플릿 조각 포함~{layout/header} 1. 텍스트 출력1) th:text태그 안의 기존 텍스트를 통째로 치환HTML 특수문자(, & 등)를 자동으로 이스케이프 처리th:text 대신 인라인 표현식 [[ ]]으로도 사용 가능기본값 # 기본값 → user.nam..

[ 타임리프 Thymeleaf ]Java 언어 기반의 서버측 템플릿 엔진주로 웹 어플리케이션 개발에 사용❓템플릿 엔진- 지정된 템플릿양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어 이름 [[${user.email}]] 관리자입니다. 일반 사용자입니다. 상세보기 저장 1. 설정1) build.gradle : 의존성 추가implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' 2) 기본 설정확장자 : .ht..

1. JSTL(JSP Standard Tag Library)이란?JavaEE 기반 웹 애플리케이션 개발을 위한 컴포넌트 모음JSP 스크립트와 HTML 코드가 섞여 복잡해지는 구조를 간결하게 작성하기 위해 Java 코드를 태그 형태로 표준화한 것 2. JSTL 기능기능설명제어문변수 선언, if문, for문 등포맷데이터 출력 포맷 설정DBDB 입력, 수정, 삭제, 조회함수문자열 처리 함수XMLXML 문서 처리 3. JSTL 설정pom.xml에 의존성을 추가하거나 jar 파일을 직접 추가 jakarta.servlet.jsp.jstl jakarta.servlet.jsp.jstl-api 3.0.0JSP 파일 상단에 taglib 선언을 추가해야 사용가능4. JSTL 주요 태그 (c 태그)1) c:s..

1. EL(Expression Language)이란?JSP에서 데이터를 더 간단하게 출력하기 위한 표현식 언어기존 를 대체하기 위해 사용${} 형태로 사용 ${"hello"} 객체의 속성에 접근할 때는 . 또는 ["속성명"] 방식을 사용${p.name} ${p["age"]} 2. EL 동작 원리${p.name} 이면 내부적으로 p.getName() (getter) 자동 호출Java Bean 규칙(getter 필수)을 반드시 따라야 함${null} : 에러 없이 공백으로 출력EL 문자를 그대로 출력하고 싶으면 \\ 사용\\${5 > 2} 2} 문자 그대로 출력 --> 3. JSP vs EL 비교EL이 없어도 JSP만으로 모두 처리할..

1. AJAX (Asynchronous JavaScript and XML)란?비동기 방식의 자바스크립트와 XML을 사용하는 개발 패턴(기술)서버와 통신하고 값을 받아오는 중에도 다른 일을 수행 가능 2. XMLHttpRequest비동기 요청을 수행하기 위한 JavaScript APIfetch() 이전에 사용하던 방식브라우저가 제공하는 Web API → Node.js에서 사용 불가 ❌⚠️ Web API란?- Web API = 브라우저가 JS에게 제공하는 기능들XMLHttpRequest ↓HTTP 요청 document ↓DOM 조작 setTimeout() ↓타이머 localStorage ↓브라우저 저장소1) XMLHttpRequest 메서드메서드설명open(method, url, async)요청 초기화...

1. 동기와 비동기구분설명동기 (Synchronous)코드가 순서대로 실행. 앞 작업이 끝나야 다음 작업 시작비동기 (Asynchronous)앞 작업이 끝나기를 기다리지 않고 다음 작업 바로 실행// 동기console.log("1");console.log("2");console.log("3");// 출력: 1 → 2 → 3 (순서 보장)// 비동기console.log("1");setTimeout(() => console.log("2"), 1000);console.log("3");// 출력: 1 → 3 → 2 (2는 1초 후 실행)💡 서버에 데이터를 요청할 때 응답을 기다리는 동안 아무것도 못 하면 사용자 경험이 나빠짐 → 그래서 네트워크 요청은 대부분 비동기로 처리 2. Promise 객체비동기 작업의..

[자바스크립트 객체]문자열(String), 숫자(Number), 배열(Array), 함수(Function) 등 1. 내장객체(built-id)Number, String, Date, Array, Boolean, Math, RegExp, JSON, BOM, DOMBOM 윈도우 히스토리2. 사용자 정의 객체1) Object 인스턴스 생성 후 정의var person = new Object();person.name = "홍길동";person.age = 30; 2) 생성자 함수function Person(name, age) { this.name = name; this.age = age; this.setName = function(newName) { this.name = newName; }}자바에서는 생성자를 함수..

[렉시컬(Lexical) ]1) 렉시컬(Lexical)코드가 어디에 작성되어 있는지를 기준으로 동작이 결정되는 것2) 렉시컬 스코프 (Lexical Scope)변수의 접근 범위가 함수가 선언된 위치에 의해 결정되는 것var data = 10;function print() { console.log(data);}function test() { var data = 20; print();}test(); //10Global ├ data = 10 ├ print() └ test()→ print()는 Global에서 선언된 함수이므로 test() 안에서 호출되더라도 test의 data가 아니라 global의 data를 사용 var data = 10;function outer() { var data = 20; ..

[ JQuery ]자바스크립트 프레임워크 또는 라이브러리브라우저에 상관없이$표시를 쓰기 때문에 Vue나 React에선 못씀(순수 Javascript 써야함) 1. jQuery 라이브러리 사용1) 라이브러리를 직접 다운인터넷 없이도 사용 가능uncompressed(압축되지 않아 보기 편), minified, slim, slim minified 2) CDN 사용⚠️ CDN을 사용하는 이유- 이미지와 스크립트를 여러 서버에 분산해 사용자가 더 빠르게 로드가능- 많은 사이트가 같은 CDN을 사용하므로 방문자 브라우저에 이미 캐시되어 있을 가능성이 높아 다운로드 없이 바로 사용 가능할 수도 있음 2. JavaScript와 JQuery 차이JavaScript는 속성(property)으로 접근하는 방식JQuery는 ..

1. ECMAScript란?JavaScript의 표준 명세버전주요 버전ES5 (2009)strict mode, JSONES6 (2015)class, arrow function, let/const, 구조분해, 모듈, PromiseES8 (2017)async/awaitES2023toSorted, toReversed, findLast 등 2. 클래스 Class함수의 한 종류이지만 function 키워드 대신 class 키워드 사용생성자 : constructor() → 객체 생성 시 자동 호출변수를 따로 선언하지 않고 this.변수명 으로 바로 사용extends를 쓴 자식 클래스는 반드시 super()를 먼저 호출해야 this를 사용 가능class Car { constructor(name) { this...