더그는 피아노를 좋아해

socket io를 이용한 채팅 페이지를 만들어 보았습니다.

앞으로는 이 페이지를 중점적으로 디버깅, 리팩토링 하며 공부하려 합니다.

아직 버그 투성이입니다만,

공개하고 피드백을 받는편이 스스로에게도 도움이 되지않나 싶어 공개합니다.

자세한 사항은 하기와 같습니다.

프로젝트명 : chat with dug

페이지 주소 : http://3.34.53.25:3000 -> https://chatwithdug.netlify.app/

---------------------------------------------2023. 4. 23.---------------------------------------------

버전 : 1.0.4

변경점2 : signup component의 논리, 파일구조 및 전체적인 수정

---------------------------------------------2023. 4. 21.---------------------------------------------

버전 : 1.0.3

변경점1 : 전체적인 fetch URI 변경

변경점2 : signin, signup시의 논리 수정

---------------------------------------------2023. 4. 20.---------------------------------------------

버전 : 1.0.2

변경점1 : 사용자가 채팅방을 떠날 때의 논리 수정

변경점2 : 사용자가 채팅내용을 제출할 때의 논리 수정 

변경점3 : 오기 수정

변경점4 : 사용자가 signout할 때의 논리 수정

변경점6 : 사용자가 signin, signup할 때 username이 모두 소문자가 되도록 논리 수정

변경점7 : 파비콘 수정

---------------------------------------------2023. 4. 19.---------------------------------------------

버전 : 1.0.1

변경점1 : MySQL -> MariaDB로 DB변경

변경점2 : 프론트엔드는 Netlify, 백엔드는 CloudType 배포로 변경

(지금까지는 프론트엔드, 백엔드 공통 AWS배포)

변경점3 : 회원가입 기능 완성

변경점4 : 비밀번호 찾기 기능 완성

변경점5 : 전체적인 리팩토링

---------------------------------------------2023. 3. 30.---------------------------------------------

버전 : 1.0.0

참고사항1 : 회원가입은 막아 둔 상태

참고사항2 : 같은 아이디로 동시접속가능 -> 회원가입 완성 후 리팩토링 할 예정(사용자 구분은 현재도 가능)

참고사항3 : 아이디 test_01, test_02, test_03, test_04, test_05로 테스트 가능, 비밀번호는 qwer1234!로 모두 동일

기타 : 약 일주일 간 여행 다녀 온 후 리팩토링 할 예정👀🥩🔥

draganddrop을 통해 DOM을 조작하는 페이지를 제작하였습니다.

관련 정보는 하기와 같습니다.

1. 프로젝트명 : draganddrop

2. 프로젝트목표 : 프론트엔드 서버와 백엔드 서버를 연동한 draganddrop활용 페이지 작성

3. 프로젝트기간 : 2023.02.20 - 2023. 03. 03(12일)

4. 인원 : 1인

5. 깃허브 주소 :

MySQL 쿼리문 작성 시,

WHERE절 Subquery활용을 통한 카테고리 별 최대값 찾기 예시 쿼리문을 기록합니다.

해당 쿼리문은 하기와 같습니다.

SELECT CATEGORY, NUMBER FROM TABLE
WHERE NUMBER IN (
	SELECT MAX(NUMBER) FROM TABLE
	GROUP BY CATEGORY
	)
GROUP BY CATEGORY

MySQL의 집계함수 COUNT를 사용할 시,

*로 모두 사용할 때와 일반 COLUMN을 지정 할 때에는 하기와 같은 차이가 있습니다.

• COUNT(*)

NULL값이 포함되어 있는 DATA까지 집계합니다.

• COUNT(COLUMN)

NULL값이 포함되어 있는 DATA는 집계하지 않습니다.

실제 테스트 결과를 첨부합니다.

MySQL의 WITH와 Subquery의 정의는 각각 하기와 같습니다.

MySQL 공식 문서를 참고하였습니다.

https://dev.mysql.com/doc/refman/8.0/en/with.html

