본문 바로가기

전체 글

 (159)
[css, 공용 ui, js] max-height, max-width로 접었다 피는 폴딩 ui 반응형 만들기(% 단위를 사용하지 못할 때) 목적폴딩 ui는 css의 transtion과 max-height, max-width 속성을 이용해서 아주 간단하게 만들 수 있다.문제는 화면의 크기가 가변적인 상황에서 반응형 ui로 만들때인데,ui가 펴지는 상황에서 max-height와 max-width에 퍼센티지(%)를 사용할 수 없는 경우가 있다.이럴 때에는 펴지는 상황의 예상크기를  js로 계산하여 직접 스타일을 주어야 하는데, 그럴 때 사용하는 ui다. 원리이 폴딩 ui는 최초에 접힌 상태로, max-width와 max-height가 0으로 설정되어 있다.우선, 최초에 document가 로드된 시점에 max-width, max-height 제한을 풀어서 ui의 원래 크기로 되돌린다.그리고 이 크기를 변수로 저장한 후 다시 접힌 상태로 스타일을 되..
[nodeJS - trouble shooting] npx 실행 시 npm error code ENOENT가 발생할 때 원인 및 해결 과정 문제 설명react 프로젝트를 세팅하려고 creat react app(cra)프로젝트의 세팅 명령어인 npx create-react-app my-app 를 입력했다.그리고 아래 에러가 발생하였다.npm error code ENOENTnpm error syscall lstatnpm error path C:\Users\user\AppData\Roaming\npmnpm error errno -4058npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\user\AppData\Roaming\npm'npm error enoent This is related to npm not being able to find a file.npm error eno..
[react] cra, vite 없이 직접 리엑트 프로젝트 세팅하기1(webpack) - 바벨, 타입스크립트, css 전처리, 환경변수, 정적 파일 목차프로젝트 기본 구조웹팩바벨타입스크립트CSS전처리환경변수정적 파일1(image, svg)정적 파일2(font)라우팅완성파일 일반적으로 리엑트 프로젝트는 cra나 vite 등의 cli로 자동 세팅이 가능하다.이 방식은 학습 단계에서 간편하지만, 실무에서 scss나 타입스크립트, 바벨 등 다양한 환경 세팅을 해야할 때 배경 지식이 전무하여 문제가 생길 수 있다. 따라서 프로젝트 세팅을 직접 해보기로 했다. 도구로 webpack을 사용한 이유는 웹팩의 설정방식이 복잡하지만, 빌드 방식의 커스터마이징이 상세하여 실무에서 사용 비중이 높기 때문이다. 프로젝트 기본 구조1. 새 프로젝트를 만들고 npm과 git 세팅을 초기화한다. npm 초기화npm init -y git 초기화git init 만약 .gitign..
[ui] 아코디언 ui 만들기 용도다수의 메뉴 박스처럼 데이터 리스트를 접어서 정리할 때 유용한 ui가 아코디언이다.해당 ui는 react와 reset css, css의 class 기반 스타일링으로 이뤄졌다.아래에 소스코드를 첨부했으니 필요하다면 사용하면 된다. app.tsximport Accordion from "./components/accordion/Accordion";// 아코디언 ui용 임시 데이터const menu = [ { id: "00", label: "에피타이저", }, { id: "01", label: "메인 음식", }, { id: "02", label: "디저트", }, { id: "03", label: "음료", }, { id: "04", l..
[css] ul, ol 태그 공부 (+: custom- ul 만들기) 용도ul과 ol은 문단의 시작점(li 태그)에 1,2,3....n, 혹은 ● 같은 리스트 스타일(marker)을 적용할 수 있는 태그이다. 원리ul과 ol의 marker은 list-style이라는 shorthand 설정으로 한번에 설정가능하고, 이는 list-style-type, list-style-image, list-style-position으로 구성된다. 이 중에서 list-style-type, list-style-image은 marker의 형태를 결정하고 list-style-position은 들여쓰기 모드를 결정한다.  display:list-item li에 marker를 표출하기 위한 display 설정   list-style-type  marker의 형태를 string 형태로 적용한다.미리 준..
[css] height:100%를 줬는데 박스가 부모 박스보다 커지면 다음 문제를 체크하자 문제 상황과 해결방안목적 | 레이아웃에서 부모 박스의 높이에 딱 맞는 자식 박스를 만들고 싶음.행위 | 자식 박스에게  height:100%를 줌.예상 | 자식이 부모의 padding을 제외한 높이에 딱 맞게 크기가 설정.실제 | 부모 바깥으로 오버플로우됨.  일반적으로는 height 100%를 하면 당연히 부모의 안쪽에 이쁘게 채워질거라 하는데, 현실은 이렇게 오버플로우가 발생한다.이럴 때는 아래의 css 부분들을 체크하자.부모에 height가 설정되어 있지 않는 경우%단위값은 부모의 동일 속성 값을 상속한다. 부모에 height가 명시되어 있지 않거나 auto로 설정되어 있으면 자식 요소에 height:100%을 설정해도 동작하지 않는다.자식에 box-sizing: border-box;이 아닌 경우b..
[react] 함수형 컴포넌트 내에 다른 함수형 컴포넌트를 선언할 때 생길 수 있는 문제(trouble-shooting) AS-IS현재상황리엑트 프로젝트에서 아래 코드처럼 함수형 컴포넌트 내에 다른 함수형 컴포넌트를 선언하였다.import { useEffect, useRef, useState } from "react";export default function Test({ option }) { const [value, setValue] = useState(); const InnerTest = function ({ value, onChangeCallback }) { return ( ); }; return ( test { setValue(e.target.value); }} /> );}  문제내부 컴포넌..
[css] letter-spacing 적용 시 중앙 정렬 레이아웃 틀어짐 문제 문제 설명css에서 letter-spacing은 태그 내에 텍스트에서 글자간 간격을 설정한다.그런데 만약 중앙 정렬을 한 텍스트에 이 속성을 사용하면 텍스트가 살짝 왼쪽으로 치우치는 오류가 발생한다.  분석 letter-spacing은 글자마다 오른편에 마치 padding혹은 margin처럼 공백을 부여한다. 그리고 마지막 글자에 부여된 우측 공백으로 인해 전체 텍스트가 letter-spacing 값만큼 왼쪽으로 치우쳐지는 것이다.  해결방법이 문제는 각 방법마다 장단점이 있는데, 내 경우에는 두 가지 방법 중 하나를 골라서 해결했다.  /* 첫 번째 글자에 패딩을 부여 */ & .overlay_chart-title-main::first-letter { padding-left: 0.2rem; }..

티스토리툴바