코딩기록

HTML (HyperText Markup Language) 웹 페이지의 틀을 만드는 마크업 언어 구조를 표현하는 언어 tag들의 집합 트리구조 div vs span ``는 한 줄 전체를 차지 - 줄바꿈 O ``은 컨테츠(내용) 크기만큼만 차지 - 줄바꿈 X img, a `` : 이미지 삽입 `` : 링크 삽입 target을 이용하면 새로운 창으로 사...

CSS 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 링크를 통해 style 적용 , css와 연결 인라인 스타일 (권장x) 절대 단위, 상대 단위 절대 단위 : px, pt 상대 단위 : em, rem, vw, vh 등 글꼴 사이즈를 정할 때 -> 절대적인 크기는 보통 px, 상대 단위는 rem 추천 화면 사이즈를 정할 때 -> px...

논리연산자 || : 논리합(OR) 앞이 true이면 뒤는 확인X (개발할 때 용이 !) && : 논리곱(AND) ! : 부정(NOT) 재할당이 불가능한 변수(상수) let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됨! -> 그래서 const는 변수 선언과 할당을 한꺼번에 해야함! 템플릿 리터럴(template literal) 백틱(`)...

반복문 for문과 while문 for문을 사용하는 경우 반복 횟수가 비교적 명확할 때 배열, 문자열 내부를 순회할 때 반복문의 중첩이 필요할 때 while문을 사용하는 경우 반복 횟수가 명확하지 않을 때 실습 (조건문 + 반복문) str = str.toUpperCase(); ->console.log(str[i].toUpperCase());...

배열 순서가 있는 값 중첩배열 (다차원 -> 1차원) pop() - 지워짐과 동시에 반환하기 때문에 변수에 저장해서 무엇이 지워졌는지 알 수 있음 unshift() - 배열의 맨 앞에 값을 추가 shift() - 배열의 맨 앞에 값을 제거 4번, 8번, 9번 ,11번 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12...

원시 자료형과 참조 자료형 원시 자료형 6개의 자료형(number, string, boolean, undefined, null, symbol) 원시 자료형을 변수에 할당 -> 메모리 공간에 값 자체가 저장 참조 자료형 원시 자료형이 아닌 모든 자료형 배열, 객체가 대표적인 참조 자료형, 함수도 참조 자료형 ! 참조 자료형을 변수에 할당 -> 메모리 공간에 ...

DOM (Document Object Model - 문서 객체 모델 DOM은 HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조 (DOM으로 HTML 조작 가능) HTML문서의 계층적 구조와 정보를 표현, 뿐만 아니라 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메소드도 제공 HTML에 JavaScript 적용하기 `` 태그 HTML에...

DOM - 이벤트 객체 e.target; -> 태그 출력 ! .textContent; -> 해당 요소의 내용을 그대로 읽어옴 '아메리카노', '카페라떼'라는 문자열은 e.target 안에 담겨있음 ! keydown과 keyup 이벤트 키보드를 눌렀을 때 : keydown 키보를 떼었을 때 : keyup jQuery 사용 예제 mouseover와 mo...

유효성 검사 목표! 아래와 같이 움직이는 회원가입 창을 생성하는 것! index.html `` : 여러 구역을 나눠 표시할때 사용 비밀번호와 비밀번호 확인을 같은 class로 설정하여 js코드를 좀 더 편하게 짤 수 있게 설정! script.js elUserName.onkeyup = eventKeyUp; 인 것에 명심 !! eventKeyUp(); ->...

(1-1) What is git?! 깃 (git) > 분산 버전 관리 시스템(Distributed Version Control System, DVCS) 중 하나이며 프트웨어 개발에서 소스 코드 관리에 주로 사용 분산 버전 관리 시스템 > 버전 관리 시스템(VCS)은 시간에 따라 문서나 소스 코드와 같은 정보의 변화를 기록하고, 특정 시점의 버전을 다시 불...

(3-1) Branch Basic 브랜치(Branch)란? > Git에서 브랜치(branch)는 코드의 특정 버전을 가리키는 포인터 가장 일반적으로 사용되는 브랜치는 main 과 master 브랜치가 필요한 이유? 병렬 개발 각 브랜치는 독립적인 작업 공간이므로, 여러 사람이 동시에 다른 작업을 진행할 수 있는 장점이 있다. 버전 관리 각 브랜치는 특정 ...

(4-3) 변경사항 취소 및 시간여행 Detached HEAD > 특정 브랜치가 아닌 커밋에 직접 체크아웃한 상태 git checkout 로 입력하며 switch 대신 checkout을 사용한다는 점을 주의 Detached HEAD 상태에서 고려할 수 있는 것 단순히 이전 커밋 내역 둘러보기 그냥 헤드를 분리시킨 상태로 이전 커밋의 파일들을 둘러볼 수 ...

(5-1) Github > 2008년에 공개된 분산 버전 관리 툴인 Git를 사용하는 프로젝트를 지원하는 웹 기반 호스팅 서비스 Github 주요 특징 및 기능 1. 코드 호스팅 GitHub는 Git의 원격 저장소 기능을 제공하므로, 사용자는 코드를 클라우드에 안전하게 저장하고 언제든지 접근할 수 있다. 이를 통해 다른 컴퓨터에서도 자신의 코드에 접근하...

vscode에서 github repository 연결 빨간색 부분을 누르면 git과 연결 할 수 있다. 파란색 부분을 누르면 git의 다양한 기능들을 쓸 수 있고 아래와 같다. 처음에 Remote - add Remote를 하면 위처럼 깃허브 주소를 입력할 수 있는 곳이 생긴다! 내가 만든 Repository를 연결한다. 이후에 Remot

+

1장 - CSS 기초 CSS란? > - HTML 등의 마크업 언어로 작성된 문서가 웹사이트에 표현되는 방법을 정해주는 언어 레이아웃, 폰트, 색상처리 등의 디자인 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들기 위한 언어 3가지 스타일 시트 인라인 스타일 시트 인라인 스타일시트는 요소에 직접 스타일을 하는 방식이며, 유지보수에 부담을 주므로 ...

3장 - Box속성 px, % px 단위는 픽셀이라는 뜻, 화면에 고정적인 길이를 의미하며 절대적인 수치를 의미 1px은 디바이스마다 고정크기가 다를 수 있다. %는 부모요소 대비 비율 -> 위 코드에서 root의 자식은 parent이다. 여기서 root의 width가 500px이므로 parent의 width: 50%는 250px를 의미 em, rem e...

4강 글꼴, 문자 https://fonts.google.com/?subset=korean&noto.script=Kore fonf-size -> 주로 px와 em을 쓴다. 나는 em으로 쓰는 습관을 좀 들이려고 하고있다! font-weight font-style font-family ![](https://velog.velcdn.com/i

5강 배경 background background-image 아래 코드와 같이 url을 입력해주면 된다. background-repeat background-position background-position 은 px, em 등과 top, bottom, left, right, center 모두 가능 ! 위처럼 설정 되

6강 - 박스띄우기 float float - 수평 정렬하기 clear - 박스 수평 정렬 해제하기 위 그림처럼 clear 요소를 주게되면 박스 수평 정렬을 해제할 수 있다. -> 즉, 한 줄에 내가 원하는 만큼만 나오게 설정이 가능하다는 뜻 위 그림처럼 수도 클래스를 이용하여 3n+1을 설정해놓으면 한 줄에 3개씩 요소가 들어가게 만들 수 있

6강 - 박스띄우기 position position - relative 자기 자신을 기준으로 움직임 -> left를 주게되면 왼쪽선이 기준이 되기때문에 오른쪽으로 이동, 반대로 right하면 왼쪽으로 이동하게 된다. 마찬가지로 top이면 윗면이 기준이기때문에 아래로 내려오게 되고, bottom이면 위로 올라가게된다. 원래 있던 자리 지켜주기 때문에 다른...

7강 - 전환, 변환 transition transform

사이트 만들기 flex를 배우기 전에 지금까지 배웠던 html, css를 통해 사이트를 구현 1. 초기세팅 common.css web-fonts -> 구글폰트 사이트에서 설정 font-awesome -> font awesome 버전이 맞는지 확인 !! 현재는 6버전이지만 나는 5버전을 사용할 것이므로 사이트에서 5버전으로 바꾸어서 적용해야함 ...

html css header main 화면 전체를 배경화면으로 쓰고싶었기 때문에 section에 backgruound를 주었다. 정중앙으로 오는 공식을 이용하여 화면 중앙에 부제목이 위치하게 했다. hover 되었을 때 보여지게 하는법 해당 view에 가상 클래스를 활용하여 똑같지만 witdh: 0 인 복제본을 하나 씌운다. view의 가상 클래스에...

반응형 디자인 웹페이지에서 반응형 디자인을 볼 수 있는 곳을 보면서 확인 명시도 점수 생각하면서하기 애니메이션 @keyframes 2개의 애니메이션을 지정해야되면 0%, 100% 대신 from, to 를 써도됨 animation-name ![](https://velog.velcdn.com/images/rnfaos77/p

html 아직 자바스크립트를 활용해야하는 부분은 넣지 않았다. CSS

1. 자바스크립트 개요 1-1. 자바스크립트란?? > 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 2. 자바스크립트 기본 2-1. 변수와 상수 변수 이름 규칙 식별자 이름은 중복을 허용하지 않고 대/소문자를 구분! 식별자 이름은 숫자만으로 구성하거나 숫자로 시작하면 안됨! 식별자 이름에 공백을 포함할 수 없음! ...

2-3. 연산자 논리 연산자 (logical operator) 조건 연산자 (conditional operator) 입출력 prompt() : 브라우저에서 입력을 할 수 있게 해주는 함수 confirm() : 브라우저에서 확인/취소를 할 수 있게 해주는 함수 alert() : 브라우저에서 알림창을 띄우는 함수 2-4. 제어문 if문 else 절 ![...

2-4. 제어문 while 반복문 for 반복문 실행순서는 ①제어변수 선언 -> ②조건식 판단 -> ④실행문 -> ③증감식 -> ② 조건식 판단 -> ④실행문 -> ③증감식 순서로 진행되므로 순서에 주의 ! 중첩 반복문 ![](https://velog.velcdn.com/images/rnfaos77/post/0213aa2d-e

2-4. 제어문 break for문에 이름 설정하여 이름에 맞는 for문을 break할 수 있다. 무한 루프 프로그램이 중단되지 않게 유지할 때도 무한루프를 사용 continue 조건부로 특정 반복회차를 건너뛸 때 사용 skip 이라고 생각하면 편하다. up-down 실습 1번 2번 count--; --count; 둘 다 가능 ! -> 사용하기전에 감...

2-5. 형변환 암묵적 형변환 > 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 엔진에 의해 암묵적으로 타입이 변환되기도 하는데 이를 암묵적 형 변환(implicit coercion)이라고 한다. 문자열 타입으로 변환 + 연산자는 문자열 타입으로 변환시킨다. 숫자 타입으로 변환 `+연산자 -> = 문자

문제를 풀 때 증거를 남겨놓는 연습을 해보자

3-3. 함수기초 함수란? 함수란 어떠한 로직을 코드 블록으로 감싸서 하나의 이름이 있는 실행단위로 만든 것 함수의 호출 함수는 정의한 자체로는 사용불가 -> 꼭 호출을 통해 기능을 동작 시켜야함! 함수를 사용하는 이유 함수는 미리 코드를 모아 놓고 필요할 때마다 여러 번 호출가능 -> 즉, 코드 실행 시점을 개발

3-3. 함수 기초 다중 매개변수와 다중 반환값 만약 n개의 정수 합을 구해주는 함수를 만들어야 한다면 파라미터에 집합자료형(배열, 객체)을 전달 spread 문법 ... 활용 spread는 여러번 불가, 한 번만 사용 가능 ! 다중 반환값 함수의 반환값은 언제나 하나! (불변) -> 다중 반환값을 하려면 여러개를 하나로 만들 생각 (집합자료형 활용)...

4. 배열, 객체, 함수 advanced 4-1. 함수 표현식과 화살표 함수 함수 표현식 함수를 나타낼 수 있는 건 2가지가 있다. 둘의 차이를 알아보자. 1. 함수 선언문(정의문) 아래와 같은 형식으로 함수를 정의하면 함수 선언문 호이스팅 O (나중에 선언가능) 2. 함수 표현식 아래처럼 익명함수를 이용해서 함수를 마치 변수의 형태처럼 만들어서 사용하...

배열고차함수 forEach() 배열의 요소를 순회, for문과 동일 함수형 프로그래밍에 최적화 되어있다. (요즘 메타) forEach()의 구조 filter() 조건에 맞는 배열안의 요소를 필터링 map() 배열에서 특정 데이터들을 추출해서 새로운배열에 매핑 filter와 map의 공통점 b 부분에는 인덱스가 출력 filter와 map의 차이점 f...

reduce 배열교차함수 reduce : 배열의 각 요소들을 주어진 콜백에 맞게 합산, 누적하여 하나의 결과값을 반환하는 함수 reduce에 들어가는 callback -> callback(accumulator, currentValue) accumulator: 어떤 데이터를 계속 쌓아가는 변수 currentValue: 현재 루프회차에서 사용할 데이터 redu...

sort() 배열 데이터를 정렬할 때 사용 아래와 같이 그냥 사용하게되면 제대로 정렬되지 않음 (아스키 코드에 따라 정리되기 때문에) 오름차순, 내림차순 a-b가 양수이면 오름차순, 반대면 내림차순이 된다. 오름차순, 내림차순 활용 이름 같은경우에는 문자열이기 때문에 if문을 통해 숫자 1, -1을 리턴하는 것에 따라 정렬 (1은 양수에 해당하므로 오...

2장 - Web API 1. DOM (Document Object Model) 2-1. DOM 기초 > DOM이란 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API를 제공하는 트리 형태의 자료구조 HTML 요소와 노드 객체 HTML 요소는 브라우저 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 -> 이 때 ...

2-2. DOM 제어와 조작 자식 노드탐색 firstChild, lastChild 는 사용 X (띄어쓰기 같은 것들까지 모두 자식으로 싸잡기 때문에 문제가 많음) firstElementChild, lastElementChild로 사용 부모형제 노드탐색 위와 같은 html이 있고, active 클래스에서 60이라는 숫자가 있는 곳으로 가려고한다면 아래처럼...

2-3. 속성노드 속성 기초 어트리뷰트(attribute) HTML 요소는 여러 개의 속성(어트리뷰트)을 가질 수 있음 ! 문서가 파싱될 때 HTML 요소의 속성은 어트리뷰트 노드로 변환되어 요소 노드의 형제 노드로 추가 -> 이 때 속성 하나당 하나의 어트리뷰트 노드가 생성됩니다. 위의 경우 3개의 어트리뷰트 노드가 생성 모든 어트리뷰트 노드의 참조는 ...

2. 이벤트 2-1. 이벤트 기초 브라우저는 클릭, 마우스 이동, 키보드 입력 등이 일어나면 이를 감지하여 특정한 타입의 이벤트를 발생 만약 애플리케이션이 특정 이벤트에 반응하고 싶다면 이벤트에 대응하는 함수를 브라우저에게 알려주어 호출을 위임가능 -> 이 때 호출될 함수를 이벤트 핸들러 이벤트 타입 마우스 이벤트 click – 요소 위에서 마우스 왼쪽 버...

이미지 슬라이드 (이전, 다음 이벤트) 사진에서처럼 다음으로 넘어갈 때마다 그 다음 사진이 나오게, 이전으로 넘어갈 때 마다 전 사진이 나오게 하기 위해서 공식처럼 사용하는 식이 있음 현재인덱스+1을 길이로 나눈 나머지를 다음 index로 설정하여 증가하는 것을 통해 식을 정함 이전으로 넘어갈 때는 현재인덱스 -1 + 길이를 길이로 나눈 나머지로 설정 ...

비동기 setTimeout 비동기함수 setTimeout -> 코드를 순서대로 진행시키는게 아닌 시간차로 진행시킬 수 있게 함 코드는 일반적으로 위에서 아래로 진행하게 되는데 위 for문에는 setTimeout으로 2초 후에 나오게 설정하여 아래코드가 먼저 진행되게함 clearTimeout 2초 후에 text를 담는 timer라는 변수를 생성 -> 여러...

UP & DOWN 게임 html defer가 있으면 script가 head에 존재해도 나중에 실행되기 때문에 적용됨 javascript TODOLIST html javascript

CALCULATOR html vendor.js에서 정의하고 app.js에서 실행하므로 vendor.js를 먼저 씀 app.js 실행 코드를 작성 vendor.js 변수, 함수를 정의

모듈 파일을 나눠서 관리 getDom.js에는 태그 정의 event.js에는 함수 정의 app.js에서는 이벤트 핸들러를 등록 -> getDom.js, event.js 에서는 export를 붙여 넘겨주고 (필요에 의해 import도 가능), app.js에서 import하여 사용 (내 파일, 팀원 파일 등 모두 import 가능) app.js만 html에 등...

2. 시작하기 자바 블록레벨 스코프 자바의 변수는 생성된 블록에서 블록이 종료되면 메모리에서 사라짐 3. 데이터타입 값만 입력하고 Ctrl + Alt + v 하면 변수와 타입을 알아서 담아줌 자바의 데이터 타입은 8개 byte, short, int, long, float, double, boolean, char

3. 데이터타입 타입이 다른 데이터의 연산에서 작은 쪽으로 캐스팅하고싶으면 작은 쪽 부호로 전체를 묶어줌 -> 즉, int 이하의 사이즈를 가진 타입은 연산시 결과가 자동으로 int로 캐스팅 4. 연산자 논리연산자 &, &&: 양쪽 항의 논리값이 모두 true일 경우에만 true가 도출 |, ||: 양쪽 항의 논리값 중 한 쪽만 true여도 true를 도...

배열 탐색 알고리즘 (search) equls()를 통해 찾고있는게 배열에 존재하는지 확인 -> 찾았다면 index 반환 배열 중간에 삽입 (insert) 사이즈가 1개 더 큰 배열을 생성 기존 데이터 복사 삽입 위치를 기준으로 뒤의 데이터들을 뒤로 1칸씩 이동 -> 이동 순서는 맨 끝에서부터! 새로운 데이터를 타겟 인덱스자리에 복사 주소값 이전 11....

퀴즈 makeNewArray 메서드와 copy 메서드를 새로 생성 -> 함수는 잘게 쪼개야 좋기 때문에

객체란? > 데이터와 그 데이터를 처리하는 함수들을 묶어놓은 하나의 독립적인 단위 객체의 장점 코드의 가독성이 좋아짐 유지보수가 편리 코드 재사용성이 높아짐 대규모 프로그램을 개발할 때 유용 클래스, 필드, 메서드 > **클래스 : 객체를 찍어내는 설계도, 설계도의 역할만 하고 실행은 안함 -> 실행은 main 메서드에서 진행** 클래스 안에는 객체의 ...

... vs [] [] 는 필드나 로컬 변수에 선언 가능 ... 은 필드나 로컬 변수에 선언 불가능 ... ... 은 생성자나 함수등의 파라미터로만 선언이 가능 가변인자이고 메서드내에서 가변인자는 배열로 처리 [] 정적인 크기의 배열을 선언할 때 사용 ...와 [] 예시 ... 와 [] 를 이용하여 각각 생성자를 생성 main메서드에서 배열을 가변인자로...

toString() toString 메서드는 객체가 가지고 있는 정보나 값들을 문자열로 만들어 리턴하는 메서드 -> 객체의 정보를 출력해줌 toString() 특징 명시하지 않아도 자동으로 적용됨 아래처럼 클래스이름@16진수로표시된해시코드 형태의 문자열을 반환 하지만 아래 예시처럼 format해준다면 내가 출력하고싶은 형태로 설정 가능! 생성자 특징 ...

스트링리스트 스트링 배열을 관리하는 객체의 설계도 다루는 필드에 배열이 2개 이상이 될 경우 스트링리스트로 묶어주면 기능들을 같이 쓰게 만들 수 있음 임의의 스트링 배열을 필드로 등록해놓으면 스트링리스트 클래스를 참조해서 객체를 생성할 때 마다 각기 다른 배열을 계속 생성 가능 접근 제한자 (access modifier) > 클래스, 필드, 메서드, 생성...

상속(Inheritance) 상속이란? > 부모 클래스가 가진 속성과 기능을 자식 클래스가 물려받는 것 위처럼 클래스는 다르지만 가지고있는 속성과 기능이 너무나 비슷한 것을 볼 수 있다. 이럴 경우 상속을 이용한다. Animal 이라는 클래스를 추가하여 공통으로 가지고 있던 속성과 기능들을 모두 모아놓는다. 그리고 이를 부모 클래스로 지정한다. 나머지 ...

super > super 키워드는 상속 받고 있는 부모 객체를 지목할 때 사용하는 키워드 super. 을 통해서 부모의 필드나 메서드를 지목할 수 있고, super()를 통해 부모의 생성자를 호출하는 것이 가능하다. 아래 예시를 통해 super에 대해 더 알아보자! 부모 클래스 자식 클래스 main 자식 클래스에서 생성자 생성시 super()는 자동...

접근제한자 protected 본인 클래스에서는 에러없이 모두 작동 같은 패키지인 B클래스에서도 모두 작동 다른 패키지인 C클래스에서는 작동X 다른 패키지이지만 상속받는 자식인 D클래스는 접근 가능 protected 정리 같은 패키지안에서 O 다른 패키지이지만 상속받는 자식이면 O 그 외에는 모두 X 사용 제한자 final > final을 해석하면...

다형성 (Polymorphism) > 하나의 객체가 여러 타입으로 사용되는 것 상속을 전제 조건 부모 타입에 어떠한 자식 객체든 들어갈 수 있다. 다형성을 사용하는 이유 1. 이종모음 ( 동종모음) 배열 구현 가능 -> 배열로 활용 가능 2. 굳이 여러 개의 메서드를 선언할 필요 없이 하나의 메서드 만으로 여러 개의 객체를 받아 처리할 수 있음 다형...

추상 클래스, 추상 메서드 (Abstract) 추상이란? > 구체성(具體性)이 없어서 그 뜻이 분명하지 않은 것 자바에서의 추상도 그 의미와 유사하다. 아직 완성되지 않은 불완전한 클래스와 메서드, 그것을 추상 메서드 그리고 추상 클래스라고 부른다. 추상 메서드란 > 메서드 선언만 되어 있고 메서드의 바디 (중괄호 부분) 이 없는 메서드 틀만 구축해 놓...

정렬 버블정렬의 개념이 가장 중요하다. 일반적으로 자바 내에 Arrays.sort() 를 사용 버블정렬 > 데이터의 인접 요소끼리 비교하고, swap 연산을 수행하며 정렬하는 방식 시간 복잡도는 O(N^2)으로 다른 정렬보다 느린 편 ![](https://velog.velcdn.com/images/rnfaos77/post/20e93555-8f

예외 처리 (exception) 예외란? 프로그램을 실행하다 보면 어떤 원인 때문에 비정상적인 동작을 일으키며 프로그램이 종료되는 상황을 본 적이 있을 것이다. 이때 우리는 프로그램이 오류가 발생했다고 말한다. 에러의 종류 우리가 컴파일할때 발생할 수 있는 컴파일 오류 실행 중 발생되는 런타임 오류 가 있다. 컴파일 오류는 개발 툴을 사용하면 빨간 ...

자바 표준 API > 기본적인 자바 프로그래밍을 위해 제공되는 라이브러리 집합 대표적인 예시 java.lang 패키지의 Object, String 클래스 java.util 패키지의 List, Set, Map 인터페이스 java.lang 패키지는 생략가능 Object 클래스 자바의 최상위 클래스 Object 클래스의 메서드는 오버라이딩해서 클래스에...

제네릭 > 클래스 내부에서 지정하는 것이 아닌 외부에서 사용자에 의해 지정되는 것 한마디로 특정 타입을 미리 지정해주는 것이 아닌 필요에 의해 지정할 수 있도록 하는 일반(Generic) 타입을 의미 `` 안에 기본 타입을 사용할 수 없고 객체 타입을 넣어주어야 한다. main 메서드를 보면 AppleBasket에 setter를 이용해 Apple을 담을...

파일 입출력 (IO) 파일, 폴더 생성 File을 import하여 폴더, 파일을 생성할 수 있다. Stream이란? 데이터가 들어오면 입력 스트림 데이터가 나가면 출력 스트림 스트림 클래스는 크게 두 종류로 구분 (byte기반, 문자 기반) byte 기반의 입,출력 스트림의 최상위 클래스 InputStream과 OutputStream. 문자 기반의 입...

내부 클래스(중첩 클래스) & 익명 클래스 보통 인터페이스를 통해 추상 메서드를 만들고 클래스를 만들어 인터페이스를 구현해서 사용한다. 하지만 Main메서드에서만 필요하다거나 딱 한개의 메서드만 필요하다면 이렇게 불필요하게 클래스를 만들면 불편하지 않을까? 그래서 나온 개념이 내부 클래스와 익명 클래스이다. 내부 클래스 위 예시에 연장선으로 뺄셈 계산기를...

객체 데이터 변환 및 필터링 Map과 filter는 데이터를 변환하고 필터링하는 데 사용되는 메서드이다. 컬렉션(배열, 리스트 등)의 요소를 처리하고 변환하는 데 유용하다. filter 위는 filter의 구성이다. 내가 원하는 조건으로 필터링하여 List배열을 리턴해준다. `` 에는 내가 필터링하고 싶은 객체가 들어간다. GenericPredicate...

객체안에 존재 여부 확인 anyMatch, allMatch, noneMatch를 활용해서 객체 안에 존재여부 확인 가능 객체 정렬 객체를 정렬을 위해 sort 메서드 사용가능 람다 -> 메서드 참조 람다를 메서드 참조로 변경할 수 있다. -> 인텔리제이에서 알려주는 것으로 천천히 공부한다.

1. 관계형 데이터베이스 개요 데이터베이스 (Database) > 데이터베이스는 관련된 데이터들을 체계적으로 저장하고 관리할 수 있도록 구성된 데이터의 집합 DBMS (데이터베이스 관리 시스템) > 데이터베이스를 관리하기 위한 소프트웨어 시스템 DBMS는 사용자와 데이터베이스 간의 인터페이스 역할을 하며, 데이터의 저장, 검색, 수정, 삭제 등을 수행 ...

2. DML (Data Manipulation Language) > DML (Data Manipulation Language)은 데이터베이스 내의 데이터를 조작하는 데 사용되는 SQL 구문 주요 구문 SELECT 데이터베이스에서 데이터를 조회(검색) INSERT 데이터베이스에 새로운 데이터를 추가 UPDATE 데이터베이스의 기존 데이터를 수정 DELETE...

Function 단일행 함수 > 하나의 입력 행(row)에 대해 하나의 결과 값을 반환하는 함수 단일행 함수 종류 문자 함수 숫자 함수 날짜 함수 변환 함수 일반 함수 문자 함수 UPPER(string) - 문자열의 모든 문자를 대문자로 변환합니다. LOWER(string) - 문자열의 모든 문자를 소문자로 변환합니다. INITCAP(string) - ...

집계 함수 > 여러 행의 값을 기반으로 계산된 단일 결과 값을 반환하는 함수 이러한 함수는 일반적으로 GROUP BY 절과 함께 사용되어 데이터를 그룹화하고 각 그룹에 대한 요약 정보를 제공하는 데 사용 주요 집계 함수 -> 집계 함수는 주로 SELECT 문의 SELECT 절과 GROUP BY 절에서 사용 집계함수에서 null처리 AVG(): NULL...

ANSI 표준 조인 > SQL에서 테이블 간의 연결을 정의하는 방법 중 하나로, ANSI(SQL 표준을 개발한 기구)에서 제시한 표준화된 형식 ANSI 조인의 종류 INNER JOIN 두 테이블 간에 연관컬럼을 이용하여 관계가 있는 데이터를 매칭하여 조인 OUTER JOIN 조인 조건을 만족하지 않는 행들도 조회할 때 사용하는 조인기법 OUTER조인 연산...

오라클 계층형 쿼리 > 트리 구조와 같은 계층적 데이터를 쉽게 조회하고 조작할 수 있도록 지원하는 SQL 기능 START WITH 계층의 첫 단계를 어디서 시작할 것인지의 대한 조건 START WITH에 써있는 조건은 CONNECT BY에 써있는 조건에 해당되지않아도 무조건 쓴다. CONNECT BY 상위 노드와 하위 노드 간의 관계를 정의 CONNECT...

HTTP 특징 무상태(stateless) 프로토콜 한 번의 요청과 한 번의 응답이 끝나면 서버는 모든 기억을 삭제

집합 연산자 > 여러 SELECT 문의 결과를 하나의 결과 집합으로 결합하는데 사용 UNION 합집합 연산 첫번째 쿼리와 두번째 쿼리의 중복정보는 제거 첫번째 쿼리의 열의 개수와 타입이 두번째 쿼리의 열수와 타입과 동일해야한다. 자동으로 정렬 (첫번째 컬럼 오름차가 기본값) 성능상 부하가 일어날 수 있음 UNION ALL UNION과 같이 두 테이블로 ...

트랜잭션 > 하나 이상의 데이터베이스 연산이 묶여서 하나의 논리적인 작업 단위로 처리되는 것 트랜잭션 특징 (ACID) 원자성(Atomicity): 트랜잭션은 일련의 연산 중 하나라도 실패하면 전체 연산이 취소 -> 가장 중요!!! 일관성(Consistency): 트랜잭션이 완료되면 데이터베이스의 일관성이 유지 격리성(Isolation): 여러 개의 트랜...

그룹 함수 ROLLUP (학과, 지역) GROUPING SETS (학과, (학과, 지역), ()) -> 학과별 통계, 학과+지역 통계, 전체 통계 CUBE (학과, 지역) GROUPING SETS (학과, 지역, (학과, 지역), ()) -> 학과별 통계, 지역별 통계, 학과+지역 통계, ...

MVC 패턴 > 자바웹프로그래밍에서 사용되는 대표적인 아키텍처 패턴 중 하나 Model: 데이터와 비즈니스 로직을 처리하는 부분 사용자가 요청한 데이터를 처리하고, 데이터를 CRUD 보통 DAO(Data Access Object) 패턴을 사용하여 구현 View: 데이터를 시각적으로 출력해주는 부분 클라이언트 측에서 사용자가 요청한 ...

주제 영화 예매 프로그램 내가 맡은 파트 프로젝트의 깃허브를 담당 -> 전반적인 github관리 영화 예매 로직 구현 개발 기간 프로젝트 설계도 구현

데이터 모델링의 유의점 중복(Duplication) 데이터 모델은 같은 데이터를 사용하는 사람, 시간, 장소를 파악하는데 도움을 줌. 이러한 지식 응용은 데이터베이스가 여러 장소에 같은 정보를 저장하는 잘못을 하지 않도록 함. 비유연성(Inflexibility) 데이터의 정의를 데이터의 사용 프로세스와 분리함으로써 데이터 모델링은 데이터 혹은 프로세스의 ...

DELETE (db 삭제) 고유 id를 전달해줌으로써 db에서 삭제 - 삭제 후에는 다시 재 조회해서 삭제된 것을 제외한 리스트를 띄워줌 -> 여기서 SELECT, INSERT처럼 forward로 요청을 보내면 안된다. forward로 요청을 보내면 한 번만 요청을 보내기때문에 삭제시의 url만 요청 보낼 수 있기 때문이다. 하지만 Redirect로 요청을...

스프링 프레임워크 > 스프링 프레임워크(Spring Framework)는 자바 언어를 위한 오픈소스 경량급 애플리케이션 프레임워크 SOLID > 객체 지향 프로그래밍에서 유지보수와 확장성을 높이기 위한 다섯 가지 설계 원칙 SRP (Single Responsibility Principle): 단일 책임 원칙 한 클래스는 단 하나의 책임을 가져야 하며, ...

정규화와 성능 뷰(View) VIEW는 데이터베이스에서 가상 테이블의 개념입니다. VIEW는 기본 테이블의 데이터를 기반으로 하지만, 실제로 데이터를 저장하지는 않습니다. 대신, 미리 정의된 SQL 쿼리를 저장하고, 이를 통해 가상의 테이블을 생성하여 사용자에게 결과를 제공합니다. VIEW는 원본 테이블의 하위 집합이거나 여러 테이블을 조인한 결과일 ...

기존 JSP/Servlet을 통해 MVC패턴 구현 1. HomeServlet을 통해 요청하여 index.jsp를 띄움 2. RegisterServlet에서 요청하여 reg_form.jsp (회원가입 폼)에 들어감 3. SaveServlet를 통해 저장하고 조회화면을 띄워줌 (조회화면으로 리다이렉트) 일반적으로 데이터를 변경하는 작업인 경우(예: 저장, ...

스프링 MVC의 주요 컴포넌트 DispatcherServlet 스프링 MVC의 핵심 컴포넌트로, 클라이언트의 요청을 받아들이고 적절한 핸들러에게 요청을 전달합니다. 또한, 컨트롤러에서 반환된 결과를 HTTP 응답으로 변환하여 클라이언트에게 반환합니다. HandlerMapping DispatcherServlet이 클라이언트의 요청을 받았을 때, 요청을 처...

요청처리, 응답처리 예시 View로 전달된 menu, price는 ${} 형태로 사용됨 요청처리, 응답처리 연습 1번, GetMapping, mvc/s-form을 반환 해주면됨 2번, PostMapping, if문을 통해 아이디, 비밀번호 검증, mvc/s-result를 반환 s-result.jsp가 아래처럼 구성되어있기 때문에 result라는 문자...

IoC, DI > 제어의 역전(IoC) : 객체 생성의 제어권을 외부로 넘긴다. 의존성 주입(DI) : 외부에서 생성된 객체를 주입받는 개념 IoC는 개발자가 아니라* 스프링같은 프레임워크에서 객체의 생성과 관리를 수행* 개발자는 객체를 사용하기 위해 필요한 인터페이스를 정의하는 것에 집중 클래스를 통한 Ioc, DI도 가능 아래 예시를 보면 스프...

Jdbc (Java DataBase Connectivity) > 자바 프로그램에서 SQL 문을 실행하여 데이터를 관리하기 위한 JAVA API -> 즉, Java가 DB와 통신할 수 있게 해주는 API 별도의 프로그램을 만들 필요 없이, 해당 데이터베이스의 JDBC를 이용하면 하나의 프로그램으로 데이터베이스를 관리가능 전통적인 JDBC 방식의 문제점 !...

스프링 개발 순서 db설계 - DB와 1대1 매칭되는 객체 생성 - repository 인터페이스 - repository 구현체 (+구현체는 Impl을 붙이는 경우도 있음!) - controller -> repository에서 기능을 구현할 때 마다 테스트 해도되고 자유~ 게시판 기능 실습 boardno, viewcount, regdatetime은 값이 ...

3 Tier Architecture Controller-Service-Repository 패턴 Controller 웹 요청을 받아서 해당 요청을 처리할 Service를 호출 -> 그 결과를 다시 View에 전달한다. 즉, Controller는 클라이언트로부터의 입력을 처리하며, HTTP 요청에 대한 응답을 생성 Repository Repository는 데...

MyBatis MyBatis는 자바 언어를 위한 오픈 소스 ORM(Object Relational Mapping) 프레임워크로, JDBC로 수행되는 데이터베이스 쿼리의 수고를 덜어주는 간편한 방법을 제공 Jdbc의 단점을 극복한 방법 SQL을 직접 작성할 수 있어 개발자가 데이터베이스에 더욱 직접적으로 접근 가능 순서 https://mybatis.org...

게시물 관리 프로그램 수정사항 Repo -> mapper로 수정 service 클래스를 만들어서 중간 처리를 담당하게함 조회수가 5이상인 게시물에 특정 마킹하는 기능 추가 1시간 이내 게시물 (새 게시물) 인지 확인하는 기능 추가 BoardRepository 내용-> BoardMapper로 모두 옮김 Controller에 있는 비즈니스 로직 Servic...

페이징 게시물 목록이 화면에 뜰 때 아래에 1, 2, 3 .. 등의 넘기는 숫자와 한꺼번에 넘길 수 있거나 되돌릴 수 있는 next, prev 같은 기능을 추가해보려고한다. BoardMapper.xml LIMIT을 걸어서 페이징의 범위를 설정 pageStart는 그 페이지의 첫번 째 게시물번호, amount는 한 페이지당 게시물 목록 수를 나타낸다. ...

1. 검색결과에 따른 게시물 수가 알맞게 뜨지 않을 때 총 게시물 수를 조회하는 count를 검색 타입에 따라 게시물 수가 다르게 뜨게 하기위해서 if로 조건을 건다. BoardMapper.xml count 수정 sql에서 if문이 중복될 때 동적 SQL 조건을 분리 if문을 따로 빼서 저장 count를 아래와 같이 짧게 수정 가능 count를 수...

댓글기능 설계 db설계 및 Reply(댓글) 클래스 board_no을 외래키로 가지고 있다. ReplyMapper ReplyMapper.xml ReplyMapperTest 댓글을 테스트하기 위해선 게시글도 필요하기 때문에 게시글도 같이 테스트 @Builder 테스트 데이터를 추가할 때 Board b = new Board().. 의 방식으로 추가했었는데...

1. 클라이언트 사이드 렌더링 (REST API, 비동기 통신 이해 필요) > 서버에서 브라우저로 데이터만 전달받아 UI 생성 및 렌더링 작업은 실시간으로 클라이언트가 하는 방식 브라우저에서 JavaScript를 이용해 실시간으로 동적으로 페이지를 생성하고 렌더링 -> 서버 부하가 줄어듦 + 브라우저에서 앱을 실행하는 것이기 때문에 웹 애플리케이션의 성능...

Reply RESTAPI로 구현 ReplyApiController Restful한 서비스 구축을 위해 RestAPI를 사용하여 Controller 수정 ReplyService ReplyDetailDto 댓글 조회시 화면에 띄우고싶은 데이터들을 모아놓은 ResponseDto -> 필요에 의해 커스텀하여 사용가능 ReplyPostDto 댓글을 입력시 필요...

입력값 검증 > 입력값에 대한 검증은 validation 라이브러리로 진행 build.gradle 라이브러리 설치 ReplyPostDto 요청DTO에서 검증 수행 -> 클라이언트가 서버에 넘기는 데이터에 대한 검증이 필요하므로 ReplyApiController 검증 로유 메시지를 생성하는 함수

AJAX > 비동기 함수를 지원하는 라이브러리 자바스크립트는 싱글 스레드(single-threaded) 언어 -> 한 번에 하나의 작업만 처리(동기 처리)할 수 있음을 의미, 그러나 이벤트 루프와 콜백 함수를 사용하여 비동기 처리 가능 1. 동기와 비동기 동기코드 (Synchronous Code) 작업이 순서대로 실행 비동기코드 (Asynchronou...

실습문제 Modal에 상세조회 추가 fetchAPI POST body와 header 필요 O, 전달할 것 필요 O fetchAPI DELETE bodyd와 header 필요 X, 전달할 것 X async, await async는 함수의 선언 앞에 위치하며, 해당 함수가 비동기로 동작하도록함 await 연산자는 async 함수 내에서만 사용할 수 있으며...

조회, 등록 getReply.js postReply.js reply.js

무한스크롤 추가 isFetching: true인 동안에는 (데이터가 요청 중) 데이터 요청이 진행 중이므로 함수를 바로 종료하여 중복 요청을 방지 fetchAPI PUT (수정요청) 댓글 번호를 수정하는 부분에서는 구할 수 없으므로 댓글에서 미리 구해서 수정 모달에 넣어줌 ReplyService 댓글 수정할 때 필요한 입력값들을 포장하는 dto객체 필...

인증 (Authentication) 로그인 인증은 사용자의 신원을 확인하는 과정. 아이디 인증, 지문 인증, 얼굴 인식 인증 인가 (Authorization) 권한

회원가입 요청 처리 MemberService에서 회원 가입 중간처리 엔터티로 변환되는 과정은 필수적 + 회원가입의 중간처리에서는 비밀번호를 인코딩 (암호화) 하는 과정이 추가 -> SecurityConfig를 만들어서 비밀번호 인코딩 설정 SignUpDto 생성 SignUpDto SecurityConfig에서 시큐리티 설정 MemberMapperTes...

중복 검사 중복 검사는 서버(java)에서도 진행해야하고, 클라이언트(js)에서도 진행해야한다. MemberService 아이디, 이메일은 중복검사 하는 중간 로직을 추가 MemberController Controller를 통해 아이디, 이메일 비동기 요청 처리 validation.js (내가 한 것) 아이디, 비밀번호, 이름, 이메일 중복검사 클라이언...

쿠키와 세션 쿠키 클라이언트가 기억 세션 서버가 기억 -> 로그인 검증시 session을 이용해서 로그인하면 새로고침을 해도 정보(여기서는 요한)가 사라지지 않음 세션을 통해 로그인 검증 -> 로그아웃까지! 세션을 통한 로그인 양식 열기 + 로그인 요청 처리 MemberController 로그인 양식 열기 사용자가 로그인 페이지를 요청하면 -> 로그인 ...

내가 쓴 글만 삭제하는 인터셉터와 에러 페이지 처리 BoardInterceptor 관리자이거나 본인일경우에만 글 삭제가 가능하도록함 본인이 아닐 경우 에러 페이지를 반환하도록 함 BoardController /board/delete?bno=숫자 처럼 읽을 수 있게 bno를 읽는다. ErrorPageConfig 에러페이지에 대한 설정, 404와 500 에...

조회수 증가 방지 (DB에서 처리) 비회원이거나 본인 글이면 조회수 증가를 방지하는 기능을 넣고자 한다. 이를 처리하기 위해서 서버에서 쿠키를 이용해서 구현할 수 있지만 정석으로는 DB에서 다뤄야하기 때문에 DB를 이용해서 처리한다. DB Member, board 테이블은 M : N의 다대다 형식을 띄고 있다. 이를 해결하기 위해서는 다대일로 풀어줄 수 있...

좋아요, 싫어요 최초 게시물에 진입 시 좋아요, 싫어요 수 : 서버 사이드 렌더링 (SSR) 좋아요, 싫어요 클릭 이벤트 시 : 클라이언트 사이드 렌더링으로 실시간 처리 (CSR) DB 테이블 생성 reactionid와 reactiondate는 자동으로 값이 들어가게 설정 (xml에 따로 안넣어도됨) board_no, account -> 몇 번 게시물에 ...

서버에서는 인터셉터를 이용해서 403상태 코드로만 막고 나머지는 모두 UI(js)에서 처리 ApiAuthInterceptor 비동기 통신시 인가 처리를 담당 -> 동기 통신은 sendRedirect를 통해 팅기게 하면되지만 비동기는 팅기면 안되므로 이런식으로 처리 InterceptorConfig REST API 인가 처리 인터셉터 등록 api.js 인터...

동기방식 파일업로드 처리 기본 UploadController 파일 업로드의 경로와 jsp파일 처리, 파일명을 중복 없는 파일명으로 변경하여 파일 업로드 처리 파일이 여러개면 List로 처리해서 반복문을 통해 해결할 수 있다. 서버에서 전송된 파일의 정보를 잘 읽어오는 것을 볼 수 있음 FileUtil 파일명을 중복없는 새로운 파일명으로 바꿔줌 중복없는...

회원가입시 프로필 이미지가 클라이언트, 서버, DB에 들어가는 부분은 처리 완료 이제 로그인했을 때 화면에 프로필 이미지가 뜨게 처리하는부분을 해보자 로그인했을 때 세션에 데이터를 넣어서 로그인시 welcome 옆에 사진 띄우기 LoginUserInfoDto 로그인 시 클라이언트에 화면에 보낼 정보를 모아놓은 Dto객체에 프로필 이미지 추가 xml 업데...

카카오 로그인 API 받기 https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api https://developers.xxxxx.com -> 구글, 네이버 등도 xxx 자리에 넣어서 API 이용가능 1. 인가 코드 받기 2. 토큰을 받아서 사용자 정보 가져오기 ![](https://vel

주제선정 여행 커뮤니티 시나리오 회원가입, 로그인 동행자 게시물 일반 커뮤니티 게시물 내가 맡은부분 날씨 API 게시판에 대한 댓글 -> 페이징, 무한스크롤 무한스크롤 문제 로딩 이후 한번에 많은 처리가 들어가는 문제 발생 -> 디바운싱으로 해결

this 1. 일반 함수에서 this 2. 객체 메서드에서의 this 해당 메서드를 호출하는 객체를 가리킴 3. 이벤트 핸들러에서의 this function으로 선언시 이벤트를 건 요소를 가리킴 call, apply, bind call apply bind 화살표 함수 클래스

리액트 시작하기 클론 받을시node-modules 파일은 git ignore되기 때문에 node-modules 파일을 npm install을 통해 받아야 한다. jsx란? JSX(JavaScript XML)는 자바스크립트의 확장 문법으로, 리액트 요소를 생성. HTML과 비슷해 보이지만 자바스크립트 종류이다. jsx 규칙 return 안에 있는 태그는 반드...

상태값과 useState 상태값은 사용자의 입력, API 응답 등으로 인해 시간에 따라 변할 수 있는 값 상태는 컴포넌트의 렌더링 결과를 결정하는 요소 중 하나로, 상태가 변경되면 컴포넌트는 재렌더링됨 react에서는 useState의 setter를 사용해야 변경상태 감지 -> 상태값을 직접 변경하면, React는 상태가 변경되었는지 알 수 없으며, 이로 ...

데이터 추가시 화면에 실시간 렌더링 안되는 문제 해결 및 코드 리팩토링 console에는 배열에 데이터가 추가되지만 화면에는 실시간으로 렌더링 되지않았다. 이를 해결하기위해 배열을 상태변수로 관리 초기데이터로 expenses를 넣고 expenseList로 관리 버튼 추가 새로운 지출 추가 라는 버튼을 누를시 지출값들을 입력할 수 있는 창으로 이동 또한 ...

input에 입력한 것을 추가하고 삭제하는 기능을 학습 목표 추가 부모 컴포넌트인 App.js에서 CourseInput.js로 목표추가 함수를 onAdd이름으로 내려줌 -> 나중에 CourseInput.js에서 받은 데이터를 실시간 화면 렌더링 해야하므로 상태변경 감지를 위해 setter인 setGoals사용 CourseInput.js에서 내려받은 함수...

동적으로 스타일 변경 상태변수를 사용하여 동적으로 관리 입력값 검증해서 동적 스타일 변경 클래스 조작하여 동적 스타일 변경 (더 쉬움) 1. Styled-Components 클래스 이름을 무작위로 생성하게 해주어서 협업 시 클래스 이름의 충돌을 방지 해준다. css 파일 따로 만들지 않아도 됨. props를 통해 컴포넌트의 스타일을 조건부로 변경 가능 ...

Context API 컴포넌트가 많아졌을 때 전달전달식으로 하면 너무 많은 과정 필요 제공자, 소비자를 정해서 필요한 소비자에게만 전달 로그아웃 실행함수 APP.js에 위치 -

1. Todo 동적 리스트 렌더링 2. Todo 할 일 추가 3. Todo 할 일 삭제 1. 이름 변경 useRef는 태그관리 useState는 상태관리

JPA란? ORM(Object-Relational Mapping) 표준 기술로서, 자바 클래스와 DB 테이블 간의 매핑 정보를 사용하여, SQL Query 없이 데이터를 조작할 수 있도록 도와줌 JPA 기능 Repository 인터페이스: 기본 CRUD 연산 메소드를 제공 쿼리 메소드: 메소드 이름을 통해 쿼리를 생성하고 실행 페이징과 정렬: 페이징과 정렬...

JPQL SQL : 테이블을 대상으로 쿼리 JPQL : 엔티티 객체를 대상으로 쿼리 @Query : 쿼리 커스텀 버전 테이블 접근x, 자바 클래스에 접근 StudentRepository StudentRepository Test test에서 @Transactional, @Rollback 데이터를 눈으로 보고싶으면 @Transactional는 무조건 붙어...

CascadeType PERSIST : 부모가 갱신되면 자식도 같이 갱신 부모의 리스트에 자식을 추가하거나 제거하면 데이터베이스에도 반영 REMOVE : 부모가 제거되면 자식도 같이 제거 ON DELETE CASCADE ALL : 위의 내용을 전부 포함. 많은 기능이 내장 연관 관계의 주인 일대다에서 다 쪽이 주인 일 쪽에서 @OneToMany(m...

Query Dsl 주의사항 -> 엔터티클래스에 필드추가되면 gradle 재 빌드하기 build -> clean other -> complieQuerydsl 커스텀 인터페이스 한 Repo에서 다중상속 받아서 여러가지 커스텀 쿼리 사용 가능 커스텀 쿼리들은 impl로 구현하여 사용 service Repo에서 다양한 방법으로 쿼리를 짤 수 있음 정렬과...

JOIN Inner Join 메서드 innerJoin()은 두개의 파라미터를 받음 조인할 대상 엔터티의 경로 from에서 갖고 있는 FK 조인 조건에 사용될 엔터티 (on절에 들어가야 하는 내용) 조인할 테이블 Inner Join 2번 Outer Join 메서드 nvl을 꼭 사용해야 할때 QueryDsl에서는 nvl, rollup, cube, 윈도우함...

Querydsl 사용하려면 세팅 필수 동적 쿼리 BooleanBuilder 객체 필요 동적 정렬 OrderSpecifier 객체 필요 jpa를 통해 api 만들어보기 커스텀impl queryDsl을 사용하려면 config 파일에서 등록이 되어있어야 한다. repository EventRepositoryCustom.interface EventRepo...

리액트 파일 생성시 크기별로 생성 사이즈에 따라 layout > pages > components layout에는 제일 큰 것, 그 안에 pageg, 그 안에 가장 작은 것들은 components React, Spring 서버 연결 서버에서 데이터 GET으로 가져오기 loader useEffect 대신에 loader를 통해서 fetch가능 (요즘 버...

스켈레톤 스크린 개수 제어 및 가상 박스를 이용한 무한스크롤

EventUser EmailVerification 회원가입 순서 이메일 중복확인 (이메일이 중복되지 않았네?) 이메일 코드 검사 인증 이메일 발송, 인증 코드 체크 로그인 패스워드 암호화 이메일 보내고 이메일로 온 코드 확인해서 true

이메일 패턴 디바운싱 이메일을 입력할 때 마다 아래 문구가 나오게됨 -> 1.5초 후에 확인 후 문구가 나오게 디바운싱

회원가입이 마무리 되지 않았을 때 처리 EventUserService 기존 인증코드를 삭제하고 인증코드 재발송 로그인 검증 EventUserController EventUserService 세션과 토큰 차이점 세션 (Stateful) 로그인한다 -> 로그인한 상태라는 것을 서버(또는 DB)에 저장 서버와 클라이언트가 연결된 상태로(Stateful), ...

React 로그인 성공시 dto의 정보 저장 (영구) action함수, useActionData action함수 데이터 읽는 법 -> formData에 input의 입력값 존재, -> input의 name속성의 이름이 존재해야 하고, 그 값을 formData.get() 안에 넣음 route에서 로그인 회원 관리하기 route의 최상위 꼭대기에 loader...

사용자 생성 멀티 팩터 인증(MFA) 2차 검증, OTP와 비슷 EC2 클라우드 가상서버 (= 인스턴스) 인스턴스 시작으로 생성 프리티어 사용 가능이 있어야 과금 X

인스턴스를 중지 후 다시 실행하면 ip주소 변경 -> putty에서 host name에 새로운 ip주소 입력하고, key는 원래 사용하던 것을 그대로 넣어줌 -> 원래 사용하던 saved-session 넣어주고 실행하면 원래 쓰던 것 다시 실행됨 EC2 인스턴스에 역할 부여 예를들어 EC2에서 S3에 접근안됨! -> IAM에서 역할 부여해야함 이처럼 어디...

aws에서 DB 연결하여 운영 (RDS) putty에서 위 4개 과정 실행 후 mysql -u (db 마스터 아이디) -p -h 엔드포인트 로 입력후에 비밀번호까지 입력하면 DB와 연결 성공 사용하고싶은 DB와 연결 (ex- use teamprj) ![](https://velog.velcdn.com/images/rnfaos77/post/df3

정적 웹사이트 호스팅 yml 여러개 만들고 다른 yml 실행하는 법 새로운 yml 만들고 새로운 port 번호를 설정 새로운 yml은 application-이름.yml로 지을것 메인 실행 - :클릭 - 편집 옵션 수정 - vm옵션 추가 - -Dspring.profiles.active=deploy를 적어줌 단, deploy는 application-...

Jenkins vs Github Actions 둘 다 강력한 자동화 도구로 지속적 통합(CI)과 지속적 배포(CD) 파이프라인을 구축하는 데 사용됨 jenkins 서버에 직접 설치 필요 유지 관리 필요 대규모 시스템에 적합 가장 유연한 플러그인 시스템 Github Actions 서버에 직접 설치 필요 X (깃허브에서 실행) 소, 중규모...

React.memo로 불필요한 자식 컴포넌트 실행 막기 부모 컴포넌트를 렌더링 하게되면 자식 컴포넌트까지 같이 렌더링되고 리렌더링해도 같이 자식도 리렌더링하게됨 -> 성능 최악 해결하기 위해 최고 부모에 export 부분을 memo로 감싼다. export default memo(Counter); -> 이렇게하면 내가 리렌더링하고싶은 컴포넌트만 리렌더링하게됨...

기존 useState 장단점 장점 기존에 useState로 상태관리를 했다. 추가 라이브러리 없이 React만을 이용해 사용가능 간단하고 직관적이며 독립적 단점 복잡해지고 사이즈가 커지면 상태 관리가 어려움 상태 공유가 어려워서 상태를 여러 컴포넌트에서 공유하려면 context API를 사용해야함 Redux의 장단점 장점 중앙에서 관리 가능 확장성이 좋아...

토큰 활용한 로그인, 자동로그인 구현 (JPA, MYSQL, POSTMAN) 마이페이지 화면 구현 (React) 최초로그인 화면 구현 (React)

리덕스 스토어 생성 cart-slice 생성 (리듀서 업데이트) 초기 상태 정의 (initialState) 슬라이스 정의 (createSlice) 액션 내보내기 (cartActions) 상태관리할 컴포넌트에서 dispatch를 사용하여 액션을 보낼 수 있음 리듀서 내보내기 (default export) 스토어를 설정할 때 이 리듀서를 사용 카트 ...

도커 도커 이미지 JDK, DB등이 들어있는 컨테이너를 생성하기 위한 읽기 전용 템플릿 -> 컨테이너를 돌리기위해 경량화된 템플릿 여러 계층으로 구성 도커 이미지 역할 일관된 환경을 제공하여 애플리케이션이 어디서나 일관성 있게 실행되도록 해줌 도커 컨테이너 도커 컨테이너는 도커 이미지를 실행한 상태 애플리케이션과 그 종속성을 함께 패키징한 독립적인 실행 환...

Dockerfile 도커 이미지를 빌드하기 위한 설정 파일 이미지 생성 과정에서 필요한 명령어를 순차적으로 기술 Spring Boot 애플리케이션을 Docker를 이용해 배포 과정 실습 방식 Gradle을 사용하여 Spring Boot 애플리케이션을 빌드하고 Docker 컨테이너에서 포트 8687을 사용하여 실행 불필요한 실행파일인 plain.jar 생...

도커 컴포즈로 리액트앱 도커라이즈 Dockerfile 생성 리액트 애플리케이션의 소스 코드와 의존성을 도커 이미지로 빌드하고, npm start 명령어를 통해 개발 서버를 실행 docker-compose.yml 수정 실행 docker-compose up -d

배포 배포환경에 Docker만 설치하면됨 aws에 Docker 설치, 도커 컴포즈 설치, 도커 허브에서 pull 땡겨서 docker-compose up -d 하면 배포 끝 도커 컴포즈를 이용한 전체 애플리케이션 배포 (백, 프론트, DB) 새 폴더 생성 기존 백엔드, 프론트엔드 폴더 옮김(clone 해도됨) + docker-compose.yml 생성 f...

문제1 ONLINE_SALE 테이블에서 동일한 회원이 동일한 상품을 재구매한 데이터를 구하여, 재구매한 회원 ID와 재구매한 상품 ID를 출력하는 SQL문을 작성해주세요. 결과는 회원 ID를 기준으로 오름차순 정렬해주시고 회원 ID가 같다면 상품 ID를 기준으로 내림차순 정렬해주세요. 재구매 한 것들을 조회하면됨 풀이 재구매 한 것들의 USERID와 P...

문제 PRODUCT 테이블과 OFFLINE_SALE 테이블에서 상품코드 별 매출액(판매가 * 판매량) 합계를 출력하는 SQL문을 작성해주세요. 결과는 매출액을 기준으로 내림차순 정렬해주시고 매출액이 같다면 상품코드를 기준으로 오름차순 정렬해주세요. 풀이 PRODUCT 테이블과 OFFLINESALE 테이블을 PRODUCTID로 조인. 각 PRODUCTID별...

문자열 -> 숫자 변환 Integer.parseInt() 숫자 -> 문자열 Integer.toString() 문제 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 풀이 for문으로 나머지가 1일 경우를...

@Param Mybatis의 SQL 코드에 다수의 파라미터를 전달할 때 전달되는 변수들에 @Param을 붙임 @Param 어노테이션을 붙이면 내가 원하는 명으로 mapper에서 사용 가능 (아래 예시 확인) 예시 ReplyMapper.java boardId를 boardId 이름으로 사용, page를 p로 사용 ReplyMapper.xml