라쿤의 끄적끄적

submit 처리시 laoding modal 구현하기 submit을 보내는 경우 큰 이미지 파일을 올리거나 할때 처리 시간이 조금 걸리기 때문에 사용자에게 처리하고 있음을 알려줄 필요가 있다. 기존의 init load Component를 재활용 해서 사용하였다. 하지만 그전과 다르게 modal적인 요소를 넣어 현재 화면에 띄우는 형식으로 만들었다. component 넣기 기존 화면인 home route 또는 profile route 아래에 modal이 동작하는 것과 같이 추가하였다. 그리고 state를 변경하는 것은 글작성, profile update 하는 submit에 추가함으로서 보이거나 안보이게 할수 있도록 하였다. // Home component , profile component 하단에 추가 c..

proifle 반영 기능 개선 문제점 병렬처리를 하였지만 비효율적으로 사용하고 있음 (동시에 두가지 photo , display update시 모두 변경시 속도지연과 setUpdate함수 호출의 순서 때문에 rerender시에 반영이 안되게 보이는 것들이 있음) forEach의 경우 병렬 처리하여 안에서 await로 순서처리 시켜도 넘어가 버림 그래서 setUpdated를 너무 빨리 하는 문제가 생김 중복되는 코드가 많아짐 Rerendering 타이밍 문제, 병렬 효율적으로 사용하기 참고한 사이트 [번역] async/await 를 사용하기 전에 promise를 이해하기 by kiwanjung MDN : promise.all() 배열에 비동기 작업을 실시할 때 알아두면 좋은 이야기들 by hanameee ..

Img Error 처리 img를 가져오는 경우 보통 src로 img url 또는 server에 존재하는 경로를 연결하곤 한다. 이번 프로젝트의 경우에는, img를 Data URL 형식으로 가져오게 된다. 그러다 보니 URL이 옳지 못하거나, 더이상 web에 올려지지 않아 있는 경우 img를 로드 하지 못하고 흔히 말하는 엑박이 뜨게 되는 것이다. (alt 속성으로 지정한 이름이 뜸) 이 프로젝트의 경우 firebase의 storage에서 의도치 않게 img file이 지워져서 더이상 url을 load못하게되는 경우 어떻게 엑박을 안뜨게 하고 자연스럽게 user 화면을 표시할 것인가에 중점을 두고 있다. 방법 img 태그의 onError 속성 사용 HTML 에서는 onerror React(JSX)에서는 o..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더 수업을 거의다 듣고 CSS 작업은 내가 하고 싶은 대로 하고 있음, 트위터 수업이지만 instagram으로 만들고 있음 CSS : 반응형 웹 Navigation bar 반응형으로 만들기 justify-content: space-between 값을 적용시켜서 브라우저 크기가 작아져도 각 아이템은 좌우로 붙어 있는 상태를 유지하면서 작아지게 됨 글상자 img 비율 유지하는 반응형으로 만들기 width: 100%로 주고, heigth: fit-content으로 주어 img비율을 유지하게 함 그리고 min-width, max-width를 주어서 적당히 크고 작게 변화줄수 있게 해줌 CSS : Profile Update 버튼 형으로 만들기 설명 pro..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더 수업을 거의다 듣고 CSS 작업은 내가 하고 싶은 대로 하고 있음, 트위터 수업이지만 instagram으로 만들고 있음 CSS 작업 및 react code 수정 1. 일단 예전에 작성했던 문제점인 menu icon 밀림 현상을 해결하였다. "20210416 글에서" creator 이름 길어지면 margin으로 설정했기 때문에 menu 버튼이 밀림 (header position fixed 때문에 영향을 받아서 margin으로 했는데 다시 손봐야 함) -> stacking 문제인 듯 MDN: stacking_context 해당 작업의 경우에는 position fixed가 필요 없이 단순하게 position absoulte로 해결 하였음(왜 abs..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. useEffect error Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup 참고한 사이트 : router 이동시 메모리 lack 에러 (by 기억보다 기록을) 참고한 사이트 : 리액트의 Hooks 완벽 정복하..