본문 바로가기

frontend

[CSS] 모바일 기기에서 button touch 시 효과 제거 - 웹 개발 시 button 앨리먼트를 작성 후 모바일 기기에서 터치를 했을 경우 파란색 background가 생기는 것을 확인할 수 있다. 이 때 아래의 코드를 사용하여 해당 background를 제거해줄 수 있다. -webkit-tap-highlight-color : transparent !important; 더보기
[React] Images 활용하기 React에서 img 사용하는 법! 일반적으로 html에서 img를 사용 할 때는 처럼 사용하지만 해당 방법을 사용하면 오류가 뜨지는 않지만 image가 정상적으로 출력되지 않습니다. React에서는 image를 사용할 때 조금 다른방식으로 사용합니다. import Img from '이미지경로'; const App = () => { return( ); }; export default App; React에서는 위의 코드와 같이 사용됩니다. 또한 추가로 alt값을 공백으로라도 둬야합니다. 만약 img 엘리먼트에 alt값을 추가하지 않았다고 오류를 출력하면서 프로젝트 구동이 안되는건 아니지만 console에서는 경고성 메시지를 뿜어냅니다. 그렇다면 React에는 위의 방법말고는 image를 사용 할 수 있는 .. 더보기
[React]라이프사이클 알아보기 React 라이프사이클이란 React는 컴포넌트 기반의 VIEW 를 중심으로 한 라이브러리입니다. React는 프레임워크 가 아닌 라이브러리 입니다! 그래서 각각의 컴포넌트에는 라이프사이클(LifeCycle), 즉 컴포넌트의 수명 주기 가 존재하는데 이 생명 주기는 컴포넌트가 렌더링 되기 전인 준비과정에서 시작해서 페이지에서 사라질 때 끝나게 됩니다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하며 함수형 컴포넌트에서는 사용할 수 없습니다. 다만 React가 업데이트 되면서 Hooks 이 생기면서 함수형 컴포넌트에서도 라이프사이클과 비슷한 작업을 처리할 수 있게 됬습니다. React 라이프사이클 컴포넌트 라이프사이클은 총 9가지로 나눌 수 있는데, 이 9가지들을 크게 3가지의 카테고리.. 더보기
[React] 에러 : A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for .. react_devtools_backend.js:4026 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 영어실력이 부족해서 구글번역을 돌려보면 react_devtools_backend.js:4026 경고: 구성 요소가 제어되지 않는 입력을 제어하도록 변경하고 있습니다... 더보기
[이미지 슬라이드] 이미지슬라이드 만들기 See the Pen 포토갤러리 옆 이스토어 by 김기태 (@kkt9102) on CodePen. 라이브러리 이용안하고 일단 인터넷도 찾아보고 기억나는거 다 써봐서... 기본적으로 보이는 이미지에 해당하는 dots 색도 넣어야하고 setTime도 적용해야하고 아직 미흡하다... 더보기