공부하자

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

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

https://5ffthewall.tistory.com/112 [React/리액트] 파일 업로드와 미리보기 기능 구현하기구현할 기능 및 문제 상황다음과 같이 갤러리에서 이미지를 업로드하는 기능을 구현해야 했다.각자 다른 페이지에서 두 번 씩이나 쓰이기 때문에 이미지를 등록하는 기능을 hook으로 구현해서5ffthewall.tistory.com  위 글에서 파일 업로드를 구현하다가 궁금증이 생겼다. 대부분의 파일 업로드 코드들이 useRef를 사용해서 나도 useRef로 값을 참조했는데 useState를 써도 될 것 같다는 생각이 들었다. 구글링하다가 useRef를 안좋아한다는 사람도 있고.... useRef 쓸 바에 useState쓴다는 말도 있고... 그래서 직접 코드를 비교해보기로 했다!useRef ..

이거는 사실 css 카테고리인데... 그냥 여기에 씀 문제 상황웹앱 st로 세로가 긴 화면을 개발하는 중에 화면 안의 컴포넌트들이 많아서 화면의 세로 길이를 넘어갈 때 스크롤이 되지 않거나 하단에 고정해둔 다음으로 넘어가는 버튼에 가려지는 문제가 생겼다.이게 내가 개발중인 화면이다.보통의 비율의 핸드폰에서는 평범한 화면이겠지만이제 se같은 극단적인 화면 비율의 상황에서는 이런 상황이 발생한다. 문제 원인다음 버튼을 bottom 스타일을 적용해서 화면의 하단에 footer마냥 위치해둬서 생기는 문제이다.다음 버튼도 그냥 화면의 컴포넌트의 가장 밑에 위치해두고 scroll 여부를 허용하면 금방 해결 될 문제겠지만 나는 다음 버튼을 footer처럼 모든 스크린의 바닥에 위치하게 하고 싶었다. 이유 : 그게 더..

프론트엔드 프로젝트에서 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 구현 할 것..

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..

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

이어지는 글 >> https://5ffthewall.tistory.com/77 MySQL로 DB 구축하고 쿼리문으로 데이터 추가하기 https://www.youtube.com/watch?v=T5dwM_j8wmU&list=PLRx0vPvlEmdD1pSqKZiTihy5rplxecNpz&index=11 나동빈님의 React와 Node.js를 활용한 고객 관리 시스템 개발 강의 예제를 따라하다가 AWS RDS로 DB를 구축하는 과정에서 이것 대 5ffthewall.tistory.com 전 글에서 구축한 DB를 토대로 react와 연동해서 데이터를 가져와 보는 것을 할 것이다! 1. .gitignore 처리 database.json이나 database.js에 데이터베이스의 hostname이나 password를 적..

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오에서는 다양한 API들을 제공한다 내가 구현할 것은 JS+리액트로 카카오톡 공유하기 기능을 구현하기! 1. 로그인 후 내 애플리케이션을 등록해준다 2. 플랫폼에는 사이트 도메인을 넣어줌, 배포 전 테스트일 때는 localhost 링크 넣어주기! 3. 구현 방법을 선택한다 API 메소드 - 공유하기 버튼도 만들 것인지 - 내가 만들어둔 버튼에 onclick만 써서 바로 보낼것인지! 메시지 구성 방법 - 기본 메시지 (카카오톡에서 템플릿 제공해..