본문 바로가기

전체 글459

Linux 명령어 1. 경로 및 파일 탐색pwd현재 작업 중인 디렉토리의 경로 출력 (Print Working Directory)ls디렉토리 내 파일 및 폴더 목록 표시옵션ls -a: 숨김 파일 포함 전체 목록ls -l: 파일 및 폴더의 상세 정보 (long format)ls -lh: 사람이 읽기 쉬운 파일 크기로 표시ls -R: 하위 디렉토리까지 재귀적으로 출력tree디렉토리를 트리 구조로 표시 (설치 필요)2. 경로 이동cd디렉토리 이동cd ~: 홈 디렉토리로 이동cd -: 이전 디렉토리로 이동cd /: 루트 디렉토리로 이동상대 경로와 절대 경로 사용 가능3. 파일 및 폴더 생성mkdir새 디렉토리 생성mkdir [폴더명]: 단일 폴더 생성mkdir -p [폴더/하위폴더]: 상위 디렉토리가 없을 경우 함께 생성touc.. 2024. 12. 25.
[SpringBoot] H2database, JPA 설정과 사용법 @Test void testJpa() { Optional oq = this.questionRepository.findById(1); if(oq.isPresent()) { Question q = oq.get(); assertEquals("sbb가 무엇인가요?", q.getSubject()); } }ORM(Object-Relational Mapping):  ORM은 SQL을 사용하지 않고 데이터베이스를 관리할 수 있는 도구, DBMS의 종류에 관계없이 일관된 자바 코드를 사용할 수 있어서 프로그램을 유지·보수하기가 편리하다. JPA(Java Persistence API): 하이버네이트는 JPA의 인터페이스를 구현한 실제 .. 2024. 12. 22.
[SpringBoot] Annotation Appliction 파일package com.mysite.sbb;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class SbbApplication { public static void main(String[] args) { SpringApplication.run(SbbApplication.class, args); }}@SpringBootApplication : 프로젝트명 + Application.java 파일내 클래스에 반드시 있어야하며, 이를 통해 스프링 부트 어플리케이션을 실행한다.C.. 2024. 12. 22.
[SpringBoot] 기본 파일 src/main/java : java 파일을 저장Application.java 파일//src/main/java/com.mysite.sbb.SbbApplication.javaimport org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class SbbApplication { public static void main(String[] args) { SpringApplication.run(SbbApplication.class, args); }}@SpringBootApplication : 프로젝트명 + Appl.. 2024. 12. 22.
[JavaScript] 구조 분해 할당 1. 배열 구조 분해 할당1-1. 기본 배열 구조 분해 할당기존에는 배열의 특정 요소에 접근할 때 인덱스로 접근합니다.const animals = ['강아지', '고양이', '오리'];// 일반적인 방식: const dog = animals[0];구조 분해 할당을 사용하면, 배열의 각 요소를 변수에 직접 할당할 수 있습니다.예제:// dog에는 첫 번째 요소, duck에는 세 번째 요소를 할당const [dog, , duck] = animals;console.log(dog, duck); // 출력: 강아지 오리설명:[dog, , duck]에서 쉼표(,)는 두 번째 요소를 건너뛰겠다는 의미입니다.배열의 첫 번째 값 '강아지'가 dog에, 세 번째 값 '오리'가 duck에 할당됩니다.1-2. 기본값 사용하기.. 2024. 12. 22.
[JavaScript] Reduce 1. reduce의 기본 개념reduce는 배열의 각 요소를 순회하면서, 누적된 값(accumulator)과 현재 처리 중인 요소(currentValue)를 바탕으로 단일 값으로 "축소"하는 함수입니다. 이때, 사용자가 정의한 콜백 함수가 핵심 역할을 합니다.2. 함수 시그니처와 파라미터reduce의 기본 형태는 다음과 같습니다:array.reduce(callback, initialValue);callback: 배열의 각 요소마다 실행되는 함수입니다. 이 함수는 네 가지 인자를 받습니다.accumulator: 누적값으로, 콜백 함수가 반환한 값이 계속해서 이 변수에 누적됩니다.currentValue: 현재 처리 중인 배열 요소입니다.currentIndex (선택 사항): 현재 요소의 인덱스입니다.arra.. 2024. 12. 22.
[JavaScript] async & await 🚀 async / await 정리async / await는 비동기 작업을 쉽게 처리할 수 있도록 도와주는 최신 JavaScript 문법입니다.이를 사용하면 코드를 동기 방식처럼 읽기 쉽게 만들 수 있고, 콜백 지옥을 방지할 수 있습니다. 😊📌 async 키워드async 키워드가 붙은 함수는 항상 Promise를 반환합니다.반환값이 Promise가 아닐 경우, 자동으로 Promise.resolve(반환값)으로 감싸서 반환됩니다.✅ 예제: async 함수는 Promise를 반환한다async function get1() { return '1'; // 자동으로 Promise.resolve('1')로 변환됨}// 실행const one = get1();one.then((num) => console.log(n.. 2024. 12. 20.
[JavaScript] 콜백함수 📌 Callback 함수란?👉 **콜백 함수(callback function)**는 다른 함수의 인자로 전달되어 특정 조건에서 실행되는 함수입니다.📌 Callback 함수 예제function main(callback) { console.log('main 실행'); callback(); // 전달된 함수 실행}main(function () { console.log('✅ 콜백 함수 실행');});✔ main() 함수는 callback을 인자로 받아 실행합니다.✔ main()을 호출할 때 익명 함수를 전달하여 콜백 함수로 실행됩니다.📌 비동기 콜백 (Asynchronous Callback)👉 비동기 작업이 완료된 후에 실행되는 콜백 함수입니다.👉 비동기 코드는 실행 순서가 보장되지 않기 때문에.. 2024. 12. 20.
[JavaScript] Fetch, AJAX, Axios 웹에서 데이터를 요청하고 처리하는 주요 방법들을 비교 정리! 1. Fetch APIfetch()는 비동기 네트워크 요청을 보내고 응답을 처리하는 내장 API입니다.Promise를 기반으로 동작하며, 데이터를 가져와 JSON 변환 후 사용할 수 있습니다.Fetch 사용 예제fetch('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); // 응답 객체 출력 return response.json(); // JSON 변환 (Promise 반환) }) .then((data) => console.log(data)) // 변환된 JSON 데이터 출력 .catch((error) => cons.. 2024. 12. 20.
[JavaScript] Promise 🚀 Promise란?비동기 작업을 처리하는 객체로, 작업의 성공(fulfilled) 또는 실패(rejected) 상태를 나타낸다.서버에서 데이터를 가져오는 AJAX 요청, API 요청 같은 비동기 작업이 끝난 후 실행할 코드를 정할 수 있다.📌 Promise의 상태대기(pending) → 비동기 작업이 진행 중성공(fulfilled) → 작업이 완료되고 결과(result)를 반환실패(rejected) → 작업이 실패하고 오류(error)를 반환🛠 Promise 사용법function getData() { return new Promise((resolve, reject) => { setTimeout(() => { const data = { name: 'Kim' }; consol.. 2024. 12. 20.
CSS Transition 1. 전환(Transition) 기본 개념CSS 전환은 요소의 상태 변화 시, 미리 지정한 속성이 부드럽게 변화하도록 애니메이션 효과를 제공합니다. 전환은 단일 속성이든 여러 속성이든 적용할 수 있으며, 각각의 속성마다 지속 시간, 타이밍 함수, 지연 시간 등을 개별적으로 설정할 수 있습니다.전환 관련 주요 속성은 다음과 같습니다:transition-property역할: 전환 효과를 적용할 CSS 프로퍼티를 지정합니다.기본값: all (모든 속성에 효과 적용)복수 지정: 여러 속성을 적용할 경우 쉼표(,)로 구분합니다.예) transition-property: width, height;transition-duration역할: 전환 효과가 완료되는 데 걸리는 시간을 지정합니다.기본값: 0s표기법: 초(s).. 2024. 12. 13.
CSS 애니메이션 효과 만들기 및 참고 사이트 Transition과 Transform요소에 전환 효과를 주어 부드러운 변화(예: 위치 이동, 회전, 크기변경 등)를 구현할 수 있음.상태에 따라 동일 속성에 대해 다른 시간 값 및 타이밍 함수를 부여하여 애니메이션 효과를 조절 가능.타이밍 함수 종류ease, ease-in, ease-out, linear, cubic-bezier(...) 등으로 애니메이션 속도를 조절함.Keyframes@keyframes를 이용해 복잡한 애니메이션 경로를 정의하고, animation 속성으로 적용함.animation-fill-mode로 애니메이션 종료 후 상태 유지, animation-play-state로 애니메이션 일시정지를 제어할 수 있음.1. 애니메이션 기본 – Transition과 TransformA. 기본 전환.. 2024. 12. 13.

티스토리툴바