TIL

Today I Learn 즉 오늘 내가 배운것이다.나는 수업을 들을때 배운 내용을 기록하는 방식으로 메모를 작성한다. 다른 사람이 보기엔 가독성이 떨어질 수 있지만, 이 기록은 어디까지나 내가 배운 것을 정리하고 되돌아보기 위한 목적이다.

메타(meta) 태그 메타 데이터 데이터에 대한 데이터로, 다른 데이터를 설명하는 구조화된 데이터이다. 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 메타 태그는 요소 내부에 위치한다.

💙자바스크립트란? HTML은 구조, CSS는 디자인, 자바스크립트(JavaScript)는 동작을 담당한다. JavaScript는 컴파일(Compile)언어가 아닌 인터프리터(Interpreter) 언어다. 인터프리터 프로그래밍 언어의 소스 코드를 한 줄씩 읽으면

자바스크립트는 객체(Object) 기반 언어로, 기능과 속성을 가지고 있다.기능 : 메소드(method)속성 : (property)자바스크립트 엔진에 내장되어 있어 필요할 경우 생성해서 사용한다.ex) String, Date, Array, Math브라우저에 계층 구조로

💙JQuery Node(Element)를 간편하게 컨트롤하기 위한 라이브러리다. 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 자바스크립트도 가능하지만 jQuery가 더 수월하다. 💙셀렉

