분류 전체보기346 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. JavaScript - 자바스크립트 엔진 / 이벤트 루프 / 테스크 큐 올 초부터 점심시간마다 모던 자바스크립트 딥다이브를 한 장씩 읽고 있다. 기초 개념들을 익히기에 좋은 자투리 시간인 것 같다. 잊지 않기 위해 내가 이해한 내용들을 바탕으로 쉽게 풀어 포스팅 해보려고 한다. JavaScript - 자바스크립트 엔진 / 이벤트 루프 / 테스크 큐 자바스크립트는 싱글 스레드 언어이다. (언제나 그렇듯이) 싱글 스레드는 카페에서 직원 한명이 모든 주문을 다 처리하는 것과 같다. 하지만 싱글스레드는 하나의 일이 끝나야 다음 일을 한다. (동기적) 에스프레소샷을 내리는 사이 - 얼음을 컵에 담아놓고 - 샷을 얼음컵에 담아 건낸다 주문을 받고 - 동전을 거슬러 주고 - 영수증을 준다 그렇지만 브라우저가 등장하면 이야기가 달라진다. 동시에 여러 일을 할 수 있도록 매니저가 지시해주는.. 2023. 8. 1. JavaScript - This 에 대해서 요즘 바닐라 자바스크립트를 사용해서 코드를 짜다보니 this 가 여간 걸리는 게 아니다 리액트에서는 this 의 개념이 없어서 안다고 했지만 그동안 간과해왔던 이 친구 정확히 정체가 뭘까? 설명할 수 없는 지식은 완전한 지식이 아니기 때문에 공부하고 정리해보았다 JavaScript - This 에 대해서 함수 호출 시 this 의 값이 결정된다. (선언이 아니다) 클로저 (상위 스코프를 참조하는 성질) 때문에 this 도 마찬가지로 상위 값을 참조한다 다만 엄격 모드와 논엄격 모드에서는 차이가 좀 있다 ** 참고로 함수의 상위 스코프는 글로벌(window)이다 단독으로 사용한 this 의 경우 → 함수 상위 스코프인 window 로 바인딩 된다 함수 안에서 사용한 this 의 경우 → 함수 상위 스코프인.. 2023. 7. 30. React(97) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. afterChange) slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 다음처럼 화면에 한장씩 보이는 싱글 슬라이더가 있다. 슬라이더 아래에는 커스텀 탭이 위치한다. 탭을 클릭하면 해당 슬라이더로 이동한다. 또한 [ ] 버튼으로 슬라이더를 이동하면 탭이 선택된다. React(97) Slick 에 커스텀 탭 사용하기 코드를 짜기 전에 내손에 쥐어진 무기가 뭐가 있는지 살펴보자 👊(현실은 맨주먹) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx 우선 Tab 과 ImageSlider 컴포넌트를 임포트 해주자 import Slider, { Settings } from 'react-s.. 2023. 7. 12. 이전 1 ··· 3 4 5 6 7 8 9 ··· 39 다음 반응형
