chLog

DB설계!!🔷 진행상태✅ 요구사항 파악 완료✅ DB 테이블 컬럼 설계 완료🔷 과정 1. 테이블 설계DBMS 강의가 시작되고끝나갈 무렵에 프로젝트 DB설계도 진행했다.📊 주요 테이블👤 사용자 관련 테이블명 설명 user 유저 정보 테이블 (회원/트레이너/관리자 구분 포함) role 유저 권한 설정 (예: 일반 회원, 트레이너, 관리자 등) trainer_application 트레이너 권한 신청 정보 저장 trainer_profile 트레이너 프로필 정보 저장 🏃‍♀️ 건강 및 수업 관련 테이블명 설명 health_data 회원의 ..

JOIN 정리💡 조인 벤다이어그램📌 JOIN이란?✅ 두 개의 테이블을 서로 묶어서 하나의 결과를 만들어 내는 것✅ 공통된 열(column)을 기준으로 데이터를 연결🔷 내부 조인 (INNER JOIN)두 테이블 간 조건이 일치하는 행만 결과로 반환하는 조인교집합 결과일대다(1:N) 관계에서 주로 사용됨select 열 목록from 기준 테이블 as 별칭 inner join 조인 테이블 as 별칭 on 조인될 조건[where 조건식 ...];📌 예시: 특정 회원이 구매한 상품 확인select * from purchases as P inner join members M on P.member_id = M.member_idwhere P.member_id = 1;🔷 외부 조인 (OUTER J..

SELECT 문 정리📌 SELECT 문이란?✅ 데이터베이스에서 원하는 데이터를 조회할 때 사용하는 SQL 문✅ "무엇을 선택할 것인지"를 결정하는 것이 핵심🔷 SELECT 문 기본 구조SELECT: 조회할 컬럼(열)을 지정FROM: 데이터를 조회할 테이블을 지정WHERE: 조건에 맞는 데이터 필터링GROUP BY: 특정 컬럼 기준으로 그룹화HAVING: 그룹화된 데이터에 조건 적용ORDER BY: 결과 정렬 (기본은 오름차순)LIMIT: 출력할 행의 수 제한SELECT 컬럼명 FROM 테이블명WHERE 조건절 GROUP BY 컬럼명HAVING 조건 ORDER BY 컬럼명LIMIT 숫자🔷 실행 순서FROM > JOIN > WHERE > GROUP BY > HAVING > SELECT > ORDER B..

📌 MySQL 맥북에서 설정하기🔷 과정국비 수업 중 DBMS를 배우는 과정이었다Mysql을 Mysql워크벤치 툴을 사용해 강의를 진행하셨는데맥북을 사용하고 있어서 한글 입력에 불편함을 느꼈다.GUI를 볼수있고 편하게 한글 문제 없이 사용하고싶어서방법을 여러가지 사용해봤다. ✅ MySQL workbench 적응하기❌ 이클립스 한글완성 오류 때문에 다시 돌아가기 싫었다..한글을 다 치고 엔터 두번 -> 줄바꿈한글 치고 난뒤 방향키 -> 마지막 한글자 삭제 ✅ 적응할거면 DBeaver로 적응하기❌ 여러 플러그인 사용이 가능하고 좋다해서사용해보려 했지만 mySQL workbench와 같은이유로 탈락.. ✅ Sequel Pro 사용❌ macOS와 호환성이 좋다해서 사용해보려했지만Host / root / pw ..

국비수업 프로젝트!!🔹개요✅주제노인분들을 대상으로 건강관리 웹 만들기!!✅진행상황요구사항 파악 후 DB 설계중!!🔹진행 과정조원들은 정해졌고 주제를 선정했습니다.노인분들을 타깃으로 하는 헬스 관리로 선정후풀스택으로 진행할 예정입니다.여러 회의를 거치면서 팀명, 요구사항, 장단점 정리를끝냈고 DB 설계를 위해 오늘 회의를 진행했습니다!🚀 계획앞으로 진행하는 프로젝트 회의 내용들은돌아보기에도 좋고 진행과정을 기록하면다음 프로젝트를 할 때 개선점이나 참고할 수 있는자료가 될 것 같아서 날짜별로 간단히 정리해서포스팅 할 예정입니다.

JS 웹 스토리지 정리 (Cookies, LocalStorage, SessionStorage)📌 1. Client-side Storage란?웹 브라우저를 통해 사용자의 로컬 환경에 데이터를 저장하는 기술서버와의 통신 없이 빠르고 효율적인 데이터 접근이 가능📌 2. Client-side Storage의 특징퍼포먼스 개선: 서버 요청 최소화로 성능 향상오프라인 액세스: 네트워크 없이도 데이터 접근 가능사용자 경험 개선: 개인 설정 및 이전 상태 저장 가능📌 3. 종류 및 특징 비교🔹 1) Cookies✅ 수명: expires 지정 가능 (기본은 브라우저 종료 시 삭제)✅ 용량: 약 4KB✅ 서버와 매 요청마다 전송됨✅ 보안에 취약 (XSS, 탈취 우려)✅ 사용 예: 로그인 세션, 사용자 추적생성 예시..

