wazac

input의 타입을 search로 지정하면 브라우저 내에서 input 초기화 버튼을 넣어줍니다. 디자인을 중요시 하는 일부 프로젝트에서는 이것마저 커스텀해주기를 원합니다. 하지만 사실상 브라우저 내에서 생성하기 때문에 저 자체를 커스텀 할 수는 없고, 이를 보이지 않게 한 뒤 추가로 디자인과 기능을 넣어주면 됩니다. 약간은 번거로운 작업일 수 있지만 생각보다 간단합니다. 우선 브라우저 내에서 생성한 초기화 버튼을 없애려면 단순히 input의 타입을 text로 지정하거나 css에서 해결해 줄 수 있습니다. /* IE의 경우 */ input::-ms-clear, input::-ms-reveal{ display:none; } /* 크롬의 경우 */ input::-webkit-search-decoration, ..

셀렉트를 사용하기 위해 다음과 같이 jsx 구문을 만들었습니다. 0.1톤 0.2톤 0.3톤 0.4톤 {/* 선택하려던 부분! */} 0.5톤 기존 html 에서 디폴트 옵션을 선택하려면 option 태그안에 selected 속성을 주어 동작 하였습니다. 하지만 리액트에서 이와 같이 사용하려고 한다면, 다음과 같은 에러를 뱉어냅니다. React에서는 selected 대신 value를 사용합니다. 또한 selected의 선택된 value 값을 가져오려면, onChange를 사용해야합니다. 위의 소스를 수정해 보면 이렇습니다. 0.1톤 0.2톤 0.3톤 0.4톤 0.5톤 위의 내용으로도 소스를 적용하기 어렵다면 아래의 내용을 봐주세요! export default function App() { const sel..

메뉴를 hover 했을 때 아래에서 underline이 가운데부터 열리는 모션을 구현해 보고 싶어서 만들어봤습니다. 다음과 같은 모션입니다. 😊 해당 모션은 border 나 text-decoration 으로는 구현할 수없고, a 태그의 :after를 사용하여 만들었습니다. HOME ABOUT Q&A 먼저 마크업은 간단합니다. 어차피 :after 를 사용할 꺼라 별다른 태그가 추가로 필요하진 않습니다. 먼저 a:after 에 absolute 속성을 주어 a 보다 아래에 위치시켜줍니다. 그리고 transform의 scale을 사용 하는게 핵심입니다. scale 속성은 현재의 element를 확대 시켜주는 기능을 합니다. .wrap { padding: 15px; } .wrap > a { position: re..

이전에 window에서 스크롤할 때 특정 엘레멘트가 고정이 되는 기능을 구현했습니다. 이번에는 window가 아닌 특정 div 에서 스크롤했을 때 div안의 다른 객체가 고정이 되도록 구현해 보겠습니다. 사실 구현 방식은 똑같습니다. 단지 window 와는 달리 객체의 scroll 값을 구하기 위해서는 useRef를 사용해야 합니다. 저도 이 부분을 구현하는데 있어 많은 공부가 되었습니다. 😁 객체에서 고정을 시키려면 fixed 와는 달리 absolute를 사용해야 합니다. 그리고 위치의 기준이 viewport 가 되는 fixed와 다르게 absolute는 상위 객체들 중 relative가 되는 값을 참조하여 위치가 결정됩니다. 그래서 제가 생각한 방법은 2가지 입니다. 거의 같으면서도 활용성이 조금 다..

스크롤바를 어느 값만큼 내리면 특정 엘레먼트의 css 속성이 변경되어야 하는 경우가 종종 있습니다. 우선 해당 환경을 만들기 위해 마크업을 합니다. Window가 아닌 div 스크롤인 경우 - App.js 'I will be fixed! 😘' Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at nihil sit fugit adipisci aperiam alias enim sed voluptates quo! Quam inventore officia commodi laudantium amet in sunt est quasi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi at ..

체크박스는 대부분 그대로 사용하지 않고 디자인하는 경우가 많습니다. input 타입을 checkbox로 사용시 브라우저에서 제공되는 체크박스의 형태는 변형하는 것에 한계가 있습니다. CSS에서 셀렉터와 label태그를 이용하면 쉽게 커스텀이 가능합니다. 1. 마크업 input의 id와 label의 for 속성 갑을 동일하게 해야 input의 체크 여부가 작동합니다. 체크박스 2. 스타일 커스텀 방식을 이렇습니다. - 기존 checkbox를 숨김 - checkbox + label을 통해 체크박스 형태를 만듦 - checkbox:checked + label 을 사용하여 체크했을 때에 형태를 만듦 .checkboxwrap .checkbox{display: none!important;} .checkboxwrap..

리액트에서 마우스 휠로 가로 스크롤을 사용하기 위해 직접 만들어도 되지만, width값 설정부터 wheel값도 가져와야 하고 많은 공수가 들어갑니다. 다행히 간단하게 활용할 수 있는 라이브러리가 있어서 공식 사이트의 예제를 가지고 hook버전으로 구현해 보았습니다. URL : https://www.npmjs.com/package/react-horizontal-scrolling-menu DEMO: https://codesandbox.io/s/lpjol1opmq 1. 설치 npm install --save react-horizontal-scrolling-menu 2. 적용하기 저는 필요한 부분만 적용하고 싶어 잡다한 기능은 배제하고 아주 심플하게 마우스 휠 스크롤만 사용하려고 합니다. 사용할 데이터는 코드 ..

React 개발 시 귀찮은 환경 세팅을 기억이 나지 않을 때 일일이 찾아 사용하기 번거롭기 때문에 미리 정리해 놓기로 했습니다. 참조 1: https://reactrouter.com/web/guides/quick-start 참조 2: 리액트를 다루는 기술 서적 - 벨로 퍼트 개요 SPA의 단점중 하나는 너무 많은 자바스크립트를 한 번에 불러온다는 것인데, 이 문제는 코드스플릿을 통해 해소할 수 있는데 라우트 별로 파일들을 나누어 트래픽과 로딩 속도를 개선할 수 있다고 합니다. 페이 지지가 여러 개인 사이트는 거의 필수로 적용된다고 보면 됩니다. 설치 yarn add react-router-dom 설명 BrowserRouter: 주소에 대한 정보를 props에 담아 조회하거나 사용할 수 있다. : HTML..

리덕스 스터디중 handleAction을 사용하던 중 해당 소스에서 다음과 같은 에러가 발생함 // 리덕스 모듈 import { createAction, handleAction } from 'redux-actions' const INCREASE = 'counter/INCREASE' const DECREASE = 'counter/DECREASE' export const increase = createAction(INCREASE) export const decrease = createAction(DECREASE) const initialState = 0 const counter = handleAction({ [INCREASE]: state => state + 1, [DECREASE]: state => sta..

How can I make a Top Button, click to scroll to the top ?! 서비스용 홈페이지를 개발하다 보면 항상 구현해야 하는 부분은 스크롤 입니다. 처음에는 무조건 ref 를 사용해서 컨트럴 해야 한다고 생각했었는데, 어쨌든 리액트도 자바스크립트다 보니 꼭 그렇지만은 않더라구요. useEffect에서 addEventListener를 걸어주고 removeEventListener로 clean-up을 해주기만 하면 되더라구요. 생각보다 간단하게 구현 할 수 있었습니다. 다음과 같이 클릭하면 페이지 최상단으로 스크롤 되는 기능을 구현해 보고자 합니다. 우선 구조를 잡아보겠습니다. TOP Fixed Scroll Top Lorem ipsum dolor sit amet consect..