본문 바로가기

분류 전체보기486

[TIL] 250327목 (isNaN, Number.isNaN / split, splice, slice / reduce / map vs reduce) 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. 3. 27.
[TIL] 250326수 (자바스크립트 BFS, BFS가 필요한 문제 패턴, PGM 음양마스터, selectbox 데이터 null값 뜨는 문제 수정) 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. 3. 26.
[TIL] 20250325화 (자바스크립트의 배열, 연결리스트, 완전탐색(모의고사), reduce와 filter의 시간복잡도 계산) 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. 3. 25.
[TIL] 20250324월 (vue.js 부모 ← 자식 데이터 바인딩, input field :size) 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 응답을 받아 후속처리를 해야 한다면 가져다 쓴 곳.. 2025. 3. 24.
면접대비 질문 정리: 네트워크 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데이터 링크 .. 2025. 3. 23.
면접대비 질문 정리: 자료구조 1. 배열(Array)과 연결 리스트(Linked List)의 차이점은 무엇인가?✅ 답변배열은 고정된 크기의 연속적인 메모리 공간에 데이터를 저장하는 자료구조로, 인덱스를 통해 빠르게 접근할 수 있습니다. 하지만 크기를 미리 정해야 하며, 크기 변경이 불가능합니다. 연결 리스트는 각 요소가 데이터와 포인터로 구성되어 있어 크기 변경이 자유롭고, 삽입 및 삭제가 효율적입니다. 그러나 요소 접근 속도가 느리고, 추가 메모리 공간이 필요합니다. 2. 스택(Stack)과 큐(Queue)의 차이점은 무엇인가?✅ 답변스택은 후입선출(LIFO) 방식으로, 가장 마지막에 삽입된 요소가 먼저 제거됩니다.큐는 선입선출(FIFO) 방식으로, 가장 먼저 삽입된 요소가 먼저 제거됩니다.3. 이진 탐색 트리(Binary Sear.. 2025. 3. 23.
면접대비 질문 정리: 운영체제 (OS, Operating System) 참고: 위키백과-운영체제  1. 운영체제란?✅ 답변운영체제(OS, Operating System)는 하드웨어와 소프트웨어 간의 중개 역할을 하며, 컴퓨터 시스템의 자원을 관리하고 사용자가 프로그램을 실행할 수 있도록 돕는 시스템 소프트웨어입니다. 운영체제는 사용자와 하드웨어 간의 인터페이스를 제공하고, 여러 프로그램이 원활하게 실행되도록 자원을 효율적으로 관리합니다.  2. 운영체제의 주요 역할✅ 답변자원 관리: CPU, 메모리, 입출력 장치 등을 효율적으로 관리합니다.프로세스 관리: 프로세스 생성, 실행, 종료 및 스케줄링을 담당합니다.파일 시스템 관리: 파일의 생성, 삭제, 읽기/쓰기 등을 관리합니다.사용자 인터페이스 제공: 사용자가 시스템과 상호작용할 수 있도록 도와주는 인터페이스를 제공합니다.보안.. 2025. 3. 23.
Learn Next.js 공식문서 공부 내용 정리 공식문서 링크: 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: 스터터 예제 플래그⬇️.. 2024. 12. 22.
프론트엔드 개발자로 1개월 반 살기 지난 10월 초에 프론트엔드 개발자로 취업을 한 뒤, 회사에서 다양한 업무를 진행했다.아직 신입 연차라 대단한 업무는 아니었지만 내가 했던 업무를 정리해 보자면 아래와 같다. 어드민 페이지회사에 기존 존재하던 어드민 페이지 프로그램은 유지보수 난이도가 높아 Vue3를 이용해 새로운 어드민 페이지를 만들고 있다고 했다. 기존 어드민 페이지의 기능을 새로운 프로젝트로 옮기는 작업을 진행했다.요청에 따라 화면 `UI 퍼블리싱`: 중요한 작업보다는, 사용자 편의를 위한 작업이었다. 입사 초기에는 주로 퍼블리싱 작업을 했다.json으로 내려온 데이터를 `엑셀로 변환 및 다운로드` 할 수 있게 작업 (xlsx라이브러리 사용)테이블 형태로 데이터를 보여주기 위한 라이브러리 변경: `ag-grid` -> `grid.j.. 2024. 11. 23.
면접대비 질문 정리: Vue.js 1. Vue.js란?✅ 답변:Vue.js는 사용자 인터페이스(UI) 구축을 위한 진행형(Progressive) JavaScript 프레임워크입니다.React와 유사하게 컴포넌트 기반으로 UI를 개발할 수 있으며, Virtual DOM과 반응형 시스템을 활용하여 효율적인 렌더링을 제공합니다.2. Vue의 Virtual DOM이란?✅ 답변:Virtual DOM은 실제 DOM을 직접 조작하는 대신, 가상의 DOM을 사용하여 변경 사항을 최소화하는 기술입니다.Vue는 변경 사항을 감지하고, 효율적으로 필요한 부분만 업데이트하여 성능을 최적화합니다.3. Vue의 반응형 시스템이란?✅ 답변:Vue는 Proxy 기반 반응형(Reactivity) 시스템을 사용합니다.데이터가 변경되면 Vue가 이를 감지하고, 변경된 부.. 2024. 11. 23.
면접대비 질문 정리: Next.js 면접질문 참고Next.js - 면접 단골 질문프론트엔드 개발자 면접 질문 1. Next.js의 SSR과 CSR의 차이점은 무엇인가요? ✅ 답변 SSR (Server-Side Rendering): 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식입니다. 클라이언트는 서버로부터 완전히 렌더링된 HTML을 받아 바로 표시할 수 있습니다. 초기 로딩 속도가 빠르며, SEO에 유리한 방식이라는 특징이 있습니다.CSR (Client-Side Rendering): 클라이언트에서 JavaScript를 사용해 렌더링을 처리하는 방식입니다. 초기 페이지 로드 시, 클라이언트는 최소한의 HTML과 함께 JavaScript 번들을 받아 브라우저에서 직접 렌더링을 수행합니다. 이는 사용자와의 상호작용이 중요한 SPA(S.. 2024. 8. 26.
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 - 사전직무교육 2주차 후기 벌써 2주차 후기라니 시간이 너무 빠르다.일주일이 어떻게 흘렀는지도 모를만큼 빠른 진도였다.정신차리고 수업 따라가는 데만 해도 많은 에너지를 썼다.한 주 동안 배운 내용드디어 리액트를 마무리하고 Next.js 파트로 넘어갔다.솔직히 리액트 심화 부분도 어려운데(메모이제이션 부분ㅠ) Next를 따라갈 수 있을까 걱정했는데 생각보다 그렇게 어렵지는 않다. 물론 생각보다 어렵지 않다는 거지 모든 게 이해간다는 건 아니다...강사님께서 Next의 꽃인 라우팅 부분에 대해서 오랜 시간을 들여 가르쳐 주셨다. 이전에 Next.js 살짝 찍먹해 봤을 때는 app 라우터보다는 page 라우터가 대세여서 page 라우터로 Next.js를 배웠는데, 불과 5개월만에 대세가 완전히 바뀌었나 보다. 강사님께서도 이제는 최신 .. 2024. 6. 10.
반응형

티스토리툴바