Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

리렌더링이 너무 많이 되고 있다는 내용이다. 리액트는 어떤 상황이서 렌더링 되는가? 1. state변경이 있을때 2. props가 들어올때 3. 부모컴포넌트가 렌더링 될때 4. 더있는데 아직 느껴본적 없어서 우선 위 세가지 에러를 만나기전 내 상황은 아래와 같다. 1. 로그인 확인을 위해서 리덕스 스토어에 저장한 isAuthenticated를 App.js에서 localstorage token유무에 따라 true, false를 dispatch를 통해 변경한다. 2. isAuthenticated를 필요한 컴포넌트들에 props로 보낸다. 깔끔하게 만들고 싶어서 App.js에서 필요한 곳에 props로 전송하자는 아이디어였는데 이게 문제였던것으로 보인다. 우선 props를 제거하고 필요한 컴포넌트에서 각각 리..

→2022.10.09

웹 프로그래밍

Django admin 로그인 시 Forbidden (403) CSRF verification failed.

superuser 생성 후 /admin에 접속하여 로그인을 시도하던 중 CSRF 문제로 보이는 에러가 발생하였다. 이는 Django 4.0 이후 바뀐 내용으로 settings.py에 CSRF_TRUSTED_ORIGINS 설정을 추가해주면 해결된다. https://stackoverflow.com/questions/70285834/forbidden-403-csrf-verification-failed-request-aborted-reason-given-for-fail Forbidden (403) CSRF verification failed. Request aborted. Reason given for failure: Origin checking failed does not match any t Help Rea..

→2022.09.16

웹 프로그래밍/자바스크립트 기초

[JS] alert, prompt, confirm

alert alert('test'); 모달창을 띄운다. prompt let result=prompt('나이', 23); alert(`나이:${result}`); 나이: 사용자에게 보여줄 문자열, 23: 입력필드의 초깃값 confirm let a=confirm('이건 확인취소버튼있음'); 확인누르면 True, 취소누르면 False를 반환한다.

→2022.02.03

웹 프로그래밍/CSS

text-overflow: ellipsis가 적용되지 않는다면?

먼저 확인해보자. display: block인가? width가 명확히 지정되었는가? 글자가 width를 넘어간게 맞는가? 1. display: flex에서는 적용되지 않는다. 2. 아래를 세트로 같이 줘보자. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow text-overflow - CSS: Cascading Style Sheets | MDN The text-overflow CSS property sets how hidden overflow content is signaled to users. It..

→2021.10.28

웹 프로그래밍/CSS

flex안의 요소가 눌리는 현상

flex에서 아이템은 width값을 주어도, 화면이 줄어들면 width를 무시하고 줄어든다. 브라우저 가로 길이를 줄이면 박스가 알아서 줄어드는 것을 확인할 수 있다. 이는 flex-shink의 기본값이 '1' 줄어듦이기 때문이다. 크기를 유지하고 싶다면 0을 사용해야한다. flex-shrink: 0; 을 추가해주었더니 해결되었다. flex-shrink: 0;

→2021.10.28

웹 프로그래밍

사파리에서 발생하는 ajax와 XHR의 에러콜백

문제상황: 사파리브라우저에서 대회공모전 탭으로 이동시 XHR의 에러콜백이 발생하는 것을 확인하였다. 이는 대회공모전 신규생성시 붉은 점으로 표시되는 기능을 구현하기위해 만들어둔 manageNotification()에서 발생한 것이었다. 원인을 요약하자면 a tag에 ajax를 호출하는 것이 좋은 행동이 아니라고한다. 일부 브라우저는 이것을 막기도하는데 사파리 브라우저가 그 일부브라우저인것같다. 해결후 글을 추가하겠다. https://okky.kr/article/897149 OKKY | safari ajax요청의 문제 버튼 클릭 이벤트시 $.ajax 비동기 데이터요청을 할때 request가 되고 에러를 반환하지만 데이터는 제대로 저장됩니다 하지만 사파리브라우저에서만 success 콜백이나오지않고 error..

→2021.10.27

웹 프로그래밍

[Django] 단체메일 전송하기

홍보메일같은걸 보내고 싶어서 만들었다. 늘그렇듯 한번에 못하고 뻘짓을 좀했는데 여러개 거칠거없이 save()함수를 이용하면 된다는 깨달음을 얻었다. 제목과 메일내용을 담은 모델이 저장되면 저장되는 과정에서 모든 사용자에게 메일을 전송한다. models.py class AdvertiseMail(models.Model): date = models.DateTimeField(default=timezone.now) subject = models.CharField(max_length=100) mail = models.TextField(blank=False, null=True) send_it = models.BooleanField(default=False) def save(self): if self.send_it: ..

→2021.10.25

웹 프로그래밍

[Django & Ajax] 실시간 채팅 구현

남들이 해놓은걸 보고 만들어볼 계획이었는데 주어진 시간에 비해 너무 어렵다. 조잡해질까봐 걱정이 되긴 하나 그렇게 복잡하지 않을 것 같아 그냥 직접 구현해보려한다. 어떻게 구현해야할까에 대한 고민 기왕이면 그나마 친숙한 Ajax를 이용하려한다. 대략적인 생각은 다음과 같다. ajax로 채팅내용을 뿌려주는 함수를 구현해놓고 일정주기로 함수를 호출해서 화면을 재구성하는 방식이다. 일정주기로 계속 호출을 한다는게 마음에 걸려서 다른 방식이 없을까 조사를 해봤는데 웹소켓말고 ajax를 이용하는 방식내에서는 어쩔 수 없는거같다. setInterval() https://developer.mozilla.org/en-US/docs/Web/API/setInterval setInterval() - Web APIs | MD..

→2021.10.24

웹 프로그래밍

[django] 다음글 or 이전글로 넘어가기 구현

팀찾기나 팀원찾기, 대회및 공모전의 detail 페이지 내에서 빠져나가지 않고 버튼을 눌러 다음 카드로 넘어갈 수 있게 하고 싶었다. 현재 URI는 /teams// 나 member/detail/ 이런식으로 만들어져 있다. 처음엔 단순히 pk+1, pk-1이런식으로 페이지를 넘길수 있게하면 되겠다 생각해서 쉽게 생각했는데 삭제된 글이 있다면 중간에 pk가 연속적이지 않을 수도 있고 팀원찾기의 경우엔 slug로 만들어놔서 그 문제도 있었다. 어떻게 할것인가? 글의 목록을 리스트로 받아오고, 현재 위치한 글의 인덱스를 찾은 다음 pk가 아닌 인덱스 번호를 움직여 페이지를 리다이렉트시킬 수 있게하면 될 것 같다. custom_tags.py 나 views.py에서 구현하면 될 듯. 시간될 때 구현하고 이어서 작성..

→2021.10.19

웹 프로그래밍

[Django Error] circular dependency

ImportError: cannot import name 'User' from partially initialized module 'accountapp.models' (most likely due to a circular import) Circular dependency 코드가 점점 커지다 보니 의존성문제가 발생하기 시작했다. models.py 사이에서 import로 얽힌 연관성이 무한하게 반복된 것이다. django가 import를 무한하게 반복하게 되어 발생하는 문제다. 특히 foreign key 관계에서 자주 발생한다. 예를 들어 방금의 경우엔 from accountapp.models import User 여기서 에러가 발생했다. 이런경우엔 지워주고 import accountapp 만 해준후에 원래..

→2021.10.18

티스토리툴바