티스토리

rhanziy

검색하기

블로그 홈

rhanziy

rhanziy.tistory.com/m

개발이 올챙이 적 공부기록

구독자: 1

방명록 방문하기

주요 글 목록

코드트리 한달 챌린지 후기 처음 만난 코드트리글또에서 코드트리와 협업하여 한 달 동안 체험할 수 있는 기회를 제공받았다. 코드트리는 리트코드, 프로그래머스, 백준같이 코딩 테스트를 준비하고 역량을 향상시킬 수 있게 도와주는 플랫폼이라고 한다. 마침 준비중이던 코딩테스트 기초 공부를 어디서부터 시작해야되나 막막하던 상황이여서 냉큼 신청했다! 코드트리는 베타 기능이지만 실력 진단 후 맞춤형 학습 코스가 준비되어 있어서 기초를 체계적으로 다지기 좋은 플랫폼이라는 생각이 들었다. 추가적으로 만족스러웠던 부분은 하루하루 성취감을 느낄 수 있게 나의 일일 목표를 설정할 수 있는 점이였다. 나는 이번 글또10기X코드트리 블로그 챌린지에 참여하며 디스코드를 통해 데일리 체크인과 병행해 학습을 해보았는데, 꾸준히 연속 체크인을 기록하며 학구열을 .. 공감수 4 댓글수 2 2025. 2. 6.
수포자의 코딩테스트 준비하기(feat.시간복잡도) ~글을 읽는 분들에게 전하는 혼잣말~저는 수포자 입니다.ㅠㅠ 수학은 제가 가장 먼저 포기한 과목이었지만, 개발자가 된 후 이 선택이 이렇게 큰 후회로 남을 줄은 몰랐습니다. 중학교 2학년 때부터 수학을 멀리했던 저는 프론트엔드 개발자로 직종을 전환한 뒤에도 수학의 빈자리를 크게 느끼지 못했습니다. 실무에서 배워야 할 것들이 산더미였거든요.하지만 이직 준비를 위해 [코딩테스트]라는 넘을 마주한 순간, 제게 부족했던 수학적 사고 능력을 뼈저리게 느끼게 되었습니다. 처음에는 코딩 문법과 자료구조 개념이 생소해서 그런가 보다 했지만, 반복되는 좌절 끝에 깨달았죠. '근본적인 해결책은 수학과 친해지는 것이다.'그래서 수포자 스터디에 참여해 초등~고등학교를 아우르는 개념 보충용 수학 교재를 사서 풀어보고 있습니다... 공감수 3 댓글수 0 2025. 1. 21.
Next.js - Supabase에 등록한 authentication으로 로그인 처리하기(feat.AuthScreen) 이번 글은 로그인 기능을 추가하면서, 프로젝트 관리자 페이지에 접근할 사용자 수가 한정적이라는 점을 고려해, 최대한 간편하게 Supabase Auth를 활용해 인증 처리를 구현했다.특히, 처음으로 Next.js 프로젝트를 진행하다 보니, 서버에서 로그인 세션을 받아오고 이를 검증하는 절차가 꽤 까다롭게 느껴졌다.ㅎㅎSupabase Auth에서 제공하는 다양한 소셜 로그인 기능을 사용하지 않았는데, 그 이유는 프로젝트 자체가 정보 공유를 위한 정적 웹사이트였고, 관리자 계정만 필요했기 때문이다.따라서 Supabase 프로젝트에 사전에 지정된 관리자 계정을 추가한 뒤, 로그인 시 해당 계정을 기준으로 검증하는 방식으로 인증 흐름을 구현했다. 1. Create New User / NPM설치supabase 프로.. 공감수 2 댓글수 1 2025. 1. 15.
React - xlsx-js-style 라이브러리로 엑셀 다운로드 구현하기 데이터 리스트 페이지를 만들고 나서 추가로 엑셀 다운로드 기능을 요청받았다.나는 xlsx-js-style 라이브러리를 사용했는데 과정을 정리하는 겸 작성하는 글..위 라이브러리를 사용한 이유는 `javascript를 사용해 스프레드시트에 스타일을 옵션을 추가`할 수 있는 장점이 있다고해서 선택했다.현재는 워크시트 디자인을 해놓진 않았지만 추후 스타일 변경을 고려해볼 예정,,지원되는 스타일 속성은 `alignment, border, fill, font, numFmt` 이고 설정이 꽤나 간편하다는 생각이 들었다. 🔽 공식 페이지에서 제공하는 코드import XLSX from 'xlsx-js-style';export default function Excel() { // STEP 1: 새로운 workbo.. 공감수 3 댓글수 2 2025. 1. 3.
올해를 마무리하며 여행 기록 늘어놓기 정~말 오랜만에 글을 작성한다! 거의 한달만인 것 같네.. 그만큼 내 투지도 잠시 멈춰있었다고 볼 수 있겠다.어쩌다 충동적으로 다혜랑 이탈리아에 2주간(11.19 ~ 12.03) 여행을 다녀오게 되었는데, 그 후로 여독이 안풀린 상태인 것 같다.다혜는 힘쎈 블로거라 잠들기 전 하루 하루를 기록하던데 그 기세에 힘 입어 나도 글 좀 쓸걸!!!!ㅋㅋ 그냥 두서없이 작성하며 한해를 돌아봐야겠다. 2024년은 나에게 끊임없는 퀘스트가 주어진 해였다.☑️ 첫 스타트업 프로젝트☑️ 처음 혼자 다녀온 치앙마이☑️ 엄마랑 처음 간 해외, 대만 ☑️ 퇴사 후 실업급여쟁이로 신분 하락☑️ 계획에 없던 첫 유럽! 이탈리아☑️ 탄핵(?)써놓고보니 처음 경험한게 왜이렇게 많은거야!! 또 비행기를 참 많이도 탔다ㅋㅋㅋ exp는 .. 공감수 4 댓글수 3 2024. 12. 15.
Next.js - 페이지네이션 구현기(custom pagination, with supabase) 페이지네이션 라이브러리를 안쓰고 큰 흐름을 파악하고자 직접 구현해봤다. 의도한대로 동작은 되었는데 3번은 갈아 엎은듯. 하하. 페이지네이션이 이렇게 복잡한 것일 줄이야. 그래서 구현과정을 정리해보고자 제목을 [페이지네이션 구현기]로 정했다. 1차 시도 데이터 배열 slice처음에는 단순하게 데이터가 리스트가 담긴 배열을 현재페이지 * 보여줄 페이지 개수 ~ 다음페이지 * 보여줄 페이지 개수로 slice해서 보여줬었는데 데이터가 많아지면 비효율적이기때문에 일찌감치 리팩토링 했다.arr.slice((currentPage - 1) * itemCountPerPage, Math.min(currentPage * itemCountPerPage, totalItems) 2차 시도 searchParamsuseSearchP.. 공감수 6 댓글수 5 2024. 11. 11.
Next.js - Open Graph를 통해 SEO 도움주기 오픈그래프(Open Graph)웹페이지가 소셜 미디어에서 공유될 때 페이지의 제목, 이미지, 설명 등을 어떻게 보여줄지 제어하는 메타데이터 표준이다. 오픈 그래프 태그는 검색 엔진 최적화(SEO)에 직접적인 영향을 주기보다는, 소셜 미디어에서의 공유를 최적화함으로써 간접적인 SEO 효과를 기대할 수 있다. 보통 og태그라고도 하며, 이 글에서는 이미지 설정을 주로 다룰 예정. 최소 이미지 사이즈는 200px * 200px이며, 페이스북에서 사용되는 기본 사이즈는 1200px * 630px 이다. 오픈 그래프 이미지를 설정하는데에는 3가지 방법이 있다. 프로젝트의 규모에 따라 달라질 것 같으니 천천히 읽어보고 선택해보쟈. 레츠고 1. 경로로 설정하기오픈그래프 이미지에 허용되는 확장자는 다음과 같다. .jp.. 공감수 7 댓글수 5 2024. 10. 29.
Next.js - SEO 적용하기 2탄(sitemap과 robots.txt) 사이트맵(sitemap)검색 엔진이 웹사이트를 보다 효과적으로 이해하고 크롤링할 수 있도록 도와주며, 이를 통해 웹사이트의 SEO 성능을 향상시킬 수 있는 중요한 도구이다. 사이트맵 파일을 올바르게 관리하고 업데이트하는 것은 검색 엔진 최적화(SEO)에 긍정적인 영향을 미칠 수 있다. 사이트맵 파일을 생성하게 되면 아래와 같은 이점이 있다.1. sitemap.js | ts 파일 생성app 디렉토리의 하위에 sitemap.js/ts 파일을 생성한다.// app/sitemap.js export default function sitemap() { return [ { url: 'https://test.com', lastModified: new Date(), changeFrequency: 'yearly', pri.. 공감수 3 댓글수 2 2024. 10. 21.
Next.js - SEO 적용하기 1탄(정적 metadata) SEO(Search Engine Optimization)검색 엔진 최적화를 의미하며, 웹사이트나 웹 페이지가 구글/네이버 등과 같은 검색 엔진에서 더 잘 보이도록 최적화하는 과정.이 과정을 통해 웹사이트는 검색 엔진 결과 페이지에서 상위에 노출되게 되어 자연스럽게 더 많은 방문자를 유도할 수 있다. seo를 적용하게 되면,검색 엔진 결과에서 높은 순위: 대부분의 사람들은 검색 결과의 첫 페이지에 표시된 사이트만 방문하는 경향이 있는데 SEO를 통해 사이트가 상위에 노출되면 더 많은 사람들이 사이트를 방문하게 된다.자연 트래픽 증가: 광고에 의존하지 않고 검색 결과에서 유입되는 자연 트래픽을 확보할 수 있다.브랜드 인지도 향상: 검색 결과 상위에 나타나면 사용자들이 사이트나 브랜드를 더 신뢰하게 되고, 브.. 공감수 3 댓글수 0 2024. 10. 14.
글또 다짐글 저번에 작성했던 나의 삶의 지도를 게시 한 후 며칠이 지나 글또 10기에 선정되었다 ! 야호 🙌 지금 기록하는 흔적들이 나중에 읽어봤을때 부끄러울지언정 2024년의 날 한 조각 맛볼 수 있겠지... 어떤 맛이려나.... 보통 남는건 사진이라고들 하지만 거기에 추가로 글은 당시의 내 관심사, 깊이, 상태를 엿볼 수 있는 도구임에 분명하다. 나를 크롬에 띄워놓고 ctrl+shift+c 하는 것..... 아이쿠 이게 주제를 정하지 않고 작성하다보니 의식의 흐름대로 타이핑을 하고 있는 것 같다. 어제 제출했던 글또 10기의 Action Item 3가지 중 첫 번째가 '개인 공부할 때 글쓰기 주제를 제일 먼저 선정하기' 였는데 전제조건을 수정해야겠다. '글 쓰기 전 주제를 제일 먼저 선정하기'로ㅋㅋ 오늘의 제목은.. 공감수 8 댓글수 3 2024. 9. 30.
글또 10기 지원 - 나의 삶의 지도 🏃🏻‍♀️🗺️ 질풍노도의 첫번째 시기 중딩'어린 시절'을 당장 떠올리면 나는 중딩시절이 떠오른다. 동네를 벗어나 새로운 친구들을 만나고, 빠르게 바뀌는 유행을 경험하며 취향 스펙트럼이 확장되는 나이여서 그런 것 같다. 그 때는 또래집단의 power✨가 컸기때문에 정신없이 휩쓸리기도 했지만 혼자만의 시간이 주어졌을 때 내가 몰래 즐겼던 것들이 떠오른다. 일단 혼자만의 시간은 역시 모두가 잠자는 조용한 새벽을 좋아했다. 이때부터 올빼미 기질이 형성되었나... 어린시절의 나는 참 상상력이 풍부했던 것 같다. 그 당시 유행하던 책 시크릿ㅋㅋ을 감명 깊게 읽고는 눈을 감고 미래에 나는 어떤 모습일지를 마음 속으로 생생하게 그려봤는데, 아직도 선명하게 기억나는 건 ‘높은 낭떠러지를 끼고있는 도로에서 스포츠카를 타고 달리는 멋진 .. 공감수 10 댓글수 4 2024. 9. 13.
배열 중복 요소 제거, 객체 배열정렬 filter를 이용한 배열의 중복 요소 제거 Uniq() { return this.filter((v, i, self) => self.indexOf(v) === i)} 객체 배열 정렬const todos = [ {id:4, content: 'JS'}, {id:1, content: 'HTML'}, {id:2, content: 'CSS'}]//배열 key값 타입에 따라 정렬function compare(key){ // 프로퍼티 값이 문자열일 경우 산술연산으로 비교하면 NaN이 나오므로 비교 연산 사용 // 비교함수는 양수/음수/0을 반환하면 되므로 산술연산 대신 비교연산을 사용할 수 있다. return (a,b) => typeof a[key] === 'string' ? a[key].localeCo.. 공감수 0 댓글수 0 2024. 9. 10.
슬라이딩 윈도우 알고리즘 슬라이딩 윈도우 알고리즘?하나의 특정 범위를 지정해놓고, 윈도우를 이동시키면서 범위 내에 있는 원소들을 계산해주는 원리.배열과 그 배열의 subArray(부분배열)의 원소들을 어떠한 조건하에 계산하는 상황에서 사용된다. O(n)의 시간복잡도.ex. 구간 합 구하기, 일정한 사이즈의 범위 값 계산하기, 가장 긴 부분 문자열 구하기 등. 예제) 사이즈가 K인 부분배열의 최대 합을 구하시오.Function maxSumOfArray(arr: number[], k:number){ let windowSum = 0; let maxSum = -Infinity; // arr에 음수가 포함될 경우 대비 for(let i = 0; i = k-1){ maxSum = Math.max(windowSum, ma.. 공감수 0 댓글수 0 2024. 9. 10.
이진탐색 알고리즘 이진탐색이란 ?divide and conquer(분할 정복) 패턴을 지향하는 탐색 알고리즘. 빠르고 효율적이지만 배열이 정렬되어있어야 한다.시간복잡도는 O(log n) 준비물정렬된 배열 Array A 와 Left, Middle, Right 포인터 동작원리L: 배열의 첫번째, R: 배열의 마지막, M: L 와 R의 평균값If A[M] === target return M If A[M] 미들 다음으로 탐색If A[M] > target, set R to M-1 -> 미들 이전을 최고값으로 탐색 const nums = [1,5,13,17,32,39,45,50]function binarySearch(arr: number[], target: number){ let left = 0; let rignt = arr... 공감수 0 댓글수 0 2024. 9. 10.
재귀함수 재귀함수란 ? 함수 내부에서 자기자신을 호출하는 것. 재귀함수 조건Stop condition(base case)Recursive case모든 재귀함수는 스택오버플로우를 방지하기위해 실행을 종료할 base case를 정의해야한다. 재귀단계의 연산을 제대로 설정하지않으면 maximum call stack size exceeded 에러 발생function drink(x) { //1. base case if(x 예제1) 문자열을 뒤집는 함수function reverse(str){ //base case if(str == ''){ return "" } else { //recursive case return reverse(str.substr(1)) + str.charAt(0) }}resver.. 공감수 0 댓글수 0 2024. 9. 10.
Next.js - nodemailer 라이브러리를 통해 이메일 전송(vercel) 프로젝트에 간단하게 문의하기 기능을 넣기위해 nodemailer 라이브러리를 설치했다.https://nodemailer.com/ Nodemailer :: NodemailerNodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default. npm inodemailer.com 1. npm 설치npm install nodemaile.. 공감수 1 댓글수 1 2024. 7. 9.
[에러해결] 안드로이드 스튜디오 빌드 에러 execution failed for task ':app:compiledebugkotlin'. 에러메세지execution failed for task ':app:compiledebugkotlin'. > a failure occurred while executing org.jetbrains.kotlin.compilerrunner.gradlecompilerrunnerwithworkers$gradlekotlincompilerworkaction > compilation error. see MainApplication.kt 파일에 오류가 있었다.에러메세지만보고 처음엔 compile kotlin 버전을 낮추고 난리를 쳤는데 스택오버플로우에서 찾은 결과로는 rn 0.6이상에서는 자동으로 package가 추가된다고한다.new RNConfigPackage()를 주석처리해주자. 그럼 빌드 완뇨 공감수 0 댓글수 0 2024. 5. 31.
React Native - 프로젝트 첫 셋팅 라이브러리(navigation) 네비게이션 - 스택, 바텀탭네비게이션yarn add @react-navigation/native @react-navigation/native-stackyarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-contextyarn add@react-navigation/bottom-tabs 공감수 0 댓글수 0 2024. 5. 31.
React Native - 아이콘 사용하기(react-native-vector-icons) 아이콘을 따로 저장하지않고 쉽게 불러와서 사용하기위해 라이브러리를 설치했다.yarn add react-native-vector-icons yarn add --dev @types/react-native-vector-icons ios그리고 생성된 node_modules/react-native-vector-icons 폴더에서 Fonts 파일은 xcode 프로젝트안에 드래그&드롭 info.plist 안에 아래 코드 추가 UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.tt.. 공감수 0 댓글수 0 2024. 5. 26.
React Native 새로운 프로젝트 생성 중 npm오류 npx react-native@latest init 프로젝트명 프로젝트 생성 후 시뮬레이터 실행이 안돼서 노드를 깔았따 지웠다 모듈을 날렸다 생성했다 하면서 에라이 다시 프로젝트 생성하자~ 하고 터미널에 입력했는데 npm 오류가 떴다. npm error code ENOENTnpm error syscall statnpm error path /Users/raniMac/.npm/_cacache/content-v2/sha512/b5/37/cf317838766ab773d9617270de8511dd367bf7467f2b2288457a4bda388fdd00f3b1dc6a77e57848299423f08c9195f61ce16ae9d89f77798b9bc8cc57ddnpm error errno ENOENTnpm erro.. 공감수 0 댓글수 0 2024. 5. 24.
React Native - ref 오류 : Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? ( 만 14세 이상 입니다. (필수) } /> )} /> 부모컴포넌트에서 controller로 자식 checkbox의 value를 제어했었는데, 기능은 잘 되지만 콘솔에 Ref Error가 떴다.React에서 Ref를 사용하는 경우VanillaJS와 달리 React에서는 특정 DOM을 직접적으로 수정해야하는 경우, Ref를 사용!특정 element에 포커스, 속성값을 관리할 때.특정 element에 애니메이션을 직접적으로 실행시킬 때.서드 파티 DOM 라이브러리를 React와 같이 사용할 때.출처: https://sambalim.tistory.c.. 공감수 0 댓글수 0 2024. 5. 13.
Android Studio - Unable to load script. 1. [패키지명]/android/app/src/main/assets 폴더가 있는지 확인하고 없으면 생성 2. [패키지명]/android 폴더에서 ./gradlew clean 실행 3. [패키지명] 폴더에서 아래 명령어 실행react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle 4. yarn android 공감수 0 댓글수 0 2024. 5. 13.
Xcode build setting(M3) 2024.05.20 업데이트 🥹계속 빌드가 안돼서 찾아보다 해결한 방법.... intel 돌리다가 m3칩으로 맥북을 업그레이드하고 안됐던 개발셋팅 과정이다.iterm2 터미널을 설치하는 이유가 Intel과 Apple Silicon간에 소통을 도와주는 로제타(Rosetta)를 사용하기 위해서라고 한다. (일반 Terminal과 Iterm2(로제타 용)로 두개를 사용한다.) 먼저 로제타를 설치해주고 agree를 입력해 license동의를 한다.softwareupdate --intall-rosetta 그 후 파인더(Finder) > 응용프로그램(Application) > iterm 우클릭 및 정보가져오기 클릭 > Rosetta를 사용하여 열기 체크 그리고 프로젝트 경로로 들어가서 yarn ios를 했더니.. 공감수 0 댓글수 0 2024. 5. 13.
React Native - 안드로이드 애뮬레이터에서 localhost 접속(webview) 1. 웹뷰 이벤트 페이지로 넘어가야함.2. 개발서버에서 iOS에서는 접속이 정상적으로되고, 안드로이드에서는 자꾸 ERR_CONNECTION_REFUSED 가 떴다.3. 실서버는 정상 작동함.4. 접속할 url 은 http://localhost:4200~~~~ 시도 1. localhost 부분을 10.0.2.2로 바꾸면 된다해서 replace시도해봤지만 여전히 접속안댐.시도 3. localhost 부분을 내 ip로 바꿔서 접속 시도해봤지만 안댐.시도 2. AndroidManifest에 useCleartextTraffic = true 를 추가해보라했지만 안댐.// AndroidManifest.xml // 어쩌구 해결책해당 포트가 아직 ADB에 전달되지 않았기 때문에 로컬 개발 서버에 액세스할 수 없는.. 공감수 1 댓글수 1 2024. 5. 2.
React Native - useDeferredValue로 추천 검색 리스트 노출하기(feat.debounce) 검색 서치바에 키워드를 입력하면 등록된 상품 중, 해당 키워드가 include되어있으면 리스트에 노출하는 기능을 구현했었다.보통 이런 경우에 사용자가 input에 입력하거나 지울때마다 키워드가 있는지 없는지 비교를 하는데, 과도한 요청 및 처리를 수행하게 될 경우 발생할 수 있는 성능 저하를 막기 위해 연속적으로 호출되는 함수 중 마지막 함수만 호출하는 debounce 기법을 사용하여 제어한다. 기존 구현했던 방식은 setTimeout을 이용해서 키워드 입력 후 일정 지연시간 후에 리스트를 노출해주었었다. const [inputKeyword, setInputKeyword] = useState(keyword ?? ''); useEffect(() => { const debounce = setTime.. 공감수 1 댓글수 1 2024. 4. 25.
Next.js - 모바일 페이지네이션 적용(react-paginate) https://www.npmjs.com/package/react-paginate react-paginate A ReactJS component that creates a pagination.. Latest version: 8.2.0, last published: a year ago. Start using react-paginate in your project by running `npm i react-paginate`. There are 577 other projects in the npm registry using react-paginate. www.npmjs.com 반응형 작업 하던 중, mui로 만든 전형적인 데스크탑 페이지네이션과 다른 ui가 필요해서 react-paginate 라이브러리를 통해 .. 공감수 0 댓글수 0 2024. 4. 22.
Next.js - router.isReady const onSubmit = handleSubmit((data) => { router.push({ pathname: '/경로', query: { ...data }, }); }); const { query, ...router } = useRouter();const methods = useForm({ defaultValues: { productName: (query.productName as string) ?? undefined, storeName: (query.storeName as string) ?? undefined, },});검색버튼을 누르면 라우터 경로에 query를 붙여서 결과 리스트를 보여주는 페이지를 만들고있었다.하지만 새로고침을 하면 ur.. 공감수 0 댓글수 0 2024. 4. 11.
React - Swiper 라이브러리 Center overlap 현상, slide width 조절 https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 시작해볼까. $ npm install swiper 만들고싶었던 UI형태는 이렇다. 센터가 고정되면서 슬라이드되는 카드 공식문서에서 제공하고있는 React 코드를 보면, (다른 말이지만 코드샌드박스 진짜 안열린다 개빢침) import { Pagination } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import .. 공감수 1 댓글수 0 2024. 4. 4.
React Native - useAnimatedRef scrollToOffset 사용하기(타입스크립트) 그냥 flatList ref는 보통 이렇게 사용했을거다.ref = useRef(null);ref.current?.scrollToOffset({offset: 0, animated: true}) 그런데 useAnimatedRef를 쓰면 ref.current에 scrollToOffset이 없다고 타입에러가 뜰것임. const ref = useAnimatedRef>(); ref.current?.scrollToOffset({offset: 0, animated: true}); 원래 쓰던대로 쓰는방법은 바로~ react-native-reanimated.d.ts 파일에 가서 수정해주면댐.export interface FlatList extends ReactNativeView {}-> .. 공감수 0 댓글수 1 2024. 3. 19.
Next.js - mui Select, Chip 선택 개수 제한하기 선택 최대 갯수 제한이 없었는데 2개로 제한하기위한 코드.! FormContext에서 제공하는 watch에 useState도 써보고 onChange={onChange}로 target.value 콘솔도 찍어보았지만 잘 안됐다. 여기서 알게된 mui select컴포넌트의 onChage 속성 특. One Two Three 최대 2개 {capacityOptions.map((text, i) => ( {text} ))} onChange={onChange} 로 코드를 짰는데 select가 정상적으로 안되는 것! onChange는 클릭이벤트에 대한 응답으로 menuItem을 호출하는데, mui select에서 기본으로 제공하는 handleMuiSelectOnChange를 써야 이벤트 버블링이 된다고~ const han.. 공감수 0 댓글수 1 2024. 1. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.