본문 바로가기

Programming/React7

[Tailwind]Tailwind %, vh, svh, lvh,dvh 뭐가 다른 것인가?. Tailwind를 쓰다보니 몇가지 비슷한 느낌인데, 그럼에도 헷갈릴 수 있는 단위가 몇 가지 있다. 정리를 해보고자 포스팅을 작성하게 되었다.1. dvh(Dynamic Viewport Height)주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되건 상관없이, 현재 보여지는 뷰 포트의 높이를 동적으로 가져온다. -> 100dvh는 주소표시줄의 유무에 따라 동적으로 값이 달라진다. 2. svh (Short Viewport Height)사용자 화면을 기준으로 가장 짧은 뷰 포트 값을 가져온다.주소 표시줄이 없어져도 기존 주소표시줄의 높이값을 뺀 나머지 값을 가져온다. 3. lvh(Large Viewport Height) svh의 반대개념으로 사용자 화면 기준으로 가장 긴 뷰 포트의 값을 가져온다. 주소 표시.. 2024. 10. 24.
[React]Tailwind.css의 필요성 css 프레임워크는 웹 어플리케이션 개발에서 매우 중요하다. 작은 규모의 css는 관리가 간단하지만, 규모의 개발로 가서, 규모가 커지고, 참가하는 이해관계자들이 늘어나면 그에 따라 css 관리가 더 복잡해진다.  여기서 Tailwind css 의 필요성이 대두가 된다. 기존에 강력한 css in js 라이브러리인 styled-components는 강력하고 편리하지만, 복잡하고, 유연하고 직관적이지 못하다.-> tailwind처럼 class로 간단하고 직관적으로 css를 설정할 수 있는 시스템이 아니라, const newDiv = styled.div`display:"fixed"` 같은 느낌으로 코드를 작성하고 , 선언한 스타일 코드를 다른데서 선언하거나, 함수형 컴포넌트로 사용하는 경우가 보통인 경우인 .. 2024. 9. 13.
[react]react의 또 다른 hook useEffect에 관하여.. 1. useEffectuseState라는 리액트의 유명한 훅과 거의 동등급으로 유명한 hook이다 . useEffect는 어떤 특정 컴포넌트가  화면에 표시되거나 , 사라진 후에 실행될 수 있도록 하는 훅이다.(포스팅 진행 중) 2024. 8. 20.
[React] vite, Cra(Create React App) 없이 Developement Environment 구성하기. 1. 개요토스 커리어즈에 토스 채용 공고 중 토스가 사용하는 기술 칸이다. 빌드 툴을 보면 4가지나 빌드 하는 과정에 빌드 툴을 사용하고 있는데, 각 회사의 프로젝트마다, 회사의 특성 마다 이러한 기술사용 스택은 얼마든지 변화하고, 변경되거나, 또한 내가 몰랐던 빌드, 기술을 사용할 가능성이 크기 때문에 이를 위해서는 vite나 cra같이 간편하게 설정을 해주고, 템플릿을 지정해주고 커스터마이징이 제약된 환경보다는 커스터마이징이 자유롭고  , 엄청 큰 프로젝트나, 여러가지 환경이 필요한 상황일 때는 vite, cra없이 개발 환경을 구성하는 것이 필요하다고 생각이 되어 포스팅을 작성하게 되었다. 2. Example2-1. React 환경 생성 및 테스트 https://ko.legacy.reactjs.or.. 2024. 8. 20.
[React] Cross Browsing 를 해결하기 위한 몇가지 방법 feat.CSS Reset 1. Cross Browsing Chrome, safari , whale (네이버) , edge 등 오늘날 존재하는 여러 웹 브라우저들은 내부적으로 각 동작하는 엔진과, 속성, 기술요소 등이 다 다를 것입니다. 동일한 웹사이트에 접속하더라도 어떤 웹 브라우저로 접속하느냐에 따라 충분히 다르게 보일 수 있습니다. Cross browsing은 이 다르게 보일 수 있음에 대하여 모든 브라우저에서 화면이 모두 동일하게 표시되어야한다는 것을 의미하는 것이 아니라, 동등한 수준의 정보, 동일한 기능 제공이 우선적이어야 한다에 대해 얘기하는 것입니다.  크로스 브라우징을 맞춰주기 위해서는 우선 어플리케이션이 가장 우선해서 고려해야할 웹 브라우저는 어떤 브라우저인가를 고려해야합니다. ex) 점유율이 높은 것이 우선이니.. 2024. 8. 20.
[React] GlobalStyles(전역 스타일링) 1. 개요 import styled from "styled-components";function TestPage(props) {    return (        Wrapper>            Title>{props.Title}Title>            Contents>{props.Contents}Contents>        Wrapper>    );}const Wrapper = styled.div`    border : 1px solid black;    border-radius: 15px;    padding : 20px;    margin : 16px auto;    max-width: 400px;`;const Title = styled.h1`    font-family: 'Courie.. 2024. 8. 20.

티스토리툴바