본문 바로가기

Developer43

TIL : 250418금 (nullish 병합(??)과 단축 평가(||)) 아래의 코드let bookmarkMenu = bookmarks.value[menu.name];if (!bookmarkMenu) { bookmarks.value[menu.name] = { ...menu, isMarked: false }; bookmarkMenu = bookmarks.value[menu.name];}를 한 줄로 합쳐서 간결하게 쓰고 싶다면, nullish 병합(??) 또는 단축 평가(||)를 사용 가능하다. ✅ 단축 평가 버전 (가장 간단)let bookmarkMenu = bookmarks.value[menu.name] ||= { ...menu, isMarked: false };`||=`는 "값이 falsy일 때만 할당"즉, 기존에 값이 없으면 `{ ...menu, isMarked: f.. 2025. 4. 21.
TIL : 250417목 (오늘 한 일) 1. 회원 관리 기능 개선 (정지 사유 추가) (BE + FE) 2. 사용자 상태 변경 이력 조회 기능 확장 > reason 필드 추가 (BE + FE) 3. 특정 페이지 조회 쿼리 수정 (BE)4. 차트 페이지에 새로운 분석 항목 추가 (BE + FE) 5. 신규 내부 페이지 생성 (내일 이어서 진행 예정) 백엔드 쿼리 작업과 API 생성 및 수정 작업, 프론트엔드 작업까지 한번에 하려니까 정신이 없다...백엔드 코드와 조금 더 익숙해져야 할 것 같다... 2025. 4. 18.
TIL : 250416수 (BE 업무 처리 대비 오라클 DB 함수 공부) 오라클 decode 함수`DECODE(컬럼, 조건1, 결과1, 조건2, 결과2, 조건3, 결과3..........) `if-else와 같은 역할 https://gent.tistory.com/227 [Oracle] 오라클 DECODE 함수 사용방법 (if else, 디코드)DECODE 함수는 오라클 쿼리에서 가장 많이 사용하는 함수 중 하나이다. 표준 SQL 함수가 아니라서 사용을 꺼려하기도 하지만 잘 사용하면 아주 편하기 때문에 유용하다. 최근에는 CASE WHEN 구문 사용gent.tistory.com 오라클 substr 함수`SUBSTR("문자열", "시작위치", "길이")`문자열 자르기 https://gent.tistory.com/201 [Oracle] SUBSTR, SUBSTRB 함수 사용법 .. 2025. 4. 16.
TIL: 20250415화 (백엔드 인수인계 (엔드포인트 트래킹 방법 등), 오라클 함수 outer join, 별칭 지정, nvl) 오늘 한 일반영하는 방법 인수인계 받음디비버 쿼리 넣고 ctrl + enter 하면 실행됨. 실제 코드에 넣기 전에 직접 디비 실행해보고 결정...디비버에 값을 넣을 때는 string 타입 (작은 따옴표)nvl 처리된 부분은 필수 파라미터가 아님`nvl` 적용되었거나 `like`가 존재하는 경우는 반드시 필요한 정보가 아님 (null 값도 가능)프론트, 백엔드 테스트에 반영하는 방법은 동일운영은 폐쇄망에서만 배포할 수 있다`:aa` 이 부분이 매개변수(params)로 들어올 수 있는 부분임함수를 찾을 때는 실제 쿼리 날려보고 어떻게 들어오는지 확인한 후에, 도메인에서 사용하고 있는 문자열을 가지고 있는 쪽을 찾는다. 잘 찾아지지 않을 때는 `app.ts`에 저장된 가장 처음 도메인 부분을 참조한 뒤 해당.. 2025. 4. 15.
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 : 250409수 (말줄임표(ellipsis) CSS, &::placeholder SCSS ) 1. 말줄임표 (ellipsis) 적용white-space: nowrap;overflow: hidden;text-overflow: ellipsis; 2. `&::placeholder``&::placeholder`는 SCSS(Sass) 문법이다.의미는 다음과 같다. 🔤 뜻 풀이`&` : 현재 선택자를 의미 (예: `.search`)`::placeholder` : placeholder 가상 요소 (`input`, `textarea` 등에서 placeholder 스타일링할 때 사용)즉,.search { &::placeholder { color: gray; }}이건 컴파일되면 CSS에서 아래와 같이 변환됨..search::placeholder { color: gray;} ✅ 요약`&` = 현재 선.. 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.
반응형

티스토리툴바