일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- qwe
- imagePreview
- Redux
- route
- 개발
- CI/CD
- 채팅방
- S3
- 접근 제한 라우팅
- 7기
- rendering
- 비동기
- 미리보기
- 브라우저 렌더링
- 스파르타코딩클럽
- 라우팅
- updater
- useEffect
- 후기
- setstate
- FileReader
- Preview
- 항해99
- routing
- react
- socket.io
- 동기
- Github Actions
- 배포
- previousState
- Today
- Total
목록React (14)
삐옹
현재 상태 게시물 등록을 위해 유저가 기입해야하는 정보들을 Writepost 페이지 내에서 state로 모두 받아오는데 성공. 하고싶은 것 redux를 이용해 state를 관리하면서 firebase에 저장된 게시글 데이터를 화면에 뿌려주기. 해야할 것 state로 관리 중인 유저의 기입 정보들을 전역 상태관리를 위해 Redux를 쓴다. addDoc을 이용해 state를 적절한 doc에 추가.(firebase) usedispatch hook을 이용해 화면에 docs 뿌려주기.(firebase) 시도한 것 고민할 것 redux를 무조건적으로 지양하는건 또 좋지 않다고 하던데. 아마도 props에 의한 데이터의 이동이 별로 없을 땐, 굳이 redux를 쓰지 않아도 괜찮다는 말 같다.(팩트 확인 요망) 그래서 ..
주의 이 글을 함수형 컴포넌트 + react hook API를 기반으로 작성했습니다. HOOK class형 컴포넌트로 작성하지 않고 state와 다른 react기능들을 사용할 수 있게 해주는 기능. State : 상태값이 저장된 변수 useState : state 변수와 state 변수를 변경하는 함수를 반환 Side effect(effect) : 화면이 렌더링 된 이후에 처리되어야 하는 부수적인 것들. 예) API 호출 : 요청 즉시 1차 렌더링 함으로써 UX 측면에서 좋다 종류 정리가 필요한 것 정리가 필요하지 않은 것(network request, DOM 수동조작, 로깅 등) useEffect useEffect의 기본 형태입니다. useEffect(() => { // 여기에 렌더링 이후 실행할 ef..
두 개의 다른 애플리케이션 개발 방식인 SPA와 MPA의 차이점에 대해 정리했다. SPA vs MPA MPA(Multiple Page Apllication)는 화면이 여러 개(Multiple)로 이루어진 페이지입니다. SPA(Single Page Application)는 화면이 하나(Single)로 이루어진 페이지입니다. MPA는 새로운 페이지를 요청할 때마다(버튼을 누르거나 입력을 할 때) 매번 페이지 로딩이 이루어집니다 반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스(html,css,js)를 최초 렌더링 때 다운 받습니다. 그 이후로 새로운 페이지를 요청이 있을 때, 페이지 갱신에 필요한 데이터만 서버로 부터 받아옵니다. 그렇기 때문에 MPA를 SSR(Server Side Rendering)..
Javascript와 React는 DOM에 접근하는 방식이 조금 다릅니다. 차이를 먼저 알아보겠습니다. vanilaJS javascript에서 DOM 엘리먼트를 수정하려는 경우엔, 해당 DOM을 지정하기 위해 *선택자를 사용합니다. /* 안녕하세요 */ // 예시 const myElement = document.querySelector('#my-id'); myElement.style.color = 'yellow'; 하지만 vanillaJS와는 달리 react에서는 특정 DOM을 직접적으로 수정해야 하는경우 ref를 사용합니다. *선택자 document.getElementsById() document.querySelector() document.querySelectorAll() ... React ref를 ..