본문 바로가기

Developer38

TIL: 20250410목 (CSS-transform) transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다.출처: https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDNCSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.developer.mozilla.org  그 외 웹사이트 신규 기능 CSS 스타일링 진행어드민 사이드메뉴 중복 코드 리팩토링 (중복제거 및 컴포넌트 분리 추가 고.. 2025. 4. 10.
TIL : 250408화 (flex-basis: 플렉스 아이템의 초기 크기 지정, 프로그래머스 성격 유형 검사하기) 1. flex-basis.wallet-benificial-name,.wallet-law-name { display: flex; flex-direction: row; justify-content: space-between; align-items: center;}.wallet-law-kname,.wallet-benificial-kname,.wallet-law-ename,.wallet-benificial_ename { flex-basis: 50%;}div 내 각 영역이 정해진 공간을 차지하게 하기 위해 `flex-basis`를 사용했다.위와 같이 50%씩 영역을 할당해 주었다.`flex-basis`는 익숙하지 않고 자주 사용하지 않았는데 앞으로는 영역 지정을 위해 자주 사용해야겠다.  flex-bas.. 2025. 4. 8.
TIL : 250404금 (프로그래머스 다트 게임, Git 원격 브랜치 코드 로컬 브랜치에 적용하기, 자바스크립트 소수점 자르기 방법, 디버거 사용법, JS 딕셔너리) 👨‍💻 [프로그래머스] 다트 게임function solution(dartResult) { let curr = ''; let arr = [] for(let i of dartResult){ if(i === 'S'){ arr.push(Number(curr)) curr = ''; } else if(i === 'D'){ arr.push(Number(curr ** 2)); curr = ''; } else if(i === 'T'){ arr.push(Number(curr ** 3)); curr = ''; } else if.. 2025. 4. 4.
TIL : 250403목 (프로그래머스 크레인 인형뽑기 게임, debugger의 중요성...) 👨‍💻 [프로그래머스] 크레인 인형뽑기 게임function solution(board, moves) { var answer = 0; let stack = []; for(let i = 0; i 스택 자료구조 익히기 딱 좋은 문제!  (중요) 디버거 사용법 익히기 웹사이트 에러 수정하는데, 디버거 사용하니까 문제 바로 해결됨;콘솔만으로는 방대한 양의 변수가 어떤 식으로 변경되는지 일일이 트래킹하기가 어려움.debugger를 어떻게 쓰는지 배우고 빨리 익숙해지자. 2025. 4. 4.
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.
반응형

티스토리툴바