전체 글 검색 결과

해당 글 81건

230901 : react ts _ custom select box

이번에 회원가입 맡으면서 select 박스 여러개를 만들 일이 생겼는데 처음에는 컴포넌트로 빼지도 않았고, select box 외부 영역 클릭시 닫히는 것에 대해 고려하지 않고 만들었다. 최근에 select box를 만들일이 거의 없어서 어떻게 만드는지 까먹었었고, 다시 익숙해지는데까지 시간이 필요했다. 다행히도 select 박스를 이번에 여러번 만들게 되면서 대충 어떤 식으로 만들어야하는지 감이 조금 온다. 아래 사용했던 방법을 캡쳐해왔당.......히히 다음은 typescript가 적용된 react project에서 지역을 선택하는 select box를 구현한 코드이다. 1. 우선 html 부분을 그려준다. 첨에 닫혀있던 box를 클릭했을 때 dropdown 방식으로 나오게 하고 싶다면, 필요한 ht..
Log/TIL 2023. 9. 2. 02:22

230828 : typeScript, 오류들의 행진

📌 서로 다른 커스텀 select box가 같은 열에 있을 때, 위의 select box가 투명하게 보인다면? PROBLEM STATE | styled-component로 element에 스타일을 주고 있고, 커스텀 select box를 구현함. options배열을 map을 이용해서 동일한 커스텀 select box 컴포넌트로 찍어내는 작업을 했다. 아래 숨김토글을 열면 보이는 첫 이미지처럼 서로 다른 두 select box가 동일한 column선상에 놓였을 때 위에 있는 select box를 열면 위에서 열린 option list가 (background-color를 white로 줬음에도) 투명하게 보이는 문제가 발생했다. SOLUTION | EASY! z-index로 해결하면 되는고디~ 더보기 * 문제..
Log/TIL 2023. 8. 28. 22:44

230824 : [typescript react] styled-component props

[react typescript] styled-component props.boolean styled-component에서 props로 boolean값 전달해줄 때 boolean값을 판별해주는 식에 string이 하나라도 있으면 오류가 뜬다. 위 코드에 color 부분에 빨간 밑줄 뜨면서 발생하는 오류 메시지는 다음과 같다. No overload matches this call. Overload 1 of 2, '(props: PolymorphicComponentProps): Element', gave the following error. Type 'string | boolean' is not assignable to type 'boolean'. Type 'string' is not assignable t..
Log/TIL 2023. 8. 25. 01:24

230818 : typescript 오류

typescript오류 1 This expression is not callable 오류 => 주로 typescript에서 함수가 아닌 값을 함수처럼 호출하려고 할 때 발생 . typescript오류 2 react typescript에서 useRef를 특정 input에 연결시키고 화면이 mount되었을 때 focus 시키고 싶어서 아래 첫 이미지 3과정을 거쳤는데 세번째 이미지처럼 밑줄뜨면 => TS가 찡찡거려주는거임 "어쨌든 typescript는 mount가 되기 전까지는 null값이 들어와서 emailRef.current값이 없지 않냐"고 주장하는 거임! 해결방법 그럼 이때 우리는 ' ! '를 이용해서 "걱정마!!!! 100000% 확률로 빈 값 아님!" 이라고 맞주장해주면 됨
Log/TIL 2023. 8. 19. 12:46

230817: state 관리, redux, 프로젝트 진행

Q . 상태관리 왜 해, 평소 state관리 어떻게 해 핵심키워드 : SPA, MPA, CSL, SSL, 상태 고객은 잦은 페이지 전환이 있는 MPA 서비스보다는 '앱과같이 내가 입력한 내용이 부드럽게 실시간으로 반영되는 SPA의 웹서비스를 더 찾게' 되었고 이에 따라 바뀌는 data(중요data)만 실시간, 비동기 적으로 변화시켜 보여줄 필요성이 생겼고, 이러한 정보들을 state(상태)라는 형태로 관리하게 되었다. 전체 페이지를 계속 바꾸거나 너무 자주 바꾸기 보다는 필요한 순간에 비동기적으로 변경된 정보만 갈아끼울 수 있도록 해당 정보를 특정 알고리즘을 통해 처리하는 방법으로 관리한다. 이건 마치 원장님 이 키워드로 말하는게 중요하다고 했지만 구구절절 말하게되는 나의 .... 습관............
Log/TIL 2023. 8. 17. 20:25

TIL_230816 | 내일은 더 기록해줘

supabase typeScript랑 react api 부분 왔다 갔다하며 보려니까 헷갈리고, 영어라서 보긴 어려운데 조금만 조금만 더 보면 알 것 같기도 함 supabase 기본 세팅.. 노션정리 supabase process. 어쩌구에서 오류 나는거 왜그런거져 index.ts:4 Uncaught ReferenceError: process is not defined at index.ts:4:21 오늘 하루 일지 하루종일 최종프로젝트 S/A. 준비한 것 만큼 잘 완수해내진 못한 것 같지만 최선을 다했다...
Log/TIL 2023. 8. 17. 08:54

TIL_230810 | 프로젝트 4일차 끙..!!!!

오늘 한 일 todo UD 부분 완성 todo 작성 및 수정 모달띄우기를 공용모달창으로 적용 (동팀장이 만들어준 건데 코드 조금 더 이해필요) todo 중요도 표시기능 추가 사이드바 todo 상태 클릭시 상태별 렌더링 내일 할 일 todo 태그기능 (어려울 것으로 예상..) 느낀점 ? - todo Update는 Create랑 비슷해서 상대적으로 빨리됨. - 동팀장이 만들어주신 모달은 zustand로 모달 open, close를 제어한다. 간단한 것 같지만 new Promise 객체를 이용해서 다루는 부분과 컴포넌트를 이리저리 옮겨 다니며 이해해보아야해서 아직 제대로 확인하지 못했다. 금요일에 내가 맡은 기능을 오전 중으로 마무리하고 한 번 다시 보고 정리해보아야겠다. - 사이드바를 클릭했을 때 본 mai..
Log/TIL 2023. 8. 10. 18:45

TIL_230809 | 프로젝트 진행 3일차

WANNA REMEMBER 📌 ant design - datepicker 사용할 때 많이 헤맸던 거 1. 오늘 날짜 추출 아니...증말 어이가 없군..오늘 날짜 구할라고 new Date 써서 이리저리 오늘 날짜 거른다고 시간을 꽤나 잡아먹었는데 day.js라는 api 를 이용하면 오늘 날짜 아주 쉽게 구할 수 있고, 굳이 가공 어렵게 안해도 된다는 걸 발견해버렸다..흑흑 기존에 new Date로 가져온 데이터 는 2023-08-10 형태로 만들러면 이것저것 해줬어야했는데 day.js api 이용하면 간단하게 코드 한두줄로 끝남.. 아래는 이것저것 해줘야하는 경우 접어놓음 더보기 아래는 dayjs 이용한 거고 사용하는 것도 걍 상단에 아래 코드 한 줄만 import 해오면 되는 걸로 암.. import d..
Log/TIL 2023. 8. 10. 07:57