전체 글
![[React] 다크모드 적용하기 ( with. Styled-component, Context API)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbHjnl9%2FbtrJp0peLay%2FD4XGR3Z1gY6K6Qyr4JMy9k%2Fimg.png)
[React] 다크모드 적용하기 ( with. Styled-component, Context API)
다크 모드는 어두운 배경을 중심으로 전반적인 요소를 어두운 색상 체계로 구성한 low-light UI를 지칭한다. 스마트폰과 같은 디바이스의 사용량이 증가면서, 눈의 피로를 덜어주고 집중력을 높여준다는 이유로 다크모드가 등장하였다. 현재는 수많은 웹사이트들이 다크모드를 옵션으로 제공하고 있으며, 이제는 모든 서비스들의 필수 항목처럼 되어가고 있다. 이 글은 기존 프로젝트에 styled-component와 context API를 사용하여 다크모드 옵션을 추가하는 과정을 담고 있다. 추가로 다크모드를 적용하기 전에, 지켜야 할 규칙과 가이드라인을 살펴본다. 다크모드 가이드라인 다크모드를 개발하기 전에, 먼저 가이드라인을 찾아보았다. Material Deisgn의 다크모드 가이드라인을 참고하여 특히 주의해야 ..
recoil과 비동기 데이터 호출 (+ 선언적 프로그래밍)
💡 이 글은 'React스러운 상태관리 라이브러리, Recoil을 알아보자' 에서 이어집니다. React스러운 상태관리 라이브러리, Recoil을 알아보자 이제까지의 프로젝트에는 상태 관리 라이브러리로 항상 Redux를 사용했었는데, 그 이유는 단순하게 대부분의 사용자들이 redux를 사용했고, 사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라 leego.tistory.com recoil에서는 selector 를 사용하여 비동기 데이터를 처리한다. redux에서 비동기 처리를 할 때는 redux-thunk나 redux-saga와 같은 미들웨어를 통해 action을 중간에 인터셉트하여 추가 동작을 수행하였다. 하지만 recoil에서 비동기 처리는 React의 일반 state의 흐름을 벗어나지 않고 거의..
React스러운 상태관리 라이브러리, Recoil을 알아보자
이제까지의 프로젝트에는 상태 관리 라이브러리로 항상 Redux를 사용했었는데, 그 이유는 단순하게 대부분의 사용자들이 redux를 사용했고, 사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라이브러리라는 생각이 있었기 때문이다. Redux는 한때 너무 많은 양의 보일러 플레이트 코드를 작성해야 한다는 단점을 가지고 있었지만, Redux-toolkit의 등장으로 그 단점을 많이 보완되었다. 그럼에도 불구하고, 어떤 프로젝트에서는 전역 상태 관리를 위해 Redux를 설치하는 것이 너무 과하다고 느껴질 때가 있다. 다른 대안, context API 라이브러리를 추가적으로 설치하지 않고 context API를 사용하는것은 어떨까? context API는 일일히 props를 넘겨주지 않고도 컴포넌트 트리 전체에..
![[React] Portal을 사용한 모달창 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNuJTC%2FbtrENIfoXsH%2FZQ4nJstbvvMfmlV8OrUgl1%2Fimg.png)
[React] Portal을 사용한 모달창 만들기
모달이란, 다이얼로그 실행 시 포커스와 제어권을 독점하여 다이얼로그를 종료하기 전까지 기존의 화면을 제어할 수 없는 기능을 뜻한다. 따라서 모달은 항상 화면의 최상위에 위치해야 하며, 모달이 열려있을 때는 기존 화면의 제어가 불가능해야 한다. 일반적인 방법으로 모달을 띄우는 방법은 다음과 같다. import Modal from './Modal'; const App = () => { const [isOpen, setOpen] = useState(false); const onClick = () => { setOpen(true); }; return ( open Modal ); }; export default App; 필요한 컴포넌트 안에서 모달 컴포넌트를 랜더링 하면 된다. 하지만 이 방법은 모달이 언제나 최..
![[프로그래머스] 주차요금 계산 (2022 KAKAO BLIND RECRUITMENT)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdcyjIw%2FbtrBhRnHqvW%2FjqYjMNmbKiDCUYKf5kpsRK%2Fimg.png)
[프로그래머스] 주차요금 계산 (2022 KAKAO BLIND RECRUITMENT)
주차요금 계산 https://programmers.co.kr/learn/courses/30/lessons/92341?language=javascript 코딩테스트 연습 - 주차 요금 계산 [180, 5000, 10, 600] ["05:34 5961 IN", "06:00 0000 IN", "06:34 0000 OUT", "07:59 5961 OUT", "07:59 0148 IN", "18:59 0000 IN", "19:09 0148 OUT", "22:59 5961 IN", "23:00 5961 OUT"] [14600, 34400, 5000] programmers.co.kr 풀이 function solution(fees, records) { const getTimeByMinute = time => { if(..