공부하자

주소 검색 라이브러리 추천 유명한 주소 검색 라이브러리들은 다음과 같다.Google Places API: 구글의 위치 검색 API를 사용하여 자동 완성 주소 검색 기능을 구현할 수 있습니다.Daum Postcode API: 한국에서 널리 사용되는 주소 검색 API로, 다음(카카오)의 주소 검색 기능을 제공합니다.네이버 지도 API: 네이버의 지도 API를 사용하여 주소 검색 기능을 구현할 수 있습니다.사용자 정의 주소 목록: 사용자가 직접 주소 목록을 선택하거나 입력하도록 할 수 있습니다.장점과 단점을 정리해보자면, Google Places API장점글로벌 적용 가능: 전 세계 어디서나 사용할 수 있는 주소 검색 기능을 제공한다.자동 완성 기능: 사용자가 주소를 입력할 때 자동 완성 기능이 작동하여 빠르..

구현할 기능 및 문제 상황다음과 같이 갤러리에서 이미지를 업로드하는 기능을 구현해야 했다.각자 다른 페이지에서 두 번 씩이나 쓰이기 때문에 이미지를 등록하는 기능을 hook으로 구현해서 재사용을 할 예정이다.구현에 앞서 이미지 등록에 필요한 개념들을 정리해보고자 한다! 이미지 등록 관련 개념 정리1. Blob이란?Blob(Binary Large Object)은 큰 파일(이미지, 비디오 등)을 다루기 위한 데이터 타입이다. 읽기 전용의 원시 데이터를 나타내며 주로 대용량 바이너리 데이터를 다루기 위해 사용된다. 파일 업로드/다운로드, 바이너리 데이터를 이미지로 생성, 미디어 파일 작업 등에 유용하다.주요 기능은 다음과 같다. 1. Blob 생성Blob() 생성자를 사용하여 배열 또는 문자열로부터 Blob을..

프론트엔드 프로젝트에서 styled-components와 TypeScript로 디자인 시스템 설정하기 프로젝트를 시작할 때 먼저 설정하면 편한 것들이 있다.prettier, lint 설정이라던지 절대경로 설정이라던지... 그 중 하나인 디자인 시스템 설정을 해보자!프론트로 개발을 할 때 피그마 보고 눈대중으로 값을 지정해서 개발을 하면 절대 안 된다 ㅎ 디자이너가 피그마에서 정해진 색상의 종류, 폰트의 종류를 고려하여 디자인 해야한다! 우리 프로젝트는 밑에 사진처럼 디자인 가이드가 나와있었다. 많이 쓰이는 색상이나 폰트, 크기, 행간을 설정해두고 디자인을 하는 경우거나 자주 사용하는 디자인이 있을 경우 이를 전역에 지정해두고 쓰는 것이 편하다!  이걸 지정해두지 않으면 모든 컴포넌트마다 font-size..

구현하고 싶은 것과 현재 상황사진처럼 장소 추가하기에 현재 위치를 자동으로 불러오게 하고싶다!!!  Expo Location으로 위치를 불러왔던 경험이 있어서 이번에도 Expo Location을 사용해보기로 했다! RN은 공식문서가 굉장히 친절하고 좋으니까 공식 문서 잘 읽어보기~~ https://docs.expo.dev/versions/latest/sdk/location/#installation LocationA library that provides access to reading geolocation information, polling current location or subscribing location update events from the device.docs.expo.dev 구현 할 것..

리액트(React)에서 폼을 다루다 보면, "Controlled"와 "Uncontrolled" 컴포넌트라는 용어를 접할 수 있다.제어 컴포넌트 / 비제어 컴포넌트라고 다들 알고있을 것이다!이 두 가지 패턴은 입력 요소의 상태를 관리하는 방법에서 큰 차이를 보인다.React-Hook-Form 같은 걸 쓸 때 아무렇게나 쓰지 말고 잘 쓰기 위해서 Controlled와 Uncontrolled 컴포넌트의 차이점, 장단점, 그리고 사용 예시를 살펴보자. Controlled 컴포넌트Controlled 컴포넌트는 상태가 컴포넌트의 state에 의해 제어되는 입력 요소이다. 이러한 패턴에서는 입력 요소의 값(value)이 컴포넌트의 state에 저장되고, 입력 요소가 변경될 때마다 state가 업데이트된다.예시 코드i..

