본문 바로가기

IT/React9

[React] 다음 주소 API 활용하기 프로그래밍 세계를 탐구합시다. 다음 주소 API 활용하기 다음 주소 API를 활용하여 사용자의 주소 입력 방식을 편리하게 만들 수 있습니다. 공식 다음 주소 API 사용설명서 https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 다음 주소 API 활용 특징 1. API 키를 발급받을 필요가 없습니다. 2. 사용량에 대한 제한이 없습니다. 3. 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다. 4. 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인.. 2024. 2. 29.

[React] SweetAlert2 라이브러리로 Alert창 커스텀하기 프로그래밍 세계를 탐구합시다. SweetAlert2 라이브러리로 Alert창 커스텀하기 SweetAlert2 라이브러리를 사용하여 Alert 창을 멋지게 꾸밀 수 있습니다. 공식 URL https://sweetalert2.github.io/ SweetAlert2 SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 기본 Alert 창 기본 alert 는 매우 단순합니다. SweetAlert2를 적용한 후의 Alert SweetAlert2를 사용한 후의 Alert입니다. SweetAlert2 라이브러리 사용 방.. 2024. 2. 23.

[react] 스크롤에 따라 나타나고 사라지는 네비게이션 바 구현하기 (Navbar) 프로그래밍 세계를 탐구합시다. 스크롤에 따라 나타나고 사라지는 네비게이션 바 구현하기 이번 프로젝트에서 스크롤에 따라 나타나고 사라지는 네비게이션 바를 구현했습니다. 스크롤을 내릴 때는 사라졌다가, 스크롤을 올리면 다시 나타납니다. 구현 화면 작성 코드 마지막 스크롤 위치를 기억하여 네비게이션 바의 표시 상태를 변경하는 코드입니다. 스크롤이 아래로 진행 중이면 false, 스크롤이 위로 진행 중이면 true로 설정하여 바 상태를 변경하였습니다. Nav.jsx import { useEffect, useState } from 'react'; import style from './Nav.module.css' import { Link } from 'react-router-dom'; function Nav() {.. 2024. 1. 15.

[react] 동적 select box 구현하기 (첫번째 항목 선택에 따라 달라지는 다음 선택 목록 구현하기, 지역 선택 박스) 프로그래밍 세계를 탐구합시다. 동적 select box 구현하기 이번 프로젝트에서 지역, 난이도 선택을 순차적으로 입력할 수 있는 Select Box를 구현했습니다. 선택하는 시도에 따라 하위 주소 선택 목록이 달라지며, 난이도 선택은 별개로 항상 나타나야 했습니다. 일반적인 스크롤 형태의 Select Box가 아니라 목록이 제시되어 있고 클릭할 수 있는 기능을 원했습니다. 구현 화면 Console 작성 코드 클릭해야 나타나는 목록이 아니라 목록이 제시되어 있는 형태의 Select Box를 구현하기 위해 목록을 배열 형태로 작성하였습니다. useState를 사용하여 상태를 업데이트하는 함수를 선언하였습니다. 초기 상태로는 첫 번째 시도가 선택되고, 나머지는 빈 문자열로 설정됩니다. const [selec.. 2024. 1. 13.

이전 1 2 3 다음

티스토리툴바