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

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..

http://florescene.tistory.com/506 웹 사이트 Favicon 등록 및 SEO 최적화Favicon Favicon 디자인 favicon을 만들기 위해 canva에서 직접 디자인을 했다. 디자인은 안에서 주는 템플릿을 이용해서 간단하게 만들 수 있다. 캔버스 사이즈는 48x48로 제작했다. Favicon 생성 https://conveflorescene.tistory.com  https://florescene.tistory.com/507  Next.js 웹사이트 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 웹마스터 도구에 등록 (+sitemap.xml,sitemap.xml, robots.txt 추가 next-sitemap 패키지 설치 npm i next-sitemap 프로젝트 루트 ..

👨‍💻 [프로그래머스] 다트 게임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..

👨‍💻 [프로그래머스] 크레인 인형뽑기 게임function solution(board, moves) { var answer = 0; let stack = []; for(let i = 0; i 스택 자료구조 익히기 딱 좋은 문제!  (중요) 디버거 사용법 익히기 웹사이트 에러 수정하는데, 디버거 사용하니까 문제 바로 해결됨;콘솔만으로는 방대한 양의 변수가 어떤 식으로 변경되는지 일일이 트래킹하기가 어려움.debugger를 어떻게 쓰는지 배우고 빨리 익숙해지자.

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..

1. `:active``:active` CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 예를 들어 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점 까지를 의미한다./* 활성화된 모든 태그를 선택 */a:active { color: red;}주로 아래와 같은 요소에서 사용된다.: 링크: 버튼: 폼 요소와 연결된 라벨, : 입력 필드즉, 사용자가 클릭하거나 포커스를 줄 수 있는 요소들에 자주 사용된다. 🚧 주의할 점`:active`는 다른 링크 관련 의사 클래스에 덮어씌워질 수 있다.링크에 스타일을 적용할 때는 `:link`, `:visited`, `:hover`, `:active` 순서를 지켜야 한다.(LVHA 순서)a:link { color: ..

프로그래머스 해시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..

📌 프로젝트 초기 세팅 (Next.js + TypeScript + Three.js)# Next.js 프로젝트 생성npx create-next-app@latest just-meow-it --typescript# 필요한 패키지 설치cd just-meow-ityarn installyarn add @react-three/fiber @react-three/drei three`@react-three/fiber` === R3F → Three.js를 React에서 사용할 수 있도록 도와주는 라이브러리. 즉 Three.js의 React 버전`@react-three/drei` → Three.js 유틸리티 (카메라, 조명, OrbitControls 등)`three` → Three.js 라이브러리 📌 기본 코드 (고양이 ..