Dev log
1. axios.delete(url[,config])
오늘 겪었던 문제중에 서버에 아무리 요청을 해도 상태코드 500 에러가 나거나 400 에러로 delete 요청이 200으로 응답되지 않았다. 문제는 post와 delete를 조건에 따라서 다른 요청을 보내는 함수라서 axios로 요청했는데 post는 요청이 제대로 이루어졌는데 delete는 요쳥이 제대로 응답되지 않았다. 이리저리 찾아봐도 알 수 없었다. 문법의 차이때문인지 고민하고 있었다. 그러다가 팀원께서 delete가 post와 다른 방식으로 요청을 한다는 것을 알려주셨고 비교해보니 약간 다른 문법으로 보내는 것을 알 수 있었다.
axios.post('api 주소',
{
username: 'user1'
}, {
'content-type': 'application/json',
withCredentials: true
})
axios.delete('api 주소',
{
data: {
username: 'user2'
},
'content-type': 'application/json',
withCredentials: true
})위 아래의 차이점이 data에 묶어서 보낸다는 것이다. post는 주소, 바디, 헤더의 순서였다면 delete는 주소, (헤더 + 바디)의 구성으로 요청을 보낸다. 이 차이는 정말 알기 어려웠다. 용법을 봐도 잘 이해되지 않았었다. 저렇게 바꾸면 API 문서도 서버의 요청 코드도 바꿔야 하는 부분과 post는 잘 작동하는 문법을 고집하다보니 더 다른 방법은 눈에 들어오지 않았다. 새로운 것을 찾을 때 원하는 답을 정해놓고 찾으면 안되겠다고 생각했다. 생각보다 모르는 것을 검색할 때에도 내 생각이 정말 많이 들어있다는 것을 알았다. 경우에 따라서는 그 생각으로 해결책을 보고도 사용하지 못하는 경우가 있었다. 좀 더 생각을 유연하게 가질 필요가 있고 모르는 부분도 조금 더 자세히 읽어가면서 해결책을 찾는 습관을 길러야겠다.
2. CSS hover
hover에 대한 부분도 오래걸렸다. hover를 가끔 사용하긴 했지만 잘 알고 있지는 못했따. 그런데 이번에 데이터를 서버로부터 응답받아서 그 자료를 map으로 랜더링 한 버튼 내용을 랜더링한 값에 따라 다른 호버를 적용하고 싶었다. 적용하고 싶은 효과를 찾아봤다. 내용 값을 바꾸는 선택자 { content:"11"; } 이런 방법으로 내용을 바꿀 수 있었다. 그런데 조건을 어떻게 부여해야 할지는 감이 잡히지 않았다. 그래서 조건을 어디에 붙여야 할지 몰랐다. 그러다가 예전에 classname에 조건을 부여해서 분류된 조건들로 다른 클래스를 적용하게 되어 다른 CSS 효과를 적용했었던 기억이 나서 그것과 hover를 섞어서 사용해봤다. 결국은 이 방법으로 구현을 했지만 더 세련된 방법이 있지 않을까 생각했다.
userlist.map((user, index) => {
return (
...
<button className={`follow-btn ${user.following === 'me' ? 'me' : user.following === true ? 'Follow' : 'Unfollow'}`} onClick={() => followHandler(user)} >
<span className="follow-state">{user.following === 'me' ? 'me' : user.following === true ? 'Not followed' : 'Following'}</span>
</button>
...
)Follow:hover span,
.Unfollow:hover span,
.me:hover span {
display: none;
}
.Follow:hover::before {
content: "Follow"
}
.me:hover::before {
content: "나?"
}
.Unfollow:hover:before {
content:"Unfollow"
}여기서 특정조건에 따라서 className을 두고 그 className에 CSS로 hover를 적용하면 같은 엘리먼트로도 다른 hover 효과를 적용할 수 있었다. 이 방법을 찾을 때도 위 처럼 특별한 방법이 있기를 기대했던 모양이다. 좀 더 모든 방법을 잘 찾아서 잘 살펴봐야겠다. 검색하고 찾는데 시간이 정말 오래걸려서 걱정이다.
3. token & Oauth
토큰 인증 방식과 Oauth 둘 다 적용해서 사용하려고 하는데 두가지를 동시에 구현하는 것이 어려웠다. 토큰이 있지만 유효하지 않다고 하거나 토큰이 응답되지 않는 경우도 있었다. 잘 보냈다고 생각했는데 에러로 처리되는 일이 많았다. 로직이 복잡하면 복잡할 수록 찾아가기가 어려워서 log를 확인하는데 시간을 보냈다. 한참을 봐도 잘 모르긴 했었지만 그래도 조금씩은 보였다. 좀 더 에러 로그에 익숙해져야 되는데 아직은 콘솔로그에 더 익숙하다. 콘솔도 잘 쓰고 에러도 잘 볼 수 있게 더 에러를 잘 살펴보는 습관을 길러야겠다. token과 Oauth는 나중에 한번 더 자세히 공부해봐야겠다.
4. 팀원들과의
팀원들이 오늘은 많이 힘들어 했다. 서버가 작동하지 않았던 부분에서 모두가 같이 에러를 잡으려다보니 해결되지 않는 시간이 길어지면 길어질 수록 힘이 빠지고 다른 작업할 일이 남아있는 팀원들은 집중력이 떨어질 수밖에 없었다. 찾으려고 애쓰는 사람이 있어서 나갈 수 없던 애매한 상황이 지속되었다. 중간에 잘 마무리 하긴 했지만 이런 상황도 생각해서 적당한 시간에 회의를 하고 같이 의견을 나누는 시간을 조절해야겠다. 점점 회의를 하는 시간이 지겨워지지 않도록 해야 생산성이 좋은 회의가 될 수 있다고 생각하기 때문이다. 앞으로는 이런 부분을 많이 신경써야겠다.
