그간 한 일백엔드 코드를 담당해주시던 선임분이 퇴사하신 뒤, 어드민 개발의 백엔드 코드까지 내가 직접 작성하게 되었다.물론 백엔드 로직 일체를 내가 짠 것은 아니었다. DB에서 데이터를 가져오는 CTO님의 쿼리가 핵심이었고, 나는 그 쿼리를 받아 node.js로 백엔드 엔드포인트를 생성하는 역할을 담당했다. 2주 남짓한 시간동안 새로운 페이지를 12개 만들었으며, 프론트 측면에서 세세한 요구사항이 추가되어 구현에 시간이 많이 걸렸다.split이나 탭 형식 등 다양한 페이지를 만들어야 해서 더욱 바빴다. 물론 기존에 작업했던 틀이 있기는 하지만, split, tab 같은 경우는 하나의 페이지에 엔드포인트가 2, 3개씩 따라 붙기 때문에 하나의 페이지만 해도 엔드포인트를 2, 3개씩은 만들어둬야 했다.지난 ..

slice, splice 차이- `slice()`: 원본 배열을 변경하지 않고, 특정 범위의 요소를 잘라내어 새로운 배열을 반환한다.- `splice()`: 원본 배열을 수정하여 요소를 추가하거나 제거한다.- 사용 용도 차이: `slice()`는 데이터 추출에 주로 사용되고, `splice()`는 배열 구조의 변경이 필요할 때 사용된다. 사용할 때마다 헷갈려서 정리해 보았다.

오늘 한 일 1. 테이블 Row 정보를 세로로 보여주는 모달 만들기테이블 헤더를 세로(세로글자 방향)로 표시하기 - 일반적인 HTML 테이블은 기본적으로 가로로 헤더를 나열하지만- CSS로 회전하거나- 행(row) 기준으로 헤더를 구성하면 세로 형태로 만들 수 있다. ✅ 방법 1: CSS로 thead > th 글자를 세로로 회전 {{ col }} {{ row[col] }} 📌 결과: 글자가 세로 방향으로 (위에서 아래로) 표시됨. ✅ 방법 2: 가로를 데이터 row로, 세로를 column처럼 구성데이터 자체를 가로로 돌려서 헤더가 세로가 되도록 테이블을 구성하는 방법이다. ..

아래의 코드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..

1. 회원 관리 기능 개선 (정지 사유 추가) (BE + FE) 2. 사용자 상태 변경 이력 조회 기능 확장 > reason 필드 추가 (BE + FE) 3. 특정 페이지 조회 쿼리 수정 (BE)4. 차트 페이지에 새로운 분석 항목 추가 (BE + FE) 5. 신규 내부 페이지 생성 (내일 이어서 진행 예정) 백엔드 쿼리 작업과 API 생성 및 수정 작업, 프론트엔드 작업까지 한번에 하려니까 정신이 없다...백엔드 코드와 조금 더 익숙해져야 할 것 같다...

오라클 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 함수 사용법 ..

오늘 한 일반영하는 방법 인수인계 받음디비버 쿼리 넣고 ctrl + enter 하면 실행됨. 실제 코드에 넣기 전에 직접 디비 실행해보고 결정...디비버에 값을 넣을 때는 string 타입 (작은 따옴표)nvl 처리된 부분은 필수 파라미터가 아님`nvl` 적용되었거나 `like`가 존재하는 경우는 반드시 필요한 정보가 아님 (null 값도 가능)프론트, 백엔드 테스트에 반영하는 방법은 동일운영은 폐쇄망에서만 배포할 수 있다`:aa` 이 부분이 매개변수(params)로 들어올 수 있는 부분임함수를 찾을 때는 실제 쿼리 날려보고 어떻게 들어오는지 확인한 후에, 도메인에서 사용하고 있는 문자열을 가지고 있는 쪽을 찾는다. 잘 찾아지지 않을 때는 `app.ts`에 저장된 가장 처음 도메인 부분을 참조한 뒤 해당..

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 스타일링 진행어드민 사이드메뉴 중복 코드 리팩토링 (중복제거 및 컴포넌트 분리 추가 고..

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;} ✅ 요약`&` = 현재 선..