본문 바로가기

WEB32

Ref를 좀 더 잘 써볼까? (forwardRef와 useImperativeHandle) 들어가며: React의 Ref 전달 문제 React의 컴포넌트에서 ref를 전달하려고 하면 문제가 발생한다.// 🚨 동작하지 않는 코드const Input = (props) => { return ;};// 부모 컴포넌트const Parent = () => { const inputRef = useRef(null); return ; // ref가 전달되지 않음};이는 React가 기본적으로 ref를 일반 prop으로 전달하지 않기 때문입니다. 이런 제한이 있는 이유는:1. 캡슐화 유지: 내부 구현 세부사항을 보호2. 예측 가능한 데이터 흐름 보장3. 불필요한 노출 방지 forwardRef: React의 공식적인 ref 전달 메커니즘React 공식 문서에 따르면, `forwardRef`는 다음과 같은 .. 2024. 6. 28.

너 setTimeout, setInterval 로 시간 보장한다고 할 수 있어? 어떻게? 타이머를 구현하다가 문득 그런 생각이 들었다. 아무 생각 없이 setTimeout 과 setInterval을 사용하면서 얘네는 어떻게 돌아가는거지? 얘네를 믿고 써도되는건가? 과연 setTimeout과 setInterval이 시간을 보장해주는 게 맞나? 그래서 공부하게 됐다. 👀TL; DR setTimeout, setInterval의 차이점 지연 간격이 보장되나? 시간을 측정해야되는 타이머라면 Date가 해결책이 될수도..? setTimeout 지정해준 시간이 지난 후에 1회 특정 코드를 실행하는 방법 비동기 함수 setTimeout이 비동기처리가 가능한 이유는 JS엔진이 아니라 WebAPI에서 처리를 한다. 이를 통해서 싱글스레드인 JS에서 비동기적인 처리가 가능하게 된다. setInterval 지정해.. 2024. 1. 16.

styled-components무새의 tailwind CSS 도입기 - 1 👀TL; DR 원래는 styled-components를 주로 사용했다. 디자인시스템 구축을 하며 styled-components의 한계를 느꼈다. tailwind CSS를 도입했다. 아직은 혼란스럽다.. tailwind CSS를 '잘 쓰는' 방법을 모색중이다 styled-components를 사용했던 이유 스타일드 컴포넌트를 사용했던 이유는 '컴포넌트화'에 있었다. 컴포넌트화하는 걸 좋아하기도 했고, 컴포넌트 이름을 명시하면서 명확히 해당 태그의 역할이 드러난다는 점도 좋았다. 이 점은 버그 픽싱에도 굉장히 간편함을 느끼게 해줬다. (문제의 원인을 찾는 부분에서 명시성의 장점) 그리고 props로 조건부 스타일링의 장점도 매우 좋았다. 반복되는 컴포넌트에서 색깔만 바뀌는 경우를 많이 봤고, 반복되는 코드.. 2024. 1. 8.

과연 누구를 위한 웹 접근성인가 11월 7일에 웹 접근성에 대한 강연을 듣고 왔다. 진짜 많은 걸 얻었던 강의였다. 왜냐하면 나는 애초에 잘못 알고 있었던 개념이었기 때문이다. 창피하지만, 정보 접근성이라는 말에 보안 관련 문제를 다룬다고 생각했던 나는 머리를 댕~~ 맞았다. 이번 기회에 잘못된 지식을 바로 잡을 수 있어서 너무 좋았다. 아래 내용은 강연을 들으면서 정리한 내용이다. 나처럼 '웹 접근성'에 대해서 잘 모른다거나, 들어만 본 사람이 참고하면 좋을 것 같다. 만약, 접근성에 대해서 조금 알고 있다면 아래 질문에 한 번 답해보는 게 좋을 것 같다. 서비스를 만들때 접근성에 어느정도 가치를 두는가? 접근성의 중요성과 필요성을 아는지 서비스 개발 프로세스에서 고려하고 있는지 내가 만든 서비스를 장애인이 사용한다고 가정했을때, 어.. 2023. 11. 22.

[☄️트러블슈팅] useEffect 내 setState 무한루프 원래 문제가 없던 코드에 이번에 border를 linear로 바꾸면서 set함수를 배열로 두개 넣어주다보니 에러가 발생했다. # 원래 코드 useEffect(() => { if (isPost.data?.isAllSeen == false) { for (let i = 0; i < isPost.data?.seenPostList.length; i++) { if (isPost.data?.seenPostList[i].isSeen == false) { if (isPost.data?.seenPostList[i].isPublic == true) { setBorderColor(['#6935FD', '#9747FF']); setIndex(i); break; } if (isPost.data?.seenPostList[i].is.. 2023. 10. 5.

react-query를 짧게 사용해본 회고..랄까...? 지금 진행하고 있는 프로젝트에서 react-query와 recoil을 사용해서 상태관리를 해주고있다. 물론 프로젝트가 아직 끝나지 않았다ㅎㅎ.. 사실 작년까지만 해도 채용공고나 그런 곳들에 Redux가 가득찼었는데 어느 순간부턴가 React-Query의 점유율이 높아지기 시작했다. 공부해야지..해야지..생각하다가 사용하고있는 프로젝트에 우연히 들어가게 되면서 해야만하게 됐다.. 리코일은 이전에 학습해봤는데 리액트 쿼리는 안해봐서 살짝 겁이 났었다 근데 지금 해보니 적용하고 사용하는 데에 있어서는 크게 어렵지 않으니 나처럼 겁먹은 사람이 있다면 일단 해보라고 말하고 싶다. 일단 도대체 요즘 왜 다 리액트 쿼리를 사용하는 건지에 대한 의문이 들었었다. 이해해보려고 자료를 많이 찾아봤는데 자료도 자료지만 직접.. 2023. 4. 4.

이전 1 2 3 4 ··· 6 다음

티스토리툴바