버블 정렬 (Bubble Sort)버블 정렬은 가장 간단한 정렬 알고리즘 중 하나로, 두 인접한 요소를 비교하여 크기 순서에 맞게 반복적으로 교환하는 방식으로 동작합니다. 정렬이 끝날 때까지 가장 큰 값(또는 작은 값)이 거품처럼 끝으로 이동하기 때문에 버블 정렬이라 부릅니다.동작 원리배열의 처음부터 시작해서 두 개의 인접한 요소를 비교합니다.두 요소가 잘못된 순서(예: 오름차순에서 앞 값이 더 크거나, 내림차순에서 더 작음)라면 교환합니다.배열의 끝까지 이 과정을 반복하면 가장 큰 값이 배열의 마지막으로 이동합니다.이 과정을 배열의 길이만큼 반복하면서 정렬을 완성합니다.장단점장점: 구현이 매우 쉽다.단점: 시간 복잡도가 비효율적이다 (O(n2)O(n^2)O(n2)).적합한 경우: 데이터가 거의 정렬되어..

const an = [1, 4, 6, 5, 1, 6];const sort = (array) => { return array.slice().sort((a, b) => a - b); // 오름차순 정렬};console.log(sort(an)); // [1, 1, 4, 5, 6, 6]console.log(an); // [1, 4, 6, 5, 1, 6]const an = [1, 4, 6, 5, 1, 6];const sort = (array) => { return array.slice().sort((a, b) => b - a); // 내림차순 정렬};console.log(sort(an)); // [6, 6, 5, 4, 1, 1]console.log(an); // [1, 4, 6, 5, 1..

1. 계수 법칙f(n)f(n)f(n)이 O(g(n))O(g(n))O(g(n))라면, k⋅f(n)k \cdot f(n)k⋅f(n)도 O(g(n))O(g(n))O(g(n))이다.쉽게 말하면: 상수를 곱해도 시간복잡도는 변하지 않는다!비유:만약 어떤 사람이 n2n^2n2만큼의 일을 한다고 하면, 그 사람이 2배 빠르거나 3배 느리더라도 결국 하는 일의 성장 속도는 여전히 n2n^2n2이다.2. 합의 법칙f(n)f(n)f(n)이 O(h(n))O(h(n))O(h(n))이고 g(n)g(n)g(n)이 O(p(n))O(p(n))O(p(n))라면, f(n)+g(n)f(n) + g(n)f(n)+g(n)은 O(max⁡(h(n),p(n)))O(\max(h(n), p(n)))O(max(h(n),p(n)))이다.쉽게 말하면: 두..

function fact(n) { return n > 0 ? n * fact(n - 1) : 1;}console.log(fact(10));   계수법칙 / 합의법칙 / 다항법칙 / 곱의 법칙 / 전이법칙  1. 계수법칙(상수 k>0) f(n)이 O(g(n)) 이면 kf(n) 은 O(g(n)) 이다. gpt 설명 :: 질문 :: (상수 k>0) f(n)이 O(g(n)) 이면 kf(n) 은 O(g(n)) 이다. 시간복잡도에서 나온것 중 하나인데 kf(n)이면 O(g(n*k)) 이렇게되어야할거같은데아님?답 ::계수법칙이란, 어떤 함수 f(n)f(n)f(n)가 O(g(n))O(g(n))O(g(n))라면 kf(n)kf(n)kf(n) (여기서 k>0k > 0k>0)도 O(g(n))O(g(n))O(g(n))에 속한..

1. 데이터 구조데이터 구조란 무엇인가요?답: 데이터를 효율적으로 저장, 관리, 처리하기 위한 체계적인 방식입니다. 예: 배열, 리스트, 스택, 큐, 트리, 그래프.스택과 큐의 차이점은?답:스택: LIFO(Last In, First Out) 방식. 마지막에 들어온 데이터가 먼저 나감.예: 브라우저의 뒤로 가기 기능.큐: FIFO(First In, First Out) 방식. 먼저 들어온 데이터가 먼저 나감.예: 프린터 작업 대기열.해시맵(HashMap)이란 무엇인가요?답: 키-값 쌍으로 데이터를 저장하는 데이터 구조로, 빠른 데이터 검색이 가능합니다.시간 복잡도는 일반적으로 O(1). 예: 자바스크립트의 Map 객체.트리와 그래프의 차이점은?답:트리: 계층적 구조, 루트 노드에서 시작하며 사이클이 없음.예..

배포 관련 질문프론트엔드 애플리케이션 배포 과정은 어떻게 진행되나요?답:코드 작성 및 빌드: npm run build로 최적화된 파일 생성.정적 파일을 호스팅 서비스에 업로드: 예) Netlify, Vercel, AWS S3, Firebase.CDN(Content Delivery Network) 사용: 정적 파일을 글로벌하게 제공.배포 후 테스트: 브라우저에서 확인 및 디버깅.CI/CD 파이프라인 설정으로 자동화: 예) GitHub Actions, Jenkins.CDN이란 무엇이며, 어떻게 사용하나요?답: CDN은 콘텐츠 전송 네트워크(Content Delivery Network)로, 사용자와 가까운 서버에서 정적 리소스를 제공하여 로드 시간을 단축합니다.예: CSS/JS 파일을 AWS CloudFron..

