본문 바로가기

전체 글361

React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 셀렉트 박스와 클릭시 등장하는 옵션 메뉴를 직접 만들어 보았다 :) 이번 포스팅에서는 UI 보다는 기능적인 측면만 다루어 보았다 (작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다) 결과화면 미리보기 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 일단 메뉴배열을 useState 를 사용해서 선언해주자 const [menu, setMenu] = useState(['메뉴1', '메뉴2', '메뉴3', '메뉴4']); const [menuItem, setMenuItem] = useState('메뉴1'); // 선택된 메뉴 아이템 const [showMenu, setMenu] = useState(false); // 옵션박스 열고 닫힘 여부를 알려주는 값 옵션박스에서 메뉴를 고르.. 2023. 9. 16.
React(99) 버튼 클릭시 동적으로 테두리색 변경하기 작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다. 아주 심 - 플하게 동작하는 버튼 선택 기능이다 :) 버튼 인덱스를 저장할 상태 변수를 만들자 const [selectedIndex, setSelectedIndex] = useState(0); 핵심은 클릭해서 저장된 selectedIndex 와 === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다. {buttonItems.map((item, index) => ( setSelectedIndex(index)} > {item.title} ))} 2023. 9. 6.
Next.js - global 구글 폰트 적용하기(next/font) 넥스트를 사용하며 전역적으로 폰트스타일을 추가하려고 한다. 폰트를 사용하는 방법은 두가지 정도가 있다. static한 내장 폰트를 사용하거나 웹 폰트를 사용하거나 내장 폰트는 다양한 브라우저 환경이나 운영체제에 따라 달라질 수 있다. (그래서 보통 웹 폰트를 많이 쓴다) 웹 폰트는 아무래도 외부 네트워크로 다운로드 해오다보니 다운로드할 동안 공백기(?)에 대한 이슈가 생긴다. → FOUT(기본 폰트가 나오고 로딩 후 웹 폰트로 대체) / FOIT(아무것도 안나오다 로딩후 웹 폰트로 대체) 지난번 리액트 사용하면서 폰트 프리로드하는 최적화를 진행해본적이 있다 그때는 급하게 찾아서 했었는데 이번 플젝을 진행하며 어떤 원리로 왜 이런 과정을 거치는 지의 인사이트가 한번 더 넓혀진 것 같다 웹 최적화 - 구글 .. 2023. 8. 17.
React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 슬라이더 두번째 포스팅이다 지난번에는 슬라이더를 이동하면 탭이 선택이 되도록 만들어 보았는데 이번에는 커스텀 탭을 클릭하면 슬라이더가 이동하도록 만들어볼 것이다. React(97) Slick 슬라이더와 커스텀 탭 사용하기 slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 처음에는 막막했지만 하다보니 어떻게든(?) 되더라 다음처럼 화면에 한 devbirdfeet.tistory.com React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx import Slider, { Setti.. 2023. 8. 16.
React 실행오류 - URIError: URI malformed 상황인즉슨 이렇다. 검색 서비스를 개발 중이었다. 검색창 내에 특수기호를 넣고 검색하면 에러가 발생했다. 쉽게 말해서 검색어를 입력하고 엔터를 뙇 치면, URL 에 ?search={검색어 키워드} 형식으로 반영이 되는 구조였다. 검색어를 맨처음 window.location.search 로 받아오면 인코드된 문자열로 보인다 하지만 웹사이트에서 "가독성" 을 위해서는 읽기 쉽게 디코드해줘야 된다. 그래서 나는 디코드를 해줬다. const searchURL = decodeURIComponent(window.location.search); 즉, /search?search=캐릭터 와 같다 하지만 여기에 #, % 같은 몇몇 특수 문자가 들어가면 에러가 터지게 된다. 나는 문제해결을 위해 머리를 굴려 보았다. 일단.. 2023. 8. 11.
Git - Remote Origin Already Exists 에러 해결하기 원격 저장소를 만들고 clone 을 받아서 로컬 저장소에서 셋업하고 → 원격 저장소로 푸시하려니 잘 되지 않았다. 브랜치 목록을 보니 원격저장소가 없어 그렇구나! 그럼 추가해줘야지 git remote add 명령어로 origin 이라는 이름의 원격저장소를 추가해 주려고 하였다. 깃에는 remotes 라고 불리는 원격저장소가 있다. 이 Remotes 는 내가 접근해서 CRUD 할수있는 권한을 가지고 있다. remotes 는 각각 이름을 가지고 있다. 같은 이름을 사용하면 안된다. 그래서 에러가 난 것이다. 1. git remote -v 로 existing remotes 가 있는지 확인해보기 → 음 같은 이름이 있어서 에러가 난거였구나 2. git remote remove 으로 원격 저장소 삭제하기 → 지워.. 2023. 8. 9.
반응형

티스토리툴바