https://dev.mysql.com/doc/refman/8.0/en/subqueries.html

• WITH (Common Table Expressions)

A common table expression (CTE) is a named temporary result set that exists within the scope of a single statement and that can be referred to later within that statement, possibly multiple times.

쿼리문 내에서 존재하는 임시 Table이란 점이 특징입니다.

• Subqueries

A subquery is a SELECT statement within another statement.

다른 쿼리문 내에 존재하는 SELECT쿼리문입니다.

대체로 WHERE문에서 많이 사용되는,

단일 값을 나타내는 Subquery를 Scalar Subquery라고도 부릅니다.

MySQL의 조건문 관련 문법 중 IF함수의 정의는 하기와 같습니다.

MySQL 공식 문서를 참고하였습니다.

https://dev.mysql.com/doc/refman/8.0/en/flow-control-functions.html#function_if

• IF(expr1,expr2,expr3)

expr1이 TRUE라면 expr2를 반환하고, 그렇지 않다면 expr3을 반환합니다.

MySQL의 날짜관련 문법 중 DATE_FORMAT함수의 정의는 하기와 같습니다.

MySQL 공식 문서를 참고하였습니다.

https://dev.mysql.com/doc/refman/8.0/en/date-and-time-functions.html#function_date-format

• DATE_FORMAT(date,format)

인자로 삽입 된 date의 형식을 지정한 format으로 변경하여 출력합니다.

YYYY-MM-DD형식으로 나타내기 위해서는 '%Y-%m-%d'로 기입합니다.

MySQL의 날짜관련 문법 중 DATEDIFF함수의 정의는 하기와 같습니다.

MySQL 공식 문서를 참고하였습니다.

https://dev.mysql.com/doc/refman/8.0/en/date-and-time-functions.html#function_datediff

• DATEDIFF(expr1,expr2)

expr1과 expr2의 차이를 date로 나타냅니다.

DATEDIFF이외에도 TIMEDIFF, TIMESTAMPDIFF, PERIOD_DIFF 등이 있습니다.

Javascript의 splice를 활용하여 배열 내 두 요소의 위치를 맞바꾸는 함수를 작성해보았습니다.

- 배열 요소 위치 변경 함수 -

//i가 0인 요소, i가 2인 요소의 위치를 서로 변경

//원본 배열 생성
const sourceArray = [1, 2, 3, 4, 5];

const arrayModify = (firstElementIndex, secondElementIndex) => {
	//원본 배열의 불변성 유지를 위해 새로운 배열 생성
	const resultArray = [...sourceArray];

	//새로운 배열을 splice를 통해 수정
	resultArray.splice(firstElementIndex, 1, sourceArray[secondElementIndex]);
	resultArray.splice(secondElementIndex, 1, sourceArray[firstElementIndex]);
	return resultArray;
};

console.log('수정 전', sourceArray);
console.log('수정 후', arrayModify(0, 2));

상기 소스코드를 실행시키면 다음과 같은 결과를 확인 할 수 있습니다.

Javascript의 for of, for in의 간단한 사용 예시를 메모합니다.

- for of, for in 1 -

const array = [1, 2, 3, 4];
const object = { name: '박똑똑', favoriteFood: '삼겹살', attribute: '불속성' };

//for of는 배열의 각 요소를 순회
for (const element of array) {
	console.log(element);
}

//for in은 객체의 key를 순회
for (const props in object) {
	console.log(`object.${props} = ${object[props]}`);
}

상기 소스코드를 실행시키면 다음과 같은 결과를 확인 할 수 있습니다.

for of, for in을 배열에 사용하여 같은 결과를 출력 할 수도 있습니다.

하기와 같이 사용합니다.

- for of, for in 2 -

const array = ['a', 'b', 'c', 'd'];

//for of는 배열의 각 요소를 순회
for (const element of array) {
	console.log('for of', element);
}

//for in은 객체의 key를 순회
for (let i in array) {
	console.log('for in', array[i]);
}

상기 소스코드를 실행시키면 다음과 같은 결과를 확인 할 수 있습니다.