Front-end

[CSS] position과 transform 이용해 요소 가운데에 배치하기

{ position: absolute; // 혹은 fixed left: 50%; transform: translateX(-50%); } left로 가운데에 위치시킨다. 왼쪽 위의 꼭짓점을 기준으로 가운데에 위치하게 된 것이므로 몸체를 기준으로 가운데에 위치시키기 위해서 -50% (몸체의 반만큼 왼쪽으로)를 해준다.

[react] Redux 시작하기

1. Redux를 쓰는 이유 Redux는 상태 관리 라이브러리이다. React에서 데이터는 위에서 아래로만 흐를 수 있다. 그래서 일일이 props 내리기나 state 끌어올리기를 해야 한다. 이렇듯 React에서 컴포넌트끼리의 데이터 이동은 복잡한 단계를 거쳐야 하기 때문에 store라는 저장소에 상태를 한데 모아놓고 관리하는 개념이 생겼다. 상태를 가져오고 변경하는 것은 모두 store만 통하면 된다. 그리고 상태 변경 로직도 컴포넌트에 count + 1 처럼 직접 작성하지 않고, reducer란 곳에 미리 'INCREASE란 이름이 들어오면 count + 1을 저장해라' 처럼 명세해 놓기 때문에 만약 의도한 값이 나오지 않는 에러가 발생하면 컴포넌트 단이 아니라 상태 가공부분(reducer)를 디버..

[React] react-router-dom v6 브라우저 뒤로가기 이벤트 감지 (history.action 대체)

useNavigationType 기존에 react-router-dom v5에서 history.action === 'POP' 과 같이 뒤로가기를 감지했던 것을 대체할 수 있다. v6가 되면서 history는 여러개의 hook으로 분리되었다. 이제 popstate 이벤트가 발생했는지 pushstate 이벤트가 발생했는지는 useNavigationType()을 통해 알 수 있다. 활용 예 1 react-router를 이용해 검색을 처리했더니 뒤로 가기를 하면 이전 화면이 아니라 이전 쿼리 페이지로 가는 현상이 발생했다. 예를 들어 /search?q=apple 페이지에서 뒤로가기를 하면 이전 쿼리였던 /search?q=appl 페이지로 가는 식이다. 그래서 검색결과 페이지에서 뒤로가기 이벤트가 발생한다면 메인으..

[JS] Javascript에서 Enum 사용하기

enum이 필요한 이유 / JS에서 enum 타입 구현하기 책의 장르를 검사해서 만약 science라면 특정 문구를 출력한다고 하자. 그런데 아래와 같이 대소문자가 다르거나 오타가 발생한다면? let genre = "Science"; if(genre === "science") { console.log("I love it!"); } 이럴 때 필요한 게 바로 enum이다. enum의 장점은 값에 일관성이 있고, IDE 자동완성의 도움을 받을 수 있어 오타를 최소화 할 수 있다. 값이 변경되더라도 enum 값만 변경하면 되기 때문에 리팩토링 비용을 최소화할 수 있다. 비슷한 집합끼리 묶어서 보관할 수 있으며, 한 집합 안에서만 이름이 중복되지 않으면 된다. 하지만 JS는 Enum(열거형) 타입을 지원하지 않는..

[CSS] 모바일에서 오른쪽에 흰 여백 생기는 현상 (CSS, React)

html, body에 margin: 0을 하고 요소에 width: 100%을 줘도 오른쪽에 흰 여백이 생긴다면 어떤 요소의 width가 innerWidth를 넘었다는 뜻이다. html, body에 overflow-x: hidden을 해주면 가로 스크롤바와 오른쪽 여백이 사라진다. html, body { margin: 0px; overflow-x: hidden; } React라면 순수 html, CSS만 이용할 때와 마찬가지로 index.css 파일에 적용해주면 된다.

[JS] 올림, 반올림, 내림 (ceil, round, floor) / 특정 자리수까지 0 채우기

올림, 반올림, 내림 함수 올림 - Math.ceil(숫자) 반올림 - Math.round(숫자) 내림 - Math.floor(숫자) 외우는 법 ceiling이 천장이라는 뜻이므로 실수의 소수점 부분을 올림해서 천장으로 올리는 함수라고 생각하면 된다. round는 둥그렇게 다듬는 이미지를 생각하면 된다. 부족하면 더하고 넘치면 깎는 느낌으로. floor는 버려서 바닥으로 보낸다는 이미지를 생각하면 된다. 예시 Math.ceil(50.66666) - 소수 부분을 올림해서 51 Math.round(50.6666) - 소수 부분을 반올림해서 51 Math.floor(50.6666) - 소수 부분을 버림해서 50 자릿수 지정 주의할 점은 세 함수 모두 기본적으로 실수를 소수점 아래를 남기지 않고 정수로 만든다는..

[CSS] 모달창 나타나는 애니메이션 (fadeIn)

모달 부분에 'animation: fadeIn 시간' 을 추가한다. fadeIn은 서서히 나타날 때, fadeOut은 서서히 사라질 때 쓰는 애니메이션이다. 그 다음, @keyframes fadeIn 안에 from, to(시작할 속성과 끝날 속성)을 적어준다. 그러면 animation에서 지정한 시간동안 from에서 to로 변하게 된다. 이 예제는 opacity: 0 (완전 투명), 크기 0.5 -> opacity: 1 (완전 뚜렷), 크기 1로 변하도록 애니메이션을 줘서 쫀득하게 모달창이 튀어나오는 효과를 준 것이다. .modal { animation: fadeIn 400ms; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.5); } to {..

[CSS] iframe 하단 여백 없애는 방법

iframe은 인라인 요소로 취급되므로 하단의 여백을 없애려면 display: block 속성을 주면 된다.