마우스 커서 변경하기

이미지를 마우스 커서로 사용하기 CSS 커서 속성을 이용해 이미지 파일을 마우스 커서로 설정해서 사용할 수 있다. cursor: url('주소'), 속성값; 커서 속성 값url 중 마지막에 "auto" 속성 값은 비트맵 이미지 커서를 가져올 수 없는 경우 최종적으로 적용하는 커서 속성값이다. 커서 속성값은 쉼표로 구분해서 여러 개를 나열할 수 있으며, 왼쪽부터 순서대로 적용 가능한 커서 속성 값을 우선 적용한다. body { cursor: url('/resources/assets/images/icon/arrow_cusor_1.cur'), pointer;} 이모지를 마우스 커서로 사용하기 비트맵 이미지를 직접 만들어 사용하는 것 보다 이모지를 사용하면 조금 더 간편하게 마우스 커서를 변경할 수 있다. 사용..

2022.11.18

React에서 자주 쓰는 if문 작성패턴 5가지

1. component 안에서 쓰는 if else component에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓴다. function Compoenent(){ if ( true ){ return 참이면 보여줄 HTML } return null; } 2. JSX안에서 쓰는 3항 연산자 ternary operator 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드 function Component(){ return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } 3항 연산자는 중첩 사용도 가능하다. 단점. 가독성이 나쁘다. function component(){ return ( { 1 === 1 ? 참이면 보여줄 HTML : ( 2 === 2 ? 안녕 : 하이 ) }..

2022.11.17

모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

상태관리 라이브러리 Reducx

Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다. Redux를 설치하면 JS 파일 하나에 state를 보관할 수 있는데, 이걸 모든 컴포넌트가 직접 꺼내 쓸 수 있다. 그래서 props 문법이 필요없어진다. 설치하기 https://ko.redux.js.org/introduction/getting-started/ Redux 홈페이지에서 설치하면 된다. 설치하기 전 확인사항 1 Redux를 설치하기 전, package.json에서 react와 react-dom의 버전을 확인해야 한다. 이 2가지 버전이 모두 18.1.X 이상이어야 Redux 사용이 가능하다. "react": "^18.1.0", "react-dom": "^18.1.0", 설치하기 전 확인사항 2 Red..

2022.11.12

React Axios

Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 방법 3가지 Ajax로 GET/POST를 요청하는 방법은 3가지가 있다. 1. XMLHttpRequest 라는 옜날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 (추천) Axios를 설치해보자 https://axios-http.com/kr/docs/intro 터미널 열어서 npm 명령어를 입력한다. npm install axios Ajax GET 요청하는 법 1. axios를 상단에 import 하고 2. axios.get(url) 로 요청을 한다. 3. 가져온 데이터를 사용한다. import axios from '..

2022.11.12

Lifecycle과 useEffect

Component의 인생 Component는 Lifecycle이라는 개념이 있다. 이 Lifecycle에 맞춰 코드를 실행할 수 있다. 1. 생성 mount 2. 재 렌더링 update 3. 삭제 unmount Component 인생에 간섭하는 법 Detail 컴포넌트 등장 전에 이것좀 해줘 Detail 컴포넌트 사라지기 전에 이것좀 해줘 Detail 컴포넌트 업데이트 되고 나서 이것좀 해줘 이렇게 컴포넌트 라이프 사이클에 맞춰 코드를 실행해달라고 간섭할 수 있는데, 간섭은 갈고리를 달아서 한다. 갈고리는 영어로 hook, 그래서 이것을 Lifecycle hook 이라고 부른다. Lifecycle hook 사용법, useEffect() 상단에서 useEffect를 import 한다 콜백함수를 추가해서, ..

2022.11.12