[React] 리액트(CRA) 프로젝트 세팅하기 - typescript, alias, emotion CRA로 리액트 프로젝트 세팅하기 typescript 경로 alias emotion 리액트로 토이프로젝트를 하게 되면 주로 위의 세팅을 기본적으로 이용한다. 순서대로 적용하는 법을 정리하고자 한다. #1 CRA로 typescript 리액트 프로젝트 생성 npx create-react-app my_project --template typescript 프로젝트를 생성하고자 하는 위치에서 터미널을 열어 위의 명령어를 입력한다. 명령줄의 my_project 부분에 프로젝트명을 입력한다. 프로젝트가 생성되었다면 아래부터는 프로젝트 내부에서 설정하는 부분이다. #2 alias 설정 리액트 프로젝트를 할 때, 상대경로로 찾아가려면 적어도 두 번, 많게는 네다섯 번까지 경로를 타고 올라가야 할 때가 있다. 이 부분을 .. 2021. 10. 21. [javascript] div와 ul, li를 사용하여 selectBox 처럼 구현하기 완성 이미지 간단하게 옵션별 배경색 지정, 옵션에 아이콘 이미지 삽입 정도만 구현했지만 마크업에따라 체크박스, 라디오 버튼 등 다양하게 적용 가능하다. 1. html 사과 바나나 오렌지 2. css /* reset */ *{ list-style: none; margin: 0; padding: 0; font-size: 14px; box-sizing: border-box; } /* common */ body{ padding: 30px; } .hide{ display: none; } .show{ display: block; } /* 셀렉트 영역 스타일 */ .select{ position: relative; padding: 5px 10px; width: 200px; border-radius: 5px; bord.. 2020. 3. 25. [CSS] selectbox 디자인하기 input요소 중에 selectbox는 css스타일을 입히기 조금 까다로운 편에 속한다. 박스만 디자인이 들어가면 그나마 쉬운데 option요소까지 디자인되어있다면 플러그인이나, 자바스크립트 사용하여 구현해야한다. 먼저 css만을 사용하여 셀렉트박스와 화살표 스타일만 변경하는 방법을 소개하겠다. 1. 가장 먼저, 웹에서 제공하는 기본 스타일을(화살표) 보이지 않게 처리한다. 주의할 점은 appearance 속성은 IE에는 적용되지 않는다. IE를 고려한다면 -ms-expand라는 가상 선택자로 스타일을 초기화시켜주어야 한다. select{ appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari an.. 2020. 3. 24. [React] 리액트 Hooks의 useState와 useEffect / React Hooks 란? 리액트 v16.8로 업데이트 되면서 함수형 컴포넌트와 Hooks 사용을 권장하고 있다. Hook은 함수형컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수이다. 클래스형 컴포넌트 안에서는 동작하지 않지만 클래스형 컴포넌트없이 리액트를 사용할 수 있게 해준다. 장점 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 생명주기를 사용했을때 일어나는 버그와 무결성 문제를 보완할 수 있다. 클래스형 컴포넌트의 this로 인한 혼동과 코드양을 줄인다. / 함수형 컴포넌트 import React from 'react'; const App = () => { return( 안녕하세요! ) } export .. 2020. 3. 18. 이전 1 2 3 4 다음
