오늘의 error "parseerror" 발생현황 세션을 인식하고 DB에 회원정보를 업데이트 하는 코드에 문제가 생겼다. 사용자가 로그인을 하자마자 세션 값을 iframe에 넘겨주지 않기 때문에 값이 없어 DB에 undefined가 발생했다. 세션이 있을 때만 해당 업데이트 함수를 실행하도록 위치를 바꿔 주었는데 에러가 발생했고 확인해보니 jqXHR에 "parseerror" 라는 메시지가 떴다. 이 오류를 겪는 대부분의 사람들이 말하는 것은 dataType 오류라는 것. 위의 오류 메시지를 봐도 status는 200인데.... 그래서 ajax에 dataType을 추가해주니까 ajax에서 에러를 받아오지는 않았다. jQuery.ajax({ url: `주소` , type: "GET" , processData..

회사에서 만든 커뮤니티의 이미지 업로드 스펙을 계속해서 변경해왔다. 최초 개발은 외주로 진행했는데 대부분의 스펙을 기존 리뷰 페이지의 스펙을 가지고 와서 개발을 했다. 그런데 사용자 경험 상 이슈가 다양하게 발생하여 현재 커뮤니티 이미지 업로드 문제에 오래 매달리고 있는데, 현재 진행하는 이미지 리사이징 프로젝트에 대해서 기록하려고 한다. 최초 개발 1MB 제한으로 4개까지 업로드 할 수 있도록 제한 / 1개씩 개별 선택 ▶ 최초 개발 시 서버 용량과 로딩 속도에 대한 이슈로 1MB 제한을 걸어두었다. ▶ 모바일에서 바로 업로드 할 경우 이미지 업로드 시 하단의 크기 선택을 이용해 사용자가 직접 크기를 줄이지 않는 이상 1MB 이내로 커뮤니티 이미지 업로드 불가 ▶ 이미지 용량이 생각보다 커서 1MB 제..

오늘의 error Uncaught SyntaxError: Unexpected token u in JSON at position 0 발생현황 sessionStorage에 있는 값 받아 사용하기 위해 JSON.parse 하였으나 해당 오류 생성 해결 1. 오타 있는지 확인 2. sessionStorage 가 정상적으로 받아와졌는지 확인 - 나의 경우 iframe에서 session을 사용하면서 세션을 끊어버림... 크롬에서 로그인시 세션 만료 에러 (iframe 때문?) 크롬의 행보와 매번 부딪히게 되네요.. 크롬이 http 를 지양하고, https 를 지향한다는 것은 이미 알려진 사실이구요. 최근에 크롬이 CSRF 를 이유로 iframe 을 사용할 때 세션을 끊어먹는(실제로는 쿠 jsp-making.tist..

UI 라이브러리를 만들면 가져다 쓰면 되겠지만... CSS로 만드는 것도 어렵지는 않다. 특정 부분에 마우스 오버 (롤오버, hover) 하면 툴팁박스가 나오는 간단한 예제. HTML 속성으로 사용할 수도 있지만 커스텀이 필요한 경우 만들어 쓸 수 있다. 삼각형은 이미지로 붙여도 되고, 가상요소 (::after, ::before) 를 이용해도 된다. 아래 code sandbox를 참조 👀 HTML 삽입 미리보기할 수 없는 소스

리스트를 드래그 해서 인덱스 순서를 바꿔주는 작업을 하고 있는데 드래그 해서 내려 놓으면 배열 내의 특정 값들을 바꿔주는 작업은 완료했다. 여기에서 자동으로 인덱스를 sorting 해주기 위해서 useEffect에 객체의 key 값으로 오름차순 sorting을 해주려고 한다. 내가 만든 배열 내 객체는 다음과 같다. [ { "goal_id": 0, "next_goal_id": 1, "title": "첫 번째 목표", "privacy": "PUB", "box_color": "", "title_color": "#3CB371" }, { "goal_id": 1, "next_goal_id": 2, "title": "두 번째 목표", "privacy": "PRI", "box_color": "", "title_col..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. 할 일 클릭 시 등장 모달 이제 뿌려진 할 일을 클릭하면 5개의 버튼이 있는 모달창을 띄워야 한다. 이 모달은 해당 할 일의 정보를 변경해주는 기능을 한다. 목표 설정할 때 썼던 MUI Dialog UI를 쓸까도 생각했는데 단순한 버튼만 있으면 되어서 이번에는 Modal을 적용해보았다. 원본과 비슷한 사이즈로 모달의 컨테이너와 버튼을 구현했다. {/* 모달 생성 */} export function TodoModal (props..