[WIL] 실전 4 주차 트러블 슈팅
T1. 작성 중 값 유지하기
1. 유저가 게시글 / 프로필을 작성 중 새로고침을 했을 때, 작성 중이었던 내용이 그대로 남아있어야 하는가?
=> 처음엔 당연히 남아있어야 된다고 생각했다. 새로고침을 했을 때 썼던 내용이 날아가버리면 유저 입장에서는 처음부터 다시 써야 하는 번거로움이 있기 때문이다. 하지만 중간발표 당시 튜터님께서 '새로고침을 하는데 값이 남아있는 것도 이상하지 않느냐'라는 말에 일리가 있다고 생각이 들었고 우리와 비슷한 사이트들을 찾아보다 보니 다수가 새로고침 시 값을 유지시켜주지 않는다는 것을 확인할 수 있었다. 그래서 우리 페이지에도 작성 중 새로고침시에는 '새로고침을 하면 내용이 저장되지 않는다.'라는 경고창과 함께 작성 첫 번째 페이지로 이동시키는 방법을 택했다.
+) 참고로 앱에선 새로고침을 막아버렸다.
[해결 방법]
▶ 새로고침 시 페이지 이동 방법
//새로고침 시 작성 첫 번째 페이지로 이동
if (document.readyState === "interactive") {
window.onbeforeunload = function () {
return "새로고침 경고";
};
history.replace("/signuploca");
}1. document.readyState
: 현재 페이지의 로딩 상태를 알려주는 프로퍼티
=> 처음 로드됐을 땐 complete가 뜨고 새로고침 시에는 interactive가 찍히는 것을 확인해 interactive일 시엔 history.replace로 첫 번째 작성 페이지로 보내주었다.
"loading" – 문서를 불러오는 중일 때
"interactive" – 문서가 완전히 불러와졌을 때
"complete" – 문서를 비롯한 이미지 등의 리소스들도 모두 불러와졌을 때
2. window.onbeforeunload 이벤트
: 사용자가 현재 페이지를 떠나 다른 페이지로 이동할 때 혹은 창을 닫을 때 추가 확인 경고창을 띄울 수 있다. (return 값으론 false 혹은 문자열이 올 수 있다)
+) 원래는 return 후 써주는 값에 따라 경고창을 customizing 해줄 수 있었으나 몇몇 사이트 관리자들의 onbeforeunload 남용으로 현재는 막힌 상황이라고 한다. 그래서 이젠 아래와 같은 고정된 경고창만 뜬다.
▶ 폰에서 새로고침 막기
//앱에서 페이지 새로고침 막기
document.body.style.overscrollBehavior = "none";1. document.body.style.overscrollBehavior
: 폰에서 화면을 위로 당기는 행위를 인식하는 프로퍼티.
=> 폰에서는 유저가 위로 화면을 당기면 새로고침이 된다. 그래서 위와 같이 위로 화면을 당기는 것 자체를 막아버렸다.
2. 여러 페이지에 걸쳐 작성할 경우 뒤로가기 클릭 시 작성했던 내용이 남아있어야 하는가?
=> 새로고침과 달리 뒤로가기 시에는 값이 남아있어야 된다고 생각했다. 그래야 유저가 작성 중 이전 페이지에서 작성한 내용을 수정할 수 도, 최종적으로 제출 전에 본인이 쓴 내용들을 다시 확인해 볼 수 도 있다고 생각했기 때문이다.
그래서 처음엔 'Link to'를 활용해 state값을 전달시켜 마지막 작성 페이지에서 백으로 데이터를 전송해줬으나 이럴 경우 이전 페이지에서 값이 남지 않아 이전 페이지 값 유지를 위해 데이터들을 localStrage로 저장하는 방식으로 바꾸었다. 또한 보안과 다른 페이지에서의 혼선을 막기 위해 최종 작성 버튼, 새로고침 시, 첫 번째 작성 페이지의 뒤로 가기 버튼에는 로컬에 저장된 값들을 전부 없애 주었다.
[해결 방법]
//기본 형식
localStorage.setItem("key", value)
//로컬 값 저장
localStorage.setItem("nickName", nickName)
//로컬 값 가져오기
localStorage.getItem("nickName")
//로컬 값 삭제
localStorage.removeItem("nickName")
//로컬에 객체 or 배열로 값 저장
localStorage.setItem("nickName", JSON.stringfy(nickName))
//로컬에 객체 or 배열로 값 가져오기
JSON.parse(localStorage.getItem("nickName"))
3. 이미지 파일이 로컬에 들어가지 않아..!
=> 2번의 문제를 해결하다 보니 localStorage에 이미지 파일이 들어가지 않는다는 것을 깨닫았다. 처음엔 이미지 파일이 객체니 객체 형식으로 로컬에 넣어주려 했지만 계속해서 빈 값만 들어갔다. 아무리 찾아봐도 방법을 찾을 수 없었고 보안상 이미지를 로컬에 넣는 게 좋은 방법은 아니라는 글도 보게 되어 그냥 이미지만 백엔드로 따로 보내주는 API를 짜서 해결하였다.
T2. Input 창에 숫자만 들어가게 설정
1. input의 type 설정
=> input에 숫자만 들어가게 하기 위해 type을 number로 지정해주었다. 그리고 이중으로 pattern에 한글은 들어가지 않도록 정규식을 써주었다. 또 타입을 넘버로 지정해줄 경우 종종 spin button이 생기는 경우가 있고 그 버튼을 누르면 숫자가 -가 되는 현상이 발생하는데 이럴 경우엔 min='0'으로 최솟값을 정해주거나 spin button 자체를 없애버리면 된다.
2. 한글의 자음 or 모음이 들어가는 현상
=> 숫자로 설정을 해줬음에도 불구하고 자꾸 한글의 자음 or 모음이 한글자씩 쳐지는 현상이 발생했다. 정말 할 수 있는 다양한 숫자 설정 방법을 시도했으나 이 부분은 여전히 해결하지 못해 방법을 찾는 중이다.(해결! 3번문항)
3. 정규식을 활용해 2번 문제 해결!
=> 어떤 규칙과 조건을 걸어주어도 계속해서 들어가졌던 한글 자음 or 모임을 정규식을 활용한 유효성 검사를 통해 해결했다! (드디어ㅜ). 보안을 위해 유효성 검사를 모두 적용해주던 중 계속 나이 부분을 input type='number'로 설정했던 걸 바꿔보자 싶어 type='text'로 변경 후 다른 입력창 유효성 검사처럼 정규식으로 숫자만 들어가게 하니 한글의 자음/모음도 아예 안쳐졌다..! 야호ㅜ
[해결 방법]
▶ input창에 숫자만 입력 2가지 방법(한글의 자음/모음이 한 글자 씩 쳐지는 문제 발생)
//1. input type='number'
<Age
type="number"
placeholder="나이"
onChange={selectAge}
value={age || ""}
/>
//2. js로 숫자만 입력
function Number(event) {
if (event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
}
}
<Age
type="number"
placeholder="나이"
onChange={selectAge}
onkeypress={Number}
value={age || ""}
/>
▶ spin button 없애기 or - 값 안 들어가게 하기
//1. spin button 없애기
<Age
type="number"
placeholder="나이"
onChange={selectAge}
value={age || ""}
/>
const Age = styled.input`
::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
`;
//2. - 는 안나오게 하기 => 최소값을 0으로 지정하자
<Age
type="number"
placeholder="나이"
onChange={selectAge}
value={age || ""}
min='0'
/>
▶ 정규식을 활용한 유효성 검사 적용
const onlyNum = /[^0-9]/gi;
const selectAge = (e) => {
//글 수 제한
if (e.target.value.length >= 3) {
e.target.value = e.target.value.substr(0, 3);
}
//정규식 설정 값 외에는 아예 안쳐지도록 ''로 대체!
setAge(e.target.value.replace(onlyNum, ""));
};T3. 글자 수 제한 경고창 모달로 띄우기
1. 글자 수 제한을 걸어줬는데 모달 창이 나타나지 않앜!
=> 글자 수가 100이상이 되면 경고 모달창이 뜨게끔 설정을 했는데 뜨지 않고 오히려 에러가 터져서 왜 그런지 한참을 생각하다가 글자수를 인식하는 state값이 변하는걸 계속 렌더링하며 인지되어야 하는 상황임을 뒤늦게 깨달았다...ㅎ
그래서 단순 if문으로 써줬던 글자수 제한 코드를 useEffect안에 didupdate를 하여 바꿔주었더니 해결되었다.
[해결 방법]
//글자수 100글자 제한
useEffect(() => {
if (content?.length >= 100) {
setIsOpen2(true);
}
}, [content]);
[협업; 위기를 기회로]
이번 주는 협업의 기본 전제에 대해 많이 생각해보는 한 주였다.
시작은 팀원들의 제각기 다른 생활습관..이라 추측해본다. 어떤 팀원은 밤에 작업을 주로 하고 어떤 팀원은 낮에 하다 보니 기존 진행되던 9시 회의에 참여하는 팀원들이 점점 줄어들면서 점점 팀원들끼리 소통이 어려웠다.
한동안은 게더에 들어가면 다른 팀원이 뭘 하고 있는지 바로 파악이 안 되어 직접 한 명 한 명 물으러 다녔어야 했다.
또 마찬가지로 생활 습관 때문에 낮에 게더에 들어와 있지 않은 팀원들도 있어 무슨 문제가 생기거나 함께 해결을 해야 하는 부분의 경우 해당 팀원의 부재로 진행이 빨리빨리 되지 않았다. 이러한 상황이 며칠간 이어지니 너무 큰 답답함을 느끼게 되었고 다른 팀원들에게 조심히 물어본 결과 다른 팀원들도 비슷한 생각을 가지고 있다는 것을 알게 되었다.
이대로는 프로젝트가 제대로 마무리되지 않을 거라는 불안감이 들어 조심스레 다른 팀원들에게 내가 느낀, 그리고 모두가 느끼고 있는 문제에 대해 언급하였고 부팀장의 결단으로 프로젝트 중간발표 이후 바로 이에 대해 회의를 하는 시간을 가졌다. 제일 먼저, 서로 아쉬웠던 점, 사소한 불만들을 바탕으로 처음 정했던 규칙들을 재정립하였다. 제대로 된 협업을 위해 9 to 9은 무조건 게더에 나와있기, 매일 아침 9시 회의에 모두가 참여해 본인의 스케줄을 공유하기, 노션에 매일 본인의 진행상황을 업데이트시켜놓기, 회의시간에는 딴 얘기 하지 말기 등 사소한 것 하나하나 다시 정했다. 그리고 이 모든 규칙들이 잘 유지되도록 팀원들끼리 서로 다짐을 했던 것 같다.
사실 체계라는 것이 아무리 규칙을 정한다 한들 한 명, 두 명 안 지키다 보면 무너지기 너무나 쉽다. 프로젝트 후반부를 달려가는 무렵, 모두가 너무나 지치고 힘들고 사소한 것에 짜증이 날 수도, 충분히 예민해질 수도 있지만, 우리 팀은 위기를 기회로 삼은 것 같다. 이번 회의 이후 프로젝트는 훨씬 매끄럽게 진행되었으며, 더 이상 소통 문제에 대해 스트레스받지 않아도 되었고, 원팀이라는 생각도 더 들게 되었다. 이번 일을 겪으며 '정말 어디에서든 이와 같은 문제가 일어날 수 있겠구나..' 하는 생각이 들었다. 다만 이런 문제가 발생했을 때 어떻게 대처하느냐가 정말 중요하다는 것을 새삼 느꼈다. 이번 일을 계기로 협업에 있어서 소통과 체계의 중요성을 다시 느끼게 되었고 팀원 모두가 협업에 대해 한 발짝 더 성장하지 않았을까 생각이 든다.
[참고 사이트]