이전에도 최상단의 태그에(body) width값을 100vw로 주고 하위 태그들에는 100%값을 주는데 자꾸 가로 스크롤이 생겨서 해결했던 적이 있다. 오랜만에 다시 만들어보니 똑같은 이슈를 겪었고 이에 대한 해결 방법에 대해서 간단히 기록해놓고자 한다. 가로 세로 스크롤이 생기는 이유는 해당 요소의 크기가 부모 요소나 뷰포트(viewport)를 벗어나기 때문이다. 1. 전역 CSS 설정 시, 요소들의 box-sizing이 border-box인지 확인한다. 2. overflow: hidden을 설정한다. (가장 간단한 방법이지만 컨텐츠가 잘릴 수 있다.) => 가로 스크롤이니까 특정적으로는 overflow-x: hidden 3. 최상위 태그에 width 가 아니라 max-width나 max-height ..
반응형 모바일 뷰 기준은 아이폰 5로 하자 크롬에서 F12 혹은 ctrl + shift + i 단축키를 누르면 개발자 도구를 열 수 있는데, 우리가 흔히 말하는 반응형 웹뷰를 확인해볼 수 있다. 여러 디바이스크기를 제공하는데 이 중에서 폰 사이즈를 확인할 때, 아이폰5를 기준으로 모바일 뷰를 확인해보는 게 좋은데 그 이유는 모바일 뷰 중에 가장 작은 디바이스 사이즈이기 때문이다. 디바이스가 목록에 없다면 추가해주면 된다. 참고로 아이폰 5의 가로 사이즈는 320px인데 갤럭시 폴드의 경우 260px까지 간다니..확인요망 => min-width가 320px로 잡혀야 한다. 브라우저에서 제공하는 default css를 없애주고 기본 세팅하기 margin이나 padding 혹은 기본 스타일링이 브라우저마다 제..
바로 직전에 MUI라는 CSS 프레임워크를 갖다 쓰는 것에 대해 비판적인 의견을 나타내는 글을 썼었는데.. 사실 MUI는 개발자들이 좋아하는 CSS 프레임워크이고 많은 사람들이 여러 가지 이유로 잘 사용하는 CSS 프레임워크이다. 많은 기능을 제공하고(built in API) 잘만 쓰면 아주 편리하기 때문인데 ..처음 MUI를 갖다 쓰면서 간단한 조각을 빌려 쓴 것이 아니라 바로 커스텀을 해야하던 상황이라 그런지 첫인상이 매우 좋지 않았다. CSS도 익숙하지 않은 사람이 만들어진 컴포넌트를 갖다 쓴다는 게 생각처럼 쉽지 않았을 것이고 결국 많은 시간을 소요하는 결과를 낳았다. 현업에서 MUI를 좋아하는 개발자들이 많다는 글을 봐서 그런지 다시 한 번 제대로 사용해보고자 한다. MUI로 구성된 프로젝트를 ..
문제상황classnames 라이브러리를 활용하여 동적인 클래스 명을 부여해서 컴포넌트 마다 다른 폰트 컬러를 적용하려고 하니 css먹지 않았다. 이유를 알 수 없어서 오타가 난건지 확인을 여러번 했고 디버깅도 했는데 원인을 찾을 수가 없었다.(당연하다 CSS는 디버깅이 어렵다.) 컴파일 순서때문인지 혹은 값을 내려주는 컴포넌트에서 변수명을 틀린 것인지 전부 다 확인해봤으나 문제를 찾을 수가 없었다. 🤯원인지금은 해결해서 알게된 사실이지만 개발자 도구에서 내가 classNames함수(classnames 라이브러리 제공 함수)를 통해 부여한 동적인 클래스 값이 해싱되지 않았다면 지금 해당 컴포넌트의 모듈 scss가 아니라 단순 css 클래스명이 부여된 것이라 CSS가 인식이 안된 것 같다. 문제였던 코드//..
개인적으로 mui, bootstrap 등의 UI프레임워크를 써보면서 불편함을 느꼈습니다. Mui를 사용했을 때, api를 읽고 제가 원하는 기능을 추가적으로 커스텀해야하는 상황이 생겼었는데 이 과정에서 많은 고통을 겪게 됐습니다. 많은 개발자들이 UI 프레임워크를 갖다쓰는 이유로 완성도 높은 디자인과 빠른 아웃풋을 낼 수 있는 점(생산성)을 들 것이라 생각합니다. 어떤 기능을 따로 추가적으로 붙이거나 디자인을 변동시키지 않는다면 UI 프레임워크는 좋은 선택이 될 수 있습니다. 저는 길게 봤을 때 좋은 선택이 아니라고 느꼈습니다. MUI에서 제공하는 컴포넌트를 갖다 썼을 때, 내가 원하는 대로 작동하지 않으며 그 이유를 찾기 어렵고 이 과정에서 시간이 많이 소요됐기 때문입니다. api를 뒤적이며 속성을 하..
이전에 프로젝트는 CRA로 생성하여 webpack기반이었고 이 외에도 next로 프로젝트를 했을 때에도 기본적으로 CNA(create next app)도 webpack기반이라 webpack bundle analyzer 를 사용하면 됐습니다. 하지만, Vite의 경우는 개발모드에서 esbuild를 사용하고 프로덕션용 최종 배포 시에는 rollup을 활용합니다. 즉, rollup의 플러그인을 활용하여 번들 사이즈를 체크해야한다는 소리입니다. 물론 vite에서도 webpack의 플러그인을 활용할 수는 있다고 합니다.(저는 그냥 호환성을 고려하여 roollup의 플러그인을 활용했습니다) 비주얼라이저 (혹은 애널라이저)는 어떤 것을 갖다 쓰면 좋을 지하고 확인하던 차에 npm trends 로 어느 패키지가 가장 ..
리액트 프로젝트를 하다보면 index.css 와 App.css가 따로 존재하는 것을 볼 수 있습니다. vite + react 프로젝트를 만들면서 전역 css를 어디에 배치해야할까 하다가 기존 템플릿에서 제공하는 root가 다른 것을 확인할 수 있었습니다. src>index.css 에는 :root src>App.css 에는 #root 둘 다 전역 CSS같은데 왜 같은 root를 다르게 표현할까 라는 생각이 들었습니다. 저는 리액트가 같은 :root 를 컴포넌트에 쓸 때는 다르게 표현한 것은 아닐까 라고 생각하고(모듈을 번들링할 때, 다르게 트랜스파일되는 줄..) App.css에 있는 #root를 전역 css로 생각하고 있었는데요. 당연히 틀렸습니다. 자주 보지 않으니 가장 근본적인 App.jsx가 어느 d..
!! 연산자는 자바스크립트에서 boolean이 아닌 값을 boolean으로 변환시킬 때 사용한다. 이를 통해서 변수가 존재하는지 혹은 유효한 값을 갖는지 확인할 수 있다. 데이터를 자동으로 불리언으로 바꿔준다. 만약 데이터가 falsy값 (0, "",'',null, NaN, undefined)들 중 하나라면 false를 반환할 것이다. 이 외의 경우는 true를 반환한다. 이를 통해서 falsy값을 논리연산 boolean값만 반환하게 만들 수 있다. 이중 부정 연산자 예시 아래와 같이 2가지 방법으로 사용할 수 있다. const isAnd = (a,b) => !!(a&&b) isAnd('hello','world') //true !!('hello'&&'world') // true 나의 경우, 단일 연결 리..
- Total
- Today
- Yesterday
- getStaticPaths
- D 플래그
- fs모듈 넥스트
- 틸드와 캐럿
- 형제 요소 선택자
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- reactAPI
- 타입스크립트 DT
- nvm 설치순서
- 타입스크립트 장점
- 부트캠프항해
- 원티드 FE 프리온보딩 챌린지
- is()
- Prittier
- 항해99추천비추천
- 항해99프론트후기
- 원티드 3월 프론트엔드 챌린지
- text input pattern
- 프리온보딩 프론트엔드 챌린지 3월
- tilde caret
- grid flex
- 원티드 프리온보딩 FE 챌린지
- nvm경로 오류
- float 레이아웃
- ~ ^
- && 셸 명령어
- aspect-ratio
- 항해99프론트
- getServerSideProps
- 프리렌더링확인법
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |