전체 글21 [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. 0918 업무회고 Post 전송의 방법(body에 담기, 쿼리스트링으로보내기) 특정문자하이라이트 처리(정규식으로 삽질한거, 해결한코드 살펴보기) 프엔개발자와 백엔드개발자간의 데이터전송 규칙정하는것 데이구조 머리에 잘 그리기ㅠ // 해결하지 못한것 구조분해로 가져오면 무한랜더링이 안되는데 값으로 받아서 처리하면 무한랜더링이 되는 현상 //잘 이해해야하는것 키워드 js의 작동원리 호이스팅,메모리힙,인터프리터,컴파일,이벤트루프,렉시컬,비동기 2020. 9. 18. [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. [css] 6가지의 확실한 수직 가운데 정렬 방법 다양한 높이의 요소들을 수직 가운데 정렬하는 일은 수평 가운데 정렬하는 것보다 다로 까다롭다. 각각의 특징을 비교하여 6가지의 수직 가운데 정렬을 소개한다. 수직정렬은 자식이 inline속성을 가지냐 block 속성을 가지냐에따라 적용 여부가 달라지므로, 각 속성들의 특징파악이 선행되어야한다. 1. display : flex 사용 특징 가장 손쉽게 할수있는 방법 수직정렬하고자하는 요소가 하나거나 두개이거나 상관 없음 IE9 이하는 지원하지 않음 방법 부모에 display:flex; align-items:center; 와 높이값 추가 See the Pen 수직 가운데 정렬 1 by off-echoi (@off-echoi) on CodePen. 2. display : table 사용 특징 태그의 깊이가 깊어.. 2020. 2. 24. 이전 1 2 3 4 다음