HTML 관련 질문HTML5에서 새롭게 추가된 주요 태그는 무엇이며, 각 태그의 용도는 무엇인가요?답: 주요 태그는 , , , , , 등이 있습니다.: 관련 콘텐츠를 묶는 데 사용.: 독립적인 콘텐츠(예: 블로그 글, 기사).: 페이지나 섹션의 머리글.: 페이지나 섹션의 바닥글.: 내비게이션 링크 그룹.: 본문과 간접적으로 관련된 콘텐츠.와 의 차이는 무엇인가요? 언제 각각을 사용하나요?답:는 의미 없는 컨테이너로 스타일링 및 레이아웃을 위한 그룹화에 사용됩니다.은 의미 있는 컨테이너로, 문서의 특정 주제나 섹션을 나타냅니다.의미를 명확히 전달하려면 을 사용하고, 단순한 레이아웃 목적이면 를 사용합니다.ARIA 속성이란 무엇이며, 웹 접근성을 위해 어떻게 사용하나요?답: ARIA(Accessible R..

기본적인 프론트엔드 지식HTML/CSSHTML5에서 새로 추가된 요소나 속성에 대해 설명해 주세요.Flexbox와 Grid의 차이점은 무엇인가요?CSS 박스 모델에 대해 설명하고, border-box와 content-box의 차이를 설명해 주세요.반응형 웹 디자인을 위한 미디어 쿼리 사용법을 설명해 주세요.JavaScriptvar, let, const의 차이점은 무엇인가요?this 키워드에 대해 설명하고, 화살표 함수와의 차이를 말해주세요.클로저란 무엇인가요? 사용 예를 들어 주세요.비동기 처리에 대해 설명하고, Promise와 async/await의 차이를 설명해주세요.이벤트 버블링과 캡처링의 차이점은 무엇인가요?DOM과 브라우저 동작DOM과 BOM의 차이점은 무엇인가요?이벤트 위임(Event Dele..

**SQL Injection (SQL 인젝션)**은 사용자가 입력하는 데이터를 조작하여 데이터베이스 쿼리를 변형하거나 악성 SQL 명령을 실행하는 공격입니다. 이에 대한 대응 방안은 다음과 같습니다.1. 입력값 검증 (Input Validation)사용자 입력값을 철저히 검증하여 SQL 문에 직접 삽입되지 않도록 해야 합니다.입력값에 특수 문자나 의심스러운 패턴이 포함되었는지 검사합니다.예시: 숫자만 허용해야 할 경우, 입력값이 숫자인지 확인합니다.if (!/^\d+$/.test(userInput)) { throw new Error("Invalid input");}2. 파라미터화된 쿼리 사용 (Parameterized Query)쿼리와 데이터를 분리해 SQL 명령어를 데이터로부터 보호합니다.Prepar..

export default function MovieDetail ({ params : {id},}: { params : {id : string}}){ return Movie {id}} 구조분해할당으로 params 에서 id 추출 후 id 를 string 값으로 임의할당함화면에 movie 뒤에 params 에서 가져온 id값을 보여줌    함수의 매개변수에서 구조 분해 할당을 사용해 params 객체의 id 값을 추출합니다.추출된 id 값을 화면에 동적으로 출력합니다.결과적으로 "Movie {id}" 형태로 id 값을 포함한 텍스트를 렌더링합니다. export default function MovieDetail ({ params : {id},}){ return Movie {id}..

layout.tsxexport const metadata :Metadata= { title : { template : "%s | this is next hihi :)" }, description : '하이'}  main page.tstexport const metadata = { title: ' main',}  이렇게 작성하면 main | this is next hihi :) 로 표시된다

[오류상황] metadata도 정의하고 싶고 use client 써서 useState 도 쓰고싶은 상황.둘 다 같이 사용하니까 오류 발생함  (page.tsx에서 발생)// "use client";// import { useState } from "react";export const metadata = { title: 'Next.js hihi ;)',}export default function Tomato() { // const [count, setCount] = useState(0); return ( main page {/* setCount(count + 1)}>Click me: {count} */} );} 위와같이 metadata 쓸거면 useState를 주석..