끄적이는 개발노트

문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/258712 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명 제한사항 입출력 예 내 문제 풀이function solution(friends, gifts) { const giftCountList = {}; // 선물 지수 Object const giftList = {}; // 선물 리스트 Object const result = {}; // 다음 달 받을 선물 Object // friends 배열을 활용하여 초기값 세팅 for (const frie..

웹 개발에서 모달창 구현을 직접 하거나 편리한 라이브러리는 대부분 상태관리와 함께 이루어진다.(본인 역시 react-modal을 그동안 사용해왔다.)const [isOpen, setIsOpen] = useState(false);const toggleModal = () => setIsOpen(!isOpen);const openModal = () => setIsOpen(true);const closeModal = () => setIsOpen(false);아마 대부분이 이런 기본 형태의 state를 활용했을 것이다. 이를 개발하다보면 필연적으로 마주치는 상황들이 몇가지 있는데 대표적으로 아래와 같이 있다.모달창이 열린 상황에서 새로고침을 하면 state로 관리하기 때문에 모달창이 닫힘뒤로가기 버튼을 누르면 이..

React에서 전역 상태 관리를 하는 방법에는 Redux, Recoil, Zustand 등과 같이 다양하고 편리한 라이브러리가 많다. 이 중에서 본인은 Redux와 Recoil만 사용해봤는데 정작 React에서 제공하는 내장 도구 Context API를 사용해본 적이 없었다. 이번에 사용법을 익힐 기회가 생겨서 정리한다. 1. Context APIContext API는 React에서 전역 상태를 관리하기 위한 내장 도구이다. 컴포넌트 트리 전체에 데이터를 전달할 수 있으며, props drilling을 피하기 위해 사용된다.다만, 공유하는 context가 변경되면 사용하는 모든 컴포넌트는 리렌더링되기 때문에, 상태의 목적과 용도에 따라 context를 잘나눠서 provider를 통해 필요한 컴포넌트에만..

기본적으로 Next.js에서는 next/font를 통해 기본 글꼴들을 제공해준다. 하지만 React-Native에서도 다뤘듯이 custom font를 적용하는 경우가 많기 때문에 방법을 정리한다. 1. font 파일 추가public/assets/fonts에 다운로드한 폰트를 추가한다. 2. layout 수정localfont를 사용하면 custom 폰트를 지정할 수 있다.// layout.tsximport type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";const gmarket = localFont({ src: [ { path: "../../public/assets/fo..

Next.js 에서 css를 다루는 방법에는 기본적인 built-in 방식과 Styled Component, TailwindCSS 방식이 대표적일 것이다.물론, Next.js에서는 기본적으로 create app을 할 때부터 TailwindCSS 적용 옵션을 설정하면 기본 세팅을 해줄 정도로 가장 편리하고 공식적으로 추천하는 방법이다. (본인 역시 TailwindCSS를 선호한다.) 하지만, Styled-Components 역시 아직까지 꽤나 사용되는 방법이기에 적용 방법을 정리해둔다. 1. 작동 방식Styled-Components는 css-in-js 방식으로 작동한다.CSS-in-JS?Javascript 코드 내에 css를 생성하는 로직이 담기는 방식이다.그렇기 때문에 변수에 접근이 가능하여 props와..

SQLite를 다룬 포스트에서 본인의 React Native 어플에서 SQLite를 통해 데이터를 저장하는 것을 말한 적이 있다. 그리고 예시 코드에서 심플하게 SQL문을 통해 데이터를 CRUD 해봤었는데 실제 어플에서는 데이터를 가져오는데 있어 react-query를 함께 사용했다. 사용 이유와 기본 useQuery 및 useMutation과 같은 사용법은 이전 Next.js에 React-Query를 적용하면서 정리했던 포스트들을 살펴보면 좋다.https://hbc3869.tistory.com/65 react-query (1) - 설치 및 설정이번 포스트에서는 데이터를 가져오고 캐싱할 수 있는 react-query라는 개념에 대해 알아본다. 1. 사용 이유 본인의 경우, 플랫폼 초기 개발 과정에서는 s..