일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 백준알고리즘
- 프로그래머스JS
- 리액트
- 익스프레스
- 코딩테스트
- css기초
- 포이마웹
- 백준nodejs
- 알고리즘
- HTML
- 백준구현문제
- 몽고DB
- 백준골드
- 리액트커뮤니티
- js코테
- 다이나믹프로그래밍
- 코테
- 리액트댓글기능
- JS
- 자바스크립트
- 프로그래머스
- 안드로이드 스튜디오
- CSS
- 백준구현
- 백준
- JS프로그래머스
- dp알고리즘
- 프로그래머스코테
- HTML5
- 백준js
- Today
- Total
목록React (63)
개발새발 로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bbG3Qf/btsGAybrQ8w/LLuMKy26xoDtZj4IswFKBK/img.png)
우리가 프로젝트를 빌드하기 위해서 많은 빌드 툴을 사용하고 있다. 그 중 대표적인 빌드 툴은 Babel과 Terser일 것이다.(Webpack도 빌드 툴이다.) 프로젝트의 규모가 커질 수록 전체 코드들이 Babel과 Terser과 같은 빌드 툴을 거쳐서 실제 프로덕션 코드로 변환되는 시간이 코드양에 비례해 늘어나게 된다. 빌드 시간이 오래 걸린다면 빌드를 할 때마다 그 시간을 기다려야 한다. 어떻게 빌드를 빠르게 할 수 있을까? NextJS에서 Next 12버전 부터 정식으로 도입된 SWC라는 툴이 있다. Next는 SWC로 구축된 새로운 컴파일러로 빌드하면 기존과 비교했을 때 빌드 타입이 5배까지 빨라진다고 소개했다. 이번 포스팅에서는 Babel과 Terser, SWC에 대해 알아보고, SWC가 왜 빠..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bmc6GK/btsGwQINN78/1ttZsyJgDmwheSrZalLHzK/img.png)
ref를 사용하고, 학습하면서 생각하게된 궁금점이 많았다.궁금점에 대한 해답을 찾으면서 학습한 내용을 정리해봤다. 🤔왜 ref를 props로 전달하면 안될까?useRef를 사용해서 자식 컴포넌트에 ref를 전달할 때 이렇게 코드를 작성할 수 있다.export default function MainPage() { const ref = useRef(null) return ( )}const ChildComponent = ({ ref }) => { useEffect(() => { console.log(ref) }, [ref]) return 하이}그러면 아래와 같이 경고문을 띄우게 된다.또한 undefined를 반환한..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bBngEn/btsGwilcgLR/lCanRykWqpZWTiMx4EnWm0/img.png)
React에서 제공되는 hook들이 있는데 이를 최대한 활용하는 것이 좋다고 개인적으로 생각한다. 특히 생소한 훅들이 몇몇 있는데 그 중에서 3가지를 가져와봤다. React 18에 도입된 새로운 기능인 useId와 useTransition,useDeferredValue 에 대해서 알아보자 📖useId https://react.dev/reference/react/useId useId – React The library for web and native user interfaces react.dev useId는 아래와 같이 사용한다고 한다. const id = useId() useId는 어떤 아이디를 생성하는 것으로 보인다. 그럼 useId를 실제로 console.log에 찍으면 어떻게 나올까? const ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bJIgGS/btsGreb6T74/d0HG062xKVBFifXzNSaHoK/img.png)
리액트의 특징 중 가장 많이 언급되는 것이 가상 DOM이라는 것이다. 하지만 이 가상 DOM에 대해서 자세히 모르는 경우가 많다. 이번 포스팅에서는 가상 DOM에 대해서 자세히 알아보려고 한다. 가상 DOM 생긴 이유? 가상 DOM은 왜 생겼을까? 가상 DOM 이전에 DOM을 먼저 알아보자 DOM이란 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 그럼 브라우저가 웹 사이트에 접근요청을 받고 화면을 그리는 과정을 살펴보자 CRP(Critical Rendering Path) 브라우저는 위 과정을 거쳐서 웹페이지를 렌더링 한다. 그렇다면 사용자의 인터렉션으로 업데이트가 된다면 어떻게 될까? 위처럼 자바스크립트가 DOM을 수정해서 업데이트가 발생한다..
우리는 리액트로 프로젝트를 개발할 때 객체 구조 분해 할당과 전개 연산자를 정말 자주 사용한다. 근데 이 객체 구조 분해 할당과 전개 연산자가 번들링 크기를 크게 만들어서 사용시 고려해야한다고 한다..! 나는 이 부분에 대해서 "왜 번들링 크기가 커지는 것이지?" 에 대해서 생각하게 됐고, "그럼 객체 구조 분해 할당이나 객체 전개 연산자는 사용하면 안되는거야?" 에 대해서 찾아보게 됐다. 발전해가는 Javascript 다른 언어와 마찬가지로 Javascript는 새로운 버전과 함께 새로운 기능이 나오고 있다. 이러한 Javascript 표준을 ECAMScript라고 한다. 그래서 작성하고자하는 자바스크립트 문법이 어떤 ECMAScript 버전에서 만들어졌는지 확인해야한다. 왜냐하면 모든 브라우저와 자바..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bHTCua/btsGehgogQ3/4EgpjMUalR141T5QKL7v8k/img.gif)
😁Modal 어떻게 만드니? Modal은 정말 많이 쓰이는 기능이다. 보통 다들 Modal 만들 때 어떻게 할까? 리액트로 Modal을 만든다고 하면 아마 아래와 같은 방법을 사용할 것이다. const Page = () => { const {isOpen, setIsOpen } = useState(false); return ( setIsOpen(true)}>모달 열기 {isOpen && ( 모달 테스트 )} ); }; 이렇게 간단하게 만들 수 있지만 단점이 존재한다. 렌더링 성능면에서 모달의 내용이 복잡하고, 빈번하게 열린다면 성능저하게 올 수있고, CreatePortal을 사용하지 않아 DOM 계층 구조에서의 위치문제가 생길 수있다.히 특히 Modal의 transition이나 애니메이션을 적용할 때 어려..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bjyT3W/btsGdZ7zPha/eLd0LgxKTwmYL2WO5q3Dh1/img.png)
useEffect의 의존성 배열의 경고로부터 매일 혼나다가 의문이 하나 생겼다. 먼저 아래 코드를 보자 useEffect(() => { setIsEmailDuplicate(true); setEmailDuplicateCheckMessage(''); }, [values.email, setEmailDuplicateCheckMessage, setIsEmailDuplicate]);실제 내가 사용했던 코드인데set함수가 useEffect내에 들어가 있고,set함수를 의존성 배열에 넣어줬다. 왜 set함수를 의존성 배열에 넣었어?의존성 배열에 넣으라는 eslint 경고가 떴다.근데 나는 이렇게 생각했다. set함수도 함수니까 의존성 배열에 넣으면 무한 반복 되는거 아니야?..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tv0ZB/btsGdE96i2P/6z9aLxqVFMweTOpuqQzvi1/img.png)
회원가입 페이지와 로그인 페이지를 만들면서 다양한 경험을 했다.form데이터를 관리하면서 중복되는 문제와해당 form데이터 마다 검증, 에러 메시지, 또한 의존되는 특정 form 데이터 등...이런 문제들을 어떻게 풀어갔는지 과정으로 설명해보려고 한다. 중복되는 Input 데이터와 Validation먼저 발견된 문제점은 이메일, 사용자 이름, 비밀번호를 입력하는 input이 동일한 기능과 validation을 갖고 있다는 점이었다.이 점을 염두해두고 개발을 시작했지만이메일, 사용자 이름, 비밀번호는 각각 다른 validation을 갖고 있고, onChange될 때마다 검증을 해야했으며이메일은 검증 후에 중복확인 API완료라는 조건이 있었고,비밀번호는 password와 confirmPassword 값을..