📌 Zustand를 활용한 React 전역 상태 관리🔹 Zustand란?독일어로 '상태(state)'를 뜻하는 단어React Hooks 기반의 경량 전역 상태 관리 라이브러리최소한의 API로 간단하게 전역 상태를 생성하고 사용할 수 있음📦 설치 방법:npm install zustand🔹 Zustand의 장점🧩 간결성최소한의 코드로 상태 관리🔄 유연성여러 상태 조각을 하나의 저장소에서 결합🔹 Zustand 기본 사용법1️⃣ 전역 상태 저장소(store) 생성// store/count.store.tsimport { create } from "zustand";interface CountState { count: number; increment: () => void; decrement: () ..

📌 자바스크립트 예외 처리 (Exception Handling)🔹 오류(Error)란?오류는 부정확하거나 유효하지 않은 동작을 의미합니다.SyntaxError : 문법 오류ReferenceError, TypeError, 등은 런타임 중 발생하는 예외.🔹 예외(Exception)의 종류1️⃣ 구문 오류 (Syntax Error)프로그램 실행 전, 코드 작성 시 문법 오류로 인해 발생.언어의 규칙을 따르지 않을 때 발생합니다.console.log('-- 구문 오류 예제 --');// console.log('프로그램이 시작되었습니다' // 닫는 괄호 없음2️⃣ 런타임 오류 (Runtime Error)프로그램 실행 중에 발생하는 예외.오타나 예외적인 상황으로 인해 실행이 중단될 수 있음!console.lo..

📌 DOM (Document Object Model)🔹 DOM이란?DOM(Document Object Model)이란 웹 페이지를 문서 객체로 조작하고 관리할 수 있는 인터페이스입니다.✅ 문서 객체란?HTML 안에서 요소(Element)로 불리는 객체를 의미합니다.JavaScript에서 문서 객체는 HTML 요소를 의미합니다.🔹 DOM 사용 방법JavaScript를 사용하여 HTML 요소를 문서 객체로 선택, 추가, 수정, 삭제할 수 있습니다. 즉, CRUD(Create, Read, Update, Delete) 작업이 가능합니다.🔹 DOM 조작 방법1️⃣ DOMContentLoaded 이벤트HTML 문서가 모두 로드된 후에 실행되는 이벤트입니다.// 문서가 모두 로드된 후 실행document.ad..

자바스크립트 비동기 프로그래밍 정리📌 비동기 프로그래밍이란?✅ 특정 코드의 실행 완료를 기다리지 않고 다음 코드를 실행하는 프로그래밍 방식✅ 네트워크 요청, 파일 I/O 등 시간이 오래 걸리는 작업에 사용✅ 실행 흐름을 차단하지 않음📌 동기 vs 비동기🔹 동기 프로그래밍 예시console.log('== 동기 구현 ==');function work() { const start = Date.now(); for (let i = 0; i 🔹 비동기 프로그래밍 예시console.log('== 비동기 구현 ==');function asyncWork() { setTimeout(() => { const start = Date.now(); for (let i = 0; i ..