usestate 남발 코드를 react-hook-form로 리팩토링 하기로 하였다현재 코드는 비밀번호 재설정 기능을 구현하고 있는 상태 기존 코드import { EMAIL_DOMAIN } from '@/constants/email.constant';import { BoxButton, SuffixTextField } from '@yourssu/design-system-react';import { StyledEmailContainer, StyledSubTitleText, StyledTitleText } from './EmailInput.style';import { useState } from 'react';import { postAuthVerificationEmail } from '@/home/apis/au..

umc 6주차 과제중 Debounce와 Throttling이라는 개념을 배웠다! Debounce : 연속된 이벤트 호출을 제한하여 마지막 이벤트만 처리하도록 하는 기술→ 연속된 이벤트가 발생할 때마다 타이머를 리셋하고, 일정 시간이 지난 후에 이벤트를 처리Debounce는 주로 어디에 사용하나요?ex) 검색어 자동 완성 기능에서 사용자가 입력을 멈춘 후에만 서버에 요청을 보냄사용자 입력 필드에서 입력이 끝난 후 일정 시간 동안 입력이 없을 때만 서버에 요청을 보내는 경우적용 과정1. debounce hook 만들기2. 적용하기 1. useDebounce.js hook 구현import { useState, useEffect } from "react";export const useDebounce = (val..

유어슈 pr 리뷰 중에 좋은 걸 배워서 기록해봄 쭌 감사링 나중에 보여줘야징 ㅎㅎ 이전 상태에 기반하여 상태를 업데이트 해야할 때 update function 사용이 더 낫다는 의견이 있었다! 그의 리뷰,,지금은 코드가 문제없이 동작하지만 추후에 비동기 로직등이 handleCheckAgree() 함수에 추가되면 상태 업데이트가 예상치 못하게 이루어질 수 있을 것 같아요!handleCheckAgree()와 같이 이전 상태에 기반하여 상태를 업데이트 해야할 때는 update function을 쓰는게 좋은 습관인 것 같습니다.   기존 코드const [agreed, setAgreed] = useState(false);...const handleCheckAgree = () => { setAgreed(!ag..

react native로 열심히 개발을 하던 도중에 난관에 부딪혔ㄷ ㅏ 리액트에서는 페이지 라우터가 있어서 렌더링 할 때 조건부로 렌더링이 가능했는데 리액트 네이티브에서는 스택으로 쌓이는 형태라 스택을 다시 나오는 방법을 모르겠어서 (내가 못 찾은 걸 수도...) 조건부 렌더링이 쉽지 않았다! 내가 원하는 건 토스 처럼 매끄러운 화면 전환 + 하단 네비게이션 바가 고정된 채 컴포넌트들만 렌더링 되는 거! 하지만 스택으로는 새로운 페이지가 자꾸 옆에서 튀어나오고... 네비게이션 바를 가리고... 그런 상황이 발생했다 해결 방법 -> home네비게이션에서는 home.js만 두고 그 안에서 렌더링에 조건을 달아 조건부 렌더링을 하자! 조건부 렌더링 하는 방법 1. retuen 안에서 삼항 연산자 쓰기 retu..

면접 질문들 같다 ㅎ 일단 적어둠 Q1. DOM과 Virtual DOM을 설명해주세요 - DOM (Document Object Model): HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다. (DOM은 HTML, XML 또는 XHTML로 작성된 문서의 객체 지향 표현이라는 뜻) 웹 브라우저가 HTML 문서를 로드할 때, 각 요소(element)는 객체가 되고, 스크립트를 통해 이 객체들을 조작할 수 있다. + DOM 조작의 비효율성 예를 들어 유저가 어떤 포스트에 좋아요를 누르거나 담아둔 장바구니 목록에서 상품을 하나 삭제하면 전체 노드들이 처음부터 다시 그려지게 된다! -> 불필요한 반복이 반복..