본문 바로가기

Developer46

TIL : 250402수 (falsy값 처리(?., ??, || 언제 써야 할까?), setTimeout 0ms 비동기 처리, 프로그래머스 완주하지 못한 선수, for...in vs for...of 차이점 정리, 프로그래머스 실패율) falsy 값을 처리하는 방법`TypeError: Cannot read properties of null (reading 'name')` 오류 발생이 오류는 null인 값에서 `name` 속성을 읽으려고 해서 발생한다.예를 들어, 아래 코드에서 menu가 null이면 에러가 발생함console.log(menu.name); // menu가 null이면 오류 발생  해결 방법 4가지✅ 1. `?.`(옵셔널 체이닝) 사용 (가장 추천!)console.log(menu?.name); // menu가 null이면 undefined 반환 (오류 없음)✔ `?.`(옵셔널 체이닝)을 사용하면 menu가 null이어도 오류 없이 undefined를 반환✔ Vue 템플릿에서도 사용 가능{{ menu?.name }}  ✅ 2.. 2025. 4. 2.
TIL : 250401화 (:active, 즐겨찾기 기능 css 변경 진행중-event.target, menuRefs, white-space, 프로그래머스 문자열 내림차순으로 배치하기) 1. `:active``:active` CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 예를 들어 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점 까지를 의미한다./* 활성화된 모든 태그를 선택 */a:active { color: red;}주로 아래와 같은 요소에서 사용된다.: 링크: 버튼: 폼 요소와 연결된 라벨, : 입력 필드즉, 사용자가 클릭하거나 포커스를 줄 수 있는 요소들에 자주 사용된다. 🚧 주의할 점`:active`는 다른 링크 관련 의사 클래스에 덮어씌워질 수 있다.링크에 스타일을 적용할 때는 `:link`, `:visited`, `:hover`, `:active` 순서를 지켜야 한다.(LVHA 순서)a:link { color: .. 2025. 4. 1.
TIL : 250331월 (프로그래머스 해시, 윤년, 같은 숫자는 싫어, 문자열 내 마음대로 정렬하기(sort()함수에 대해 알아보기)) 프로그래머스 해시function solution(nums) { var answer = {}; nums.forEach((num, i) => { answer[num] ? answer[num]++ : answer[num] = 1; }); return Math.min(nums.length/2, Object.keys(answer).length);}답지 안 보고 풀기는 했는데 성능면에서 문제가 좀 있는 것 같다. 테스트케이스 아래쪽에 3-4s 걸리는 것도 있음...nums가 최대 1만개까지 될 수 있기 때문에 시간복잡도는 O(N), 그리고 나머지는 O(1) 정도밖에 안 들것 같은데...모범답안을 찾아보니 set이 있었다... 중복처리😂추가로 찾아보니 `Object.keys.. 2025. 3. 31.
TIL : 250328금 (메뉴 검색창 만들기, 즐겨찾기 기능 구현, 프로그래머스 유연근무제) 1. oninput 이용해 메뉴 검색창 기능 만들기✅ onInput 과 onChange의 차이- `oninput`: input 태그 내부의 값이 변경 될 때마다 이벤트 발생- `onchange`: input 태그의 포커스를 벗어났을때(입력 종료 시) 이벤트 발생 어드민 페이지의 사이드 바 내부 메뉴(페이지) 수가 많아짐에 따라, 특정 메뉴를 찾는 데 시간이 오래 걸렸다.개발 및 테스트를 하면서도 불편함을 많이 느꼈는데 유저(운영자)의 불편함은 말할 수도 없겠지🤨 그래서 이번 기회에 메뉴 검색 기능을 추가해 보았다.유저가 input에 입력한 값이 변경될 때마다, 즉각적으로 검색어와 일치하는 메뉴는 보이고 그 외의 메뉴는 보이지 않도록 구현하고 싶었다. 따라서 위의 두 개 이벤트 중 `oninput`을 이.. 2025. 3. 29.
[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.
프론트엔드 개발자로 1개월 반 살기 지난 10월 초에 프론트엔드 개발자로 취업을 한 뒤, 회사에서 다양한 업무를 진행했다.아직 신입 연차라 대단한 업무는 아니었지만 내가 했던 업무를 정리해 보자면 아래와 같다. 어드민 페이지회사에 기존 존재하던 어드민 페이지 프로그램은 유지보수 난이도가 높아 Vue3를 이용해 새로운 어드민 페이지를 만들고 있다고 했다. 기존 어드민 페이지의 기능을 새로운 프로젝트로 옮기는 작업을 진행했다.요청에 따라 화면 `UI 퍼블리싱`: 중요한 작업보다는, 사용자 편의를 위한 작업이었다. 입사 초기에는 주로 퍼블리싱 작업을 했다.json으로 내려온 데이터를 `엑셀로 변환 및 다운로드` 할 수 있게 작업 (xlsx라이브러리 사용)테이블 형태로 데이터를 보여주기 위한 라이브러리 변경: `ag-grid` -> `grid.j.. 2024. 11. 23.
반응형

티스토리툴바