오늘 알고리즘은 의아했습니다.물론 제가 개념을 완벽히 몰라서 이해하지 못한거겠지만 말이죠.문제 설명주어진 문자열에서 같은 두 문자 사이에 있는 문자열의 길이를 리턴하는 문제였습니다.같은 두 문자열이 없다면 -1을 리턴하고!첫번째 답안/** * @param {string} s * @return {number} */var maxLengthBetweenEqualCharacters = function(s) { let num = -1; for(let i=0; i보이..십니까?저는 해당 코드를 작성하고 무조건 됐다! 라고 생각했습니다.하지만 테스트 결과 Wrong Answer를 보게 되었는데요.같은 두 문자가 존재할 땐 테스트 케이스가 pass지만,중복되어지는 문자가 없을 땐 문자열의 끝에 있는 알..

/** * @param {number[]} nums * @param {number} k * @return {number} */var smallestRangeI = function(nums, k) { if(nums.length === 1) return 0; const min = Math.min(...nums); const max = Math.max(...nums); return Math.max(0, max-min-2*k); }; 풀이 과정max-min 의 현재는 10인데 k를 사용해 8로 만들어야했다.1차 답으로 max-min-k-2로 값을 구하려고 했으나 오답이었고,2차 답으로 max-min-2*k로 값을 구하려고 했으나 음수가 나오게 되며 오답이었다.2차 답에서 ..

프로젝트 진행 중 동료 개발자분이 특정 조건에 대하여 삼항 연산자를 즐겨 사용하시는 것을 느꼈는데요.하지만 특정 상황에서의 삼항연산자는 제가 보기가 불편했습니다. 그 이유는 두 개의 조건에 대응한 조건문이 삼항 연산자인데, 세 개의 조건에 대응하여중첩 삼항연산자를 사용하셨기 때문인데요.이에 대해 언젠간 팀원분과 이야기를 나눠보고 싶었고, 팀 컨벤션을 만들어가는 과정에서중첩 삼항 연산자 사용에 애착을 가지셔서 블로그에만 저의 방법을 기록해 봅니다. 제시 조건 01. 함수로 만들어 처리하자처음 제시했던 방법입니다. 일반 삼항 연산자라면 몰라도 중첩 삼항연산자라면 차라리 함수를 생성해내부에서 if 문으로 분기 처리하는 것이 가독성이 좋아 향후 유지보수에 유리할 것으로 판단했거든요.하지만 팀원분의 말씀을 듣고선..

Refresh 동작과 token을 cookie로 관리해주는 것으로 로그인-로그아웃-리프레시의 여정이 종료된 줄 알았다.이것은 나의 착각이었다.쿠키로 token 문제를 처리한 바로 다음 날, 백엔드 동료분께서 또 하나의 문제를 제기해주셨다.2개의 서비스 사이트에서 동일한 계정으로 로그인 후, 하나의 탭에서 로그아웃을 해도다른 탭에서 로그아웃 처리가 이뤄져야 하는데 특정 페이지에서는로그인이 된 채로 기능들이 동작한다는 것이었다. 문제 접근 방법 01localStorage는 오리진이 같은 경우 모든 탭과 창에서 데이터를 공유한다는 점을 떠올려  1) 로그아웃 시 localStorage에 로그아웃을 증명하는 데이터를 저장2) _app.tsx에서 useEffect를 사용해 로그아웃 함수를 호출하며만약 localS..

refresh는 해결되었지만 큰 문제가 하나 더 남았었습니다.바로 token인데요.token을 cookie에 싣는 방법으로 빠르게 개발을 진행하기 위해제가 발표에 사용했던 자료를 포스팅하고자 합니다.1. 문제점과 해결 방안 제시그동안 서비스에서 로그인 시, 서버로부터 받아온 response의token(= refresh, access)을 localstorage에 보관해왔습니다.해당 방식의 문제점은 크래커가 localStorage에 접근하는 코드 한 줄로token에 쉽게 접근이 가능하다는 점인데요.(XSS Attack) token 조작으로 타 유저의 이미지 변경, 원치 않는 정보 변경 등이 이뤄질 수 있으므로이에 대한 대응이 필요한데 여러 대응책 중 하나가 바로 Cookie를 활용하는 것입니다.2. 왜 Co..

회사 개발자 동료분들 중 한 분께서 로그아웃을 했음에도 자동으로 로그인이 되었다는 이야기로 문제가 시작되었습니다.네트워크 탭을 확인해보니 로그아웃을 했음에도 refresh 요청이 전달되었고로그인 유지가 이뤄지고 있었는데요. 원하지 않는 로그인 유지가 이뤄지게 된다면 제 3자가 유저의 계정을 사용해범죄를 저지르거나 피해를 입힐 수 있는 보안 문제와 직결되어 해결이 시급했습니다. 우선 현 문제를 파악했으니 문제 해결을 위한 프로세스를 크게 2단계로 확립해봤어요.1) 문제 해결 프로세스1단계로는 임시로 refresh 요청 시, 백엔드에서 유저 토큰을 비교해 만료된 token이라면 오류를 보내 로그인을 막고만료되지 않은 token이라면 그대로 로그인을 유지할 수 있도록 처리해달라고 부탁드렸습니다. 2단계로 re..

기존 서비스에는 Input에 onBlur로 휴대폰 번호 중복 함수를 호출했다면서비스 업데이트 이후부터는 onInput을 사용해 input에 입력되는 값에 반응하여휴대폰 번호 중복 체크 함수를 호출하는 것으로 코드를 변경했습니다.그러자 고려해야 할 사항이 발생했는데요. 유저가 빠르게 번호를 썼다 지웠다를 반복하면 서버에 많은 요청이 전달되고많은 요청은 곧 많은 비용으로 이어지게 되어 잦은 요청에 대한 처리에 대한 고민이 필요했습니다.debounce 처리 시도잦은 유저의 변경값에 대해 마지막 입력값에 대하여 요청을 보내면 되므로debounce를 선택했습니다.하지만 debounce로 생성된 함수는 이전에 생성된 함수를 취소하고새로운 함수를 생성하는 특징이 있는데요. 제가 useEffect 내부에서 휴대폰 번호..

잘한 점 1) 타 팀과 소통하며 업무 프로세스에 대해 확실히 파악 후 진행했던 것. 기획 와이어 프레임이나 디자인, BE에서 보여준 내용에 의문점이나 문제가 있다고 판단하면 나의 생각을 솔직하게 전달하며 업무를 진행한 것 2) 개인 - 개인 소통이 아닌 팀-팀의 소통 문화 제안 & 조금씩 적용 중 BE와 FE의 팀 소통이 아닌 개인과 개인의 소통으로만 업무를 파악하고, 각 팀이 어디까지 해당 업무가 진행되었는지 모른 채로 진행해 불필요한 공수가 발생하게 되었다. 이에 내가 소통 방식에 대한 문제를 꼬집으며 팀 단위의 소통을 제안 후 의견이 받아들여져 팀 문화로 적용 중에 있다. (당시에 다소 센 분위기로 말했는데, 부드럽게 말하는 시도를 해야 한다고 느꼈다.) 3) API 작업이 되어있지 않다면 mock..