💙템플릿 리터럴 표현식의 값을 문자열에 추가하거나 여러 줄의 문자열을 표현할 수 있다. 사용법 역따옴표(백틱, ` ) 로 묶은 문자열 > var txt = `Hello My name is javascript`; 엔터까지 입력값으로 포함한다.

💙분할 대입 > 객체나 배열로부터 값을 추출하기 위한 방법 { } 를 변수 선언부에서 이용하면 객체 안에 일치하는 속성 추출이 가능하다 일부만 추출하거나 순서를 추출하는 것은 가능하나 존재하지 않는 속성은 지정할 수 없다. 💙디폴트값 > 함수의 인수가 객체를 분할

💙Optional Chaining (?.) 객체의

💙리액트(React) > 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 애플리케이션의 각 상태에 대한 뷰만 설계하면 된다. 💙특징 Virtual DOM 업데이트 해야하는 최소한의 부분만을 찾아서 업데이트가 가능하다. 컴포넌트 기반 ###리액트에

💙컴포넌트 > 리엑트에서 "UI 조각"을 만드는 단위이다. 버튼, 헤더, 프로필 카드, 페이지 등 하나의 화면 요소를 만드는 함수이다. 함수로 UI를 만든다. 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node(UI)를 출력하는 함수이

React 이벤트 시스템은 Synthetic Event(합성 이벤트) 라는 것을 사용\-> 브라우저 간의 호환성을 위해 만들어진 일종의 래퍼컴포넌트가 생성, 사용, 소멸될 때 까지의 과정이다. DOM이 생성되고 브라우저에 나타나는 시점이다.컴포넌트의 생서자(Constr

마이크로소프트에서 개발한 JavaScript에 타입 시스템을 추가한 언어자바스크립트의 상위 집합(Superset) 언어자바스크립트의 모든 기능을 포함하면서, 정적 타입(Static Typing)을 추가하여 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있도록 도와준다

예제 프로젝트를 만들면서 사용한 함수 정리 💙 fetch > 자바스크립트에서 비동기적으로 HTTP 요청을 보낼 수 있는 내장 함수 주로 서버에 데이터를 가지고오거나 보낼 때 사용한다.

수많은 정렬 알고리즘 중 시간복잡도가 𝚶(𝑛) 으로 엄청난 성능을 보여주는 알고리즘이다. 보통 빠르다는 정렬 알고리즘으로는 대표적으로 퀵 정렬(Quick Sort), 힙 정렬(Heap Sort), 합병 정렬(Merge Sort) 등이 있는데, 이들의 평균 시간복잡도

선택 정렬은 현재 위치에 들어갈 데이터를 찾아 선택하는 알고리즘이다.데이터를 ‘비교’하면서 찾기 때문에 ‘비교 정렬’이며 정렬의 대상이 되는 데이터 외에 추가적인 공간이 필요하지 않아 ‘제자리 정렬(in-place sort)’ 이기도 하다. 그리고 ‘불안정 정렬’이다.

HTML 문서 안에서 원하는 요소(Element)를 하나 찾는 JavaScript 명령어"선택자"는 CSS 선택자 문법을 사용한다. 만약 여러 개가 있으면 첫 번재 것만 가져온다. 여러 개를 찾고 싶다면 document.SelectAll() 을 사용한다.HTML 요소(

코드가 순차적으로 실행되지 않고, 시간이 오래 걸리는 작업이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하게 하는 방식\-> API 호출, 파일 읽기, 타이머 등자바스크립트는 싱글 스레드로 동작하기 때문에, 하나의 작업이 오래 걸리면 전체 프로그램이 멈추는 문제가

💙 JDK > Java Development Kit : 자바 개발 키트 💙 JRE > Java Runtime Environment : 자바 실행 환경 💙 OOP > Object Oriented Programming : 객체 지향 프로그래밍 데이터를 객체로 취

💙 형 변환 > 정수와 실수를 더한다고 할 때 하나의 자료형으로 통일한 뒤 연산을 해야 한다. 형 변환은 각 변수의 자료형을 같에 바꾸는 것이다. 기본 원칙 바이트 크기가 작은 자료형에서 큰 자료형으로 형 변환은 자동으로 이루어진다. 덜 정밀한 자료형에서 더 정밀한

💙 데이터 타입 >기본 타입 : 정수 타입, 실수 타입, 논리타입 참조 타입 : 배열 타입, 열거 타입, 클래스, 인터페이스 기본 타입을 이용해서 선언된 변수는 실제 값을 변수 안에 저장하지만, 참조 타입인 배열, 열거, 클래스, 인터페이스를 이용해서 선언된 변수는

💙 StringTokenizer vs split() > 문자열을 여러 개의 토큰으로 분리하는 클래스이다. StringTokenizer는 java.util에 포함되어 있는 클래스이고, split은 String 클래스에 속해있는 메소드이다. StringTokeniz

어떤 목적을 달성하기 위해 필요한 기능들과 변수들을 하나로 묶어 분리 시켜 놓은 모듈두 개 이상의 클래스가 선언된 소스 파일을 컴파일하면 바이트 코드 파일(.class)은 클래스를 선언한 개수만큼 생긴다. 소스파일은 클래스 선언을 담고 있는 저장 단위일 뿐, 클래스 자

하나의 클래스나 함수가 다양한 방식으로 동작 가능한 것. 오버로딩과 오버라이딩을 통해서 다형성 구현이 가능하다.같은 메소드를 타입이나, 매개변수 갯수, 매개변수 타입을 다르게 해서 사용변수나 객체를 사용하기 전에 값을 할당하거나 초기 상태로 설정하는 과정을 말한다.초기

💙 부모 생성자 호출 클래스 만들때 생성자가 선언되지 않으면 컴파일러에 의해 자동적으로 생성자가 만들어진다. 자식 생성자에서 자동으로 super(); 을 생성해 부모 생성자를 호출한다. 상속 받은 자식 클래스에서 생성자 자체는 생략 가능하지만 명시적으로 호출을 만들

객체의 사용 방법을 정의한 타입이다. 개발 코드는 인터페이스에 정의된 메소드만 알고 있어도 된다. 실제 동작은 인터페이스를 구현한 객체가 수행하므로, 개발 코드는 객체의 내부 구조를 몰라도 인터페이스를 통해 메소드를 호출 할 수 있다.객체는 인터페이스에서 정의된 요소들

클래스 내부에 선언한 클래스와 인터페이스이름이 없는 객체 의미한다. 프로그램에서 일시적으로 한번만 사용되고 버려지는 객체이다.(재사용이 되지 않는다) 단독으로 생성할 수 없고 클래스를 상속하거나 인터페이스를 구현해야만 생성 가능하다. 하나의 실행문이므로 끝에는 세미콜

💙 익명 객체 이름이 없는 객체 의미한다. 프로그램에서 일시적으로 한번만 사용되고 버려지는 객체이다.(재사용이 되지 않는다) 단독으로 생성할 수 없고 클래스를 상속하거나 인터페이스를 구현해야만 생성 가능하다. 하나의 실행문이므로 끝에는 세미콜론(;)을 반드시

💙 예외 처리 응용 프로그램 실행 오류가 발생하는 것을 에러라고 한다. 사용자의 잘못된 조작 또는 개발자의 잘못된 코딩으로 인해 발생하는 프로그램 오류는 예외라고 한다. 예외는 예외 처리(Exception Handling)를 통해 프로그램을 종료하지 않고 정상 실행

💙 프로세스 > 실행 중인 하나의 애플리케이션 애플리케이션을 실행하면 운영체제로부터 실행에 필요한 메모리를 할당받아 애플리케이션의 코드를 실행하는데 이것이 프로세스이다. 하나의 프로세스는 다중 프로세스를 만들기도 한다. ex) 크롬 브라우저를 두 개 실행했다면 두

💙컬렉션 프레임워크란?? 다수의 객체를 저장해두고 필요할 때마다 꺼내서 사용한다. 배열은 저장할 수 있는 객체 수가 배열 생성할 때 결정되서 불특정 수의 객체를 저장할때 문제가 있다. 컬렉션 프레임의 주요 인터페이스는 List, Set, Map이 있다. 💙 L

컬렉션(배열 포함)의 저장 요소를 하나씩 참조해서 람다식으로 처리할 수 있도록 해주는 반복자이다.forEach() 메소드는 Consumer 함수적 인터페이스 타입의 매개값을 가지므로 컬렉션의 요소를 소비할 코드를 람다식으로 기술할 수 있다.Stream이 제공하는 대부분

💙 System 클래스 운영체제의 일부 기능을 자바 코드로 이용하는 클래스이다.(프로그램 종료, 키보드로부터 입력, 모니터로 출력 등) System 클래스의 모든 필드와 메소드는 정적(static) 필드와 정적(static) 메소드로 구성되어 있다. 프로그램 종료

💙 입력 스트림과 출력 스트림 프로그램이 데이터를 입력받을 때에는 입력 스트림(InputStream)이라 부르고, 프로그램이 데이터를 보낼 때에는 출력(OutptutStream)이라고 부른다. 💙 InputStream > InputStream은 바이트 기반 입력

💙애플릿(Applet) > 서버에서 클라이언트 쪽으로 실행 파일을 내려 받아서 실행되는 방식 현재 사용하는 HTML5, CSS, jQuery 등의 기술이 사용되기 전 사용된 기술 클라이언트에서 내려 받아야 실행된다는 약점이 있다. 💙서블릿(Servelt) 클라

💙 프로젝트 구조 web.xml(배포서술자) > 웹 애플리케이션의 환경설정 정보를 담은 파일 WAS가 처음 구동될 때 이 파일을 읽어 설정 내용을 톰캣에 적용 💙 JSP 페이지 예외처리 404 : 요청한 JSP 페이지가 없을 때 발생하는 오류 500 : 컨테이너

💙 GET 방식 클라이언트에서 서버로 데이터를 전달할 때, 주소 뒤에 “이름”과 “값”이 결합된 스트링 형태로 전달한다. 주소창에 쿼리 스트링이 그대로 보여지기 때문에 보안성이 떨어진다. 길이에 제한이 있다. ( = 전송 데이터의 한계가 있다. ) Post 방식보다

💙 쿼리 스트링 > URL의 ? 뒤에 붙는 key=value 형식의 문자열로, 클라이언트와 서버 간에 데이터를 전달하거나 상태 정보를 공유하기 위해 사용되는 방식 login?name=juhee&age=26 웹 프로그래밍에서는 데이터가 쿼리 스트링 형태로 서버로 전송되고 이렇게 전송된 데이터를 얻어오기 위해서 쿼리 스트링에서 언급한 이름을 알아야 데이터...

💙 JSP 기본 태그 | 종류 | 사용용도 | 형식 | |----------------------------|------

💙 JSP 내장 객체 > JSP 페이지에서 프로그래머가 객체를 생성하는 과정 없이 바로 사용 할 수 있는 객체 JSP가 서블릿 파일로 변환될 때 JSP(서블릿) 컨테이너가 객체를 자동으로 생성해 주기 때문이다. 서블릿에서 out 객체 사용하려면 response 객

💙 액션 태그 > 스크립트릿, 주석, 디렉티브와 함께 JSP 페이지를 이루고 잇는 요소 중 하나 | 태그의 종류 | 설명 | |--

💙 자바 빈 > 정보의 덩어리로 데이터 저장소 재사용 가능한 컴포넌트를 만들기 위한 규약을 따르는 자바 클래스 프로그램에서 다뤄야 할 정보가 여러 개일 경우, 이를 각각 따로 저장하기보다는 자바 빈 객체로 묶어 하나의 객체로 구성해 사용하는 것이 더 효율적이다. 필

💙 표현 언어 > 표현 언어 (EL : Expression Language)는 값(데이터)를 웹 페이지에 표시(표현)하는 데 사용되는 태그이다. EL(Expression Language) JSP 출력에 대한 부분을 쉽게 하기 위해 개발한 tag(태그)이다. |

자바 애플리케이션이 데이터베이스에 표준화된 방식으로 접근할 수 있도록 지원하는 API이다.자바에서 JDBC를 이용하여 SQL(Structured Query Language)를 오라클과 주고 받을 수 있다. JDBC 드라이버 로드데이터베이스와 연결SQL문 실행데이터베이스

💙 비즈니스 로직(Business Logic) > 실제 업무를 처리하는 부분 데이터베이스와 연동하여 데이터를 얻어오는 작업을 함 💙 프리젠테이션 로직(Presentation Logic) > 화면을 처리하는 부분 HTML 형태로 결과를 클라이언트에 보여주는 역할

💙 DI(Dependency Injection) > 의존 관계 주입 의존성 > 어떤 클래스가 자신의 임무를 다하기 위해 필요한 값(필드 값)이나 사용할 다른 클래스와의 관계 주입 > 어떤 클래스의 인스턴스에 대해 외부로부터 '의존성'을 설정하는 것 의존 관계 주

💙 @Autowired > Spring에서 의존성 주입(DI)을 자동으로 처리해주는 어노테이션 객체 간의 의존 관계를 설정할 때 직접 new로 생성하는 대신, 스프링이 자동으로 의존 객체를 주입해준다.

💙 파일 업로드 > MultipartFile 클래스 사용 스프링 3 설정 스프링 4 설정 기본으로 포함 되어있다 💙 정적 자원(Static Resources) > 바뀌지 않는 파일들(코드로 처리하지 않고 그래도 보여주는 파일들) -> CSS, JS, Image

💙 상황별 예외 페이지 작성(web.xml) > HTTP 오류 코드 404와 500이 발생했을 때 각각의 JSP 파일로 에러 페이지를 보여주도록 지정 💙 500(Internal Server Error)를 Spring으로 처리 1. ExceptionControll

💙 HttpSession > Controller 메소드에서 HttpSession 파라미터를 선언하면 DispatcherServlet이 자동으로 주입해준다. > 세션에서 데이터 가져오기

💙 AJAX > Asynchronous JavaScript And XML 웹 페이지를 새로 고침하지 않고도 서버와 비동기적으로 데이터를 주고받는 기술이다. 페이지 전체를 새로고침하지 않고도 필요한 데이터만 주고받아서 빠른 사용자 경험(UX)을 제공한다. Sprin

💙 ORM > Object Relational Mapping Framework 객체 관계 맵핑 프레임 워크 객체 지향 프로그래밍 언어의 객체와 관계형 데이터베이스의 테이블 간의 불일치를 해결해주는 기술 객체 지향 언어 : User 클래스 -> id, name 필드

Java Persistence API 객체와 관계형 데이터베이스 사이의 매핑을 관리하는 표준 ORM 기술이다. SQL 없이 객체지향 방식으로 DB 데이터를 처리할 수 있다.Entity : DB 테이블과 매핑되는 클래스 (@Entity 사용)EntityManager :

💙 Optional > Java 8부터 도입된 null을 안전하게 처리하기 위한 래퍼 클래스 -> NullPointerException(NPE) 발생 가능성이 존재 java.util.Optional 형태로 사용되며, null 값을 직접 다루지 않고도 값이 존재할

💙 쿼리 메소드 (Query Method) > 메소드 이름만으로 쿼리를 자동 생성해주는 기능 SQL이나 JPQL을 직접 작성하지 않아도, 정해진 네이밍 규칙대로 메소드를 작성하면 Spring이 알아서 쿼리를 만들어준다. List findByUsername(Stri

Spring MVC에서 Controller가 처리한 결과 데이터를 뷰(View)로 전달하기 위해 사용하는 객체 Model은 Map<String, Object> 형태로 데이터를 저장한다. Model, ModelMap, ModelAndView 중 하나를 사용한다. H

💙 CSRF > Cross-Site Request Forgery, 사이트 간 요청 위조 사용자가 인증된 상태라는 것을 악용하여, 의도치 않은 요청을 대신 보내도록 유도(악성 요청)하는 공격 주로 사용자의 쿠키 기반 인증 정보를 이용 예시 사용자가 어떤 사이트에 로

💙 Errors 인터페이스 > org.springframework.validation.Errors 스프링에서 유효성 검사(validation) 결과를 저장하고 처리하기 위한 인터페이스 BindingResult가 상속하고 있는 상위 인터페이스이다. 검증 대상 객체에

JPA에서 연관된 엔티티들도 함께 영속성 작업을 적용할 수 있게 해주는 기능부모 엔티티에서 어떤 작업(저장, 삭제 등)을 하면, 연관된 자식 엔티티에도 동일한 작업이 자동으로 전이(cascade)된다. 부모는 One에 해당하고 자식은 Many에 해당된다.

💙 DB 설정 useSSL=false : SSL 없이 접속하겠다는 의미 (기본값은 true). 인증서 없이 접속할 때 오류 방지 serverTimezone=UTC : serverTimezone은 서버 시간대가 뭔지 명확히 알려주는 옵션으로 MySQL 서버 시간대를

💙 BaseTimeEntity > Spring Data JPA에서 등록 시간(regTime)과 수정 시간(updateTime)을 자동으로 관리하기 위한 공통 엔티티 글래스 이 클래스를 다른 엔티티에서 extends BaseTimeEntity처럼 상속만 하면, 날짜

💙 ItemFormDto > 상품 등록/수정 시 폼 데이터를 담는 DTO @NotBlank 빈 문자열 허용 X null이거나 공백이면 검증 실패 @NotNull null 허용 X 0은 가능 ModellMapper > ModelMapper는 Java 객체

💙 AuditConfig > Spring Data JPA에서 Auditing 기능 (자동으로 생성일자/수정일자, 작성자/수정자 등을 기록하는 기능)을 사용하기 위한 설정 클래스이다. @Configuration 해당 클래스가 스프링 설정 클래스임을 나타낸다. @E

💙 ItemRepository > Spring Data JPA에서 Item 엔티티를 조회하기 위한 ItemRepository 인터페이스 JpaRepository 기본적인 CRUD, 페이징 등을 제공하는 인터페이스 QuerydslPredicateExecutor

💙 JWT > JSON Web Token 사용자 인증(Authentication)과 권한 부여(Authorization)에 사용하는 토큰 기반 인증 방식 사용자의 로그인 정보를 안전하게 담아 서버 - 클라이언트 간에 전달하는 서명된 토큰이다. 서명된 : 위조되지 않

💙 hmacShaKeyFor(byte[] keyBytes) > JWT 서명을 위한 HMAC 키를 안전하게 생성하는 메소드 이 메소드는 JJWT 라이브러리에서 제공되며, JWT를 생성할 때 서명(Signature) 부분에 필요한 키를 만드는데 사용된다. 💚 동작

💙 UsernamePasswordAuthenticationToken > Spring Security에서 사용자의 인증 정보를 담는 객체 Authentication 인터페이스를 구현한 클래스이며 "현재 사용자가 누구인지", "어떤 권한을 가지고 있는지" 를 나타낸다

💙 @RunWith(SpringRunner.class) JUnit이 테스트를 실행할 때 Spring의 테스트 지원 기능을 사용하도록 설정한다. @Autowired로 Bean 주입, @SpringBootTest 같은 어노테이션 사용 가능하다. 💙 @SpringBo

💙 템플릿 엔진(Template Engine) > HTML 같은 뷰 파일 안에서 동적으로 데이터를 넣어 웹 페이지를 생성해주는 도구 서버에서 전달한 데이터(모델)를 HTML 구조에 끼워 넣어서 최종적으로 브라우저에 전달할 수 있게 해준다. 동작 방식 템플릿 파일

💙 MemberService > Spring Security에서 사용자 인증을 위해 UserDetailsService를 구현한 MemberService 클래스 UserDetailsService > Spring Security에서 사용자 인증 시 사용자 정보를 가져

의존성이란 종속성이라고도 하며 A가 B에 의존성이 있다는 것은 B의 변경 사항에 대해 A 또한 변해야 된다는 것을 의미한다. 메인 모듈(main module)이 ‘적접’ 다른 하위 모듈에 대한 의존성을 주기보다는 중간에 의존성 주입자(dependency injector

CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 "다른 오리진(Origin)"에 있는 리소스에 접근하려고 할 때 보안상 제한을 두는 메커니즘이다. 프로토콜과 호스트 이름, 포트의 조합을 말한다. 예를 들어 https://test

💙 이터레이터 패턴 > 컬렉션(Collection)에 저장된 객체들(요소들)에 직접적인 내부 구조를 몰라도 순차적으로 접근할 수 있게 하는 디자인 패턴 컬렉션 내부 구조를 노출하지 않아도 된다. List, Set, Map처럼 구조가 달라도 같은 방식(hasNext(

💙 정적(static)과 동적(dynamic) | 구분 | 정적(Static) | 동적(Dynamic) | | --------- | --------------------- | --------------------------- | | 시점 | 컴파일 시 결정 | 실...

💙 직렬화(Serialization) > 객체를 바이트 스트림으로 변환하는 과정 직렬화를 하면 객체를 세션, 파일, 네트워크 전송 등에 안전하게 저장하거나 전달할 수 있다. 서버가 세션을 저장하고 복원할 때 객체를 직렬화해서 저장하고, 역직렬화(Deserializa