isNaN, Number.isNaN✅ `isNaN(value)`매개변수를 Number(value)로 변환 후 NaN인지 검사함.숫자로 변환할 수 없는 문자열을 넣으면 Number(value)가 NaN이 되므로 true를 반환.예제isNaN('hello'); // true (Number('hello') → NaN) isNaN(undefined); // true (Number(undefined) → NaN) isNaN('123'); // false (Number('123') → 123) isNaN({}); // true (Number({}) → NaN) isNaN(' '); // false (Number(' ') → 0)타입스크립트에서의 문제점isNaN(value: number): boolean으로 타입이 ..

2025-03-261. JavaScript로 BFS(너비 우선 탐색) 구현 및 설명🔍 BFS란?BFS (Breadth-First Search, 너비 우선 탐색): 그래프나 트리에서 가까운 노드부터 탐색하는 알고리즘큐(Queue) 자료구조를 이용해서 방문할 노드를 저장하면서 진행모든 인접 노드를 먼저 방문한 후, 다음 레벨(깊이)로 이동최단 경로 문제에 자주 사용됨 (예: 미로 탐색, 최단 거리, 친구 추천 시스템) 🌟 BFS 구현 (JavaScript)function bfs(graph, start) { let queue = [start]; // BFS 탐색을 위한 큐 (FIFO) let visited = new Set(); // 방문한 노드 저장 (중복 방지) visited.add(..

2025-03-251) 자바스크립트의 배열`for...of`는 배열의 반복에서 사용되고,`for...in`은 객체의 반복에서 사용된다.  `unshift`, `shift` (배열의 맨앞)`pop`, `push` (배열의 맨뒤) `Array(5).fill(0)` ➡ 5개의 원소가 들어있는 배열을 모두 0으로 초기화 ex) [ 0, 0, 0, 0, 0 ]  인파 자바스크립트 배열 → 자바스크립트에서 제공하는 배열의 특징을 잘 정리해 놓은 블로그 2 ) 자바스크립트 반복문🔹 문자열 반복문자열을 반복할 때는 for, split + map/forEach, for...of 등을 사용할 수 있다.1. for문 이용const str = "hello";for (let i = 0; i 2. split 후 map 또는 f..

2025-03-241) 서비스 점검 모달 구현 테스트 (web)- 기존 admin > ㅇㅇ 탭 확인- PK값 변경하고, 점검 시간 안에 모달 잘 뜨는지 테스트 2) 카테고리 모달 - 카테고리 수정 API 연결- 1. 수정하고자 하는 cell 더블 클릭 시, 해당 div가 input 필드로 변경되어 수정가능하도록 구현기능 구현은 vue의 `@dbclick`을 사용함 - 2. 커스텀 post 요청 함수 가져다 쓰기export async function admPost(url, params, headers = {}) { return await axios.post(url, params, {headers});}위와 같이 정의한 함수를 외부에서 가져다 쓸 때,API 응답을 받아 후속처리를 해야 한다면 가져다 쓴 곳..

1. OSI 7 계층이란?✅ 답변:OSI(Open Systems Interconnection) 7 계층 모델은 네트워크 통신을 논리적으로 7개의 계층으로 나눈 구조입니다.각 계층은 특정 역할을 담당하며, 계층 간 데이터가 단계적으로 변환됩니다. 계층 이름 주요 역할 대표 프로토콜 7응용 계층 (Application)사용자 인터페이스 제공HTTP, FTP, SMTP6표현 계층 (Presentation)데이터 암호화, 압축, 변환SSL/TLS, JPEG, ASCII5세션 계층 (Session)세션 설정 및 관리RPC, NetBIOS4전송 계층 (Transport)신뢰성 있는 데이터 전송TCP, UDP3네트워크 계층 (Network)IP 주소 기반 패킷 전달, 라우팅IP, ICMP, ARP2데이터 링크 ..

1. 배열(Array)과 연결 리스트(Linked List)의 차이점은 무엇인가?✅ 답변배열은 고정된 크기의 연속적인 메모리 공간에 데이터를 저장하는 자료구조로, 인덱스를 통해 빠르게 접근할 수 있습니다. 하지만 크기를 미리 정해야 하며, 크기 변경이 불가능합니다. 연결 리스트는 각 요소가 데이터와 포인터로 구성되어 있어 크기 변경이 자유롭고, 삽입 및 삭제가 효율적입니다. 그러나 요소 접근 속도가 느리고, 추가 메모리 공간이 필요합니다. 2. 스택(Stack)과 큐(Queue)의 차이점은 무엇인가?✅ 답변스택은 후입선출(LIFO) 방식으로, 가장 마지막에 삽입된 요소가 먼저 제거됩니다.큐는 선입선출(FIFO) 방식으로, 가장 먼저 삽입된 요소가 먼저 제거됩니다.3. 이진 탐색 트리(Binary Sear..

참고: 위키백과-운영체제  1. 운영체제란?✅ 답변운영체제(OS, Operating System)는 하드웨어와 소프트웨어 간의 중개 역할을 하며, 컴퓨터 시스템의 자원을 관리하고 사용자가 프로그램을 실행할 수 있도록 돕는 시스템 소프트웨어입니다. 운영체제는 사용자와 하드웨어 간의 인터페이스를 제공하고, 여러 프로그램이 원활하게 실행되도록 자원을 효율적으로 관리합니다.  2. 운영체제의 주요 역할✅ 답변자원 관리: CPU, 메모리, 입출력 장치 등을 효율적으로 관리합니다.프로세스 관리: 프로세스 생성, 실행, 종료 및 스케줄링을 담당합니다.파일 시스템 관리: 파일의 생성, 삭제, 읽기/쓰기 등을 관리합니다.사용자 인터페이스 제공: 사용자가 시스템과 상호작용할 수 있도록 도와주는 인터페이스를 제공합니다.보안..

공식문서 링크: https://nextjs.org/learn/dashboard-app공식문서 번역 블로그 링크: https://kidongg.github.io/categories/next-js-learn/Chapter 1. Getting Started`pnpm (패키지 매니저)` 사용 권장⬇️ pnpm 설치npm install -g pnpm  ⬇️ Next.js 애플리케이션 생성npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpmcreate-next-app: CLI 도구--example: 스터터 예제 플래그⬇️..

지난 10월 초에 프론트엔드 개발자로 취업을 한 뒤, 회사에서 다양한 업무를 진행했다.아직 신입 연차라 대단한 업무는 아니었지만 내가 했던 업무를 정리해 보자면 아래와 같다. 어드민 페이지회사에 기존 존재하던 어드민 페이지 프로그램은 유지보수 난이도가 높아 Vue3를 이용해 새로운 어드민 페이지를 만들고 있다고 했다. 기존 어드민 페이지의 기능을 새로운 프로젝트로 옮기는 작업을 진행했다.요청에 따라 화면 `UI 퍼블리싱`: 중요한 작업보다는, 사용자 편의를 위한 작업이었다. 입사 초기에는 주로 퍼블리싱 작업을 했다.json으로 내려온 데이터를 `엑셀로 변환 및 다운로드` 할 수 있게 작업 (xlsx라이브러리 사용)테이블 형태로 데이터를 보여주기 위한 라이브러리 변경: `ag-grid` -> `grid.j..