본문 바로가기

전체 글481

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.
[😺Just Meow It: 고양이의 조언] Three.js + Next.js / vercel 배포 및 구글/네이버 검색어 등록, 구글 애드센스 광고 추가 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 프로젝트 루트 .. 2025. 4. 5.
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.
[😺Just Meow It: 고양이의 조언] Three.js + Next.js / 3D 고양이 모델을 화면에 띄워보자 📌 프로젝트 초기 세팅 (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 라이브러리 📌 기본 코드 (고양이 .. 2025. 3. 30.
TIL : 250328금 (메뉴 검색창 만들기, 즐겨찾기 기능 구현, 프로그래머스 유연근무제) 1. oninput 이용해 메뉴 검색창 기능 만들기✅ onInput 과 onChange의 차이- `oninput`: input 태그 내부의 값이 변경 될 때마다 이벤트 발생- `onchange`: input 태그의 포커스를 벗어났을때(입력 종료 시) 이벤트 발생 어드민 페이지의 사이드 바 내부 메뉴(페이지) 수가 많아짐에 따라, 특정 메뉴를 찾는 데 시간이 오래 걸렸다.개발 및 테스트를 하면서도 불편함을 많이 느꼈는데 유저(운영자)의 불편함은 말할 수도 없겠지🤨 그래서 이번 기회에 메뉴 검색 기능을 추가해 보았다.유저가 input에 입력한 값이 변경될 때마다, 즉각적으로 검색어와 일치하는 메뉴는 보이고 그 외의 메뉴는 보이지 않도록 구현하고 싶었다. 따라서 위의 두 개 이벤트 중 `oninput`을 이.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 09. Intercepting Routes 9. 경로 가로채기(Intercepting Routes)✅ Intercepting Routes란?Intercepting Routes는 Next.js에서 특정 경로를 가로채서 현재 페이지 위에 새로운 UI(예: 모달, 슬라이드 패널 등)를 표시하는 기능이다.➡️ 즉, 새로운 페이지로 완전히 이동하지 않고, 현재 페이지 위에 겹쳐서 특정 UI를 보여줄 수 있도록 해준다.✅ 왜 필요한가?보통 모달을 구현할 때 사용된다.예를 들어, 사용자가 /products 페이지에서 상품 목록을 보고 있다가, 특정 상품을 클릭하면 상품 상세 페이지를 모달로 표시하고 싶을 때 유용하다.기존 방식상품 목록 /products → 상품 상세 /products/1 로 이동하면 페이지가 새로고침됨Intercepting Routes 사용.. 2025. 3. 29.
[Next.js 공식문서 정리] Routing : 08. Parallel Routes 8. Parallel Routes (병렬 라우트)병렬 라우트를 사용하면 동일한 레이아웃 내에서 여러 페이지를 동시에 또는 조건부로 렌더링할 수 있다. 이 기능은 대시보드, 소셜 사이트의 피드 등 매우 동적인 앱 섹션에 유용하다.예를 들어, 대시보드에서 병렬 라우트를 사용하면 팀 페이지와 분석 페이지를 동시에 렌더링할 수 있다.🔹 Slots (슬롯)병렬 라우트는 슬롯(Slots) 이라는 개념을 사용해 구현 가능하다. 슬롯은 @폴더명 형식으로 정의된다.예를 들어, 다음과 같은 폴더 구조는 @analytics, @team이라는 두 개의 슬롯을 정의한다.app/ ├── @analytics/ │ ├── page.js ├── @team/ │ ├── page.js ├── layout.js ├── page.j.. 2025. 3. 29.
반응형

티스토리툴바